remove data

.gitignore

@@ -12,7 +12,7 @@
 # next.js
 /.next/
 /out/
-
+/data/*
 # production
 /build
 

components/quizz/card/index.tsx

@@ -21,12 +21,10 @@ export const Card: React.FC<Props> = ({ prompt }) => {
       className={classNames(
         "w-[340px] h-[340px] p-5 relative z-[1] cursor-pointer group",
         {
-          "!cursor-not-allowed": result?.success,
+          "!cursor-not-allowed": result,
         }
       )}
-      onClick={
-        result?.success ? () => {} : async () => await onScore(prompt.id)
-      }
+      onClick={result ? () => {} : async () => await onScore(prompt.id)}
     >
       <Success result={result} prompt={prompt} />
       <Error result={result} prompt={prompt} />

components/quizz/hooks/useQuizz.ts

@@ -50,10 +50,8 @@ export const useQuizz = () => {
     setResult(response.ok ? id : response.resultId, response?.ok);
     await sleep(3000);
     setResult(null);
-    await sleep(100);
     if (response?.ok) {
       client.invalidateQueries(['quizz']);
-      await refetch()
     } else {
       return router.push('/results');
     }
@@ -70,6 +68,12 @@ export const useQuizz = () => {
     retry: false,
   });
 
+  const reset = () => {
+    client.setQueryData(['score'], 0);
+    client.setQueryData(['success'], null);
+    window.location.href = '/';
+  }
+
   return {
     prompts: data?.prompts ?? [],
     loading,
@@ -78,5 +82,6 @@ export const useQuizz = () => {
     onScore,
     score,
     result,
+    reset
   }
 }

components/results/index.tsx

@@ -1,7 +1,9 @@
 "use client";
 import { redirect } from "next/navigation";
+import { IoReload } from "react-icons/io5";
 import { FaXTwitter, FaLinkedin } from "react-icons/fa6";
 import Image from "next/image";
+import Link from "next/link";
 import { LinkedinShareButton, TwitterShareButton } from "react-share";
 
 import { useQuizz } from "@/components/quizz/hooks/useQuizz";
@@ -11,33 +13,44 @@ import SparklingEffect2 from "@/assets/images/sparkles-2.svg";
 import NoSSR from "@/components/no-ssr";
 
 export const Results = () => {
-  const { score } = useQuizz();
+  const { score, reset, result } = useQuizz();
 
-  if (!score || score === 0) {
+  if (!score && score !== 0) {
     redirect("/");
     return null;
   }
 
   const renderTitle = (score: number) => {
-    if (score < 5) {
+    if (score < 2) {
       return (
         <>
           You can do <br />
           <span className="bg-gradient-to-tr from-green to-cyan bg-clip-text">
             better
           </span>{" "}
-          ! 💪
+          ! <span className="text-white">💪</span>
         </>
       );
     }
-    if (score < 11) {
+    if (score < 5) {
       return (
         <>
           Not bad! <br />
           <span className="bg-gradient-to-tr from-green to-cyan bg-clip-text">
             Keep going
           </span>{" "}
-          ! 🤗
+          ! <span className="text-white">🤗</span>
+        </>
+      );
+    }
+    if (score < 11) {
+      return (
+        <>
+          You are <br />
+          <span className="bg-gradient-to-tr from-green to-cyan bg-clip-text">
+            good
+          </span>{" "}
+          ! <span className="text-white">🙂</span>
         </>
       );
     }
@@ -48,7 +61,7 @@ export const Results = () => {
           <span className="bg-gradient-to-tr from-green to-cyan bg-clip-text">
             amazing
           </span>{" "}
-          ! 🥳
+          ! <span className="text-white">🥳</span>
         </>
       );
     }
@@ -59,7 +72,7 @@ export const Results = () => {
           <span className="bg-gradient-to-tr from-green to-cyan bg-clip-text">
             incredible
           </span>{" "}
-          ! 🤯
+          ! <span className="text-white">🤯</span>
         </>
       );
     }
@@ -98,9 +111,9 @@ export const Results = () => {
         <h2 className="text-white text-xl md:text-2xl text-center font-light">
           You obtained{" "}
           <span className="bg-gradient-to-tr from-green to-cyan bg-clip-text font-bold text-transparent">
-            {score} points
+            {score} point{score > 1 ? "s" : ""}
           </span>{" "}
-          🎉
+          !
           <br />
           Share your score with your friends and challenge them!
         </h2>
@@ -130,6 +143,13 @@ export const Results = () => {
             </TwitterShareButton>
           </div>
         </NoSSR>
+        <p
+          className="text-white text-base flex items-center justify-center gap-3 hover:underline cursor-pointer"
+          onClick={reset}
+        >
+          <IoReload className="text-xl" />
+          Play again
+        </p>
         <div className="absolute top-1/2 left-1/2 will-transform -translate-x-1/2 -translate-y-1/2 bg-gradient-to-br from-green to-cyan blur-[120px] md:blur-[140px] w-full h-full max-h-[250px] rounded-full z-[-1] opacity-40"></div>
       </div>
     </div>