polish endorsements showing

greenpill-dev-guild · Sep 21, 2024 · d85b36f · d85b36f
1 parent 4de922c
commit d85b36f
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 44 deletions.
diff --git a/packages/client/src/components/Layout/Profile.tsx b/packages/client/src/components/Layout/Profile.tsx
@@ -2,19 +2,25 @@
 
 import Link from "next/link";
 import Image from "next/image";
+
 import { usePathname } from "next/navigation";
 
 interface Link {
   title: string;
   icon: string;
+  path: string;
   action?: () => void;
 }
 
 const links: Link[] = [
-  { title: "endorsements", icon: "/icons/chat-alt.svg" },
+  {
+    title: "endorsements",
+    path: "/profile/endorsements",
+    icon: "/icons/chat-alt.svg",
+  },
   // { title: "metrics", icon: "/icons/flag.svg" },
   // { title: "criteria", icon: "/icons/newspaper.svg" },
-  { title: "settings", icon: "/icons/adjustments.svg" },
+  { title: "settings", path: "/profile", icon: "/icons/adjustments.svg" },
 ];
 
 export const ProfileLayout = ({
@@ -25,7 +31,7 @@ export const ProfileLayout = ({
   const pathname = usePathname();
 
   return (
-    <div className="mx-auto w-full max-w-screen-xl py-12">
+    <div className="mx-auto w-full max-w-screen-xl px-8 py-12">
       <header className="mb-8">
         <h2 className="mb-2">My Reef</h2>
         <p className="text-lg font-light">
@@ -39,13 +45,10 @@ export const ProfileLayout = ({
             {links.map((link) => (
               <Link
                 className={`flex gap-1 rounded-lg px-3 py-3 text-lg font-light capitalize leading-snug transition-colors duration-300 ease-in-out ${
-                  (link.title === "settings" && pathname === "/profile") ||
-                  pathname.includes(link.title)
-                    ? "bg-slate-100"
-                    : "hover:bg-slate-50"
+                  pathname === link.path ? "bg-slate-100" : "hover:bg-slate-50"
                 } `}
                 key={link.title}
-                href={`/profile/${link.title === "settings" ? "" : link.title}`}
+                href={link.path}
               >
                 <Image
                   alt="profile navigation icon"
@@ -59,7 +62,12 @@ export const ProfileLayout = ({
             ))}
           </nav>
         </aside>
-        <section className="flex-1">{children}</section>
+        <section className="flex flex-1 flex-col gap-4">
+          <h2 className="text-3xl font-bold capitalize leading-7">
+            {links.find((link) => pathname === link.path)?.title}
+          </h2>
+          {children}
+        </section>
       </div>
     </div>
   );

diff --git a/packages/client/src/views/Profile/Endorsements.tsx b/packages/client/src/views/Profile/Endorsements.tsx
@@ -14,44 +14,45 @@ export interface ProfileEndorsementsProps {
 const ProfileEndorsementsView: React.FC<ProfileEndorsementsProps> = () => {
   const { address } = useAccount();
 
-  const { data: endorsements } = useQuery({
+  const { data: endorsements, status } = useQuery({
     queryKey: ["endorsements", address],
     queryFn: () => getUserEndorsements(address),
   });
 
+  if (status === "pending") {
+    return null;
+  }
+
   return (
-    <div className="flex flex-col gap-4">
-      <h2 className="text-3xl font-bold leading-7">Endorsements</h2>
-      <div className="w-full flex-1">
-        {endorsements?.length ? (
-          <ul className="flex max-w-xl flex-col gap-2">
-            {endorsements.map((endorsement) => (
-              <li
-                key={endorsement.id}
-                className="flex flex-col items-center justify-between gap-8 rounded-xl border-slate-100 p-4 shadow-sm"
-              >
-                <p className="max-w-prose font-light leading-snug">
-                  {endorsement.description}
-                </p>
-                <div className="flex w-full justify-between">
-                  <span className="">{endorsement.created_at}</span>
-                  <Link
-                    href={`https://sepolia.easscan.org/${endorsement.id}`}
-                    target="_blank"
-                    className="button button-link"
-                  >
-                    View Attestation
-                  </Link>
-                </div>
-              </li>
-            ))}
-          </ul>
-        ) : (
-          <p className="grid h-full w-full place-items-center py-12 text-center text-lg font-light">
-            No endorsements made yet, go support your favorite projects!
-          </p>
-        )}
-      </div>
+    <div className="w-full flex-1">
+      {endorsements?.length ? (
+        <ul className="flex max-w-xl flex-col gap-2">
+          {endorsements.map((endorsement) => (
+            <li
+              key={endorsement.id}
+              className="flex flex-col items-center justify-between gap-8 rounded-xl border-slate-100 p-4 shadow-sm"
+            >
+              <p className="max-w-prose font-light leading-snug">
+                {endorsement.description}
+              </p>
+              <div className="flex w-full justify-between">
+                <span className="">{endorsement.created_at}</span>
+                <Link
+                  href={`https://sepolia.easscan.org/${endorsement.id}`}
+                  target="_blank"
+                  className="button button-link"
+                >
+                  View Attestation
+                </Link>
+              </div>
+            </li>
+          ))}
+        </ul>
+      ) : (
+        <p className="grid h-full w-full place-items-center py-12 text-center text-lg font-light">
+          No endorsements made yet, go support your favorite projects!
+        </p>
+      )}
     </div>
   );
 };

diff --git a/packages/client/src/views/Profile/Settings.tsx b/packages/client/src/views/Profile/Settings.tsx
@@ -27,8 +27,7 @@ const ProfileSettings: React.FC<ProfileSettingsProps> = ({ user }) => {
   // const address = user?.address;
 
   return (
-    <div className="flex flex-col gap-12">
-      <h2 className="text-3xl font-bold leading-7">Settings</h2>
+    <div className="mt-4 flex flex-col gap-12">
       <div className="border-b-2 border-slate-200 pb-8">
         <h4 className="mb-2">Wallet Address</h4>
         <p className="mb-4 font-light">