refactored analytics page, fixed ts

2024-04-01 22:09:26 +04:00 · 2024-04-01 22:09:26 +04:00 · 47d199ab0b
commit 47d199ab0b
parent af70d8b2c6
9 changed files with 153 additions and 112 deletions
--- a/src/api/statistic.ts
+++ b/src/api/statistic.ts
@ -23,13 +23,18 @@ export type QuestionsResponse = {
  questions: Record<string, Record<string, number>>;
 };

+type TRequest = {
+  to: number;
+  from: number;
+};
+
 export const getDevices = async (
  quizId: string,
  to: number,
  from: number,
 ): Promise<[DevicesResponse | null, string?]> => {
  try {
-    const devicesResponse = await makeRequest<unknown, DevicesResponse>({
+    const devicesResponse = await makeRequest<TRequest, DevicesResponse>({
      method: "POST",
      url: `${apiUrl}/${quizId}/devices`,
      withCredentials: true,
@ -50,7 +55,7 @@ export const getGeneral = async (
  from: number,
 ): Promise<[GeneralResponse | null, string?]> => {
  try {
-    const generalResponse = await makeRequest<unknown, GeneralResponse>({
+    const generalResponse = await makeRequest<TRequest, GeneralResponse>({
      method: "POST",
      url: `${apiUrl}/${quizId}/general`,
      withCredentials: true,
@ -71,7 +76,7 @@ export const getQuestions = async (
  from: number,
 ): Promise<[QuestionsResponse | null, string?]> => {
  try {
-    const questionsResponse = await makeRequest<unknown, QuestionsResponse>({
+    const questionsResponse = await makeRequest<TRequest, QuestionsResponse>({
      method: "POST",
      url: `${apiUrl}/${quizId}/questions`,
      withCredentials: true,
--- a/src/pages/Analytics/Analytics.tsx
+++ b/src/pages/Analytics/Analytics.tsx
@ -1,15 +1,14 @@
-import { useLayoutEffect, useState } from "react";
+import * as React from "react";
+import { ReactNode, useLayoutEffect, useState } from "react";
 import {
  Box,
  Button,
  IconButton,
-  Paper,
  Typography,
  useMediaQuery,
  useTheme,
 } from "@mui/material";
 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";
@ -18,7 +17,7 @@ import HeaderFull from "@ui_kit/Header/HeaderFull";
 import SectionWrapper from "@ui_kit/SectionWrapper";

 import { General } from "./General";
-import { AnswersStatistics } from "./Answers";
+import { AnswersStatistics } from "./Answers/AnswersStatistics";
 import { Devices } from "./Devices";

 import CalendarIcon from "@icons/CalendarIcon";
@ -26,11 +25,10 @@ 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(null);
-  const [from, setFrom] = useState(null);
+  const [isOpen, setOpen] = useState<boolean>(false);
+  const [isOpenEnd, setOpenEnd] = useState<boolean>(false);
+  const [to, setTo] = useState<moment.Moment | null>(null);
+  const [from, setFrom] = useState<moment.Moment | null>(null);

  const { devices, general, questions } = useAnalytics({
    quizId: editQuizId?.toString(),
@ -42,6 +40,7 @@ export default function Analytics() {
    setTo(null);
    setFrom(null);
  };
+
  useLayoutEffect(() => {
    if (editQuizId === undefined) redirect("/list");
  }, [editQuizId]);
@ -52,12 +51,14 @@ export default function Analytics() {
  const handleClose = () => {
    setOpen(false);
  };
+
  const handleOpen = () => {
    setOpen(true);
  };
+
  const onAdornmentClick = () => {
    setOpen((old) => !old);
-    if (isOpenEnd === true) {
+    if (isOpenEnd) {
      handleCloseEnd();
    }
  };
@ -65,18 +66,17 @@ export default function Analytics() {
  const handleCloseEnd = () => {
    setOpenEnd(false);
  };
+
  const handleOpenEnd = () => {
    setOpenEnd(true);
  };
+
  const onAdornmentClickEnd = () => {
    setOpenEnd((old) => !old);
-    if (isOpen === true) {
+    if (isOpen) {
      handleClose();
    }
  };
-  console.log("questions", questions);
-  console.log("general", general);
-  console.log("devices", devices);

  const now = moment();
  return (
@ -113,7 +113,6 @@ export default function Analytics() {
                // defaultValue={now}
                sx={{
                  width: isMobile ? "146px" : "169px",
-
                  "& .MuiOutlinedInput-root": {
                    borderRadius: "10px",
                    fontSize: "16px",
@ -123,13 +122,15 @@ export default function Analytics() {
                  },
                }}
                slotProps={{
+                  //@ts-ignore
+                  //TODO: fix types in @mui/x-date-pickers
                  textField: {
                    InputProps: {
                      endAdornment: (
                        <IconButton onClick={onAdornmentClick}>
                          <CalendarIcon />
                        </IconButton>
-                      ),
+                      ) as ReactNode,
                    },
                  },
                }}
@ -146,8 +147,6 @@ export default function Analytics() {
                  color: "4D4D4D",
                }}
              >
-                value={from}
-                onChange={(newValue) => setValue(setFrom)}
                Дата окончания
              </Typography>
              <DatePicker
@ -176,6 +175,8 @@ export default function Analytics() {
                    },
                  },
                }}
+                value={from}
+                onChange={(newValue) => setFrom(newValue)}
              />
            </Box>
          </Box>
--- a/src/pages/Analytics/Answers/Answers.tsx
+++ b/src/pages/Analytics/Answers/Answers.tsx
@ -1,15 +1,16 @@
-import { useState } from "react";
+import { FC, useState } from "react";
+import type { PaginationRenderItemParams } from "@mui/material";
 import {
  Box,
-  Paper,
-  Typography,
+  ButtonBase,
+  Input,
  LinearProgress,
  Pagination as MuiPagination,
  PaginationItem,
-  Input,
-  ButtonBase,
-  useTheme,
+  Paper,
+  Typography,
  useMediaQuery,
+  useTheme,
 } from "@mui/material";

 import { ReactComponent as DoubleCheckIcon } from "@icons/Analytics/doubleCheck.svg";
@ -17,14 +18,16 @@ import { ReactComponent as NextIcon } from "@icons/Analytics/next.svg";
 import { ReactComponent as LeftArrowIcon } from "@icons/Analytics/leftArrow.svg";
 import { ReactComponent as RightArrowIcon } from "@icons/Analytics/rightArrow.svg";

-import type { PaginationRenderItemParams } from "@mui/material";
-
 type AnswerProps = {
  title: string;
  percent: number;
  highlight?: boolean;
 };

+type AnswersProps = {
+  data: Record<string, Record<string, number>> | null;
+};
+
 const ANSWERS_MOCK: Record<string, number> = {
  "Добавьте ответ": 67,
  "Вопрос пропущен": 7,
@ -186,16 +189,16 @@ const Pagination = () => {
  );
 };

-export const Answers = (props) => {
+export const Answers: FC<AnswersProps> = ({ data }) => {
  const theme = useTheme();
-  console.log(props.data);
-
-  if (Object.keys(props.data).length === 0)
+  if (!data) {
    return (
      <Typography textAlign="center" m="10px 0">
        нет данных об ответах
      </Typography>
    );
+  }
+
  return (
    <Box sx={{ flexGrow: 1 }}>
      <Paper
@ -250,14 +253,24 @@ export const Answers = (props) => {
            <NextIcon />
          </ButtonBase>
        </Box>
-        {Object.entries(props.data).map(([title, percent], index) => (
-          <Answer
-            key={title}
-            title={title}
-            percent={percent}
-            highlight={!index}
-          />
-        ))}
+        {/*{Object.entries(data).map(([title, percent], index) => (*/}
+        {/*  <Answer*/}
+        {/*    key={title}*/}
+        {/*    title={title}*/}
+        {/*    percent={percent}*/}
+        {/*    highlight={!index}*/}
+        {/*  />*/}
+        {/*))}*/}
+        {Object.entries(data).map(([title, values], index) =>
+          Object.entries(values).map(([subTitle, percent]) => (
+            <Answer
+              key={subTitle}
+              title={subTitle}
+              percent={percent}
+              highlight={!index}
+            />
+          )),
+        )}
      </Paper>
      <Pagination />
    </Box>
--- a/src/pages/Analytics/Answers/AnswersStatistics.tsx
+++ b/src/pages/Analytics/Answers/AnswersStatistics.tsx
@ -1,24 +1,20 @@
-import {
-  Box,
-  ButtonBase,
-  Typography,
-  useMediaQuery,
-  useTheme,
-} from "@mui/material";
+import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";

 import { Answers } from "./Answers";
+import { QuestionsResponse } from "@api/statistic";
+import { FC } from "react";
 import { Funnel } from "./Funnel";
 import { Results } from "./Results";

-import { ReactComponent as OpenIcon } from "@icons/Analytics/open.svg";
+type AnswersStatisticsProps = {
+  data: QuestionsResponse | null;
+};

-export const AnswersStatistics = (props) => {
+export const AnswersStatistics: FC<AnswersStatisticsProps> = ({ data }) => {
  const theme = useTheme();
  const isSmallMonitor = useMediaQuery(theme.breakpoints.down(1150));
  const isMobile = useMediaQuery(theme.breakpoints.down(850));

-  console.log(props);
-
  return (
    <Box sx={{ marginTop: "120px" }}>
      <Typography
@ -59,10 +55,10 @@ export const AnswersStatistics = (props) => {
          gap: "40px",
        }}
      >
-        <Answers data={props.data?.Questions || {}} />
-        <Funnel data={props.data?.Funnel || {}} />
+        <Answers data={data?.questions || null} />
+        <Funnel data={data?.funnel || null} />
      </Box>
-      <Results data={props.data?.Results || {}} />
+      <Results data={data?.results || null} />
    </Box>
  );
 };
--- a/src/pages/Analytics/Answers/Funnel.tsx
+++ b/src/pages/Analytics/Answers/Funnel.tsx
@ -1,19 +1,22 @@
-import { useEffect, useState } from "react";
+import { FC, useEffect } from "react";
 import {
  Box,
+  LinearProgress,
  Paper,
  Typography,
-  LinearProgress,
-  useTheme,
  useMediaQuery,
+  useTheme,
 } from "@mui/material";
-import { enqueueSnackbar } from "notistack";

 type FunnelItemProps = {
  title: string;
  percent: number;
 };

+type FunnelProps = {
+  data: number[] | null;
+};
+
 const FUNNEL_MOCK: Record<string, number> = {
  "Стартовая страница": 100,
  "Воронка квиза": 0,
@ -100,11 +103,10 @@ const FunnelItem = ({ title, percent }: FunnelItemProps) => {
  );
 };

-export const Funnel = (props) => {
+export const Funnel: FC<FunnelProps> = ({ data }) => {
  const theme = useTheme();
  const isSmallMonitor = useMediaQuery(theme.breakpoints.down(1150));
  const isMobile = useMediaQuery(theme.breakpoints.down(850));
-  console.log(props);
  useEffect(() => {
    // const requestFunnel = async () => {
    //   const [funnelResponse, funnelError] = await getGeneral("14761");
@ -121,7 +123,7 @@ export const Funnel = (props) => {
    // requestFunnel();
  }, []);

-  if (Object.keys(props.data).length === 0)
+  if (!data)
    return (
      <Typography textAlign="center" m="10px 0">
        нет данных о разделах
@ -141,7 +143,7 @@ export const Funnel = (props) => {
        <FunnelItem
          key={title}
          title={title}
-          percent={index > 0 ? props.data[index - 1] : percent}
+          percent={index > 0 ? data[index - 1] : percent}
        />
      ))}
    </Paper>
--- a/src/pages/Analytics/Answers/Results.tsx
+++ b/src/pages/Analytics/Answers/Results.tsx
@ -1,11 +1,11 @@
-import { useState } from "react";
 import {
  Box,
+  LinearProgress,
  Paper,
  Typography,
-  LinearProgress,
  useTheme,
 } from "@mui/material";
+import { FC } from "react";

 type ResultProps = {
  title: string;
@ -13,6 +13,10 @@ type ResultProps = {
  highlight?: boolean;
 };

+type ResultsProps = {
+  data: Record<string, number> | null;
+};
+
 const RESULTS_MOCK: Record<string, number> = {
  "Заголовок результата": 100,
  "Результат пропущен": 7,
@ -69,10 +73,10 @@ const Result = ({ title, percent, highlight }: ResultProps) => {
  );
 };

-export const Results = (props) => {
+export const Results: FC<ResultsProps> = ({ data }) => {
  const theme = useTheme();

-  if (Object.keys(props.data).length === 0)
+  if (!data)
    return (
      <Typography margin="20px 0 0 0" textAlign="center" m="10px 0">
        нет данных о результатах
@ -98,7 +102,7 @@ export const Results = (props) => {
          marginTop: "30px",
        }}
      >
-        {Object.entries(props.data).map(([title, percent], index) => (
+        {Object.entries(data).map(([title, percent], index) => (
          <Result
            key={title}
            title={title}
--- a/src/pages/Analytics/Devices.tsx
+++ b/src/pages/Analytics/Devices.tsx
@ -1,15 +1,16 @@
-import { useEffect, useState } from "react";
+import { FC } from "react";
 import { Box, Paper, Typography, useMediaQuery, useTheme } from "@mui/material";
 import { PieChart } from "@mui/x-charts";
-import { enqueueSnackbar } from "notistack";
-
-import { getDevices } from "@api/statistic";

 import type { DevicesResponse } from "@api/statistic";

 type DeviceProps = {
  title: string;
-  devices: Record<string, number>;
+  devices: Record<string, number> | null;
+};
+
+type DevicesProps = {
+  data: DevicesResponse | null;
 };

 const COLORS: Record<number, string> = {
@ -27,9 +28,10 @@ const DEVICES_MOCK: DevicesResponse = {

 const Device = ({ title, devices }: DeviceProps) => {
  const theme = useTheme();
-  console.log("devices ", devices);
-  if (devices === undefined || Object.keys(devices).length === 0)
+  if (!devices) {
    return <Typography>{title} - нет данных</Typography>;
+  }
+
  const data = Object.entries(devices).map(([id, value], index) => ({
    id,
    value,
@ -98,8 +100,7 @@ const Device = ({ title, devices }: DeviceProps) => {
  );
 };

-export const Devices = ({ data = {} }) => {
-  const [devices, setDevices] = useState<DevicesResponse>(data);
+export const Devices: FC<DevicesProps> = ({ data }) => {
  const theme = useTheme();
  const isTablet = useMediaQuery(theme.breakpoints.down(1000));
  const isMobile = useMediaQuery(theme.breakpoints.down(700));
@ -150,9 +151,9 @@ export const Devices = ({ data = {} }) => {
          marginTop: "30px",
        }}
      >
-        <Device title="Устройства" devices={devices.device} />
-        <Device title="Операционные системы" devices={devices.os} />
-        <Device title="Браузеры" devices={devices.browser} />
+        <Device title="Устройства" devices={data?.device || null} />
+        <Device title="Операционные системы" devices={data?.os || null} />
+        <Device title="Браузеры" devices={data?.browser || null} />
      </Box>
    </Box>
  );
--- a/src/pages/Analytics/General.tsx
+++ b/src/pages/Analytics/General.tsx
@ -1,19 +1,20 @@
-import { useEffect, useState } from "react";
 import { Box, Paper, Typography, useMediaQuery, useTheme } from "@mui/material";
 import { LineChart } from "@mui/x-charts";
-import { enqueueSnackbar } from "notistack";
-
-import { getGeneral } from "@api/statistic";

 import type { GeneralResponse } from "@api/statistic";
+import { FC } from "react";

-type GeneralProps = {
+type GeneralItemsProps = {
  title: string;
  general: Record<string, number>;
  color: string;
  numberType: "sum" | "percent";
 };

+type GeneralProps = {
+  data: GeneralResponse | null;
+};
+
 const COLORS: Record<number, string> = {
  0: "#61BB1A",
  1: "#7E2AEA",
@ -28,7 +29,12 @@ const GENERAL_MOCK: GeneralResponse = {
  conversation: { 100: 50, 1000: 50, 10000: 50 },
 };

-const GeneralItem = ({ title, general, color, numberType }: GeneralProps) => {
+const GeneralItem = ({
+  title,
+  general,
+  color,
+  numberType,
+}: GeneralItemsProps) => {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down(700));

@ -65,17 +71,18 @@ const GeneralItem = ({ title, general, color, numberType }: GeneralProps) => {
  );
 };

-export const General = (props: any) => {
+export const General: FC<GeneralProps> = ({ data }) => {
  const theme = useTheme();
  const isTablet = useMediaQuery(theme.breakpoints.down(1000));
  const isMobile = useMediaQuery(theme.breakpoints.down(700));

-  if (Object.keys(props.data).length === 0)
+  if (!data) {
    return (
      <Typography textAlign="center" m="10px 0">
        нет данных о ключевых метриках
      </Typography>
    );
+  }
  return (
    <Box sx={{ marginTop: "45px" }}>
      <Typography
@ -103,25 +110,25 @@ export const General = (props: any) => {
        <GeneralItem
          title="Открыли квиз"
          numberType="sum"
-          general={props.data.open || { 0: 0 }}
+          general={data.open || { 0: 0 }}
          color={COLORS[0]}
        />
        <GeneralItem
          title="Получено заявок"
          numberType="sum"
-          general={props.data.result || { 0: 0 }}
+          general={data.result || { 0: 0 }}
          color={COLORS[1]}
        />
        <GeneralItem
          title="Конверсия"
          numberType="percent"
-          general={props.data.conversation || { 0: 0 }}
+          general={data.conversation || { 0: 0 }}
          color={COLORS[2]}
        />
        <GeneralItem
          title="Среднее время прохождения квиза"
          numberType="percent"
-          general={props.data.avtime || { 0: 0 }}
+          general={data.avtime || { 0: 0 }}
          color={COLORS[3]}
        />
      </Box>
--- a/src/utils/hooks/useAnalytics.ts
+++ b/src/utils/hooks/useAnalytics.ts
@ -1,32 +1,44 @@
-import { getGeneral, getDevices, getQuestions } from "@api/statistic";
 import { useEffect, useState } from "react";
 import moment from "moment";
+import {
+  DevicesResponse,
+  GeneralResponse,
+  getDevices,
+  getGeneral,
+  getQuestions,
+  QuestionsResponse,
+} from "@api/statistic";

-interface Props {
-  quizId: string;
-  to: number;
-  from: number;
+interface useAnalyticsProps {
+  quizId: string | undefined;
+  to: moment.Moment | null;
+  from: moment.Moment | null;
 }

-export function useAnalytics({ quizId, to, from }: Props) {
-  const formatTo = to === null ? 0 : moment(to).unix();
-  const formatFrom = from === null ? 0 : moment(from).unix();
-  console.log(to, from);
-  if (quizId === undefined) return {};
-  const [devices, setDevices] = useState({});
-  const [general, setGeneral] = useState({});
-  const [questions, setQuestions] = useState({});
+export function useAnalytics({ quizId, to, from }: useAnalyticsProps) {
+  const formatTo = to === null ? 0 : to.unix();
+  const formatFrom = from === null ? 0 : from.unix();
+
+  const [devices, setDevices] = useState<DevicesResponse | null>(null);
+  const [general, setGeneral] = useState<GeneralResponse | null>(null);
+  const [questions, setQuestions] = useState<QuestionsResponse | null>(null);

  useEffect(() => {
+    if (!quizId) return;
    (async () => {
-      const gottenGeneral = await getGeneral(quizId, formatTo, formatFrom);
-      const gottenDevices = await getDevices(quizId, formatTo, formatFrom);
-      const gottenQuestions = await getQuestions(quizId, formatTo, formatFrom);
-      setDevices(gottenGeneral[0]);
-      setGeneral(gottenDevices[0]);
-      setQuestions(gottenQuestions[0]);
+      const [gottenGeneral] = await getGeneral(quizId, formatTo, formatFrom);
+      const [gottenDevices] = await getDevices(quizId, formatTo, formatFrom);
+      const [gottenQuestions] = await getQuestions(
+        quizId,
+        formatTo,
+        formatFrom,
+      );
+
+      setGeneral(gottenGeneral);
+      setDevices(gottenDevices);
+      setQuestions(gottenQuestions);
    })();
-  }, [to, from]);
+  }, [quizId, to, from]);

  return { devices, general, questions };
 }