chore: add links to account dropdown

Author: webdevcody

src/app/api/auth/[...nextauth]/route.ts

@@ -1,7 +1,6 @@
 import { PrismaAdapter } from "@next-auth/prisma-adapter";
 import NextAuth, { AuthOptions, DefaultSession } from "next-auth";
 import GithubProvider from "next-auth/providers/github";
-
 import { prisma } from "@/lib/prisma";
 
 declare module "next-auth" {

src/app/dashboard/page.tsx

@@ -1,6 +1,11 @@
 "use client";
 
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Card,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
 import {
   Table,
   TableBody,

src/app/profile/_components/profile-image-button.tsx

@@ -2,12 +2,11 @@ import Link from "next/link";
 
 export default function ProfileImageButton({
   children,
-  photoURL
+  photoURL,
 }: {
-  children: React.ReactNode,
+  children: React.ReactNode;
   photoURL?: string | null;
 }) {
-
   return (
     <Link
       title="View Profile Picture"
@@ -18,4 +17,4 @@ export default function ProfileImageButton({
       {children}
     </Link>
   );
-};
+}

src/app/profile/_components/profile-navigation.tsx

@@ -1,35 +1,28 @@
 "use client";
 import { Button } from "@/components/ui/button";
-import {
-  User2,
-  History
-} from "lucide-react";
-import {
-  usePathname,
-  useRouter
-} from "next/navigation";
+import { User2, History } from "lucide-react";
+import { usePathname, useRouter } from "next/navigation";
 
 const profileNavigationLinks = [
   {
     text: "User Profile",
     id: "user-profile-navigation",
     title: "Navigate to User Profile",
     href: "/profile",
-    icon: User2
+    icon: User2,
   },
   {
     text: "Race History",
     id: "user-race-history-navigation",
     title: "View Race History",
     href: "/profile/race-history",
-    icon: History
-  }
-  
+    icon: History,
+  },
 ];
 
 const styles = {
   ul: "flex md:flex-col gap-x-2 gap-y-4",
-  listText: "hidden xl:inline-block flex-[0.8]"
+  listText: "hidden xl:inline-block flex-[0.8]",
 };
 
 export default function ProfileNavigation() {
@@ -38,36 +31,29 @@ export default function ProfileNavigation() {
 
   return (
     <ul className={styles.ul}>
-      {
-        profileNavigationLinks.map(link => {
-          const isLinkActive = pathname === link.href;
-          return (
-            <li key={link.id}>
-              <Button
-                type="button"
-                title={link.title}
-                id={link.id}
-                name="profile-navigation-buttons"
-                variant={"ghost"}
-                className={`w-full gap-2${isLinkActive ? " bg-accent" : ""}`}
-                aria-current={isLinkActive ? "page" : undefined}
-                onMouseEnter={() => router.prefetch(link.href)}
-                onClick={() => router.replace(link.href)}
-              >
-                <span>
-                  <link.icon
-                    width={28}
-                    height={28}
-                  />
-                </span>
-                <span className={styles.listText}>
-                  {link.text}
-                </span>
-              </Button>
-            </li>
-          );
-        })
-      }
+      {profileNavigationLinks.map((link) => {
+        const isLinkActive = pathname === link.href;
+        return (
+          <li key={link.id}>
+            <Button
+              type="button"
+              title={link.title}
+              id={link.id}
+              name="profile-navigation-buttons"
+              variant={"ghost"}
+              className={`w-full gap-2${isLinkActive ? " bg-accent" : ""}`}
+              aria-current={isLinkActive ? "page" : undefined}
+              onMouseEnter={() => router.prefetch(link.href)}
+              onClick={() => router.replace(link.href)}
+            >
+              <span>
+                <link.icon width={28} height={28} />
+              </span>
+              <span className={styles.listText}>{link.text}</span>
+            </Button>
+          </li>
+        );
+      })}
     </ul>
   );
-};
+}

src/app/profile/_components/search-param-pfp.tsx

@@ -7,7 +7,9 @@ export default function SearchParamProfilePicture() {
 
   if (!searchParam) {
     return (
-      <h1 className="text-center">Please provide an image link to view it on full screen!</h1>
+      <h1 className="text-center">
+        Please provide an image link to view it on full screen!
+      </h1>
     );
   }
   return (
@@ -22,4 +24,4 @@ export default function SearchParamProfilePicture() {
       loading="eager"
     />
   );
-};
+}

src/app/profile/_components/toggle-change-name.tsx

@@ -1,10 +1,26 @@
 "use client";
 import { Button } from "@/components/ui/button";
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import ChangeNameForm from "./change-name-form";
 
 export default function ToggleChangeName() {
   const [edit, setEdit] = useState(false);
+
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const onClickModalBackground = () => {
+      console.log("here");
+      setEdit(false);
+    };
+    const el = ref.current;
+    if (!el) return;
+    el.addEventListener("click", onClickModalBackground);
+    return () => {
+      el.removeEventListener("click", onClickModalBackground);
+    };
+  }, [ref, edit]);
+
   return (
     <>
       <Button
@@ -15,17 +31,15 @@ export default function ToggleChangeName() {
       >
         Edit username
       </Button>
-      {
-        edit ? (
+      {edit ? (
+        <div className="fixed inset-0 bg-monochrome-low-opacity w-full h-full z-20 grid place-items-center">
           <div
-            className="fixed inset-0 bg-monochrome-low-opacity w-full h-full z-20 grid place-items-center"
-          >
-            <div className="z-0 overflow-auto w-full h-full absolute inset-0" onClick={() => setEdit(false)} />
-            <ChangeNameForm />
-          </div>
-
-        ) : null
-      }
+            ref={ref}
+            className="z-0 overflow-auto w-full h-full absolute inset-0"
+          />
+          <ChangeNameForm />
+        </div>
+      ) : null}
     </>
   );
-};
+}

