From 1e8a50077b6dc4824c6525742f43463016207129 Mon Sep 17 00:00:00 2001 From: Nastya Date: Mon, 2 Jun 2025 00:36:55 +0300 Subject: [PATCH] =?UTF-8?q?=D1=80=D0=B5=D0=B0=D0=BA=D1=82=D0=B8=D0=B2?= =?UTF-8?q?=D0=BD=D0=BE=D0=B5=20=D1=83=D0=B4=D0=B0=D0=BB=D0=B5=D0=BD=D0=B8?= =?UTF-8?q?=D0=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/PersonalizationAI/AuditoryLink.tsx | 26 +++++++---- src/pages/PersonalizationAI/AuditoryList.tsx | 6 +-- .../PersonalizationAI/PersonalizationAI.tsx | 46 +++++++++++++++++-- 3 files changed, 61 insertions(+), 17 deletions(-) diff --git a/src/pages/PersonalizationAI/AuditoryLink.tsx b/src/pages/PersonalizationAI/AuditoryLink.tsx index 57cf9fd0..e0cbe976 100644 --- a/src/pages/PersonalizationAI/AuditoryLink.tsx +++ b/src/pages/PersonalizationAI/AuditoryLink.tsx @@ -2,17 +2,16 @@ import { AuditoryItem } from "@/api/auditory"; import CopyIcon from "@/assets/icons/CopyIcon"; import Trash from "@/assets/icons/trash"; import { InfoPopover } from "@/ui_kit/InfoPopover"; -import TooltipClickInfo from "@/ui_kit/Toolbars/TooltipClickInfo"; import { useDomainDefine } from "@/utils/hooks/useDomainDefine"; import { IconButton, ListItem, Typography, useTheme } from "@mui/material"; interface AuditoryLinkProps { item: AuditoryItem; index: number; - deleteModal: (id:number) => void + onDelete: (id: number) => void; } -export const AuditoryLink = ({ item, index, deleteModal }: AuditoryLinkProps) => { +export const AuditoryLink = ({ item, index, onDelete }: AuditoryLinkProps) => { const theme = useTheme(); const { isTestServer } = useDomainDefine(); @@ -20,6 +19,10 @@ export const AuditoryLink = ({ item, index, deleteModal }: AuditoryLinkProps) => navigator.clipboard.writeText(text); }; + const handleDelete = () => { + onDelete(item.id); + }; + const linkText = `${isTestServer ? "https://s.hbpn.link/" : "https://hbpn.link/"}?_paud=${item.id}`; return ( @@ -39,13 +42,18 @@ export const AuditoryLink = ({ item, index, deleteModal }: AuditoryLinkProps) => display: 'flex', alignItems: 'center', gap: '12px', - width: "70px", + width: "60px", justifyContent: "space-between", }, }} secondaryAction={ <> - deleteModal(item.id)} edge="end" aria-label="info" sx={{ color: theme.palette.brightPurple.main, p: 0, width: 18, height: 18 }}> + }} /> - + - handleCopy(linkText)} > diff --git a/src/pages/PersonalizationAI/AuditoryList.tsx b/src/pages/PersonalizationAI/AuditoryList.tsx index 91410ab4..667904d5 100644 --- a/src/pages/PersonalizationAI/AuditoryList.tsx +++ b/src/pages/PersonalizationAI/AuditoryList.tsx @@ -6,13 +6,11 @@ import { Box, Collapse, IconButton, List, Typography, useTheme } from "@mui/mate import { useEffect, useState } from "react"; import { AuditoryLink } from "./AuditoryLink"; - -export const AuditoryList = ({auditory, deleteModal}:{auditory:AuditoryItem[], deleteModal:(id:number) => void}) => { +export const AuditoryList = ({auditory, onDelete}:{auditory:AuditoryItem[], onDelete: (id: number) => void}) => { const theme = useTheme(); const { isTestServer } = useDomainDefine(); const [linksOpen, setLinksOpen] = useState(true); - console.log("auditory-___---_auditory__---__-__auditory_------__---__-__---_------__---__-__---_------__---__-____--__") console.log(auditory) @@ -41,7 +39,7 @@ export const AuditoryList = ({auditory, deleteModal}:{auditory:AuditoryItem[], d {auditory.map((item, idx) => ( - + ))} diff --git a/src/pages/PersonalizationAI/PersonalizationAI.tsx b/src/pages/PersonalizationAI/PersonalizationAI.tsx index f11916ec..9330b162 100644 --- a/src/pages/PersonalizationAI/PersonalizationAI.tsx +++ b/src/pages/PersonalizationAI/PersonalizationAI.tsx @@ -10,6 +10,7 @@ import { useTheme } from "@mui/material"; import { AuditoryItem, auditoryAdd, auditoryDelete, auditoryGet } from "@/api/auditory"; import { useCurrentQuiz } from "@/stores/quizes/hooks"; import { AuditoryList } from "./AuditoryList"; +import { useSnackbar } from "notistack"; export default function PersonalizationAI() { @@ -18,6 +19,7 @@ export default function PersonalizationAI() { const [auditory, setAuditory] = useState([]); const [deleteModal, setDeleteModal] = useState(0); const quiz = useCurrentQuiz(); + const { enqueueSnackbar } = useSnackbar(); useEffect(() => { (async () => { @@ -32,9 +34,45 @@ export default function PersonalizationAI() { })(); }, [quiz]); - const handleDelete = () => { - setDeleteModal(0) - auditoryDelete({ quizId: quiz?.backendId, auditoryId: deleteModal }) + const handleDelete = async () => { + // 1. Закрываем модалку + setDeleteModal(0); + + // 2. Находим индекс объекта в стейте + const indexToDelete = auditory.findIndex(item => item.id === deleteModal); + if (indexToDelete === -1) return; + + // 3. Сохраняем удаляемый объект + const deletedItem = auditory[indexToDelete]; + + // 4. Меняем стейт, вырезая объект + setAuditory(prev => prev.filter(item => item.id !== deleteModal)); + + try { + // 5. Вызываем функцию удаления + const [result, error] = await auditoryDelete({ + quizId: quiz?.backendId, + auditoryId: deleteModal + }); + + if (error) { + // 6. Если удалить не удалось - показываем снекбар и возвращаем ссылку + enqueueSnackbar('Не удалось удалить ссылку', { variant: 'error' }); + setAuditory(prev => { + const newArray = [...prev]; + newArray.splice(indexToDelete, 0, deletedItem); + return newArray; + }); + } + } catch (error) { + // Обработка ошибки сети или других ошибок + enqueueSnackbar('Произошла ошибка при удалении', { variant: 'error' }); + setAuditory(prev => { + const newArray = [...prev]; + newArray.splice(indexToDelete, 0, deletedItem); + return newArray; + }); + } } return ( @@ -92,7 +130,7 @@ export default function PersonalizationAI() { - +