add: reset react query after edits

gdgbari · Oct 12, 2024 · fc8a575 · fc8a575
1 parent b3699db
commit fc8a575
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 1 deletion.
diff --git a/src/react/pages/app/QRScan.tsx b/src/react/pages/app/QRScan.tsx
@@ -13,6 +13,7 @@ import { useUserProfile } from "../../utils/query"
 import { addPointsToUsers, colorConverter } from "../../utils"
 import { FaTrashAlt } from "react-icons/fa";
 import { notifications } from "@mantine/notifications"
+import { useQueryClient } from "@tanstack/react-query"
 
 const UserRowInfo = ({ uid, removeUser }: { uid: string, removeUser: (uid: string) => void }) => {
     const user = useUserProfile(uid)
@@ -48,6 +49,7 @@ export const QRScan = () => {
     const [isLoading, setIsLoading] = useState(false)
     const [enableCamera, setEnableCamera] = useState(true)
     const [addOrder, setAddOrder] = useState<{uid: string, date: Date}[]>([])
+    const queryClient = useQueryClient()
     const form = useForm({
         initialValues: {
             title: "",
@@ -107,6 +109,7 @@ export const QRScan = () => {
                                     message: "Points added successfully",
                                     color: "teal"
                                 })
+                                queryClient.resetQueries({ queryKey: ["quizes"] })
                                 navigate("app")
                             }).catch((e)=>{
                                 notifications.update({

diff --git a/src/react/pages/app/QuizAdd.tsx b/src/react/pages/app/QuizAdd.tsx
@@ -6,6 +6,7 @@ import { notifications, showNotification } from "@mantine/notifications";
 import { IoMdArrowRoundBack } from "react-icons/io";
 import { createQuiz } from "../../utils";
 import { TitleBar } from "../../components/TitleBar";
+import { useQueryClient } from "@tanstack/react-query";
 
 export const QuizAdd = () => {
 
@@ -27,6 +28,8 @@ export const QuizAdd = () => {
 
     const baseTalkPoints = 30
 
+    const queryClient = useQueryClient()
+
     const changeAnswareNumber = (qNum: number) => {
 
         form.setFieldValue("questions", form.values.questions.filter((q, i) => i < qNum))
@@ -130,6 +133,7 @@ export const QuizAdd = () => {
                     message: "Quiz has been created successfully",
                     color: "blue"
                 })
+                queryClient.resetQueries({ queryKey: ["quizes"] })
                 navigate("app")
             }).catch((error) => {
                 showNotification({

diff --git a/src/react/pages/app/QuizList.tsx b/src/react/pages/app/QuizList.tsx
@@ -8,17 +8,22 @@ import { useQuizes } from "../../utils/query";
 import { BsQrCodeScan } from "react-icons/bs";
 import { Space } from "@mantine/core";
 import { useState } from "react";
-
+import { useQueryClient } from "@tanstack/react-query";
+import { TbReload } from "react-icons/tb";
 
 export const QuizList = () => {
 
     const { navigate } = useAppRouter()
 
     const quizes = useQuizes()
     const [showHidden, setShowHidden] = useState(false)
+    const queryClient = useQueryClient()
 
     return <div className="h-full">
         <TitleBar title="Quizes" actions={[
+            <Button className="btn-circle mr-4" onClick={() => queryClient.resetQueries()} loading={quizes.isFetching}>
+                { !quizes.isFetching && <TbReload size={32} /> }
+            </Button>,
             <Button className="btn-circle mr-4" onClick={() => navigate("qrscan")} >
                 <BsQrCodeScan size={26} />
             </Button>,