From e7121cb06a0aeeb09118902be032242b48433569 Mon Sep 17 00:00:00 2001 From: Nastya Date: Mon, 2 Jun 2025 00:27:22 +0300 Subject: [PATCH] =?UTF-8?q?=D1=83=D0=B4=D0=B0=D0=BB=D0=B5=D0=BD=D0=B8?= =?UTF-8?q?=D0=B5=20=D0=B1=D0=B5=D0=B7=20=D1=80=D0=B5=D0=B0=D0=BA=D1=82?= =?UTF-8?q?=D0=B8=D0=B2=D0=BD=D0=BE=D1=81=D1=82=D0=B8,=20=D0=B2=D1=8B?= =?UTF-8?q?=D0=B2=D0=B5=D0=B4=D0=B5=D0=BD=20=D0=BA=D0=BE=D1=80=D1=80=D0=B5?= =?UTF-8?q?=D0=BA=D1=82=D0=BD=D1=8B=D0=B9=20=D1=81=D0=BF=D0=B8=D1=81=D0=BE?= =?UTF-8?q?=D0=BA=20=D0=BB=D0=B8=D0=BD=D0=BA=D0=BE=D0=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/auditory.ts | 9 +- src/pages/PersonalizationAI/AuditoryLink.tsx | 74 ++++++++ src/pages/PersonalizationAI/AuditoryList.tsx | 77 +-------- .../GenderAndAgeSelector.tsx | 18 +- .../PersonalizationAI/PersonalizationAI.tsx | 158 +++++++++++------- src/ui_kit/InfoPopover.tsx | 16 +- src/ui_kit/Toolbars/TooltipClickInfo.tsx | 4 + 7 files changed, 212 insertions(+), 144 deletions(-) create mode 100644 src/pages/PersonalizationAI/AuditoryLink.tsx diff --git a/src/api/auditory.ts b/src/api/auditory.ts index 77a2a705..f0ca4914 100644 --- a/src/api/auditory.ts +++ b/src/api/auditory.ts @@ -47,13 +47,13 @@ export interface AuditoryAddParams { } // API calls -export const auditoryGet = async ({ quizId }: AuditoryGetParams): Promise<[AuditoryResponse | null, string?]> => { +export const auditoryGet = async ({ quizId }: AuditoryGetParams): Promise<[AuditoryItem[] | null, string?]> => { if (!quizId) { return [null, "Quiz ID is required"]; } try { - const response = await makeRequest({ + const response = await makeRequest({ url: `${API_URL}/quiz/${quizId}/auditory`, method: "GET", }); @@ -72,10 +72,7 @@ export const auditoryDelete = async ({ quizId, auditoryId }: AuditoryDeleteParam try { const response = await makeRequest({ - url: `${API_URL}/quiz/${quizId}/auditory`, - body: { - id: auditoryId - }, + url: `${API_URL}/quiz/${quizId}/auditory/${auditoryId}`, method: "DELETE", }); diff --git a/src/pages/PersonalizationAI/AuditoryLink.tsx b/src/pages/PersonalizationAI/AuditoryLink.tsx new file mode 100644 index 00000000..57cf9fd0 --- /dev/null +++ b/src/pages/PersonalizationAI/AuditoryLink.tsx @@ -0,0 +1,74 @@ +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 +} + +export const AuditoryLink = ({ item, index, deleteModal }: AuditoryLinkProps) => { + const theme = useTheme(); + const { isTestServer } = useDomainDefine(); + + const handleCopy = (text: string) => { + navigator.clipboard.writeText(text); + }; + + const linkText = `${isTestServer ? "https://s.hbpn.link/" : "https://hbpn.link/"}?_paud=${item.id}`; + + return ( + + deleteModal(item.id)} edge="end" aria-label="info" sx={{ color: theme.palette.brightPurple.main, p: 0, width: 18, height: 18 }}> + + + + + + handleCopy(linkText)} + > + + + + } + > + + {linkText} + + + ); +}; \ No newline at end of file diff --git a/src/pages/PersonalizationAI/AuditoryList.tsx b/src/pages/PersonalizationAI/AuditoryList.tsx index b9e26d49..91410ab4 100644 --- a/src/pages/PersonalizationAI/AuditoryList.tsx +++ b/src/pages/PersonalizationAI/AuditoryList.tsx @@ -1,37 +1,17 @@ import { auditoryGet, AuditoryResponse, AuditoryItem } from "@/api/auditory"; import ArrowDownIcon from "@/assets/icons/ArrowDownIcon"; -import CopyIcon from "@/assets/icons/CopyIcon"; import { useCurrentQuiz } from "@/stores/quizes/hooks"; -import { InfoPopover } from "@/ui_kit/InfoPopover"; import { useDomainDefine } from "@/utils/hooks/useDomainDefine"; -import { Box, Collapse, IconButton, List, ListItem, Typography, useTheme } from "@mui/material"; +import { Box, Collapse, IconButton, List, Typography, useTheme } from "@mui/material"; import { useEffect, useState } from "react"; +import { AuditoryLink } from "./AuditoryLink"; -const PURPLE = "#7E2AEA"; -export const AuditoryList = () => { +export const AuditoryList = ({auditory, deleteModal}:{auditory:AuditoryItem[], deleteModal:(id:number) => void}) => { const theme = useTheme(); - const quiz = useCurrentQuiz(); const { isTestServer } = useDomainDefine(); const [linksOpen, setLinksOpen] = useState(true); - const [auditory, setAuditory] = useState([]); - const handleCopy = (text: string) => { - navigator.clipboard.writeText(text); - }; - - useEffect(() => { - (async () => { - if (quiz?.backendId) { - const [result, error] = await auditoryGet({ quizId: quiz.backendId }); - console.log("result-___---_------__---__-__---_------__---__-__---_------__---__-__---_------__---__-____--__") - console.log(result) - if (result) { - setAuditory(result); - } - } - })(); - }, [quiz]); console.log("auditory-___---_auditory__---__-__auditory_------__---__-__---_------__---__-__---_------__---__-____--__") console.log(auditory) @@ -51,7 +31,7 @@ export const AuditoryList = () => { Ваши сохраненные ссылки setLinksOpen((prev) => !prev)} size="large" > @@ -60,52 +40,9 @@ export const AuditoryList = () => { - {auditory.map((item, idx) => { - const linkText = `${isTestServer ? "https://s.hbpn.link/" : "https://hbpn.link/"}?_paud=${item.id}`; - console.log(item) - return ( - - - - - handleCopy(linkText)} - > - - - - } - > - - {linkText} - - - ); - })} + {auditory.map((item, idx) => ( + + ))} diff --git a/src/pages/PersonalizationAI/GenderAndAgeSelector.tsx b/src/pages/PersonalizationAI/GenderAndAgeSelector.tsx index f3aff559..d6aae39f 100644 --- a/src/pages/PersonalizationAI/GenderAndAgeSelector.tsx +++ b/src/pages/PersonalizationAI/GenderAndAgeSelector.tsx @@ -1,4 +1,4 @@ -import { Box, FormControl, FormLabel, RadioGroup, FormControlLabel, Radio, Select, MenuItem, useTheme } from "@mui/material"; +import { Box, FormControl, FormLabel, RadioGroup, FormControlLabel, Radio, Select, MenuItem, useTheme, Button } from "@mui/material"; import { InfoPopover } from '@ui_kit/InfoPopover'; import CheckboxIcon from "@icons/Checkbox"; @@ -7,6 +7,7 @@ interface GenderAndAgeSelectorProps { setGender: (gender: string) => void; } + export default function GenderAndAgeSelector({ gender, setGender }: GenderAndAgeSelectorProps) { const theme = useTheme(); return ( @@ -167,6 +168,21 @@ export default function GenderAndAgeSelector({ gender, setGender }: GenderAndAge + ); } \ No newline at end of file diff --git a/src/pages/PersonalizationAI/PersonalizationAI.tsx b/src/pages/PersonalizationAI/PersonalizationAI.tsx index bd7fc388..f11916ec 100644 --- a/src/pages/PersonalizationAI/PersonalizationAI.tsx +++ b/src/pages/PersonalizationAI/PersonalizationAI.tsx @@ -1,4 +1,4 @@ -import { Box, Container, Typography, TextField, Button, List, ListItem, IconButton } from "@mui/material"; +import { Box, Container, Typography, TextField, Button, List, ListItem, IconButton, Modal } from "@mui/material"; import { InfoPopover } from '@ui_kit/InfoPopover'; import CopyIcon from "@/assets/icons/CopyIcon"; import GenderAndAgeSelector from "./GenderAndAgeSelector"; @@ -7,60 +7,80 @@ import CustomTextField from "@ui_kit/CustomTextField"; import Collapse from '@mui/material/Collapse'; import { ArrowDownIcon } from "../../assets/icons/questionsPage/ArrowDownIcon"; import { useTheme } from "@mui/material"; -import { auditoryAdd, auditoryGet } from "@/api/auditory"; +import { AuditoryItem, auditoryAdd, auditoryDelete, auditoryGet } from "@/api/auditory"; import { useCurrentQuiz } from "@/stores/quizes/hooks"; import { AuditoryList } from "./AuditoryList"; -const PURPLE = "#7E2AEA"; export default function PersonalizationAI() { const theme = useTheme(); const [gender, setGender] = useState(''); + const [auditory, setAuditory] = useState([]); + const [deleteModal, setDeleteModal] = useState(0); + const quiz = useCurrentQuiz(); + + useEffect(() => { + (async () => { + if (quiz?.backendId) { + const [result, error] = await auditoryGet({ quizId: quiz.backendId }); + console.log("result-___---_------__---__-__---_------__---__-__---_------__---__-__---_------__---__-____--__") + console.log(result) + if (result) { + setAuditory(result); + } + } + })(); + }, [quiz]); + + const handleDelete = () => { + setDeleteModal(0) + auditoryDelete({ quizId: quiz?.backendId, auditoryId: deleteModal }) + } return ( - - - Персонализация вопросов с помощью AI - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. - + <> + + + Персонализация вопросов с помощью AI + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + - {/* Первый белый блок */} - - + {/* Первый белый блок */} + + - {/* Ссылка */} - - - Ссылка - - - - Вставьте ссылку со всеми utm-метками - - + {/* Ссылка */} + + + Ссылка + + + + Вставьте ссылку со всеми utm-метками + - - - + - + + setDeleteModal(0)} + aria-labelledby="modal-modal-title" + aria-describedby="modal-modal-description" + > + + Уверены, что хотите удалить ссылку? + + + + + ); } diff --git a/src/ui_kit/InfoPopover.tsx b/src/ui_kit/InfoPopover.tsx index 8ce59e2e..a28b9e67 100644 --- a/src/ui_kit/InfoPopover.tsx +++ b/src/ui_kit/InfoPopover.tsx @@ -1,9 +1,17 @@ -import { useState, MouseEvent } from "react"; +import { useState, MouseEvent, ReactNode } from "react"; import Info from "@icons/Info"; import { Paper, Popover, SxProps, Typography } from "@mui/material"; -export const InfoPopover = ({ blink = false, sx }: {blink?: boolean, sx?: SxProps}) => { +export const InfoPopover = ({ + blink = false, + sx, + children = "подсказка" +}: { + blink?: boolean, + sx?: SxProps, + children?: ReactNode +}) => { const [anchorEl, setAnchorEl] = useState(null); const handleClick = (event: MouseEvent) => { @@ -43,9 +51,7 @@ export const InfoPopover = ({ blink = false, sx }: {blink?: boolean, sx?: SxProp flexDirection: "column", }} > - - подсказка - + {children} diff --git a/src/ui_kit/Toolbars/TooltipClickInfo.tsx b/src/ui_kit/Toolbars/TooltipClickInfo.tsx index b95f5384..c8f2f353 100644 --- a/src/ui_kit/Toolbars/TooltipClickInfo.tsx +++ b/src/ui_kit/Toolbars/TooltipClickInfo.tsx @@ -26,6 +26,10 @@ export default function TooltipClickInfo({ title }: { title: string }) { disableFocusListener disableHoverListener disableTouchListener + sx={{ + fontSize: "12px", + p:"10px" + }} title={title} >