feat: proses saving kuis

package-lock.json

@@ -19,6 +19,7 @@
         "react-router-dom": "^6.26.1",
         "react-virtualized-auto-sizer": "^1.0.24",
         "react-window": "^1.8.10",
+        "sweetalert2": "^11.17.2",
         "tailwind-merge": "^2.5.2",
         "zustand": "^4.5.5"
       },
@@ -4312,6 +4313,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/sweetalert2": {
+      "version": "11.17.2",
+      "resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-11.17.2.tgz",
+      "integrity": "sha512-HKxDr1IyV3Lxr3W6sb61qm/p2epFIEdr5EKwteRFHnIg6f8nHFl2kX++DBVz16Mac+fFiU3hMpjq1L6yE2Ge5w==",
+      "license": "MIT",
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/sponsors/limonte"
+      }
+    },
     "node_modules/tailwind-merge": {
       "version": "2.5.2",
       "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.5.2.tgz",

package.json

@@ -21,6 +21,7 @@
     "react-router-dom": "^6.26.1",
     "react-virtualized-auto-sizer": "^1.0.24",
     "react-window": "^1.8.10",
+    "sweetalert2": "^11.17.2",
     "tailwind-merge": "^2.5.2",
     "zustand": "^4.5.5"
   },

src/pages/Kuis/MenyusunHuruf/MenyusunHuruf.tsx

@@ -1,6 +1,8 @@
 import LayoutPage from "@/components/templates/LayoutPage";
 import useMenyusunHurufStore from "@/stores/MenyusunHurufStore";
