feat: quiz of the day

MarcoEscaleira · Apr 15, 2024 · 28c9ffb · 28c9ffb
1 parent 6f208cd
commit 28c9ffb
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 9 deletions.
diff --git a/src/__generated__/gql.ts b/src/__generated__/gql.ts
diff --git a/src/__generated__/graphql.ts b/src/__generated__/graphql.ts
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
@@ -1,28 +1,42 @@
 import { useState } from "react";
-import { useLazyQuery } from "@apollo/client";
-import { Drawer, IconButton, List, ListItem, ListItemPrefix, Tooltip, Typography } from "@material-tailwind/react";
-import { Menu, Home, Play, FileQuestion, X, CircleUserRound, Power, LibraryBig } from "lucide-react";
-import { Link, useLocation } from "react-router-dom";
+import { useLazyQuery, useQuery } from "@apollo/client";
+import {
+  Button,
+  Drawer,
+  IconButton,
+  List,
+  ListItem,
+  ListItemPrefix,
+  Tooltip,
+  Typography,
+} from "@material-tailwind/react";
+import { format } from "date-fns";
+import { Menu, Home, Play, FileQuestion, X, CircleUserRound, Power, LibraryBig, ChevronRight } from "lucide-react";
+import { Link, useLocation, useNavigate } from "react-router-dom";
 import { toast } from "react-toastify";
 import useBreakpoint from "use-breakpoint";
 import { LoginForm } from "@components/Login/LoginForm.tsx";
 import { useUserStore } from "@state/userStore.ts";
 import { BREAKPOINTS } from "@utils/constants.ts";
 import { LOGOUT_USER } from "@utils/queries/Logout.ts";
+import { QUIZ_OF_THE_DAY } from "@utils/queries/QuizOfTheDay.ts";
 
 export function Header() {
   // const { notifications, clear, markAllAsRead, markAsRead, add, update, remove, find, sort, unreadCount } =
   //   useNotificationCenter();
   const location = useLocation();
+  const navigate = useNavigate();
   const { breakpoint } = useBreakpoint(BREAKPOINTS);
   const [isDrawerOpen, setIsDrawerOpen] = useState(false);
   const { user, isLoggedIn, isAdmin, resetUser } = useUserStore();
 
+  const { data: quizOfDay, loading: isLoadingQuizOfDay } = useQuery(QUIZ_OF_THE_DAY);
   const [makeLogout, { client }] = useLazyQuery(LOGOUT_USER);
 
   const toggleDrawer = () => setIsDrawerOpen(!isDrawerOpen);
 
   const isHome = location.pathname === "/";
+  const todayDate = format(new Date(), "dd/MM");
 
   return (
     <>
@@ -53,7 +67,7 @@ export function Header() {
 
       <Drawer
         open={isDrawerOpen}
-        size={360}
+        size={breakpoint === "mobile" ? 360 : 420}
         onClose={toggleDrawer}
         placement={breakpoint === "mobile" ? "left" : "right"}
         className="p-4"
@@ -67,10 +81,10 @@ export function Header() {
         <div className="flex flex-col items-center">
           <div className="flex w-full items-center space-x-5 border-b pb-4">
             <Link to="/">
-              <img src="/images/mtc-logo.svg" width={58} height={54} alt="Planet Earth" className="" />
+              <img src="/images/planet-earth.svg" width={58} height={54} alt="Planet Earth" className="" />
             </Link>
             <div className="flex flex-col ">
-              <Typography variant="h3" color="blue-gray">
+              <Typography variant="h3" color="blue-gray" className="font-medium">
                 Hello {user.firstName || "explorer"}!
               </Typography>
               {!isLoggedIn && <Typography color="blue-gray">Get started and login to your account</Typography>}
@@ -141,6 +155,24 @@ export function Header() {
           </List>
 
           {!isLoggedIn && <LoginForm toggleDrawer={toggleDrawer} />}
+
+          {!isLoadingQuizOfDay && quizOfDay && (
+            <section className="mt-4 w-full border-t pt-2">
+              <Button
+                variant="text"
+                className="flex w-full items-center justify-between"
+                onClick={() => {
+                  navigate(`/game/quiz/${quizOfDay?.quizOfTheDay.id}`);
+                  toggleDrawer();
+                }}
+              >
+                <Typography variant="h4" color="blue-gray" className="text-xl font-medium">
+                  Quiz of the day ({todayDate})
+                </Typography>
+                <ChevronRight />
+              </Button>
+            </section>
+          )}
         </div>
       </Drawer>
     </>

diff --git a/src/pages/Quiz/index.tsx b/src/pages/Quiz/index.tsx
@@ -7,8 +7,10 @@ import {
   Button,
   Chip,
   Spinner,
+  Tooltip,
   Typography,
 } from "@material-tailwind/react";
+import { Calendar } from "lucide-react";
 import { Link, useNavigate, useParams } from "react-router-dom";
 import { AttemptHistoryTable } from "@components/AttemptHistoryTable/AttemptHistoryTable.tsx";
 import { DifficultyChip } from "@components/DifficultyChip/DifficultyChip.tsx";
@@ -21,6 +23,7 @@ import { useAttemptStore } from "@state/attemptStore.ts";
 import { useUserStore } from "@state/userStore.ts";
 import { useCountryDetails } from "@utils/hooks/useCountryDetails.ts";
 import { GET_QUIZ_BY_ID } from "@utils/queries/QuizById.ts";
+import { QUIZ_OF_THE_DAY } from "@utils/queries/QuizOfTheDay.ts";
 
 export function Component() {
   const navigate = useNavigate();
@@ -30,6 +33,9 @@ export function Component() {
   } = useUserStore();
   const { isAttemptRunning, quizAccordion, handleQuizAccordion } = useAttemptStore();
 
+  const { data: quizOfDay } = useQuery(QUIZ_OF_THE_DAY);
+  const quizOfTheDayId = quizOfDay?.quizOfTheDay?.id;
+
   const { data, loading, error } = useQuery(GET_QUIZ_BY_ID, { variables: { quizId: quizId || "" } });
   const quiz = data?.quizById;
 
@@ -42,6 +48,13 @@ export function Component() {
       </div>
     );
 
+  const renderQuizOfDay =
+    quiz?.id === quizOfTheDayId ? (
+      <Tooltip content='This is the quiz of the day'>
+        <Calendar className="mr-2 stroke-blue-500 size-7" />
+      </Tooltip>
+    ) : null;
+
   return (
     <div className="flex h-full w-full flex-col items-center px-4 pb-4 pt-16 md:px-12 md:pt-24">
       <Breadcrumbs className="mb-2 flex items-center md:mb-6">
@@ -72,8 +85,8 @@ export function Component() {
           </AccordionHeader>
           <AccordionBody className="flex gap-3">
             <section className="flex-grow">
-              <Typography variant="h1" className="mb-3 text-xl font-medium md:text-2xl">
-                {quiz?.title}
+              <Typography variant="h1" className="mb-3 flex items-center text-xl font-medium md:text-2xl">
+                {renderQuizOfDay} {quiz?.title}
               </Typography>
               <Typography className="font-normal">{quiz?.description}</Typography>
 

diff --git a/src/utils/queries/QuizOfTheDay.ts b/src/utils/queries/QuizOfTheDay.ts
@@ -0,0 +1,9 @@
+import { gql } from "@generated/gql.ts";
+
+export const QUIZ_OF_THE_DAY = gql(/* GraphQL */ `
+  query QuizOfTheDay {
+    quizOfTheDay {
+      id
+    }
+  }
+`);