(#16) delete lesson

src/pages/lesson-list.tsx

@@ -14,13 +14,12 @@ import {
   CardHeader,
   Heading,
   Button,
-  ButtonGroup,
   CloseButton,
   useToast,
-  Stack,
   VStack,
   FormControl,
   FormLabel,
+  Toast,
   FormHelperText,
   FormErrorMessage,
   Input,
@@ -31,17 +30,29 @@ import {
   Th,
   Tbody,
   Td,
+  Menu,
+  MenuButton,
+  MenuItem,
+  Text,
+  MenuList,
+  Center,
+  Spinner,
+  AlertDialog,
+  AlertDialogBody,
+  AlertDialogContent,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogOverlay,
 } from '@chakra-ui/react'
+import { AddIcon, EditIcon } from '@chakra-ui/icons'
 
-import { AddIcon } from '@chakra-ui/icons'
+import { ErrorSpan, BreadcrumbsWrapper } from './style'
 
-import { LessonItem, Lessonname, ErrorSpan, BreadcrumbsWrapper } from './style'
-
-import { keycloak } from '../__data__/kc'
 import { useAppSelector } from '../__data__/store'
 import { api } from '../__data__/api/api'
 import { isTeacher } from '../utils/user'
 import { qrCode } from '../assets'
+import { Lesson } from '../__data__/model'
 
 interface NewLessonForm {
   name: string
@@ -53,8 +64,10 @@ const LessonList = () => {
   const user = useAppSelector((s) => s.user)
   const { data, isLoading, error } = api.useLessonListQuery(courseId)
   const [createLesson, crLQuery] = api.useCreateLessonMutation()
-  const [value, setValue] = useState('')
+  const [deleteLesson, deletingRqst] = api.useDeleteLessonMutation()
   const [showForm, setShowForm] = useState(false)
+  const [lessonToDelete, setlessonToDelete] = useState<Lesson>(null)
+  const cancelRef = React.useRef()
   const {
     control,
     handleSubmit,
@@ -70,12 +83,6 @@ const LessonList = () => {
   const toast = useToast()
   const toastRef = useRef(null)
 
-  const handleChange = useCallback(
-    (event) => {
-      setValue(event.target.value.toUpperCase())
-    },
-    [setValue],
-  )
   const onSubmit = ({ name, date }) => {
     toastRef.current = toast({
       title: 'Отправляем',
@@ -85,6 +92,46 @@ const LessonList = () => {
     createLesson({ name, courseId, date })
   }
 
+  useEffect(() => {
+    if (deletingRqst.isError) {
+      toast({
+        title: (deletingRqst.error as any)?.error,
+        status: 'error',
+        duration: 3000,
+      })
+    }
+
+    if (deletingRqst.isSuccess) {
+      const lesson = { ...lessonToDelete }
+      toast({
+        status: 'warning',
+        duration: 9000,
+        render(props) {
+          return (
+            <Toast
+              {...props}
+              title={
+                <>
+                  <Box pb={3}>
+                    <Text fontSize="xl">{`Удалена лекция ${lesson.name}`}</Text>
+                  </Box>
+                  <Button
+                    onClick={() =>
+                      createLesson({ courseId, ...lesson })
+                    }
+                  >
+                    Восстановить
+                  </Button>
+                </>
+              }
+            />
+          )
+        },
+      })
+      setlessonToDelete(null)
+    }
+  }, [deletingRqst.isLoading, deletingRqst.isSuccess, deletingRqst.isError])
+
   useEffect(() => {
     if (crLQuery.isSuccess) {
       const values = getValues()
@@ -101,8 +148,61 @@ const LessonList = () => {
     }
   }, [crLQuery.isSuccess])
 
+  if (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 (
     <>
+      <AlertDialog
+        isOpen={Boolean(lessonToDelete)}
+        leastDestructiveRef={cancelRef}
+        onClose={() => setlessonToDelete(null)}
+      >
+        <AlertDialogOverlay>
+          <AlertDialogContent>
+            <AlertDialogHeader fontSize="lg" fontWeight="bold">
+              Удалить занятие от{' '}
+              {dayjs(lessonToDelete?.date).format('DD.MM.YY')}?
+            </AlertDialogHeader>
+
+            <AlertDialogBody>
+              Все данные о посещении данного занятия будут удалены
+            </AlertDialogBody>
+
+            <AlertDialogFooter>
+              <Button
+                isDisabled={deletingRqst.isLoading}
+                ref={cancelRef}
+                onClick={() => setlessonToDelete(null)}
+              >
+                Cancel
+              </Button>
+              <Button
+                colorScheme="red"
+                loadingText=""
+                isLoading={deletingRqst.isLoading}
+                onClick={() => deleteLesson(lessonToDelete._id)}
+                ml={3}
+              >
+                Delete
+              </Button>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialogOverlay>
+      </AlertDialog>
       <BreadcrumbsWrapper>
         <Breadcrumb>
           <BreadcrumbItem>
@@ -216,55 +316,59 @@ const LessonList = () => {
           <Table variant="striped" colorScheme="cyan">
             <Thead>
               <Tr>
-                <Th align="center">ссылка</Th>
-                <Th>Дата</Th>
-                <Th>into</Th>
-                <Th isNumeric>Участников</Th>
+                {isTeacher(user) && (
+                  <Th align="center" width={1}>
+                    ссылка
+                  </Th>
+                )}
+                <Th textAlign="center" width={1}>
+                  Дата
+                </Th>
+                <Th>Название</Th>
+                <Th>action</Th>
+                <Th isNumeric>Отмечено</Th>
               </Tr>
             </Thead>
             <Tbody>
               {data?.body?.map((lesson) => (
                 <Tr key={lesson._id}>
-                  <Td>
-                    <Link
-                      to={
-                        isTeacher(user)
-                          ? `${getNavigationsValue('journal.main')}/lesson/${courseId}/${lesson._id}`
-                          : ''
-                      }
-                      style={{ display: 'flex' }}
-                    >
-                      <img width={24} src={qrCode} />
-                    </Link>
+                  {isTeacher(user) && (
+                    <Td>
+                      <Link
+                        to={`${getNavigationsValue('journal.main')}/lesson/${courseId}/${lesson._id}`}
+                        style={{ display: 'flex' }}
+                      >
+                        <img
+                          width={24}
+                          src={qrCode}
+                          style={{ margin: '0 auto' }}
+                        />
+                      </Link>
+                    </Td>
+                  )}
+                  <Td textAlign="center">
+                    {dayjs(lesson.date).format('H:mm DD.MM.YY')}
                   </Td>
-                  <Td>{dayjs(lesson.date).format('H:mm DD.MM.YY')}</Td>
                   <Td>{lesson.name}</Td>
+                  <Td>
+                    <Menu>
+                      <MenuButton as={Button}>
+                        <EditIcon />
+                      </MenuButton>
+                      <MenuList>
+                        <MenuItem isDisabled>Edit</MenuItem>
+                        <MenuItem onClick={() => setlessonToDelete(lesson)}>
+                          Delete
+                        </MenuItem>
+                      </MenuList>
+                    </Menu>
+                  </Td>
                   <Td isNumeric>{lesson.students.length}</Td>
                 </Tr>
               ))}
             </Tbody>
           </Table>
         </TableContainer>
-        {/* <ul style={{ paddingLeft: 0 }}>
-          {data?.body?.map((lesson) => (
-            <LessonItem key={lesson._id}>
-              <Link
-                to={
-                  isTeacher(user)
-                    ? `${getNavigationsValue('journal.main')}/lesson/${courseId}/${lesson._id}`
-                    : ''
-                }
-                style={{ display: 'flex' }}
-              >
-                <Lessonname>{lesson.name}</Lessonname>
-                <span>{dayjs(lesson.date).format('DD MMMM YYYYг.')}</span>
-                <span style={{ marginLeft: 'auto' }}>
-                  Участников - {lesson.students.length}
-                </span>
-              </Link>
-            </LessonItem>
-          ))}
-        </ul> */}
       </Container>
     </>
   )