145 lines
3.6 KiB
TypeScript
145 lines
3.6 KiB
TypeScript
import React, { useEffect, useRef, useState } from 'react'
|
||
import dayjs from 'dayjs'
|
||
import { Link } from 'react-router-dom'
|
||
import { getNavigationsValue, getFeatures } from '@brojs/cli'
|
||
import {
|
||
Button,
|
||
Tr,
|
||
Td,
|
||
Menu,
|
||
MenuButton,
|
||
MenuItem,
|
||
MenuList,
|
||
useToast,
|
||
} from '@chakra-ui/react'
|
||
import { EditIcon } from '@chakra-ui/icons'
|
||
|
||
import { qrCode } from '../../../assets'
|
||
|
||
import { LessonForm } from './lessons-form'
|
||
import { api } from '../../../__data__/api/api'
|
||
|
||
const features = getFeatures('journal')
|
||
const groupByDate = features?.['group.by.date']
|
||
|
||
type ItemProps = {
|
||
id: string
|
||
date: string
|
||
name: string
|
||
isTeacher: boolean
|
||
courseId: string
|
||
setlessonToDelete(): void
|
||
students: unknown[]
|
||
}
|
||
|
||
export const Item: React.FC<ItemProps> = ({
|
||
id,
|
||
date,
|
||
name,
|
||
isTeacher,
|
||
courseId,
|
||
setlessonToDelete,
|
||
students,
|
||
}) => {
|
||
const [edit, setEdit] = useState(false)
|
||
const toastRef = useRef(null)
|
||
const toast = useToast()
|
||
const [updateLesson, updateLessonRqst] = api.useUpdateLessonMutation()
|
||
const createdLessonRef = useRef(null)
|
||
|
||
const onSubmit = (lessonData) => {
|
||
toastRef.current = toast({
|
||
title: 'Отправляем',
|
||
status: 'loading',
|
||
duration: 9000,
|
||
})
|
||
createdLessonRef.current = lessonData
|
||
if (navigator.onLine) {
|
||
updateLesson(lessonData)
|
||
} else {
|
||
toast.update(toastRef.current, {
|
||
title: 'Отсутствует интернет',
|
||
status: 'error',
|
||
duration: 3000
|
||
})
|
||
}
|
||
}
|
||
|
||
useEffect(() => {
|
||
if (updateLessonRqst.isSuccess) {
|
||
const toastProps = {
|
||
title: 'Лекция Обновлена',
|
||
description: `Лекция ${createdLessonRef.current?.name} успешно обновлена`,
|
||
status: 'success' as const,
|
||
duration: 9000,
|
||
isClosable: true,
|
||
}
|
||
if (toastRef.current) toast.update(toastRef.current, toastProps)
|
||
else toast(toastProps)
|
||
setEdit(false)
|
||
}
|
||
}, [updateLessonRqst.isSuccess])
|
||
|
||
if (edit && isTeacher) {
|
||
return (
|
||
<Tr>
|
||
<Td colSpan={5}>
|
||
<LessonForm
|
||
isLoading={updateLessonRqst.isLoading}
|
||
error={(updateLessonRqst.error as any)?.error}
|
||
onSubmit={onSubmit}
|
||
onCancel={() => {
|
||
setEdit(false)
|
||
}}
|
||
lesson={{ _id: id, id, name, date }}
|
||
title={'Редактирование лекции'}
|
||
nameButton={'Сохранить'}
|
||
/>
|
||
</Td>
|
||
</Tr>
|
||
)
|
||
}
|
||
|
||
return (
|
||
<Tr>
|
||
{isTeacher && (
|
||
<Td>
|
||
<Link
|
||
to={`${getNavigationsValue('journal.main')}/lesson/${courseId}/${id}`}
|
||
style={{ display: 'flex' }}
|
||
>
|
||
<img width={24} src={qrCode} style={{ margin: '0 auto' }} />
|
||
</Link>
|
||
</Td>
|
||
)}
|
||
<Td textAlign="center">
|
||
{dayjs(date).format(groupByDate ? 'HH:mm' : 'HH:mm DD.MM.YY')}
|
||
</Td>
|
||
<Td>{name}</Td>
|
||
{isTeacher && (
|
||
<Td>
|
||
{!edit && (
|
||
<Menu>
|
||
<MenuButton as={Button}>
|
||
<EditIcon />
|
||
</MenuButton>
|
||
<MenuList>
|
||
<MenuItem
|
||
onClick={() => {
|
||
setEdit(true)
|
||
}}
|
||
>
|
||
Edit
|
||
</MenuItem>
|
||
<MenuItem onClick={setlessonToDelete}>Delete</MenuItem>
|
||
</MenuList>
|
||
</Menu>
|
||
)}
|
||
{edit && <Button onClick={setlessonToDelete}>Сохранить</Button>}
|
||
</Td>
|
||
)}
|
||
<Td isNumeric>{students.length}</Td>
|
||
</Tr>
|
||
)
|
||
}
|