use react query

gdgbari · Oct 7, 2024 · 59ff544 · 59ff544
1 parent 34d61f1
commit 59ff544
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 14 deletions.
diff --git a/.astro/astro/content.d.ts b/.astro/astro/content.d.ts
@@ -335,5 +335,5 @@ declare module 'astro:content' {
 
 	type AnyEntryMap = ContentEntryMap & DataEntryMap;
 
-	export type ContentConfig = typeof import("./../../src/content/config.js");
+	export type ContentConfig = typeof import("../../src/content/config.js");
 }
diff --git a/src/react/pages/app/LeaderBoard.tsx b/src/react/pages/app/LeaderBoard.tsx
@@ -69,7 +69,7 @@ export const LeaderBoard = () => {
                     return <div className="flex-col mb-6" key={i}>
                         <div
                             key={i} className="flex justify-center items-center p-2 h-[100px] mb-2 text-3xl"
-                            style={{ width: `${(group.score / (groupMax??1)) * 100}%`, minWidth: "50px", backgroundColor: colorConverter(group.color), color: "white" }}
+                            style={{ width: `${(groupMax==0?0:(group.score / (groupMax??1))) * 100}%`, minWidth: "50px", backgroundColor: colorConverter(group.color), color: "white" }}
                         >
                             <b>{i+1}°</b>
                         </div>

diff --git a/src/react/pages/app/QuizList.tsx b/src/react/pages/app/QuizList.tsx
@@ -3,20 +3,14 @@ import { useAppRouter } from "../../utils/store";
 import { Button } from "react-daisyui";
 import { MdLeaderboard } from "react-icons/md";
 import { TitleBar } from "../../components/TitleBar";
-import { useEffect, useState } from "react";
-import { getQuizList, type Quiz } from "../../utils";
 import { QuizCard } from "../../components/QuizCard";
+import { useQuizes } from "../../utils/query";
 
 export const QuizList = () => {
 
     const { navigate } = useAppRouter()
-    const [quizes, setQuizes] = useState<Quiz[]>([]);
 
-    useEffect(() => {
-        getQuizList().then((res) => {
-            setQuizes(res);
-        });
-    });
+    const quizes = useQuizes()
 
     return <div className="h-full">
         <TitleBar title="Quizes" actions={[
@@ -27,9 +21,9 @@ export const QuizList = () => {
                 <FaPlus size={25} />
             </Button>]}
         />
-
+        {quizes.isLoading && <div>Loading...</div>}
         <div className="flex flex-col gap-4 mt-8">
-            {quizes && quizes.map(q => (<QuizCard key={q.quizId} quiz={q}></QuizCard>))}
+            {quizes && quizes.data?.map(q => (<QuizCard key={q.quizId} quiz={q}></QuizCard>))}
         </div>
     </div>
 }
diff --git a/src/react/utils/query.ts b/src/react/utils/query.ts
@@ -1,7 +1,7 @@
 import { onAuthStateChanged } from "firebase/auth"
 import { useEffect, useState } from "react"
-import { firebase, useLeaderboard } from "."
-//import { useQuery } from "@tanstack/react-query"
+import { firebase, getQuizList, useLeaderboard } from "."
+import { useQuery } from "@tanstack/react-query"
 
 
 export const useFirebaseUserInfo = () => {
@@ -15,3 +15,11 @@ export const useFirebaseUserInfo = () => {
     const [user, setUser] = useState(firebase.auth.currentUser)
     return { user, hasLoaded }
 }
+
+
+export const useQuizes = () => {
+    return useQuery({
+        queryKey: ["quizes"],
+        queryFn: getQuizList
+    })
+}