From d648a181c3bb9cb6ab4a6f3a0c4f94d1ed7c26db Mon Sep 17 00:00:00 2001 From: Primakov Alexandr Alexandrovich Date: Thu, 27 Mar 2025 14:14:31 +0300 Subject: [PATCH] =?UTF-8?q?=D0=A3=D0=BF=D1=80=D0=BE=D1=89=D0=B5=D0=BD?= =?UTF-8?q?=D0=BE=20=D1=83=D0=BF=D1=80=D0=B0=D0=B2=D0=BB=D0=B5=D0=BD=D0=B8?= =?UTF-8?q?=D0=B5=20=D1=80=D0=B5=D0=B0=D0=BA=D1=86=D0=B8=D1=8F=D0=BC=D0=B8?= =?UTF-8?q?=20=D1=81=D1=82=D1=83=D0=B4=D0=B5=D0=BD=D1=82=D0=BE=D0=B2=20?= =?UTF-8?q?=D0=B2=20=D0=BA=D0=B0=D1=80=D1=82=D0=BE=D1=87=D0=BA=D0=B5=20?= =?UTF-8?q?=D0=BF=D0=BE=D0=BB=D1=8C=D0=B7=D0=BE=D0=B2=D0=B0=D1=82=D0=B5?= =?UTF-8?q?=D0=BB=D1=8F.=20=D0=98=D0=B7=D0=BC=D0=B5=D0=BD=D0=B5=D0=BD?= =?UTF-8?q?=D0=BE=20=D1=81=D0=BE=D1=81=D1=82=D0=BE=D1=8F=D0=BD=D0=B8=D0=B5?= =?UTF-8?q?=20=D1=80=D0=B5=D0=B0=D0=BA=D1=86=D0=B8=D0=B9=20=D0=BD=D0=B0=20?= =?UTF-8?q?=D0=B8=D1=81=D0=BF=D0=BE=D0=BB=D1=8C=D0=B7=D0=BE=D0=B2=D0=B0?= =?UTF-8?q?=D0=BD=D0=B8=D0=B5=20=D0=BE=D0=B4=D0=BD=D0=BE=D0=B3=D0=BE=20?= =?UTF-8?q?=D0=BE=D0=B1=D1=8A=D0=B5=D0=BA=D1=82=D0=B0=20=D0=B2=D0=BC=D0=B5?= =?UTF-8?q?=D1=81=D1=82=D0=BE=20=D0=BC=D0=B0=D1=81=D1=81=D0=B8=D0=B2=D0=B0?= =?UTF-8?q?,=20=D1=83=D0=BB=D1=83=D1=87=D1=88=D0=B5=D0=BD=D0=B0=20=D0=B0?= =?UTF-8?q?=D0=BD=D0=B8=D0=BC=D0=B0=D1=86=D0=B8=D1=8F=20=D0=BE=D1=82=D0=BE?= =?UTF-8?q?=D0=B1=D1=80=D0=B0=D0=B6=D0=B5=D0=BD=D0=B8=D1=8F=20=D1=80=D0=B5?= =?UTF-8?q?=D0=B0=D0=BA=D1=86=D0=B8=D0=B9.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/user-card/user-card.tsx | 74 ++++++++++---------------- src/pages/lesson-details.tsx | 2 +- src/pages/user-page.tsx | 2 +- 3 files changed, 31 insertions(+), 47 deletions(-) diff --git a/src/components/user-card/user-card.tsx b/src/components/user-card/user-card.tsx index 5c8f51b..cdda9af 100644 --- a/src/components/user-card/user-card.tsx +++ b/src/components/user-card/user-card.tsx @@ -6,7 +6,7 @@ import { CheckCircleIcon, AddIcon } from '@chakra-ui/icons' import { motion, AnimatePresence } from 'framer-motion' import { useTranslation } from 'react-i18next' -import { User, Reaction } from '../../__data__/model' +import { Reaction, User } from '../../__data__/model' import { AddMissedButton, Avatar, Wrapper, NameOverlay } from './style' @@ -34,58 +34,45 @@ export const UserCard = ({ wrapperAS = 'div', width, recentlyPresent = false, - reactions = [] + reaction }: { student: User present: boolean width?: string | number onAddUser?: (user: User) => void - wrapperAS?: React.ElementType; + wrapperAS?: React.ElementType recentlyPresent?: boolean - reactions?: Reaction[] + reaction?: Reaction }) => { const { colorMode } = useColorMode(); const { t } = useTranslation(); const [imageError, setImageError] = useState(false); - const [visibleReactions, setVisibleReactions] = useState([]); + const [showReaction, setShowReaction] = useState(false); const timeoutRef = useRef(null); - // Filter reactions to only show this student's reactions + // Обрабатываем изменение реакции useEffect(() => { - const studentReactions = reactions.filter(r => r.sub === student.sub); - - if (studentReactions.length > 0) { - // Check for new reactions - const newReactions = studentReactions.filter( - newReaction => !visibleReactions.some( - existingReaction => existingReaction._id === newReaction._id - ) - ); + if (reaction) { + setShowReaction(true); - if (newReactions.length > 0) { - // If there are new reactions, add them to visible reactions - setVisibleReactions(prevReactions => [...prevReactions, ...newReactions]); - - // Clear any existing timeout - if (timeoutRef.current) { - clearTimeout(timeoutRef.current); - } - - // Set a new timeout - timeoutRef.current = setTimeout(() => { - setVisibleReactions([]); - timeoutRef.current = null; - }, 3000); + // Очищаем предыдущий таймер если он есть + if (timeoutRef.current) { + clearTimeout(timeoutRef.current); } + + // Устанавливаем новый таймер + timeoutRef.current = setTimeout(() => { + setShowReaction(false); + timeoutRef.current = null; + }, 3000); } - // Clean up on unmount return () => { if (timeoutRef.current) { clearTimeout(timeoutRef.current); } }; - }, [reactions, student.sub, visibleReactions]); + }, [reaction]); return ( )} - {/* Student reactions animation */} + {/* Анимация реакции */} - {visibleReactions.map((reaction, index) => ( + {showReaction && reaction && ( {REACTION_EMOJIS[reaction.reaction] || reaction.reaction} - ))} + )} ) diff --git a/src/pages/lesson-details.tsx b/src/pages/lesson-details.tsx index dca5e38..bbd88be 100644 --- a/src/pages/lesson-details.tsx +++ b/src/pages/lesson-details.tsx @@ -382,7 +382,7 @@ const LessonDetail = () => { present={student.present} recentlyPresent={student.recentlyPresent} onAddUser={(user: User) => manualAdd({ lessonId, user })} - reactions={studentReactions[student.sub] || []} + reaction={accessCode?.body?.lesson?.studentReactions?.find(r => r.sub === student.sub)} /> diff --git a/src/pages/user-page.tsx b/src/pages/user-page.tsx index a0ef422..e140ac7 100644 --- a/src/pages/user-page.tsx +++ b/src/pages/user-page.tsx @@ -277,7 +277,7 @@ const UserPage = () => { student={student} present={true} recentlyPresent={student.isNew} - reactions={ls.data?.body?.studentReactions?.filter(r => r.sub === student.sub) || []} + reaction={ls.data?.body?.studentReactions?.find(r => r.sub === student.sub)} /> ))}