получение данных

src/api/statistic.ts

@@ -25,13 +25,15 @@ export type QuestionsResponse = {
 
 export const getDevices = async (
   quizId: string,
+  to: number,
+  from: number,
 ): Promise<[DevicesResponse | null, string?]> => {
   try {
     const devicesResponse = await makeRequest<unknown, DevicesResponse>({
       method: "POST",
       url: `${apiUrl}/${quizId}/devices`,
-      useToken: false,
       withCredentials: true,
+      body: {to, from}
     });
 
     return [devicesResponse];
@@ -44,13 +46,15 @@ export const getDevices = async (
 
 export const getGeneral = async (
   quizId: string,
+  to: number,
+  from: number,
 ): Promise<[GeneralResponse | null, string?]> => {
   try {
     const generalResponse = await makeRequest<unknown, GeneralResponse>({
       method: "POST",
       url: `${apiUrl}/${quizId}/general`,
-      useToken: false,
       withCredentials: true,
+      body: {to, from}
     });
 
     return [generalResponse];
@@ -63,13 +67,15 @@ export const getGeneral = async (
 
 export const getQuestions = async (
   quizId: string,
+  to: number,
+  from: number,
 ): Promise<[QuestionsResponse | null, string?]> => {
   try {
     const questionsResponse = await makeRequest<unknown, QuestionsResponse>({
       method: "POST",
       url: `${apiUrl}/${quizId}/questions`,
-      useToken: false,
       withCredentials: true,
+      body: {to, from}
     });
 
     return [questionsResponse];

src/pages/Analytics/Analytics.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useLayoutEffect, useState } from "react";
 import {
   Box,
   Button,
@@ -11,6 +11,8 @@ import {
 import { DatePicker } from "@mui/x-date-pickers";
 import { LineChart } from "@mui/x-charts";
 import moment from "moment";
+import { useQuizStore } from "@root/quizes/store";
+import { useAnalytics } from "@utils/hooks/useAnalytics";
 
 import HeaderFull from "@ui_kit/Header/HeaderFull";
 import SectionWrapper from "@ui_kit/SectionWrapper";
@@ -20,11 +22,22 @@ import { AnswersStatistics } from "./Answers";
 import { Devices } from "./Devices";
 
 import CalendarIcon from "@icons/CalendarIcon";
+import { redirect } from "react-router-dom";
 
 export default function Analytics() {
+  const { editQuizId } = useQuizStore();
+
   const [isOpen, setOpen] = useState(false);
   const [isOpenEnd, setOpenEnd] = useState(false);
+  const [to, setTo] = useState(0);
+  const [from, setFrom] = useState(0);
 
+  const { devices, general, questions } = useAnalytics({quizId: editQuizId?.toString(), to, from})
+
+  useLayoutEffect(() => {
+    console.log("editQuizId ", editQuizId)
+    if (editQuizId === undefined) redirect("/list")
+  }, [editQuizId])
   const theme = useTheme();
   const isTablet = useMediaQuery(theme.breakpoints.down(1000));
   const isMobile = useMediaQuery(theme.breakpoints.down(600));

src/pages/createQuize/QuizCard.tsx

@@ -48,7 +48,7 @@ export default function QuizCard({
   }
   function handleStatisticClick() {
     setEditQuizId(quiz.backendId);
-    navigate(`/analytics/${quiz.backendId}`);
+    navigate(`/analytics`);
   }
 
   const questionCount = useRef(quiz.questions_count.toString() || "");

src/utils/hooks/useAnalytics.ts

@@ -0,0 +1,31 @@
+import { getGeneral, getDevices, getQuestions } from "@api/statistic";
+import { useEffect, useState } from "react";
+
+interface Props {
+    quizId: string;
+    to: number;
+    from: number;
+}
+
+export function useAnalytics({
+    quizId,
+    to,
+    from,
+}: Props) {
+    const [devices, setDevices] = useState();
+    const [general, setGeneral] = useState();
+    const [questions, setQuestions] = useState();
+
+    useEffect(() => {
+        (async () => {
+            const gottenGeneral = await getGeneral(quizId, to, from)
+            const gottenDevices = await getDevices(quizId, to, from)
+            const gottenQuestions = await getQuestions(quizId, to, from)
+            setDevices(gottenGeneral)
+            setGeneral(gottenDevices)
+            setQuestions(gottenQuestions)
+        })()
+    }, [to, from]);
+
+    return { devices, general, questions };
+}