Emojy reactions

src/pages/lesson-details.tsx

@@ -16,7 +16,7 @@ import {
 import { useTranslation } from 'react-i18next'
 
 import { api } from '../__data__/api/api'
-import { User } from '../__data__/model'
+import { User, Reaction } from '../__data__/model'
 import { UserCard } from '../components/user-card'
 import { formatDate } from '../utils/dayjs-config'
 import { useSetBreadcrumbs } from '../components'
@@ -71,6 +71,10 @@ const LessonDetail = () => {
   const [isPulsing, setIsPulsing] = useState(false)
   // Отслеживаем предыдущее количество студентов
   const prevStudentCountRef = useRef(0)
+  // Отслеживаем предыдущие реакции для определения новых
+  const prevReactionsRef = useRef<Record<string, Reaction[]>>({})
+  // Храним актуальные реакции студентов
+  const [studentReactions, setStudentReactions] = useState<Record<string, Reaction[]>>({})
   
   const {
     isFetching,
@@ -121,6 +125,44 @@ const LessonDetail = () => {
     }
   }, [accessCode])
 
+  // Эффект для обработки новых реакций
+  useEffect(() => {
+    if (accessCode?.body?.lesson?.reactions) {
+      const reactions = accessCode.body.lesson.reactions;
+      
+      // Группируем реакции по sub (идентификатору студента)
+      const groupedReactions: Record<string, Reaction[]> = {};
+      
+      reactions.forEach(reaction => {
+        if (!groupedReactions[reaction.sub]) {
+          groupedReactions[reaction.sub] = [];
+        }
+        
+        // Добавляем только новые реакции
+        const isNewReaction = !prevReactionsRef.current[reaction.sub]?.some(
+          r => r._id === reaction._id
+        );
+        
+        if (isNewReaction) {
+          groupedReactions[reaction.sub].push(reaction);
+        }
+      });
+      
+      // Обновляем отображаемые реакции
+      setStudentReactions(groupedReactions);
+      
+      // Обновляем предыдущие реакции
+      prevReactionsRef.current = { ...groupedReactions };
+      
+      // Сбрасываем отображаемые реакции через некоторое время
+      const clearReactionsTimeout = setTimeout(() => {
+        setStudentReactions({});
+      }, 5000);
+      
+      return () => clearTimeout(clearReactionsTimeout);
+    }
+  }, [accessCode?.body?.lesson?.reactions]);
+
   useEffect(() => {
     if (manualAddRqst.isSuccess) {
       refetch()
@@ -348,6 +390,7 @@ const LessonDetail = () => {
                             present={student.present}
                             recentlyPresent={student.recentlyPresent}
                             onAddUser={(user: User) => manualAdd({ lessonId, user })}
+                            reactions={studentReactions[student.sub] || []}
                           />
                         </Box>