From 3de2c035c6857dc94955a62926b28b313ba45479 Mon Sep 17 00:00:00 2001 From: Tamara Date: Fri, 9 Feb 2024 22:05:40 +0300 Subject: [PATCH] =?UTF-8?q?=D0=BF=D0=B5=D1=80=D0=B5=D0=BF=D0=B8=D1=81?= =?UTF-8?q?=D0=B0=D0=BD=D1=8B=20=D0=B7=D0=B0=D0=BF=D1=80=D0=BE=D1=81=D1=8B?= =?UTF-8?q?=20=D0=B8=20=D1=81=D0=BF=D0=BE=D1=81=D0=BE=D0=B1=D1=8B=20=D0=B8?= =?UTF-8?q?=D0=B7=D0=B2=D0=BB=D0=B5=D1=87=D0=B5=D0=BD=D0=B8=D1=8F=20=D0=B8?= =?UTF-8?q?=D0=BD=D1=84=D0=BE=D1=80=D0=BC=D0=B0=D1=86=D0=B8=D0=B8=20(?= =?UTF-8?q?=D1=81=D1=82=D1=80=D0=B0=D0=BD=D0=B8=D1=86=D0=B0=20=D1=80=D0=B5?= =?UTF-8?q?=D0=B7=D1=83=D0=BB=D1=8C=D1=82=D0=B0=D1=82=D0=BE=D0=B2)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/result.ts | 89 ++++++++----------- src/model/result/result.ts | 4 +- src/pages/QuizAnswersPage/CardAnswer.tsx | 48 +++++----- src/pages/QuizAnswersPage/QuizAnswersPage.tsx | 48 +++++----- src/pages/createQuize/MyQuizzesFull.tsx | 2 +- src/stores/results/actions.ts | 34 +++++++ src/stores/results/hooks.ts | 11 ++- src/stores/results/store.ts | 51 +++++------ src/ui_kit/Header/HeaderFull.tsx | 12 +-- 9 files changed, 163 insertions(+), 136 deletions(-) diff --git a/src/api/result.ts b/src/api/result.ts index d4c9c121..67efaa9e 100644 --- a/src/api/result.ts +++ b/src/api/result.ts @@ -1,38 +1,27 @@ import { makeRequest } from "@frontend/kitui"; -import { DeleteQuizRequest, DeleteQuizResponse } from "@model/quiz/delete"; -export const getResultsList = async (quizId, body?: any) => { - try { - const response = await makeRequest({ - url: process.env.REACT_APP_DOMAIN + `/squiz/results/getResults/${quizId}`, - method: "POST", - body: { page: 0, limit: 10, ...body }, - }); - return response; - } catch (e) { - console.log("ощибка", e); - } -}; +async function getResultList(quizId, body?: any) { + return makeRequest({ + url: process.env.REACT_APP_DOMAIN + `/squiz/results/getResults/${quizId}`, + method: "POST", + body: { page: 0, limit: 10, ...body }, + }); +} -export const deleteResult = async (resultId: number) => { - try { - const response = await makeRequest({ - url: process.env.REACT_APP_DOMAIN + `/squiz/results/delete/${resultId}`, - body: {}, - method: "DELETE", - }); - return response; - } catch (e) { - console.log("ошибка", e); - } -}; +function deleteResult(resultId: number) { + return makeRequest({ + url: process.env.REACT_APP_DOMAIN + `/squiz/results/delete/${resultId}`, + body: {}, + method: "DELETE", + }); +} export const obsolescenceResult = async (idResultArray: string[]) => { try { const response = await makeRequest({ url: process.env.REACT_APP_DOMAIN + `/squiz/result/seen`, body: { - "answers": idResultArray + answers: idResultArray, }, method: "PATCH", }); @@ -42,30 +31,28 @@ export const obsolescenceResult = async (idResultArray: string[]) => { } }; -export const getAnswerResultList = async (resultId: number) => { - try { - const response = await makeRequest({ - url: process.env.REACT_APP_DOMAIN + `/squiz/result/${resultId}`, - method: "GET" - }); - return response; - } catch (e) { - console.log("ошибка", e); - } -}; +function getAnswerResultList(resultId: number) { + return makeRequest({ + url: process.env.REACT_APP_DOMAIN + `/squiz/result/${resultId}`, + method: "GET", + }); +} -export const AnswerResultListEx = async (quizId: number) => { - try { - const response = await makeRequest({ - url: process.env.REACT_APP_DOMAIN + `/squiz/results/${quizId}/export`, - method: "POST", - body: { - to: new Date(), - from: new Date("2024-01-24"), - new: true} - }); - return response; - } catch (e) { - console.log("ошибка", e); - } +function AnswerResultListEx(quizId: number) { + return makeRequest({ + url: process.env.REACT_APP_DOMAIN + `/squiz/results/${quizId}/export`, + method: "POST", + body: { + to: new Date(), + from: new Date("2024-01-24"), + new: true, + }, + }); +} + +export const resultApi = { + getList: getResultList, + delete: deleteResult, + getAnswerList: getAnswerResultList, + export: AnswerResultListEx, }; diff --git a/src/model/result/result.ts b/src/model/result/result.ts index 2092eab7..3f335462 100644 --- a/src/model/result/result.ts +++ b/src/model/result/result.ts @@ -11,7 +11,7 @@ export interface ResultContent { name?: string; email?: string; phone?: string; - adress?: string; + address?: string; telegram?: string; wechat?: string; viber?: string; @@ -25,7 +25,7 @@ export const defaultResultContent: ResultContent = { name: "", email: "", phone: "", - adress: "", + address: "", telegram: "", wechat: "", viber: "", diff --git a/src/pages/QuizAnswersPage/CardAnswer.tsx b/src/pages/QuizAnswersPage/CardAnswer.tsx index 1c6ed938..138a8cde 100644 --- a/src/pages/QuizAnswersPage/CardAnswer.tsx +++ b/src/pages/QuizAnswersPage/CardAnswer.tsx @@ -17,9 +17,9 @@ import { DeleteIcon } from "@icons/questionsPage/deleteIcon"; import homeImg from "./images/home.png"; import videoFrame from "./images/videoFrame.png"; import { EyeIcon } from "./icons/EyeIcon"; -import { DeleteModal } from "./DeleteModal"; -import {deleteResult, getAnswerResultList, obsolescenceResult} from "@api/result"; -import {useObsolescenceIdResult} from "@root/results/store"; +import { deleteResult } from "@root/results/actions"; +import { resultApi } from "@api/result"; + interface Props { isNew: boolean; idResult: string; @@ -29,7 +29,7 @@ interface Props { name?: string; phone?: string; email?: string; - onLossNew: (id:string) => void + onLossNew: (id: string) => void; } export const CardAnswer = ({ @@ -40,18 +40,19 @@ export const CardAnswer = ({ idResult, timeResult, dayResult, - onLossNew + onLossNew, }: Props) => { const [isOpen, setIsOpen] = useState(false); const [openDelete, setOpenDelete] = useState(false); const theme = useTheme(); const isTablet = useMediaQuery(theme.breakpoints.down(1000)); + const [resultsAnswer, setResultsAnswer] = useState([]); - return ( + return ( { - if (isNew) onLossNew(idResult) - }} + onClick={() => { + if (isNew) onLossNew(idResult); + }} sx={{ borderRadius: "12px", maxWidth: isTablet ? "450px" : "auto", @@ -113,18 +114,25 @@ export const CardAnswer = ({ > {idResult} - { + { setIsOpen(!isOpen); - getAnswerResultList(Number(idResult)) - }}> - + if (isOpen) { + let resAnswer = await resultApi.getAnswerList( + Number(idResult), + ); + setResultsAnswer(resAnswer); + console.log("тут хранятся ответы", resultsAnswer); + } + }} + > + - { deleteResult(Number(idResult)); - setOpenDelete(false) + setOpenDelete(false); }} > Подтвердить diff --git a/src/pages/QuizAnswersPage/QuizAnswersPage.tsx b/src/pages/QuizAnswersPage/QuizAnswersPage.tsx index 7a1b12a4..74f7142b 100644 --- a/src/pages/QuizAnswersPage/QuizAnswersPage.tsx +++ b/src/pages/QuizAnswersPage/QuizAnswersPage.tsx @@ -19,7 +19,12 @@ import { FilterIcon } from "./icons/FilterIcon"; import { FilterModal } from "@ui_kit/Modal/FilterModal/FilterModal"; import { ExportContactsModal } from "@ui_kit/Modal/ExportContactsModal"; -import { AnswerResultListEx, getResultsList, obsolescenceResult } from "@api/result"; +import { + AnswerResultListEx, + getResultsList, + obsolescenceResult, + resultApi, +} from "@api/result"; import { useObsolescenceIdResult, useResultStore } from "@root/results/store"; import { setResults } from "@root/results/actions"; @@ -33,24 +38,22 @@ const options = [ { label: "Москва (1)", value: "option2" }, ]; -let lossDebouncer: null | ReturnType = null -let lossId: string[] = [] as string[] +let lossDebouncer: null | ReturnType = null; +let lossId: string[] = [] as string[]; const onLossNew = (id: string) => { //Если в массиве ещё нет такого id - добавляем - if (!lossId.includes(id)) lossId.push(id) + if (!lossId.includes(id)) lossId.push(id); //Если таймер есть - сбрасываем if (typeof lossDebouncer === "number") clearTimeout(lossDebouncer); //Назначем новый таймер - lossDebouncer = setTimeout(async() => { + lossDebouncer = setTimeout(async () => { //стреляем на лишение новизны - await obsolescenceResult(lossId) + await obsolescenceResult(lossId); //сбрасываем массив - lossId = [] - }, 3000) -} - - + lossId = []; + }, 3000); +}; export const QuizAnswersPage: FC = () => { const theme = useTheme(); @@ -58,8 +61,9 @@ export const QuizAnswersPage: FC = () => { const isMobile = useMediaQuery(theme.breakpoints.down(600)); const [filterModalOpen, setFilterModalOpen] = useState(false); - const [exportContactsModalOpen, setExportContactsModalOpen] = useState(false); - const [filterNew, setFilterNew] = useState("За всё время") + const [exportContactsModalOpen, setExportContactsModalOpen] = + useState(false); + const [filterNew, setFilterNew] = useState("За всё время"); const quizList = useQuizStore(); const quiz = useCurrentQuiz(); @@ -74,12 +78,8 @@ export const QuizAnswersPage: FC = () => { const quizes = await quizApi.getList(); setQuizes(quizes); - const result = await getResultsList(editQuizId); - console.log("Это данные с сервера", result); + const result = await resultApi.getList(editQuizId); setResults(result); - - const resAnswer = await AnswerResultListEx(editQuizId) - console.log("щтветы респондентов на экспорт в юз эффекте", resAnswer) } }; getData(); @@ -114,7 +114,7 @@ export const QuizAnswersPage: FC = () => { return ( - + { { //setExportContactsModalOpen(true) - const resAnswer = AnswerResultListEx(quizList.editQuizId) - console.log("ответы респондентов на экспорт по клику", resAnswer) + // const resAnswer = AnswerResultListEx(quizList.editQuizId) + // console.log("ответы респондентов на экспорт по клику", resAnswer) }} sx={{ width: "44px", @@ -176,8 +176,10 @@ export const QuizAnswersPage: FC = () => { borderRadius: "8px", border: "1px solid #7E2AEA", }} - onClick={() => { - getResultsList(quizList.editQuizId); + onClick={async () => { + const result = await resultApi.getList(editQuizId); + console.log(result); + setResults(result); }} > diff --git a/src/pages/createQuize/MyQuizzesFull.tsx b/src/pages/createQuize/MyQuizzesFull.tsx index 35fd73ec..23e7956a 100644 --- a/src/pages/createQuize/MyQuizzesFull.tsx +++ b/src/pages/createQuize/MyQuizzesFull.tsx @@ -34,7 +34,7 @@ export default function MyQuizzesFull({ return ( <> - + {quizes.length === 0 ? ( ) : ( diff --git a/src/stores/results/actions.ts b/src/stores/results/actions.ts index 2ce7408d..dc9ed6ea 100644 --- a/src/stores/results/actions.ts +++ b/src/stores/results/actions.ts @@ -1,6 +1,14 @@ import { produce } from "immer"; import { ResultStore, useResultStore } from "@root/results/store"; import { RawResult, rawResultToResult } from "@model/result/result"; +import { RequestQueue } from "@utils/requestQueue"; +import { resultApi } from "@api/result"; +import { devlog, getMessageFromFetchError } from "@frontend/kitui"; +import { enqueueSnackbar } from "notistack"; + +const REQUEST_DEBOUNCE = 200; +const requestQueue = new RequestQueue(); +let requestTimeoutId: ReturnType; export const setResults = (results: RawResult[] | null) => setProducedState( @@ -17,6 +25,32 @@ export const setResults = (results: RawResult[] | null) => }, ); +const removeResult = (resultId: string) => + setProducedState((state) => { + const index = state.results.findIndex((r) => r.id === resultId); + if (index === -1) return; + + state.results.splice(index, 1); + }); + +export const deleteResult = async (resultId: number) => + requestQueue.enqueue(async () => { + const result = useResultStore + .getState() + .results.find((r) => r.id === resultId); + if (!result) return; + + try { + await resultApi.delete(Number(result.id)); + removeResult(resultId); + } catch (error) { + devlog("Error delete result", error); + + const message = getMessageFromFetchError(error) ?? ""; + enqueueSnackbar(`Не удалось удалить результат. ${message}`); + } + }); + function setProducedState( recipe: (state: ResultStore) => void, action?: A, diff --git a/src/stores/results/hooks.ts b/src/stores/results/hooks.ts index 89cbfa21..c2cbd4b6 100644 --- a/src/stores/results/hooks.ts +++ b/src/stores/results/hooks.ts @@ -2,13 +2,13 @@ import useSWR from "swr"; import { isAxiosError } from "axios"; import { devlog } from "@frontend/kitui"; import { enqueueSnackbar } from "notistack"; -import { getResultsList } from "@api/result"; +import { resultApi } from "@api/result"; import { useResultStore } from "@root/results/store"; export function useResults(quizId: string) { const { isLoading, error, isValidating } = useSWR( "results", - () => getResultsList(quizId), + () => resultApi.getList(quizId), { // onSuccess: setResults, onError: (error: unknown) => { @@ -25,3 +25,10 @@ export function useResults(quizId: string) { return { results, isLoading, error, isValidating }; } + +// export function useAnswerList() { +// const { isLoading, error, isValidating } = useSWR( +// "answers", +// () => resultApi.getAnswerList() +// ) +// } diff --git a/src/stores/results/store.ts b/src/stores/results/store.ts index d77f1053..920dfe63 100644 --- a/src/stores/results/store.ts +++ b/src/stores/results/store.ts @@ -34,36 +34,25 @@ export const useResultStore = create()( ); //сохранение id результата в массив для отправки на сервер и снятия пометки new с карточки -export const useObsolescenceIdResult = create()( - persist( - (set, get) => ({ - idResultArray: [], - addIdResult: (idResult:number) => { - const state = get()["idResultArray"] || []; - console.log(state) - const newState = [ - ...state, - idResult - ]; - set({idResultArray: newState}) - }, - clearIdResultArray: () => { - const state = get()["idResultArray"] || {}; +export const useObsolescenceIdResult = create()( + persist( + (set, get) => ({ + idResultArray: [], + addIdResult: (idResult: number) => { + const state = get()["idResultArray"] || []; + console.log(state); + const newState = [...state, idResult]; + set({ idResultArray: newState }); + }, + clearIdResultArray: () => { + const state = get()["idResultArray"] || {}; - const newState = [] - set({idResultArray:newState}); - } - }), - { - name: "idResultArr", - } - ) + const newState = []; + set({ idResultArray: newState }); + }, + }), + { + name: "idResultArr", + }, + ), ); - - - - - - - - diff --git a/src/ui_kit/Header/HeaderFull.tsx b/src/ui_kit/Header/HeaderFull.tsx index df81a3a8..8a18d827 100644 --- a/src/ui_kit/Header/HeaderFull.tsx +++ b/src/ui_kit/Header/HeaderFull.tsx @@ -20,7 +20,7 @@ import { LogoutButton } from "@ui_kit/LogoutButton"; import { ToTariffsButton } from "@ui_kit/Toolbars/ToTariffsButton"; import ArrowLeft from "@icons/questionsPage/arrowLeft"; -export default function HeaderFull({isRequest}: boolean) { +export default function HeaderFull({ isRequest }: boolean) { const theme = useTheme(); const navigate = useNavigate(); const isTablet = useMediaQuery(theme.breakpoints.down(1000)); @@ -58,11 +58,11 @@ export default function HeaderFull({isRequest}: boolean) { - {isRequest && - ( navigate("/list")}> - - ) - } + {isRequest && ( + navigate("/list")}> + + + )}