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
|