fix: add logged out comments case

MarcoEscaleira · May 2, 2024 · b5fa668 · b5fa668
1 parent 81b0bc0
commit b5fa668
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 18 deletions.
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
@@ -44,7 +44,7 @@ export function Header() {
   const isGame = location.pathname.includes("game");
   const todayDate = format(new Date(), "dd/MM");
 
-  const { countriesPassedBy } = useCountryInformation();
+  const { countriesCompleted } = useCountryInformation();
 
   return (
     <>
@@ -60,10 +60,10 @@ export function Header() {
                 className="size-[44px] transition-all hover:scale-105 active:scale-95 md:size-[54px]"
               />
             </Link>
-            {isLoggedIn && isGame && countriesPassedBy > 0 && (
-              <Tooltip content={`${countriesPassedBy} countries completed out of 202`}>
+            {isLoggedIn && isGame && countriesCompleted > 0 && (
+              <Tooltip content={`${countriesCompleted} countries completed out of 202`}>
                 <Typography variant="small" className="font-medium">
-                  {countriesPassedBy} out of 202 {breakpoint !== "mobile" ? "countries" : ""}
+                  {countriesCompleted} out of 202 {breakpoint !== "mobile" ? "countries" : ""}
                 </Typography>
               </Tooltip>
             )}

diff --git a/src/components/QuizComments/QuizComments.tsx b/src/components/QuizComments/QuizComments.tsx
@@ -57,7 +57,7 @@ export function QuizComments() {
         </Typography>
       </CardHeader>
       <CardBody>
-        {userId && (
+        {userId ? (
           <form onSubmit={handleSubmit(onSubmit)}>
             <Textarea {...register("text")} size="lg" label="Comment" error={!!errors.text} />
             <Button
@@ -70,6 +70,10 @@ export function QuizComments() {
               Post a comment
             </Button>
           </form>
+        ) : (
+          <div className='flex items-center'>
+            <Typography variant="small" color='blue-gray'>Login to make a comment</Typography>
+          </div>
         )}
 
         <section className="mt-6 flex flex-col gap-6">

diff --git a/src/utils/hooks/useCountryInformation.ts b/src/utils/hooks/useCountryInformation.ts
@@ -10,7 +10,7 @@ interface CountryColors {
 
 interface UseCountryInformation {
   countryColours: CountryColors;
-  countriesPassedBy: number;
+  countriesCompleted: number;
 }
 
 export const useCountryInformation = (): UseCountryInformation => {
@@ -20,17 +20,6 @@ export const useCountryInformation = (): UseCountryInformation => {
   const { data: quizzesData } = useQuery(GET_QUIZZES);
   const { data: attemptsData } = useQuery(GET_USER_ATTEMPTS, { variables: { userId }, fetchPolicy: "network-only" });
 
-  const countriesPassedBy = useMemo(() => {
-    const list = quizzesData?.quizList?.reduce<{ [country: string]: string[] }>((acc, { id, country }) => {
-      return {
-        ...acc,
-        [country]: acc[country]?.length > 0 ? [...acc[country], id] : [id],
-      };
-    }, {});
-
-    return Object.keys(list || {}).length;
-  }, [quizzesData?.quizList]);
-
   const countryColours = useMemo(() => {
     const quizzes = quizzesData?.quizList;
     const attempts = attemptsData?.attempts;
@@ -82,8 +71,17 @@ export const useCountryInformation = (): UseCountryInformation => {
     return {};
   }, [quizzesData?.quizList, attemptsData?.attempts]);
 
+  const countriesCompleted = useMemo(() => {
+    return Object.values(countryColours).reduce((acc: number, currentValue) => {
+      if (currentValue === "fill-green-400") {
+        return acc + 1;
+      }
+      return acc;
+    }, 0);
+  }, [countryColours]);
+
   return {
     countryColours,
-    countriesPassedBy,
+    countriesCompleted,
   };
 };