отделение логики от верстки на странице результатов

2024-02-26 17:22:40 +03:00 · 2024-02-26 17:22:40 +03:00 · d74b9159a8
commit d74b9159a8
parent dfa690685a
6 changed files with 115 additions and 173 deletions
--- a/src/pages/QuizAnswersPage/CardAnswer.tsx
+++ b/src/pages/QuizAnswersPage/CardAnswer.tsx
@ -25,6 +25,7 @@ import { useQuestionsStore } from "@root/questions/store";
 import AddressIcon from "@icons/ContactFormIcon/AddressIcon";

 import type { AxiosError } from "axios";
+import { DeleteModal } from "./DeleteModal";

 interface Props {
  isNew: boolean;
@ -277,49 +278,14 @@ export const CardAnswer = ({
              <DeleteIcon color="#4D4D4D" fontSize="34px" />
            </IconButton>
          )}
-          <Modal open={openDelete} onClose={() => setOpenDelete(false)}>
-            <Box
-              sx={{
-                position: "absolute",
-                top: "50%",
-                left: "50%",
-                transform: "translate(-50%, -50%)",
-                padding: "30px",
-                borderRadius: "10px",
-                background: "#FFFFFF",
-              }}
-            >
-              <Typography variant="h6" sx={{ textAlign: "center" }}>
-                Вы уверены, что хотите удалить этот результат?
-              </Typography>
-              <Box
-                sx={{
-                  marginTop: "30px",
-                  display: "flex",
-                  justifyContent: "center",
-                  gap: "15px",
-                }}
-              >
-                <Button
-                  variant="contained"
-                  sx={{ minWidth: "150px" }}
-                  onClick={() => setOpenDelete(false)}
-                >
-                  Отмена
-                </Button>
-                <Button
-                  variant="contained"
-                  sx={{ minWidth: "150px" }}
-                  onClick={() => {
-                    deleteResult(Number(idResult));
-                    setOpenDelete(false);
-                  }}
-                >
-                  Подтвердить
-                </Button>
-              </Box>
-            </Box>
-          </Modal>
+          <DeleteModal
+            openDelete={openDelete}
+            handleClose={() => setOpenDelete(false)}
+            onClick={() => {
+              deleteResult(Number(idResult));
+              setOpenDelete(false);
+            }}
+          />
        </Box>
      </Box>

--- a/src/pages/QuizAnswersPage/DeleteModal.tsx
+++ b/src/pages/QuizAnswersPage/DeleteModal.tsx
@ -2,12 +2,13 @@ import { Box, Button, Modal, Typography } from "@mui/material";

 interface Props {
  openDelete: boolean;
-  setOpenDelete: (open: boolean) => void;
+  handleClose: () => void;
+  onClick: () => void;
 }

-export const DeleteModal = ({ openDelete, setOpenDelete }: Props) => {
+export const DeleteModal = ({ openDelete, handleClose, onClick }: Props) => {
  return (
-    <Modal open={openDelete} onClose={() => setOpenDelete(false)}>
+    <Modal open={openDelete} onClose={handleClose}>
      <Box
        sx={{
          position: "absolute",
@ -33,18 +34,14 @@ export const DeleteModal = ({ openDelete, setOpenDelete }: Props) => {
          <Button
            variant="contained"
            sx={{ minWidth: "150px" }}
-            onClick={() => setOpenDelete(false)}
+            onClick={handleClose}
          >
            Отмена
          </Button>
          <Button
            variant="contained"
            sx={{ minWidth: "150px" }}
-            onClick={() => {
-              // deleteQuestionWithTimeout(question.id, () =>
-              //     DeleteFunction(questions, question, quiz),
-              // );
-            }}
+            onClick={onClick}
          >
            Подтвердить
          </Button>
--- a/src/pages/QuizAnswersPage/QuizAnswersPage.tsx
+++ b/src/pages/QuizAnswersPage/QuizAnswersPage.tsx
@ -1,44 +1,32 @@
 import {
  Box,
-  Button,
-  IconButton,
  Typography,
-  MenuItem,
  useTheme,
  useMediaQuery,
  Skeleton,
-  FormControl,
-  Pagination,
 } from "@mui/material";
-import { Select } from "../../pages/Questions/Select";
-import moment from "moment";
 import HeaderFull from "@ui_kit/Header/HeaderFull";
 import SectionWrapper from "@ui_kit/SectionWrapper";
 import { FC, useEffect, useState } from "react";
-import { FileExportIcon } from "./icons/FileExporIcon";
-import { UpdateIcon } from "./icons/UpdateIcon";
-import { CheckboxSelect } from "../../ui_kit/CheckboxSelect";
 import { CardAnswer } from "./CardAnswer";
-import { FilterIcon } from "./icons/FilterIcon";
 import { PrePaymentModal } from "./PrePaymentModal";
 import { FilterModal } from "@ui_kit/Modal/FilterModal/FilterModal";
-import { ExportContactsModal } from "@ui_kit/Modal/ExportContactsModal";

 import { resultApi } from "@api/result";
 import { useResultStore } from "@root/results/store";
-import { setResults } from "@root/results/actions";
+import { ExportResults, setResults } from "@root/results/actions";

 import { quizApi } from "@api/quiz";
 import { setQuizes } from "@root/quizes/actions";
-import { useCurrentQuiz, useQuizes } from "@root/quizes/hooks";
+import { useCurrentQuiz } from "@root/quizes/hooks";
 import { useQuizStore } from "@root/quizes/store";
 import { questionApi } from "@api/question";
 import { setQuestions } from "@root/questions/actions";
 import { useUserStore } from "@root/user";

-import type { AxiosError } from "axios";
 import CustomPagination from "@ui_kit/CustomPagination";
 import SettingResults from "./SettingResults";
+import { DateDefinition, parseFilters, TimeDefinition } from "./helper";

 const itemsCities = [
  { label: "Муром (1)", value: "option1" },
@ -55,10 +43,6 @@ const itemsTime = [
 ];
 const itemsNews = ["Все заявки", "Новые"];

-const resetTime = () => {
-  return Math.round(Number(moment().format("X")) / 86400 - 1) * 86400 - 0;
-};
-
 export const QuizAnswersPage: FC = () => {
  const theme = useTheme();
  const isTablet = useMediaQuery(theme.breakpoints.down(1000));
@ -81,7 +65,6 @@ export const QuizAnswersPage: FC = () => {
    setFilterDate(value);
  };

-  const quizList = useQuizStore();
  const quiz = useCurrentQuiz();
  const { editQuizId } = useQuizStore();
  const { results, total_count } = useResultStore();
@ -111,54 +94,6 @@ export const QuizAnswersPage: FC = () => {
    setPrePaymentModalOpen(false);
  }, [userAccount]);

-  const DateDefinition = (result: string) => {
-    //определяем когда был получен результат - вчера, сегодня или число и месяц
-    let restime = new Date(result);
-    let timeCompleting = Date.parse(String(result));
-    const timeNow = Date.now();
-    let dayResult;
-    if (timeNow - timeCompleting < 86400000) {
-      dayResult = "Сегодня";
-    }
-    if (172800000 > timeNow - timeCompleting > 86400000) {
-      dayResult = "Вчера";
-    } else {
-      dayResult = restime.toLocaleDateString();
-    }
-    return dayResult;
-  };
-  const TimeDefinition = (result: string) => {
-    //достаём время
-    let timeResult = new Date(result).toLocaleTimeString().slice(0, -3);
-    return timeResult;
-  };
-  const parseFilters = () => {
-    const filters: any = {};
-
-    if (filterNew === "Новые") filters.new = true;
-    if (filterDate.length !== 0 && filterDate !== "За всё время") {
-      console.log(filterDate);
-
-      filters.to = new Date();
-
-      let resetedCurrentTime = Number(resetTime());
-      if (filterDate === "Сегодня")
-        filters.from = moment.unix(resetedCurrentTime)._d;
-      if (filterDate === "Вчера")
-        filters.from = moment.unix(resetedCurrentTime - 86400)._d;
-      if (filterDate === "Последние 7 дней")
-        filters.from = moment.unix(resetedCurrentTime - 604800)._d;
-      if (filterDate === "Последние 30 дней")
-        filters.from = moment.unix(resetedCurrentTime - 2592000)._d;
-      if (filterDate === "Этот месяц") {
-        let date = new Date(),
-          y = date.getFullYear(),
-          m = date.getMonth();
-        filters.from = new Date(y, m, 1);
-      }
-    }
-    return filters;
-  };
  const getData = async () => {
    if (editQuizId !== null) {
      const quizes = await quizApi.getList();
@ -167,7 +102,11 @@ export const QuizAnswersPage: FC = () => {
      const questions = await questionApi.getList({ quiz_id: editQuizId });
      setQuestions(questions);

-      const result = await resultApi.getList(editQuizId, 0, parseFilters());
+      const result = await resultApi.getList(
+        editQuizId,
+        0,
+        parseFilters(filterNew, filterDate),
+      );
      setResults(result);
    }
  };
@ -177,7 +116,7 @@ export const QuizAnswersPage: FC = () => {
    const result = await resultApi.getList(
      editQuizId,
      value - 1,
-      parseFilters(),
+      parseFilters(filterNew, filterDate),
    );
    setResults(result);
  };
@ -235,34 +174,20 @@ export const QuizAnswersPage: FC = () => {
            }}
          >
            <SettingResults
-              onclickExport={async () => {
-                try {
-                  const data = await resultApi.export(
-                    editQuizId,
-                    parseFilters(),
-                  );
-                  console.log(typeof data);
-
-                  const blob = data;
-                  const link = document.createElement("a");
-                  link.href = window.URL.createObjectURL(blob);
-                  link.download = `report_${new Date().getTime()}.xlsx`;
-                  link.click();
-                } catch (nativeError) {
-                  const error = nativeError as AxiosError;
-
-                  if (error.response?.statusText === "Payment Required") {
-                    setPrePaymentModalOpen(true);
-                  }
-                }
-              }}
+              onclickExport={() =>
+                ExportResults(
+                  filterNew,
+                  filterDate,
+                  () => setPrePaymentModalOpen(true),
+                  editQuizId,
+                )
+              }
              onclickUpdate={async () => {
                const result = await resultApi.getList(
                  editQuizId,
                  page - 1,
-                  parseFilters(),
+                  parseFilters(filterNew, filterDate),
                );
-                console.log(result);
                setResults(result);
              }}
              onclickFilterTablet={() => setFilterModalOpen(true)}
--- a/src/pages/QuizAnswersPage/helper.ts
+++ b/src/pages/QuizAnswersPage/helper.ts
@ -0,0 +1,55 @@
+import moment from "moment";
+
+const resetTime = () => {
+  return Math.round(Number(moment().format("X")) / 86400 - 1) * 86400 - 0;
+};
+
+export const parseFilters = (filterNew: string, filterDate: string) => {
+  const filters: any = {};
+
+  if (filterNew === "Новые") filters.new = true;
+  if (filterDate.length !== 0 && filterDate !== "За всё время") {
+    console.log(filterDate);
+
+    filters.to = new Date();
+
+    let resetedCurrentTime = Number(resetTime());
+    if (filterDate === "Сегодня")
+      filters.from = moment.unix(resetedCurrentTime)._d;
+    if (filterDate === "Вчера")
+      filters.from = moment.unix(resetedCurrentTime - 86400)._d;
+    if (filterDate === "Последние 7 дней")
+      filters.from = moment.unix(resetedCurrentTime - 604800)._d;
+    if (filterDate === "Последние 30 дней")
+      filters.from = moment.unix(resetedCurrentTime - 2592000)._d;
+    if (filterDate === "Этот месяц") {
+      let date = new Date(),
+        y = date.getFullYear(),
+        m = date.getMonth();
+      filters.from = new Date(y, m, 1);
+    }
+  }
+  return filters;
+};
+
+export const DateDefinition = (result: string) => {
+  //определяем когда был получен результат - вчера, сегодня или число и месяц
+  let restime = new Date(result);
+  let timeCompleting = Date.parse(String(result));
+  const timeNow = Date.now();
+  let dayResult;
+  if (timeNow - timeCompleting < 86400000) {
+    dayResult = "Сегодня";
+  }
+  if (172800000 > timeNow - timeCompleting > 86400000) {
+    dayResult = "Вчера";
+  } else {
+    dayResult = restime.toLocaleDateString();
+  }
+  return dayResult;
+};
+export const TimeDefinition = (result: string) => {
+  //достаём время
+  let timeResult = new Date(result).toLocaleTimeString().slice(0, -3);
+  return timeResult;
+};
--- a/src/stores/results/actions.ts
+++ b/src/stores/results/actions.ts
@ -6,6 +6,8 @@ import { resultApi } from "@api/result";
 import { devlog, getMessageFromFetchError } from "@frontend/kitui";
 import { enqueueSnackbar } from "notistack";
 import { useQuizStore } from "@root/quizes/store";
+import { AxiosError } from "axios";
+import { parseFilters } from "../../pages/QuizAnswersPage/helper";

 const REQUEST_DEBOUNCE = 200;
 const requestQueue = new RequestQueue();
@ -81,34 +83,31 @@ export const obsolescenceResult = async (
    setResults(resultList);
  });

-export const answerResultListExport = async (
-  editQuizId: number,
-  toDate: string,
-  fromDate: string,
+export const ExportResults = async (
+  filterNew: string,
+  filterDate: string,
+  openPrePaymentModal: () => void,
+  editQuizId: number | null,
 ) => {
-  const resAnswer = await resultApi.export(editQuizId, toDate, fromDate);
-  const download = function () {
-    // Creating a Blob for having a csv file format
-    // and passing the data with type
-    const blob = new Blob([resAnswer], { type: "application/json" });
+  try {
+    const data = await resultApi.export(
+      editQuizId,
+      parseFilters(filterNew, filterDate),
+    );
+    console.log(typeof data);

-    // Creating an object for downloading url
-    const url = window.URL.createObjectURL(blob);
+    const blob = data;
+    const link = document.createElement("a");
+    link.href = window.URL.createObjectURL(blob);
+    link.download = `report_${new Date().getTime()}.xlsx`;
+    link.click();
+  } catch (nativeError) {
+    const error = nativeError as AxiosError;

-    // Creating an anchor(a) tag of HTML
-    const a = document.createElement("a");
-
-    // Passing the blob downloading url
-    a.setAttribute("href", url);
-
-    // Setting the anchor tag attribute for downloading
-    // and passing the download file name
-    a.setAttribute("download", "download.csv");
-
-    // Performing a download with click
-    a.click();
-  };
-  download();
+    if (error.response?.statusText === "Payment Required") {
+      openPrePaymentModal();
+    }
+  }
 };

 function setProducedState<A extends string | { type: unknown }>(
--- a/src/ui_kit/Modal/ExportContactsModal.tsx
+++ b/src/ui_kit/Modal/ExportContactsModal.tsx
@ -188,9 +188,9 @@ export const ExportContactsModal: FC<Iprops> = ({
            </Button>
            <Button
              variant="contained"
-              onClick={() =>
-                answerResultListExport(editQuizId, toDate, fromDate)
-              }
+              // onClick={() =>
+              //   answerResultListExport(editQuizId, toDate, fromDate)
+              // }
              sx={{
                width: isMobile ? "100%" : "130px",
                height: "48px",