Оптимизация обновления реакций студентов и анимации карточек на странице пользователя. Упрощено добавление новых реакций и улучшено управление состоянием анимации студентов.
This commit is contained in:
parent
5a92ff2bee
commit
56a04dbe14
@ -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]);
|
||||
|
||||
|
@ -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(() => {
|
||||
|
Loading…
x
Reference in New Issue
Block a user