refactor question fetching

src/pages/ViewPublicationPage/StartPageViewPublication.tsx

@@ -1,21 +1,14 @@
-import { useParams } from "react-router-dom";
 import {
-  Box,
+    Box,
-  Button,
+    Button,
-  Typography,
+    Typography,
-  useTheme,
+    useMediaQuery,
-  useMediaQuery,
+    useTheme,
 } from "@mui/material";
-import useSWR from "swr";
+import { useParams } from "react-router-dom";
-import { isAxiosError } from "axios";
-import { enqueueSnackbar } from "notistack";
-import { devlog } from "@frontend/kitui";
 
-import { quizApi } from "@api/quiz";
 
-import { useQuizStore } from "@root/quizes/store";
+import { useQuizes } from "@root/quizes/hooks";
-import { useQuestions } from "@root/questions/hooks";
-import { setQuizes } from "@root/quizes/actions";
 
 type StartPageViewPublicationProps = {
   setVisualStartPage: (bool: boolean) => void;
@@ -27,8 +20,7 @@ export const StartPageViewPublication = ({
   showNextButton
 }: StartPageViewPublicationProps) => {
   const quizId = Number(useParams().quizId);
-  const { quizes } = useQuizStore();
+  const { quizes } = useQuizes();
-  const { questions } = useQuestions();
   const theme = useTheme();
   const isTablet = useMediaQuery(theme.breakpoints.down(630));
   const quiz = quizes.find(({ backendId }) => quizId === backendId);
@@ -36,18 +28,6 @@ export const StartPageViewPublication = ({
     quiz?.config.startpage.background.desktop ||
     quiz?.config.startpage.background.video;
 
-  useSWR("quizes", () => quizApi.getList(), {
-    onSuccess: setQuizes,
-    onError: (error: unknown) => {
-      const message = isAxiosError<string>(error)
-        ? error.response?.data ?? ""
-        : "";
-
-      devlog("Error getting quiz list", error);
-      enqueueSnackbar(`Не удалось получить квизы. ${message}`);
-    },
-  });
-
   return (
     <Box
       sx={{

src/pages/createQuize/MyQuizzesFull.tsx

@@ -1,5 +1,3 @@
-import { quizApi } from "@api/quiz";
-import { devlog } from "@frontend/kitui";
 import {
     Box,
     Button,
@@ -9,17 +7,14 @@ import {
     useMediaQuery,
     useTheme,
 } from "@mui/material";
+import { createQuiz } from "@root/quizes/actions";
+import { useQuizes } from "@root/quizes/hooks";
 import SectionWrapper from "@ui_kit/SectionWrapper";
-import { isAxiosError } from "axios";
-import { enqueueSnackbar } from "notistack";
 import React from "react";
 import { useNavigate } from "react-router-dom";
-import useSWR from "swr";
 import ComplexNavText from "./ComplexNavText";
 import FirstQuiz from "./FirstQuiz";
 import QuizCard from "./QuizCard";
-import { setQuizes, createQuiz } from "@root/quizes/actions";
-import { useQuizStore } from "@root/quizes/store";
 
 
 interface Props {
@@ -31,23 +26,14 @@ export default function MyQuizzesFull({
     outerContainerSx: sx,
     children,
 }: Props) {
-    useSWR("quizes", () => quizApi.getList(), {
+    const { quizes } = useQuizes();
-        onSuccess: setQuizes,
-        onError: error => {
-            const message = isAxiosError<string>(error) ? (error.response?.data ?? "") : "";
-
-            devlog("Error getting quiz list", error);
-            enqueueSnackbar(`Не удалось получить квизы. ${message}`);
-        },
-    });
-    const quizArray = useQuizStore(state => state.quizes);
     const navigate = useNavigate();
     const theme = useTheme();
     const isMobile = useMediaQuery(theme.breakpoints.down(500));
 
     return (
         <>
-            {quizArray.length === 0 ? (
+            {quizes.length === 0 ? (
                 <FirstQuiz />
             ) : (
                 <SectionWrapper maxWidth="lg">
@@ -83,7 +69,7 @@ export default function MyQuizzesFull({
                             mb: "60px",
                         }}
                     >
-                        {quizArray.map(quiz => (
+                        {quizes.map(quiz => (
                             <QuizCard
                                 key={quiz.id}
                                 quiz={quiz}

src/pages/startPage/EditPage.tsx

@@ -1,8 +1,5 @@
-import { quizApi } from "@api/quiz";
-import { devlog } from "@frontend/kitui";
 import BackArrowIcon from "@icons/BackArrowIcon";
 import { Burger } from "@icons/Burger";
-import EyeIcon from "@icons/EyeIcon";
 import { PenaLogoIcon } from "@icons/PenaLogoIcon";
 import {
     Box,
@@ -14,7 +11,9 @@ import {
     useMediaQuery,
     useTheme,
 } from "@mui/material";
-import { decrementCurrentStep, resetEditConfig, setQuizes } from "@root/quizes/actions";
+import { cleanQuestions, updateOpenBranchingPanel } from "@root/questions/actions";
+import { useQuestionsStore } from "@root/questions/store";
+import { decrementCurrentStep, resetEditConfig } from "@root/quizes/actions";
 import { useCurrentQuiz } from "@root/quizes/hooks";
 import { useQuizStore } from "@root/quizes/store";
 import CustomAvatar from "@ui_kit/Header/Avatar";
@@ -23,30 +22,12 @@ import PenaLogo from "@ui_kit/PenaLogo";
 import Sidebar from "@ui_kit/Sidebar";
 import Stepper from "@ui_kit/Stepper";
 import SwitchStepPages from "@ui_kit/switchStepPages";
-import { isAxiosError } from "axios";
-import { enqueueSnackbar } from "notistack";
 import { useEffect, useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
-import useSWR from "swr";
 import { SidebarMobile } from "./Sidebar/SidebarMobile";
-import {cleanQuestions, updateOpenBranchingPanel} from "@root/questions/actions";
-import {BranchingPanel} from "../Questions/BranchingPanel";
-import {useQuestionsStore} from "@root/questions/store";
-import { useQuestions } from "@root/questions/hooks";
 
 
 export default function EditPage() {
-    useSWR("quizes", () => quizApi.getList(), {
-        onSuccess: setQuizes,
-        onError: error => {
-            const message = isAxiosError<string>(error) ? (error.response?.data ?? "") : "";
-
-            devlog("Error getting quiz list", error);
-            enqueueSnackbar(`Не удалось получить квизы. ${message}`);
-        },
-    });
-
-    
     // if (isLoading && !questions) return <Box>Загрузка вопросов...</Box>;
     const theme = useTheme();
     const navigate = useNavigate();
@@ -58,7 +39,6 @@ export default function EditPage() {
     const [mobileSidebar, setMobileSidebar] = useState<boolean>(false);
     const {openBranchingPanel} = useQuestionsStore.getState()
     const quizConfig = quiz?.config;
-        const { questions, isLoading } = useQuestions();
 
     useEffect(() => {
         if (editQuizId === null) navigate("/list");

src/stores/quizes/hooks.ts

@@ -1,9 +1,32 @@
+import useSWR from "swr";
 import { useQuizStore } from "./store";
+import { quizApi } from "@api/quiz";
+import { setQuizes } from "./actions";
+import { isAxiosError } from "axios";
+import { devlog } from "@frontend/kitui";
+import { enqueueSnackbar } from "notistack";
 
 
+export function useQuizes() {
+    const { isLoading, error, isValidating } = useSWR("quizes", () => quizApi.getList(), {
+        onSuccess: setQuizes,
+        onError: (error: unknown) => {
+            const message = isAxiosError<string>(error)
+                ? error.response?.data ?? ""
+                : "";
+
+            devlog("Error getting quiz list", error);
+            enqueueSnackbar("Не удалось получить квизы");
+        },
+    });
+    const quizes = useQuizStore(state => state.quizes);
+
+    return { quizes, isLoading, error, isValidating };
+}
+
 export function useCurrentQuiz() {
     const quizId = useQuizStore(state => state.editQuizId);
-    const quizes = useQuizStore(state => state.quizes);
+    const { quizes } = useQuizes();
 
     const quiz = quizes.find(q => q.backendId === quizId);