Primakov Alexandr Alexandrovich
316 lines
10 KiB
TypeScript
316 lines
10 KiB
TypeScript
import React, { useEffect, useState } from 'react'
|
|
import { useParams } from 'react-router-dom'
|
|
import { useTranslation } from 'react-i18next'
|
|
import { motion, AnimatePresence } from 'framer-motion'
|
|
|
|
import { api } from '../__data__/api/api'
|
|
import { formatDate } from '../utils/dayjs-config'
|
|
import {
|
|
Alert,
|
|
AlertIcon,
|
|
Box,
|
|
Center,
|
|
Container,
|
|
Spinner,
|
|
Text,
|
|
Heading,
|
|
Badge,
|
|
Flex,
|
|
useColorMode,
|
|
IconButton,
|
|
Tooltip,
|
|
HStack,
|
|
} from '@chakra-ui/react'
|
|
import { UserCard } from '../components/user-card'
|
|
import { StudentListView } from './style'
|
|
import { useSetBreadcrumbs } from '../components'
|
|
|
|
// Reaction emojis with their string values
|
|
const REACTIONS = [
|
|
{ emoji: '👍', value: 'thumbs_up' },
|
|
{ emoji: '❤️', value: 'heart' },
|
|
{ emoji: '😂', value: 'laugh' },
|
|
{ emoji: '😮', value: 'wow' },
|
|
{ emoji: '👏', value: 'clap' },
|
|
]
|
|
|
|
const UserPage = () => {
|
|
const { lessonId, accessId } = useParams()
|
|
const { t } = useTranslation()
|
|
const { colorMode } = useColorMode()
|
|
const acc = api.useGetAccessQuery({ accessCode: accessId })
|
|
const [animatedStudents, setAnimatedStudents] = useState([])
|
|
const [sendReaction] = api.useSendReactionMutation()
|
|
const [activeReaction, setActiveReaction] = useState(null)
|
|
|
|
const ls = api.useLessonByIdQuery(lessonId, {
|
|
pollingInterval: 1000,
|
|
skipPollingIfUnfocused: true,
|
|
})
|
|
|
|
// Устанавливаем хлебные крошки
|
|
useSetBreadcrumbs([
|
|
{
|
|
title: t('journal.pl.breadcrumbs.home'),
|
|
path: '/'
|
|
},
|
|
{
|
|
title: t('journal.pl.breadcrumbs.user'),
|
|
isCurrentPage: true
|
|
}
|
|
])
|
|
|
|
// Эффект для поэтапного появления карточек студентов
|
|
useEffect(() => {
|
|
if (ls.data?.body?.students?.length) {
|
|
// Обновляем существующих студентов с сохранением их анимации
|
|
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;
|
|
}
|
|
|
|
return newStudents;
|
|
});
|
|
}
|
|
}, [ls.data?.body?.students, ls.data?.body?.studentReactions])
|
|
|
|
// Эффект для сброса флага "новизны" студентов
|
|
useEffect(() => {
|
|
if (animatedStudents.length > 0) {
|
|
const timeoutId = setTimeout(() => {
|
|
setAnimatedStudents(students =>
|
|
students.map(student => ({...student, isNew: false}))
|
|
)
|
|
}, 2000)
|
|
|
|
return () => clearTimeout(timeoutId)
|
|
}
|
|
}, [animatedStudents])
|
|
|
|
// Обработчик отправки реакции
|
|
const handleReaction = (reaction) => {
|
|
if (lessonId) {
|
|
sendReaction({ lessonId, reaction })
|
|
setActiveReaction(reaction)
|
|
|
|
// Сбрасываем активную реакцию через 1 секунду
|
|
setTimeout(() => {
|
|
setActiveReaction(null)
|
|
}, 1000)
|
|
}
|
|
}
|
|
|
|
if (acc.isLoading) {
|
|
return (
|
|
<Container maxW="container.xl">
|
|
<Center h="300px">
|
|
<Spinner
|
|
thickness="4px"
|
|
speed="0.65s"
|
|
emptyColor="gray.200"
|
|
color="blue.500"
|
|
size="xl"
|
|
/>
|
|
</Center>
|
|
</Container>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<Container maxW="container.lg" pt={4}>
|
|
{acc.isLoading && (
|
|
<Center py={4}>
|
|
<Spinner mr={2} />
|
|
<Text>{t('journal.pl.common.sending')}</Text>
|
|
</Center>
|
|
)}
|
|
|
|
{acc.isSuccess && (
|
|
<motion.div
|
|
initial={{ opacity: 0, y: -10 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.3 }}
|
|
>
|
|
<Alert status="success" mb={4} borderRadius="lg">
|
|
<AlertIcon />
|
|
{t('journal.pl.common.success')}
|
|
</Alert>
|
|
</motion.div>
|
|
)}
|
|
|
|
{acc.error && (
|
|
<Box mb="6" mt="2">
|
|
<Alert status="warning" borderRadius="lg">
|
|
<AlertIcon />
|
|
{(acc as any).error?.data?.body?.errorMessage ===
|
|
'Code is expired' ? (
|
|
t('journal.pl.access.expiredCode')
|
|
) : (
|
|
<pre>{JSON.stringify(acc.error, null, 4)}</pre>
|
|
)}
|
|
</Alert>
|
|
</Box>
|
|
)}
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ duration: 0.4 }}
|
|
>
|
|
<Box
|
|
mb={6}
|
|
p={5}
|
|
borderRadius="xl"
|
|
bg={colorMode === "light" ? "gray.50" : "gray.700"}
|
|
boxShadow="md"
|
|
>
|
|
<Heading fontSize="xl" fontWeight={600} mb={2}>
|
|
{t('journal.pl.lesson.topicTitle')}
|
|
<Box as="span" ml={2} color={colorMode === "light" ? "blue.500" : "blue.300"}>
|
|
{ls.data?.body?.name}
|
|
</Box>
|
|
</Heading>
|
|
|
|
<Flex align="center" justify="space-between" mt={3}>
|
|
<Text color={colorMode === "light" ? "gray.600" : "gray.300"}>
|
|
{formatDate(ls.data?.body?.date, t('journal.pl.lesson.dateFormat'))}
|
|
</Text>
|
|
|
|
<Badge colorScheme="green" fontSize="md" borderRadius="full" px={3} py={1}>
|
|
{t('journal.pl.common.people')}: {animatedStudents.length}
|
|
</Badge>
|
|
</Flex>
|
|
</Box>
|
|
</motion.div>
|
|
|
|
{/* Реакции на занятие */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.4, delay: 0.3 }}
|
|
>
|
|
<Box
|
|
mb={6}
|
|
p={5}
|
|
borderRadius="xl"
|
|
bg={colorMode === "light" ? "gray.50" : "gray.700"}
|
|
boxShadow="md"
|
|
>
|
|
<Text mb={3} fontWeight="medium">{t('journal.pl.lesson.reactions')}</Text>
|
|
|
|
<HStack spacing={3} justify="center">
|
|
{REACTIONS.map((reaction) => (
|
|
<Tooltip key={reaction.value} label={t(`journal.pl.reactions.${reaction.value}`)} placement="top">
|
|
<IconButton
|
|
aria-label={t(`journal.pl.reactions.${reaction.value}`)}
|
|
icon={<Text fontSize="24px">{reaction.emoji}</Text>}
|
|
size="lg"
|
|
variant={activeReaction === reaction.value ? "solid" : "outline"}
|
|
colorScheme={activeReaction === reaction.value ? "blue" : "gray"}
|
|
onClick={() => handleReaction(reaction.value)}
|
|
transition="all 0.2s"
|
|
_hover={{ transform: "scale(1.1)" }}
|
|
sx={{
|
|
animation: activeReaction === reaction.value
|
|
? "pulse 0.5s ease-in-out" : "none",
|
|
"@keyframes pulse": {
|
|
"0%": { transform: "scale(1)" },
|
|
"50%": { transform: "scale(1.2)" },
|
|
"100%": { transform: "scale(1)" }
|
|
}
|
|
}}
|
|
/>
|
|
</Tooltip>
|
|
))}
|
|
</HStack>
|
|
</Box>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ duration: 0.4, delay: 0.2 }}
|
|
>
|
|
{animatedStudents.length > 0 ? (
|
|
<StudentListView>
|
|
<AnimatePresence initial={true}>
|
|
{animatedStudents.map((student) => (
|
|
<motion.li
|
|
key={student.sub}
|
|
layout
|
|
initial={{ opacity: 0, scale: 0.6, y: 20 }}
|
|
animate={{
|
|
opacity: 1,
|
|
scale: 1,
|
|
y: 0,
|
|
boxShadow: student.isNew
|
|
? ['0 0 0 0 rgba(66, 153, 225, 0)', '0 0 20px 5px rgba(66, 153, 225, 0.7)', '0 0 0 0 rgba(66, 153, 225, 0)']
|
|
: '0 0 0 0 rgba(0, 0, 0, 0)'
|
|
}}
|
|
exit={{ opacity: 0, scale: 0.6, y: 20 }}
|
|
transition={{
|
|
type: "spring",
|
|
stiffness: 300,
|
|
damping: 25,
|
|
delay: 0.03 * animatedStudents.indexOf(student), // Уменьшенная задержка для более плавного появления
|
|
boxShadow: {
|
|
repeat: student.isNew ? 3 : 0,
|
|
duration: 1.5
|
|
}
|
|
}}
|
|
>
|
|
<UserCard
|
|
width="100%"
|
|
wrapperAS="div"
|
|
student={student}
|
|
present={true}
|
|
recentlyPresent={student.isNew}
|
|
reaction={ls.data?.body?.studentReactions?.find(r => r.sub === student.sub)}
|
|
/>
|
|
</motion.li>
|
|
))}
|
|
</AnimatePresence>
|
|
</StudentListView>
|
|
) : (
|
|
ls.data && (
|
|
<Center py={10} px={5}>
|
|
<Box
|
|
textAlign="center"
|
|
p={6}
|
|
borderRadius="xl"
|
|
bg={colorMode === "light" ? "gray.50" : "gray.700"}
|
|
boxShadow="md"
|
|
width="100%"
|
|
maxWidth="500px"
|
|
>
|
|
<motion.div
|
|
initial={{ scale: 0.9, opacity: 0 }}
|
|
animate={{ scale: 1, opacity: 1 }}
|
|
transition={{ duration: 0.5, delay: 0.3 }}
|
|
>
|
|
<Heading size="md" mb={4}>{t('journal.pl.lesson.noStudents')}</Heading>
|
|
<Text>{t('journal.pl.lesson.waitForStudents')}</Text>
|
|
</motion.div>
|
|
</Box>
|
|
</Center>
|
|
)
|
|
)}
|
|
</motion.div>
|
|
</Container>
|
|
)
|
|
}
|
|
|
|
export default UserPage
|