Merge branch 'webdevcody:main' into main

Author: joesabbagh1

src/app/race/RaceTracker.tsx

@@ -18,7 +18,7 @@ export default function RaceTracker({
   inputLength,
   user,
 }: RaceTrackerProps) {
-  const progress = (inputLength / codeLength) * 100;
+  const progress = ((inputLength / codeLength) * 100) % 100;
 
   return (
     <div className="relative mb-5 flex items-center">

src/app/race/no-snippet.tsx

@@ -9,13 +9,18 @@ interface NoSnippetProps {
 }
 
 export default function NoSnippet({ message, language }: NoSnippetProps) {
-  const formattedLanguage = snippetLanguages.find(snippet => snippet.value === language)?.label ?? language;
+  const formattedLanguage =
+    snippetLanguages.find((snippet) => snippet.value === language)?.label ??
+    language;
   return (
     <div className="flex flex-col gap-4 justify-start">
-      <Heading title={`No ${formattedLanguage} snippet found`} description={message}/>
+      <Heading
+        title={`No ${formattedLanguage} snippet found`}
+        description={message}
+      />
       <Link href={"/add-snippet"}>
         <Button>Create New Snippet</Button>
       </Link>
     </div>
-  )
+  );
 }

src/app/result/page.tsx

@@ -81,13 +81,11 @@ export default async function ResultsChart({
         </Button>
       </div>
       <div className="my-4">
-        {user && (
-          <Voting
-            snippetId={searchParams.snippetId}
-            userId={user.id}
-            usersVote={usersVote ?? undefined}
-          />
-        )}
+        <Voting
+          snippetId={searchParams.snippetId}
+          userId={user?.id ?? undefined}
+          usersVote={usersVote ?? undefined}
+        />
       </div>
       <div className="flex items-center justify-center space-x-2">
         <Badge variant="outline">

src/app/result/voting.tsx

@@ -14,7 +14,7 @@ import { toast } from "@/components/ui/use-toast";
 import { catchError, cn } from "@/lib/utils";
 
 interface VotingProps {
-  userId: User["id"];
+  userId: User["id"] | undefined;
   snippetId: Snippet["id"];
   usersVote?: SnippetVote;
 }
@@ -33,6 +33,7 @@ export function Voting({ userId, snippetId, usersVote }: VotingProps) {
           disabled={isPending}
           onClick={() => {
             startTransition(async () => {
+              if (userId) {
               try {
                 if (usersVote?.type === "UP") {
                   await deleteVoteAction({ snippetId });
@@ -48,6 +49,13 @@ export function Voting({ userId, snippetId, usersVote }: VotingProps) {
               } catch (err) {
                 catchError(err);
               }
+             } else {
+                toast({
+                  title: "Warning",
+                  description: "You should sign in first to vote.",
+                  variant: "middle",
+                });
+              }
             });
           }}
         >
@@ -63,6 +71,7 @@ export function Voting({ userId, snippetId, usersVote }: VotingProps) {
           disabled={isPending}
           onClick={() => {
             startTransition(async () => {
+              if (userId) {
               try {
                 if (usersVote?.type === "DOWN") {
                   await deleteVoteAction({
@@ -76,11 +85,18 @@ export function Voting({ userId, snippetId, usersVote }: VotingProps) {
                     title: "Success.",
                     description:
                       "Thanks for your feedback! We will consider it.",
-                    variant: "default",
-                  });
+                      variant: "default",
+                    });
+                  }
+                } catch (err) {
+                  catchError(err);
                 }
-              } catch (err) {
-                catchError(err);
+              } else {
+                toast({
+                  title: "Warning",
+                  description: "You should sign in first to vote.",
+                  variant: "middle",
+                });
               }
             });
           }}

src/components/header.tsx

@@ -14,7 +14,7 @@ export async function Header() {
         <div className="flex-1">
           <MainNav items={siteConfig.getHeaderLinks(!!user)} />
         </div>
-        <MobileNav />
+        <MobileNav user={user} />
         <nav className="items-center hidden space-x-4 md:flex">
           <UserDropdown user={user} />
           <ModeToggle />

src/components/mobile-nav.tsx

@@ -12,8 +12,16 @@ import Link, { LinkProps } from "next/link";
 import { ModeToggle } from "./mode-toggle";
 import { useRouter } from "next/navigation";
 import { useSession } from "next-auth/react";
+import type { User } from "next-auth";
+import { UserRole } from "@prisma/client";
 
-export function MobileNav() {
+interface MobileNavProps {
+  user?: User & {
+    role: UserRole;
+  };
+}
+
+export function MobileNav({ user }: MobileNavProps) {
   const [open, setOpen] = useState(false);
   const isLoggedIn = !!useSession().data;
 
@@ -32,7 +40,7 @@ export function MobileNav() {
         <SheetContent side="right" className="w-[300px] sm:w-[540px]">
           <ScrollArea className="my-4 h-[calc(100vh-9rem)] pb-10">
             <div className="flex flex-col items-center justify-center gap-10 py-2">
-              <UserDropdown />
+              <UserDropdown user={user} />
               <nav className="flex flex-col items-center justify-center flex-1 space-y-4">
                 {siteConfig.getHeaderLinks(isLoggedIn).map((item) => (
                   <MobileLink

src/components/user-dropdown.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { signOut, useSession } from "next-auth/react";
+import { signOut } from "next-auth/react";
 import Image from "next/image";
 import Link from "next/link";
 import { Icons } from "./icons";