Оптимизация обновления реакций студентов и анимации карточек на странице пользователя. Упрощено добавление новых реакций и улучшено управление состоянием анимации студентов.

This commit is contained in:
Primakov Alexandr Alexandrovich 2025-03-27 14:01:12 +03:00
parent 5a92ff2bee
commit 56a04dbe14
2 changed files with 26 additions and 37 deletions

View File

@ -137,29 +137,18 @@ const LessonDetail = () => {
if (!groupedReactions[reaction.sub]) {
groupedReactions[reaction.sub] = [];
}
// Добавляем только новые реакции
const isNewReaction = !prevReactionsRef.current[reaction.sub]?.some(
r => r._id === reaction._id
);
if (isNewReaction) {
groupedReactions[reaction.sub] = [reaction];
}
groupedReactions[reaction.sub].push(reaction);
});
// Обновляем отображаемые реакции
setStudentReactions(groupedReactions);
// Обновляем предыдущие реакции
prevReactionsRef.current = { ...groupedReactions };
// Обновляем предыдущие реакции после небольшой задержки
const updatePrevReactionsTimeout = setTimeout(() => {
prevReactionsRef.current = groupedReactions;
}, 1000);
// Сбрасываем отображаемые реакции через некоторое время
const clearReactionsTimeout = setTimeout(() => {
setStudentReactions({});
}, 5000);
return () => clearTimeout(clearReactionsTimeout);
return () => clearTimeout(updatePrevReactionsTimeout);
}
}, [accessCode?.body?.lesson?.studentReactions]);

View File

@ -63,28 +63,28 @@ const UserPage = () => {
// Эффект для поэтапного появления карточек студентов
useEffect(() => {
if (ls.data?.body?.students?.length) {
// Сначала очищаем список
setAnimatedStudents([])
// Затем постепенно добавляем студентов для красивой анимации
const students = [...ls.data.body.students]
const addStudentWithDelay = (index) => {
if (index < students.length) {
setAnimatedStudents(prev => [...prev, {...students[index], isNew: true}])
// Для следующего студента
setTimeout(() => {
addStudentWithDelay(index + 1)
}, 100) // Уменьшенная задержка для более плавной анимации
// Обновляем существующих студентов с сохранением их анимации
setAnimatedStudents(prevStudents => {
const newStudents = ls.data.body.students.map(student => {
// Находим существующего студента
const existingStudent = prevStudents.find(p => p.sub === student.sub);
// Сохраняем флаг isNew если студент уже существует
return {
...student,
isNew: existingStudent ? existingStudent.isNew : true
};
});
// Если количество студентов не изменилось, сохраняем текущий массив
if (prevStudents.length === newStudents.length &&
prevStudents.every(student => newStudents.find(n => n.sub === student.sub))) {
return prevStudents;
}
}
// Запускаем процесс добавления с небольшой задержкой для лучшего UX
setTimeout(() => {
addStudentWithDelay(0)
}, 300)
return newStudents;
});
}
}, [ls.data?.body?.students])
}, [ls.data?.body?.students, ls.data?.body?.studentReactions])
// Эффект для сброса флага "новизны" студентов
useEffect(() => {