From 5278ff347393d019751b4f037fbfcc938ebe75fa Mon Sep 17 00:00:00 2001 From: mphstar Date: Tue, 25 Feb 2025 16:19:13 +0700 Subject: [PATCH] feat: proses saving kuis --- package-lock.json | 11 ++++ package.json | 1 + .../Kuis/MenyusunHuruf/MenyusunHuruf.tsx | 52 +++++++++++---- src/pages/Kuis/MenyusunHuruf/Quiz.tsx | 66 ++++++++++++++----- src/stores/MenyusunHurufStore.ts | 18 +++-- 5 files changed, 116 insertions(+), 32 deletions(-) diff --git a/package-lock.json b/package-lock.json index e76f6c9..1e25f80 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 33cb24f..24dd0b7 100644 --- a/package.json +++ b/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" }, diff --git a/src/pages/Kuis/MenyusunHuruf/MenyusunHuruf.tsx b/src/pages/Kuis/MenyusunHuruf/MenyusunHuruf.tsx index 990922b..7a41918 100644 --- a/src/pages/Kuis/MenyusunHuruf/MenyusunHuruf.tsx +++ b/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 (
@@ -36,19 +65,18 @@ const MenyusunHuruf = () => { quizStore.setName(e.target.value)} className="bg-transparent outline-none p-2 px-8 flex-1 w-full" /> - - - +
Lihat Ranking diff --git a/src/pages/Kuis/MenyusunHuruf/Quiz.tsx b/src/pages/Kuis/MenyusunHuruf/Quiz.tsx index 7f6dcec..f58468c 100644 --- a/src/pages/Kuis/MenyusunHuruf/Quiz.tsx +++ b/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 = () => {

- Soal: {quizStore.soalIndex + 1} / 10 + Soal: {quizStore.soalIndex + 1} / {quizStore.listSoal.length}

diff --git a/src/stores/MenyusunHurufStore.ts b/src/stores/MenyusunHurufStore.ts index fad161e..316d482 100644 --- a/src/stores/MenyusunHurufStore.ts +++ b/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((set) => ({ @@ -33,6 +37,10 @@ const useMenyusunHurufStore = create((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;