Merge pull request #21 from DadonStyle/dev

add react query and add loader

package.json

@@ -16,6 +16,7 @@
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.15.2",
     "@mui/material": "^5.15.2",
+    "@tanstack/react-query": "^5.40.0",
     "@types/node": "^20.10.6",
     "@vercel/speed-insights": "^1.0.9",
     "openai": "^4.47.1",

src/App.tsx

@@ -2,6 +2,7 @@ import { BrowserRouter } from "react-router-dom";
 import { ThemeProvider, createTheme } from "@mui/material";
 import { SpeedInsights } from "@vercel/speed-insights/react";
 import AppRoutes from "./routes/AppRoutes";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import "./App.css";
 
 const theme = createTheme({
@@ -46,12 +47,16 @@ const theme = createTheme({
   },
 });
 
+const queryClient = new QueryClient();
+
 const App = () => (
   <ThemeProvider theme={theme}>
-    <BrowserRouter>
-      <SpeedInsights />
-      <AppRoutes />
-    </BrowserRouter>
+    <QueryClientProvider client={queryClient}>
+      <BrowserRouter>
+        <SpeedInsights />
+        <AppRoutes />
+      </BrowserRouter>
+    </QueryClientProvider>
   </ThemeProvider>
 );
 

src/hooks/useChatQuestions.tsx

@@ -1,28 +1,22 @@
-import { useEffect, useState } from "react";
 import OpenAI from "openai";
-import { QuestionType } from "../constants/types";
 import { useParams } from "react-router";
 import { shuffle } from "../utils/util";
 import allQuestions from "../constants/questions";
+import { useQuery } from "@tanstack/react-query";
 
 type allQuestionsOptionType = keyof typeof allQuestions;
 
 const useChatQuestions = () => {
-  const [question, setQuestion] = useState<QuestionType | null>(null);
   const { category } = useParams();
   const openai = new OpenAI({
     apiKey: import.meta.env.VITE_OPEN_AI_KEY,
-    dangerouslyAllowBrowser: true,
+    dangerouslyAllowBrowser: true, // temp until BE will be live
   });
 
-  useEffect(() => {
-    if (question !== null) return;
-    callApi();
-  }, []);
-
-  const getQuestion = () => {
-    callApi();
-  };
+  const { isFetching, data, refetch } = useQuery({
+    queryKey: ["chatResponse"],
+    queryFn: () => callApi(),
+  });
 
   const callApi = async () => {
     if (!category) return;
@@ -43,17 +37,15 @@ const useChatQuestions = () => {
       ],
       model: "gpt-3.5-turbo",
     });
-    console.log(reactAdditionalQuery);
+
     let nextQuestion = JSON.parse(completion.choices[0].message.content!);
     if (!nextQuestion) {
       nextQuestion = shuffle(allQuestions[category as allQuestionsOptionType]);
     }
-    console.log(nextQuestion);
-    setQuestion(nextQuestion);
     return nextQuestion;
   };
 
-  return { question, getQuestion };
+  return { question: data, getQuestion: refetch, isFetching };
 };
 
 export default useChatQuestions;

src/modules/QuestionsContainer/QuestionsContainer.tsx

@@ -6,19 +6,18 @@ import QuestionsHandler from "../QuestionsHandler/QuestionsHandler";
 import Streak from "../../components/Streak/Streak";
 import MailDialog from "../../components/MailDialog/MailDialog";
 import useChatQuestions from "../../hooks/useChatQuestions";
+import { CircularProgress } from "@mui/material";
 import "./QuestionsContainer.scss";
 
 const QuestionsContainer = () => {
   const [streak, setStreak] = useState<number>(0);
-  const { question, getQuestion } = useChatQuestions();
+  const { question, getQuestion, isFetching } = useChatQuestions();
   const navigate = useNavigate();
-  // const { questions } = useGetQuestions();
   const handleToHomePage = () => navigate("/");
 
-  if (!question) {
-    return <></>;
+  if (!question && !isFetching) {
+    return <>Error</>;
   }
-  //<Navigate to="/" />;
 
   return (
     <Box className="question-section">
@@ -32,8 +31,20 @@ const QuestionsContainer = () => {
         <Streak streak={streak} />
       </Box>
       <Box className="question-bottom-section">
-        {question && (
-          <QuestionsHandler question={question} setStreak={setStreak} nextQuestion={getQuestion} />
+        {isFetching ? (
+          <Box sx={{ height: "480px" }}>
+            <CircularProgress size={80} color="primary" />
+          </Box>
+        ) : (
+          <>
+            {question && (
+              <QuestionsHandler
+                question={question}
+                setStreak={setStreak}
+                nextQuestion={getQuestion}
+              />
+            )}
+          </>
         )}
       </Box>
     </Box>