запросы статистики промокодов(сырые, нужны доработки)

This commit is contained in:
Tamara 2024-03-29 23:27:07 +03:00
parent 7daa2f7e99
commit 153b518914
5 changed files with 87 additions and 43 deletions

@ -98,14 +98,19 @@ const deletePromocode = async (id: string): Promise<void> => {
}
};
const getPromocodeStatistics = async (id: string) => {
const getPromocodeStatistics = async (id: string, from: number, to: number,) => {
try {
const promocodeStatisticsResponse = await makeRequest<
unknown,
PromocodeStatistics[]
>({
url: baseUrl + `/getStatistics/${id}`,
method: "GET",
url: baseUrl + `/stats`,
body: {
"id": id,
"from": from,
"to": to
},
method: "POST",
useToken: false,
});

@ -11,7 +11,9 @@ import type {
export function usePromocodes(
page: number,
pageSize: number,
promocodeId: string
promocodeId: string,
to: number,
from: number,
) {
const promocodesCountRef = useRef<number>(0);
const swrResponse = useSwr(
@ -87,33 +89,33 @@ export function usePromocodes(
[page, pageSize]
);
const promocodeStatistics = useSwr(
["promocodeStatistics", promocodeId],
async ([_, id]) => {
if (!id) {
return null;
}
const promocodeStatisticsResponse =
await promocodeApi.getPromocodeStatistics(id);
return promocodeStatisticsResponse;
},
{
onError(err) {
console.log("Error fetching promocode statistics", err);
enqueueSnackbar(err.message, { variant: "error" });
},
focusThrottleInterval: 60e3,
keepPreviousData: true,
}
);
// const promocodeStatistics = useSwr(
// ["promocodeStatistics", promocodeId, from, to],
// async ([_, id, from, to]) => {
// if (!id) {
// return null;
// }
//
// const promocodeStatisticsResponse =
// await promocodeApi.getPromocodeStatistics(id, from, to);
//
// return promocodeStatisticsResponse;
// },
// {
// onError(err) {
// console.log("Error fetching promocode statistics", err);
// enqueueSnackbar(err.message, { variant: "error" });
// },
// focusThrottleInterval: 60e3,
// keepPreviousData: true,
// }
// );
return {
...swrResponse,
createPromocode,
deletePromocode,
promocodeStatistics,
//promocodeStatistics,
promocodesCount: promocodesCountRef.current,
};
}

@ -1,4 +1,4 @@
import { useState } from "react";
import {useEffect, useState} from "react";
import {
Box,
Button,
@ -9,18 +9,24 @@ import {
useMediaQuery,
} from "@mui/material";
import { DataGrid, GridLoadingOverlay, GridToolbar } from "@mui/x-data-grid";
import { DesktopDatePicker } from "@mui/x-date-pickers/DesktopDatePicker";
import { DatePicker } from "@mui/x-date-pickers/DatePicker";
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";
type StatisticsModalProps = {
id: string;
to: number;
from: number;
setId: (id: string) => void;
setTo: (date: number) => void;
setFrom: (date: number) => void;
// promocodeStatistics: PromocodeStatistics[] | null | undefined;
promocodeStatistics: any;
// promocodeStatistics: any;
};
const COLUMNS: GridColDef<PromocodeStatistics, string>[] = [
@ -50,17 +56,34 @@ const COLUMNS: GridColDef<PromocodeStatistics, string>[] = [
export const StatisticsModal = ({
id,
setId,
promocodeStatistics,
setFrom,
from,
to,
setTo,
//promocodeStatistics,
}: StatisticsModalProps) => {
const [startDate, setStartDate] = useState<Date>(new Date());
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]);
return (
<Modal
open={Boolean(id)}
onClose={() => setId("")}
onClose={() => {
setId("")
setStartDate(new Date())
setEndDate(new Date())
}}
sx={{ "& > .MuiBox-root": { outline: "none" } }}
>
<Box
@ -103,7 +126,10 @@ export const StatisticsModal = ({
</Button>
<Button
sx={{ maxWidth: "100px" }}
// onClick={() => }
onClick={async () =>{
const promocodeStatistics = promocodeApi.getPromocodeStatistics(id, moment(startDate).unix(), moment(endDate).unix())
setGeneral(promocodeStatistics)
} }
>
Обновить статистику
</Button>
@ -113,7 +139,7 @@ export const StatisticsModal = ({
<Typography sx={{ minWidth: "20px", color: "#FFFFFF" }}>
от
</Typography>
<DesktopDatePicker
<DatePicker
inputFormat="DD/MM/YYYY"
value={startDate}
onChange={(date) => date && setStartDate(date)}
@ -147,7 +173,7 @@ export const StatisticsModal = ({
<Typography sx={{ minWidth: "20px", color: "#FFFFFF" }}>
до
</Typography>
<DesktopDatePicker
<DatePicker
inputFormat="DD/MM/YYYY"
value={endDate}
onChange={(date) => date && setEndDate(date)}
@ -174,7 +200,7 @@ export const StatisticsModal = ({
</Box>
<DataGrid
disableSelectionOnClick={true}
rows={promocodeStatistics ?? []}
rows={[]}
columns={COLUMNS}
sx={{
marginTop: "30px",

@ -14,21 +14,23 @@ export const PromocodeManagement = () => {
const [showStatisticsModalId, setShowStatisticsModalId] =
useState<string>("");
const [page, setPage] = useState<number>(0);
const [to, setTo] = useState(0);
const [from, setFrom] = useState(0);
const [pageSize, setPageSize] = useState<number>(10);
const {
data,
error,
isValidating,
promocodesCount,
promocodeStatistics,
//promocodeStatistics,
deletePromocode,
createPromocode,
} = usePromocodes(page, pageSize, showStatisticsModalId);
} = usePromocodes(page, pageSize, showStatisticsModalId, to, from);
const columns = usePromocodeGridColDef(
setShowStatisticsModalId,
deletePromocode
);
console.log(showStatisticsModalId)
if (error) return <Typography>Ошибка загрузки промокодов</Typography>;
return (
@ -89,7 +91,11 @@ export const PromocodeManagement = () => {
<StatisticsModal
id={showStatisticsModalId}
setId={setShowStatisticsModalId}
promocodeStatistics={promocodeStatistics}
//promocodeStatistics={promocodeStatistics}
to={to}
setTo={setTo}
from={from}
setFrom={setFrom}
/>
</LocalizationProvider>
);

@ -4,12 +4,14 @@ import { Promocode } from "@root/model/promocodes";
import { useMemo } from "react";
import { BarChart, Delete } from "@mui/icons-material";
import {promocodeApi} from "@root/api/promocode/requests";
export function usePromocodeGridColDef(
setStatistics: (id: string) => void,
deletePromocode: (id: string) => void
) {
return useMemo<GridColDef<Promocode, string | number, string>[]>(
const validity = (value:string|number) => {if(value===0){return "неоганичен"}else {return new Date(value).toLocaleString()}}
return useMemo<GridColDef<Promocode, string | number, string >[]>(
() => [
{
field: "id",
@ -46,7 +48,7 @@ export function usePromocodeGridColDef(
width: 160,
sortable: false,
valueGetter: ({ row }) => row.dueTo * 1000,
valueFormatter: ({ value }) => new Date(value).toLocaleString(),
valueFormatter: ({ value }) => `${validity(value)}`,
},
{
field: "settings",
@ -55,7 +57,10 @@ export function usePromocodeGridColDef(
sortable: false,
renderCell: (params) => {
return (
<IconButton onClick={() => setStatistics(params.row.id)}>
<IconButton onClick={() => {
setStatistics(params.row.id,)
promocodeApi.getPromocodeStatistics(params.row.id, 0, 0)
}}>
<BarChart />
</IconButton>
);