вывод таблицы

src/api/promocode/requests.ts

@@ -113,7 +113,7 @@ const getPromocodeStatistics = async (id: string, from: number, to: number,) =>
       method: "POST",
       useToken: false,
     });
-
+console.log(promocodeStatisticsResponse)
     return promocodeStatisticsResponse;
   } catch (nativeError) {
     const [error] = parseAxiosError(nativeError);

src/pages/dashboard/Content/PromocodeManagement/DeleteModal.tsx

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Modal from '@mui/material/Modal';
+import Button from '@mui/material/Button';
+import { Typography } from '@mui/material';
+
+const style = {
+    position: 'absolute' as 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    width: 400,
+    bgcolor: '#c1c1c1',
+    border: '2px solid #000',
+    boxShadow: 24,
+    pt: 2,
+    px: 4,
+    pb: 3,
+};
+
+interface Props {
+    id: string;
+    setModal: (id: string) => void;
+    deletePromocode: (id: string) => Promise<void>;
+}
+
+export default function ({
+    id,
+    setModal,
+    deletePromocode
+}: Props) {
+    return (
+        <Modal
+            open={Boolean(id)}
+            onClose={() => setModal("")}
+        >
+            <Box sx={{ ...style, width: 400 }}>
+                <Typography
+                    variant='h5'
+                    textAlign="center"
+                >Точно удалить промокод?</Typography>
+                <Box
+                sx={{
+                    display: "flex",
+                    justifyContent: "space-evenly",
+                    mt: "15px"
+                }}
+                >
+                    <Button
+                        onClick={() => { deletePromocode(id); setModal("") }}
+                    >Да</Button>
+                    <Button
+                        onClick={() => setModal("")}
+                    >Нет</Button>
+                </Box>
+            </Box>
+        </Modal>
+    );
+}

src/pages/dashboard/Content/PromocodeManagement/StatisticsModal.tsx

@@ -1,4 +1,4 @@
-import {useEffect, useState} from "react";
+import { useEffect, useState } from "react";
 import {
   Box,
   Button,
@@ -16,7 +16,7 @@ import { fadeIn } from "@root/utils/style/keyframes";
 import type { GridColDef } from "@mui/x-data-grid";
 import type { PromocodeStatistics } from "@root/model/promocodes";
 import moment from "moment";
-import {promocodeApi} from "@root/api/promocode/requests";
+import { promocodeApi } from "@root/api/promocode/requests";
 
 type StatisticsModalProps = {
   id: string;
@@ -26,7 +26,7 @@ type StatisticsModalProps = {
   setTo: (date: number) => void;
   setFrom: (date: number) => void;
   // promocodeStatistics: PromocodeStatistics[] | null | undefined;
- // promocodeStatistics: any;
+  // promocodeStatistics: any;
 };
 
 const COLUMNS: GridColDef<PromocodeStatistics, string>[] = [
@@ -53,6 +53,11 @@ const COLUMNS: GridColDef<PromocodeStatistics, string>[] = [
   },
 ];
 
+type ROW = {
+  link: string,
+  useCount: number
+}
+
 export const StatisticsModal = ({
   id,
   setId,
@@ -66,23 +71,43 @@ export const StatisticsModal = ({
   const [endDate, setEndDate] = useState<Date>(new Date());
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down(550));
-    const [general, setGeneral] = useState({});
-    // const formatTo = to === null ? 0 : moment(to).unix()
-    // const formatFrom = from === null ? 0 : moment(from).unix()
-    console.log(startDate)
-    // useEffect(() => {
-    //     (async () => {
-    //         const gottenGeneral = await promocodeStatistics(id, startDate, endDate)
-    //         setGeneral(gottenGeneral[0])
-    //     })()
-    // }, [to, from]);
+  const [general, setGeneral] = useState({});
+  const [rows, setRows] = useState([]);
+  const getParseData = async () => {
+    const promocodeStatistics = await promocodeApi.getPromocodeStatistics(id, moment(startDate).unix(), moment(endDate).unix())
+    const rows = [] as ROW[]
+    //@ts-ignore
+    for (const [key, value] of Object.entries(promocodeStatistics.usageMap)) {
+      rows.push({
+        link: key,
+      //@ts-ignore
+        useCount: value,
+        id:rows.length
+      })
+    }
+    setGeneral(promocodeStatistics)
+    //@ts-ignore
+    setRows(rows)
+  }
+  useEffect(() => {
+    if (id.length > 0) getParseData()
+  }, [id])
+  // const formatTo = to === null ? 0 : moment(to).unix()
+  // const formatFrom = from === null ? 0 : moment(from).unix()
+  console.log(general)
+  // useEffect(() => {
+  //     (async () => {
+  //         const gottenGeneral = await promocodeStatistics(id, startDate, endDate)
+  //         setGeneral(gottenGeneral[0])
+  //     })()
+  // }, [to, from]);
   return (
     <Modal
       open={Boolean(id)}
       onClose={() => {
-          setId("")
-          setStartDate(new Date())
-          setEndDate(new Date())
+        setId("")
+        setStartDate(new Date())
+        setEndDate(new Date())
       }}
       sx={{ "& > .MuiBox-root": { outline: "none" } }}
     >
@@ -120,16 +145,13 @@ export const StatisticsModal = ({
           >
             <Button
               sx={{ maxWidth: "100px" }}
-              // onClick={() => }
+            // onClick={() => }
             >
               Создать короткую ссылку
             </Button>
             <Button
               sx={{ maxWidth: "100px" }}
-              onClick={async () =>{
-                  const promocodeStatistics = promocodeApi.getPromocodeStatistics(id, moment(startDate).unix(), moment(endDate).unix())
-                  setGeneral(promocodeStatistics)
-              } }
+              onClick={getParseData}
             >
               Обновить статистику
             </Button>
@@ -200,7 +222,7 @@ export const StatisticsModal = ({
         </Box>
         <DataGrid
           disableSelectionOnClick={true}
-          rows={[]}
+          rows={rows}
           columns={COLUMNS}
           sx={{
             marginTop: "30px",

src/pages/dashboard/Content/PromocodeManagement/index.tsx

@@ -8,9 +8,14 @@ import { fadeIn } from "@root/utils/style/keyframes";
 import { CreatePromocodeForm } from "./CreatePromocodeForm";
 import { usePromocodeGridColDef } from "./usePromocodeGridColDef";
 import { StatisticsModal } from "./StatisticsModal";
+import DeleteModal from "./DeleteModal";
 
 export const PromocodeManagement = () => {
   const theme = useTheme();
+  
+  const [deleteModal, setDeleteModal] = useState<string>("")
+  const deleteModalHC = (id:string) => setDeleteModal(id)
+
   const [showStatisticsModalId, setShowStatisticsModalId] =
     useState<string>("");
   const [page, setPage] = useState<number>(0);
@@ -28,7 +33,7 @@ export const PromocodeManagement = () => {
   } = usePromocodes(page, pageSize, showStatisticsModalId, to, from);
   const columns = usePromocodeGridColDef(
     setShowStatisticsModalId,
-    deletePromocode
+    deleteModalHC
   );
   console.log(showStatisticsModalId)
   if (error) return <Typography>Ошибка загрузки промокодов</Typography>;
@@ -97,6 +102,7 @@ export const PromocodeManagement = () => {
         from={from}
         setFrom={setFrom}
       />
+      <DeleteModal id={deleteModal} setModal={setDeleteModal} deletePromocode={deletePromocode}/>
     </LocalizationProvider>
   );
 };

src/pages/dashboard/Content/PromocodeManagement/usePromocodeGridColDef.tsx

@@ -1,7 +1,7 @@
 import { IconButton } from "@mui/material";
 import { GridColDef } from "@mui/x-data-grid";
 import { Promocode } from "@root/model/promocodes";
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
 
 import { BarChart, Delete } from "@mui/icons-material";
 import {promocodeApi} from "@root/api/promocode/requests";