src/app/profile/loading.tsx

@@ -1,9 +1,9 @@
 export const metadata = {
   title: {
-    absolute: "Loading Profile Page"
-  }
+    absolute: "Loading Profile Page",
+  },
 };
 
 export default function Loading() {
-  return <h1 className="text-center">Loading Page...</h1>
-};
+  return <h1 className="text-center">Loading Page...</h1>;
+}

src/app/profile/race-history/loading.tsx

@@ -1,9 +1,9 @@
 export const metadata = {
   title: {
-    absolute: "Loading Race History"
-  }
+    absolute: "Loading Race History",
+  },
 };
 
 export default function Loading() {
-  return <h1>Loading History...</h1>
-};
+  return <h1>Loading History...</h1>;
+}

src/app/profile/race-history/page.tsx

@@ -3,29 +3,36 @@ import { Metadata } from "next";
 import { Suspense } from "react";
 
 export const metadata: Metadata = {
-  title: "Race History"
+  title: "Race History",
 };
 
 async function RaceHistoryCard() {
   const historyMatches = [
     {
+      id: "1",
       date: "March 20, 2023",
       averageSpeed: 2000,
       versus: "Xx_deadlyMamba_xX",
-      status: "lost"
-    }, {
+      status: "lost",
+    },
+    {
+      id: "2",
       date: "March 21, 2023",
       averageSpeed: 1000,
       versus: "funnyGuy123",
-      status: "won"
-    }, {
+      status: "won",
+    },
+    {
+      id: "3",
       date: "April 22, 2023",
       averageSpeed: 10000,
       versus: "masterOfAll",
-      status: "draw"
-    }
+      status: "draw",
+    },
   ];
-  {/** Dynamic data coming soon... */ }
+  {
+    /** Dynamic data coming soon... */
+  }
   const descendingOrder = historyMatches.sort((a, b) => {
     if (new Date(a.date) > new Date(b.date)) {
       return -1;
@@ -40,40 +47,48 @@ async function RaceHistoryCard() {
 
   return (
     <section className="grid grid-cols-[1fr] 2xl:grid-cols-[1fr,1fr] gap-x-8 gap-y-4">
-      {
-        descendingOrder.map(match => {
-          let name = match.versus;
-          /** If the name length > 11 chars, then cut it. This is to avoid overflows */
-          if (match.versus.length > 11) {
-            name = `${match.versus.slice(0, 11)}...`;
-          }
-          const statusColor = match.status === "won"
+      {descendingOrder.map((match) => {
+        let name = match.versus;
+        /** If the name length > 11 chars, then cut it. This is to avoid overflows */
+        if (match.versus.length > 11) {
+          name = `${match.versus.slice(0, 11)}...`;
+        }
+        const statusColor =
+          match.status === "won"
             ? "text-green-400"
             : match.status === "lost"
-              ? "text-destructive"
-              : "text-yellow-400"
-          return (
-            (
-              /** This container can be a button or link which leads
-               * to a page that'll give more information about the
-               * match.
-               */
-              <div className="text-center shadow-md shadow-monochrome-low-opacity flex gap-4 md:gap-8 justify-between items-center bg-secondary py-2 px-4 md:py-4 md:px-8 rounded-md">
-                <div className="flex-[0.85] text-start">
-                  <h2 className="text-base md:text-lg font-medium">Battled vs. {name}</h2>
-                  <span className="text-xs md:text-sm">Last: <Time date={new Date(match.date)} /></span>
-                </div>
-                <span className={`${statusColor} flex-[0.125] font-bold text-sm md:text-lg inline-block`}>{match.status.toUpperCase()}</span>
-                {/**Some kind of circle here to indicate how good the speed is */}
-                <div className="flex-[0.125]">{match.averageSpeed / 1000}s</div>
-              </div>
-            )
-          )
-        })
-      }
+            ? "text-destructive"
+            : "text-yellow-400";
+        return (
+          /** This container can be a button or link which leads
+           * to a page that'll give more information about the
+           * match.
+           */
+          <div
+            key={match.id}
+            className="text-center shadow-md shadow-monochrome-low-opacity flex gap-4 md:gap-8 justify-between items-center bg-secondary py-2 px-4 md:py-4 md:px-8 rounded-md"
+          >
+            <div className="flex-[0.85] text-start">
+              <h2 className="text-base md:text-lg font-medium">
+                Battled vs. {name}
+              </h2>
+              <span className="text-xs md:text-sm">
+                Last: <Time date={new Date(match.date)} />
+              </span>
+            </div>
+            <span
+              className={`${statusColor} flex-[0.125] font-bold text-sm md:text-lg inline-block`}
+            >
+              {match.status.toUpperCase()}
+            </span>
+            {/**Some kind of circle here to indicate how good the speed is */}
+            <div className="flex-[0.125]">{match.averageSpeed / 1000}s</div>
+          </div>
+        );
+      })}
     </section>
   );
-};
+}
 
 export default function RaceHistoryPage() {
   return (
@@ -84,4 +99,4 @@ export default function RaceHistoryPage() {
       </Suspense>
     </article>
   );
-};
+}