-import { Link } from "react-router-dom";
+import { useEffect } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import Swal from "sweetalert2";
 
 const MenyusunHuruf = () => {
   const quizStore = useMenyusunHurufStore();
@@ -13,6 +15,33 @@ const MenyusunHuruf = () => {
     return array;
   };
 
+  const router = useNavigate();
+
+  useEffect(() => {
+    if (quizStore.isFinish) {
+      Swal.fire({
+        icon: "success",
+        title: "Kuis telah selesai",
+        text: `Anda menyelesaikan kuis dalam waktu ${quizStore.time} detik`,
+      });
+    }
+  }, [quizStore.isFinish]);
+
+  const ProsesKuis = () => {
+    if (quizStore.name === "") {
+      Swal.fire({
+        icon: "error",
+        title: "Oops...",
+        text: "Isi nama terlebih dahulu",
+      });
+      return;
+    }
+
+    quizStore.setListSoal(shuffleArray(quizStore.listSoal));
+    quizStore.setSession(true);
+    router("/kuis/menyusun-huruf/app");
+  };
+
   return (
     <LayoutPage>
       <div className="flex flex-col flex-1 py-4 relative">
@@ -36,19 +65,18 @@ const MenyusunHuruf = () => {
               <input
                 placeholder="Name.."
                 type="text"
+                value={quizStore.name}
+                onChange={(e) => quizStore.setName(e.target.value)}
                 className="bg-transparent outline-none p-2 px-8 flex-1 w-full"
               />
-              <Link to="/kuis/menyusun-huruf/app">
-                <button
-                  onClick={() => {
-                    quizStore.setListSoal(shuffleArray(quizStore.listSoal));
-                    quizStore.setSession(true)
-                  }}
-                  className="bg-blue-500 hover:bg-blue-700 text-white px-3 py-2 rounded-full whitespace-nowrap"
-                >
-                  Mulai Kuis
-                </button>
-              </Link>
+              <button
+                onClick={() => {
+                  ProsesKuis();
+                }}
+                className="bg-blue-500 hover:bg-blue-700 text-white px-3 py-2 rounded-full whitespace-nowrap"
+              >
+                Mulai Kuis
+              </button>
             </div>
             <span className="text-primary">Lihat Ranking</span>
           </div>

src/pages/Kuis/MenyusunHuruf/Quiz.tsx

@@ -10,6 +10,7 @@ import ProgressBar from "@/components/molecules/ProgressBar";
 import { MdOutlineQuiz } from "react-icons/md";
 import useMenyusunHurufStore from "@/stores/MenyusunHurufStore";
 import { useNavigate } from "react-router-dom";
+import Swal from "sweetalert2";
 
 // type PredictResult = {
 //   abjad: String;
@@ -51,8 +52,6 @@ const Quiz = () => {
         videoRef.current.srcObject = stream;
       }
 
-      
-
       //   setLoadCamera(true);
       await initializeHandDetection();
     } catch (error) {
@@ -171,26 +170,63 @@ const Quiz = () => {
       tempAnswer = "";
       setAnswer("");
 
-      setTimeout(() => {
+      setTimeout(async () => {
         setShowAnswer(false);
         setResultAnswer({
           minutes: 0,
           seconds: 0,
         });
+
+        quizStore.setSoalIndex(noSoal + 1);
+
+        answerTime = answerTime += elapsedTime;
+
+        noSoal++;
+
+        if (noSoal === quizStore.listSoal.length) {
+          quizStore.setTime(answerTime);
+          quizStore.setSession(false);
+          quizStore.setIsFinish(true);
+
+          Swal.fire({
+            title: "Loading",
+            text: "Proses menyimpan data...",
+            allowOutsideClick: false,
+            didOpen: () => {
+              Swal.showLoading();
+            },
+          });
+          await saveData(parseInt(answerTime.toString()));
+
+          navigate("/kuis/menyusun-huruf/");
+        }
       }, 3000);
+    }
+  };
 
-      quizStore.setSoalIndex(noSoal + 1);
+  const saveData = async (time: number) => {
+    try {
+      await fetch("https://ksuli-api.deno.dev/proses-kuis", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer KSULI_TOKEN_321`,
+        },
+        body: JSON.stringify({
+          kategori_id: "rec_cuum7c5qrj60bgubcjog",
+          person_name: quizStore.name,
+          score: time,
+        }),
+      });
 
-      answerTime = answerTime += elapsedTime;
-
-      noSoal++;
-
-      if (noSoal === 10) {
-        quizStore.setTime(answerTime);
-        quizStore.setSession(false);
-
-        navigate("/kuis/menyusun-huruf/");
-      }
+      Swal.close();
+    } catch (error) {
+      console.error("Error saving data:", error);
+      Swal.fire({
+        icon: "error",
+        title: "Oops...",
+        text: "Something went wrong while saving your data!",
+      });
     }
   };
 
@@ -270,7 +306,7 @@ const Quiz = () => {
       <div className="flex items-center gap-2 mt-4">
         <MdOutlineQuiz size={18} />
         <h1 className="text-xl font-semibold">
-          Soal: {quizStore.soalIndex + 1} / 10
+          Soal: {quizStore.soalIndex + 1} / {quizStore.listSoal.length}
         </h1>
       </div>
 

src/stores/MenyusunHurufStore.ts

@@ -6,11 +6,11 @@ const soal = [
   "SIBI",
   "MAHASISWA",
   "KSULI",
-  "INFORMATIKA",
-  "CODING",
-  "WHATSAPP",
-  "INSTAGRAM",
-  "TEMAN",
+  // "INFORMATIKA",
+  // "CODING",
+  // "WHATSAPP",
+  // "INSTAGRAM",
+  // "TEMAN",
 ];
 
 type MenyusunHurufType = {
@@ -22,6 +22,10 @@ type MenyusunHurufType = {
   setTime: (time: number) => void;
   session: boolean;
   setSession: (session: boolean) => void;
+  name: string;
+  setName: (name: string) => void;
+  isFinish: boolean;
+  setIsFinish: (isFinish: boolean) => void;
 };
 
 const useMenyusunHurufStore = create<MenyusunHurufType>((set) => ({
@@ -33,6 +37,10 @@ const useMenyusunHurufStore = create<MenyusunHurufType>((set) => ({
   setTime: (time) => set({ time: time }),
   session: false,
   setSession: (session) => set({ session: session }),
+  name: "",
+  setName: (name) => set({ name: name }),
+  isFinish: false,
+  setIsFinish: (isFinish) => set({ isFinish: isFinish }),
 }));
 
 export default useMenyusunHurufStore;