2.1.1

Reviewed-on: https://git.inno-js.ru/bro-js/journal.pl/pulls/18

.gitignore

@@ -9,6 +9,8 @@ pids
 *.pid
 *.seed
 
+*prom.json
+
 # Directory for instrumented libs generated by jscoverage/JSCover
 lib-cov
 

Jenkinsfile

@@ -8,7 +8,6 @@ pipeline {
   stages {
     stage('install') {
       steps {
-        sh 'ls -a'
         sh 'node -v'
         sh 'npm -v'
         sh 'npm ci'

package-lock.json

@@ -1,12 +1,12 @@
 {
     "name": "journal.pl",
-    "version": "1.2.0",
+    "version": "2.1.1",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "journal.pl",
-            "version": "1.2.0",
+            "version": "2.1.1",
             "license": "MIT",
             "dependencies": {
                 "@chakra-ui/icons": "^2.1.1",

package.json

@@ -1,6 +1,6 @@
 {
     "name": "journal.pl",
-    "version": "1.2.0",
+    "version": "2.1.1",
     "description": "inno-js platform journal ui repo",
     "main": "./src/index.tsx",
     "scripts": {

src/__data__/api/api.ts

@@ -1,80 +1,120 @@
-import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
+import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
-import { getConfigValue } from "@ijl/cli";
+import { getConfigValue } from '@ijl/cli'
 
-import { keycloak } from "../kc";
+import { keycloak } from '../kc'
-import { AccessCode, BaseResponse, Course, Lesson, User, UserData } from "../model";
+import {
+  AccessCode,
+  BaseResponse,
+  Course,
+  Lesson,
+  User,
+  UserData,
+} from '../model'
 
 export const api = createApi({
-  reducerPath: "auth",
+  reducerPath: 'auth',
   baseQuery: fetchBaseQuery({
-    baseUrl: getConfigValue("journal.back.url"),
+    baseUrl: getConfigValue('journal.back.url'),
-    fetchFn: async (input: RequestInfo | URL, init?: RequestInit | undefined) => {
+    fetchFn: async (
-      const response = await fetch(input, init);
+      input: RequestInfo | URL,
+      init?: RequestInit | undefined,
+    ) => {
+      const response = await fetch(input, init)
 
       if (response.status === 403) keycloak.login()
 
-      return response;
+      return response
     },
     headers: {
-      "Content-Type": "application/json;charset=utf-8",
+      'Content-Type': 'application/json;charset=utf-8',
     },
     prepareHeaders: (headers) => {
       headers.set('Authorization', `Bearer ${keycloak.token}`)
-    }
+    },
   }),
   tagTypes: ['LessonList', 'CourseList'],
   endpoints: (builder) => ({
     coursesList: builder.query<BaseResponse<Course[]>, void>({
       query: () => '/course/list',
-      providesTags: ['CourseList']
+      providesTags: ['CourseList'],
     }),
-    createUpdateCourse: builder.mutation<BaseResponse<Course>, Partial<Course> & Pick<Course, 'name'>>({
+    createUpdateCourse: builder.mutation<
+      BaseResponse<Course>,
+      Partial<Course> & Pick<Course, 'name'>
+    >({
       query: (course) => ({
         url: '/course',
         method: 'POST',
         body: course,
       }),
-      invalidatesTags: ['CourseList']
+      invalidatesTags: ['CourseList'],
     }),
     courseAllStudents: builder.query<BaseResponse<User[]>, string>({
-      query: (courseId) => `/course/students/${courseId}`
+      query: (courseId) => `/course/students/${courseId}`,
     }),
-    manualAddStudent: builder.mutation<BaseResponse<void>, { lessonId: string, user: User }>({
+    manualAddStudent: builder.mutation<
-      query: ({lessonId, user}) => ({
+      BaseResponse<void>,
+      { lessonId: string; user: User }
+    >({
+      query: ({ lessonId, user }) => ({
         url: `/lesson/add-student/${lessonId}`,
         method: 'POST',
-        body: user
+        body: user,
-      })
+      }),
     }),
 
     lessonList: builder.query<BaseResponse<Lesson[]>, string>({
       query: (courseId) => `/lesson/list/${courseId}`,
-      providesTags: ['LessonList']
+      providesTags: ['LessonList'],
     }),
-    createLesson: builder.mutation<BaseResponse<Lesson>, Pick<Lesson, 'name' | 'date'> & { courseId: string }>({
+    createLesson: builder.mutation<
-      query: ({ name, courseId, date }) => ({
+      BaseResponse<Lesson>,
+      Partial<Lesson> & Pick<Lesson, 'name' | 'date'> & { courseId: string }
+    >({
+      query: (data) => ({
         url: '/lesson',
         method: 'POST',
-        body: { name, courseId, date },
+        body: data,
       }),
-      invalidatesTags: ['LessonList']
+      invalidatesTags: ['LessonList'],
+    }),
+    updateLesson: builder.mutation<BaseResponse<Lesson>, Partial<Lesson> & Pick<Lesson, '_id'>>({
+      query: (data) => ({
+        method: 'PUT',
+        url: '/lesson',
+        body: data,
+      }),
+      invalidatesTags: ['LessonList'],
+    }),
+    deleteLesson: builder.mutation<null, string>({
+      query: (lessonId) => ({
+        url: `/lesson/${lessonId}`,
+        method: 'DELETE',
+      }),
+      invalidatesTags: ['LessonList'],
     }),
     lessonById: builder.query<BaseResponse<Lesson>, string>({
-      query: (lessonId: string) => `/lesson/${lessonId}`
+      query: (lessonId: string) => `/lesson/${lessonId}`,
     }),
 
-    createAccessCode: builder.query<BaseResponse<AccessCode>, { lessonId: string }>({
+    createAccessCode: builder.query<
+      BaseResponse<AccessCode>,
+      { lessonId: string }
+    >({
       query: ({ lessonId }) => ({
         url: '/lesson/access-code',
         method: 'POST',
         body: { lessonId },
-      })
+      }),
     }),
-    getAccess: builder.query<BaseResponse<{ user: UserData, accessCode: AccessCode }>, { accessCode: string }>({
+    getAccess: builder.query<
+      BaseResponse<{ user: UserData; accessCode: AccessCode }>,
+      { accessCode: string }
+    >({
       query: ({ accessCode }) => ({
         url: `/lesson/access-code/${accessCode}`,
         method: 'GET',
-      })
+      }),
-    })
+    }),
   }),
-});
+})

src/pages/course-list.tsx

@@ -35,6 +35,7 @@ import { useAppSelector } from '../__data__/store'
 import { api } from '../__data__/api/api'
 import { isTeacher } from '../utils/user'
 import { AddIcon, ArrowDownIcon, ArrowUpIcon, LinkIcon } from '@chakra-ui/icons'
+import { Course } from '../__data__/model'
 
 interface NewCourseForm {
   startDt: string
@@ -226,7 +227,15 @@ const CoursesList = () => {
   )
 }
 
-const CourseCard = ({ course, isOpened, openDetails }) => {
+const CourseCard = ({
+  course,
+  isOpened,
+  openDetails,
+}: {
+  course: Course
+  isOpened: boolean
+  openDetails: () => void
+}) => {
   const [getLessonList, lessonList] = api.useLazyLessonListQuery()
   useEffect(() => {
     if (isOpened) {
@@ -262,6 +271,7 @@ const CourseCard = ({ course, isOpened, openDetails }) => {
                   {lessonList.data?.body?.map((lesson) => (
                     <Link
                       as={ConnectedLink}
+                      key={lesson._id}
                       to={
                         isTeacher(user)
                           ? `${getNavigationsValue('journal.main')}/lesson/${course._id}/${lesson._id}`

src/pages/lesson-details.tsx

@@ -20,6 +20,7 @@ import {
   Lessonname,
   AddMissedButton,
   UnorderList,
+  BreadcrumbsWrapper,
 } from './style'
 import { api } from '../__data__/api/api'
 import { User } from '../__data__/model'
@@ -86,8 +87,8 @@ const LessonDetail = () => {
   }, [accessCode?.body, AllStudents.data])
 
   return (
-    <Container maxW="container.xl" centerContent px="200">
+    <>
-      <VStack align="left">
+      <BreadcrumbsWrapper>
         <Breadcrumb>
           <BreadcrumbItem>
             <BreadcrumbLink as={Link} to={getNavigationsValue('journal.main')}>
@@ -108,41 +109,45 @@ const LessonDetail = () => {
             <BreadcrumbLink href="#">Лекция</BreadcrumbLink>
           </BreadcrumbItem>
         </Breadcrumb>
-        <Heading as='h3' mt='4' mb='3'>
+      </BreadcrumbsWrapper>
-          Тема занятия: 
+      <Container maxW="container.xl" centerContent px="200">
-        </Heading>
+        <VStack align="left">
-        <Box as="span">
+          <Heading as="h3" mt="4" mb="3">
-          {accessCode?.body?.lesson?.name}
+            Тема занятия:
-        </Box>
+          </Heading>
-        <Box as='span'>
+          <Box as="span">{accessCode?.body?.lesson?.name}</Box>
-          {dayjs(accessCode?.body?.lesson?.date).format('DD MMMM YYYYг.')}{' '}
+          <Box as="span">
-          Отмечено - {accessCode?.body?.lesson?.students?.length}{' '}
+            {dayjs(accessCode?.body?.lesson?.date).format('DD MMMM YYYYг.')}{' '}
-          {AllStudents.isSuccess ? `/ ${AllStudents?.data?.body?.length}` : ''}{' '}
+            Отмечено - {accessCode?.body?.lesson?.students?.length}{' '}
-          человек
+            {AllStudents.isSuccess
-        </Box>
+              ? `/ ${AllStudents?.data?.body?.length}`
-      </VStack>
+              : ''}{' '}
-      <HStack spacing="8">
+            человек
-        <a href={userUrl}>
+          </Box>
-          <QRCanvas ref={canvRef} />
+        </VStack>
-        </a>
+        <HStack spacing="8">
-        <UnorderList>
+          <a href={userUrl}>
-          {studentsArr.map((student) => (
+            <QRCanvas ref={canvRef} />
-            <LessonItem key={student.sub} warn={!student.present}>
+          </a>
-              <Lessonname>
+          <UnorderList>
-                {student.name || student.preferred_username}{' '}
+            {studentsArr.map((student) => (
-                {!student.present && (
+              <LessonItem key={student.sub} warn={!student.present}>
-                  <AddMissedButton
+                <Lessonname>
-                    onClick={() => manualAdd({ lessonId, user: student })}
+                  {student.name || student.preferred_username}{' '}
-                  >
+                  {!student.present && (
-                    add
+                    <AddMissedButton
-                  </AddMissedButton>
+                      onClick={() => manualAdd({ lessonId, user: student })}
-                )}
+                    >
-              </Lessonname>
+                      add
-            </LessonItem>
+                    </AddMissedButton>
-          ))}
+                  )}
-        </UnorderList>
+                </Lessonname>
-      </HStack>
+              </LessonItem>
-    </Container>
+            ))}
+          </UnorderList>
+        </HStack>
+      </Container>
+    </>
   )
 }
 

src/pages/lesson-list.tsx

@@ -14,215 +14,415 @@ import {
   CardHeader,
   Heading,
   Button,
-  ButtonGroup,
   CloseButton,
   useToast,
-  Stack,
   VStack,
   FormControl,
   FormLabel,
+  Toast,
   FormHelperText,
   FormErrorMessage,
   Input,
+  TableContainer,
+  Table,
+  Thead,
+  Tr,
+  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 { LessonItem, Lessonname, ErrorSpan } 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'
+
+import { ErrorSpan, BreadcrumbsWrapper } from './style'
 
 interface NewLessonForm {
   name: string
   date: string
 }
 
+interface LessonFormProps {
+  lesson?: Partial<Lesson>
+  isLoading: boolean
+  onCancel: () => void
+  onSubmit: (lesson: Lesson) => void
+  error?: string
+}
+
+const LessonForm = ({
+  lesson,
+  isLoading,
+  onCancel,
+  onSubmit,
+  error,
+}: LessonFormProps) => {
+  const {
+    control,
+    handleSubmit,
+    reset,
+    formState: { errors },
+  } = useForm<NewLessonForm>({
+    defaultValues: lesson || {
+      name: '',
+      date: '',
+    },
+  })
+
+  return (
+    <Card align="left">
+      <CardHeader display="flex">
+        <Heading as="h2" mt="0">
+          Создание лекции
+        </Heading>
+        <CloseButton
+          ml="auto"
+          onClick={() => {
+            reset()
+            onCancel()
+          }}
+        />
+      </CardHeader>
+      <CardBody>
+        <form onSubmit={handleSubmit(onSubmit)}>
+          <VStack spacing="10" align="left">
+            <Controller
+              control={control}
+              name="date"
+              rules={{ required: 'Обязательное поле' }}
+              render={({ field }) => (
+                <FormControl>
+                  <FormLabel>Дата</FormLabel>
+                  <Input
+                    {...field}
+                    required={false}
+                    placeholder="Укажите дату лекции"
+                    size="md"
+                    type="datetime-local"
+                  />
+                  {errors.date ? (
+                    <FormErrorMessage>{errors.date?.message}</FormErrorMessage>
+                  ) : (
+                    <FormHelperText>Укажите дату и время лекции</FormHelperText>
+                  )}
+                </FormControl>
+              )}
+            />
+
+            <Controller
+              control={control}
+              name="name"
+              rules={{ required: 'Обязательное поле' }}
+              render={({ field }) => (
+                <FormControl isRequired isInvalid={Boolean(errors.name)}>
+                  <FormLabel>Название новой лекции:</FormLabel>
+                  <Input
+                    {...field}
+                    required={false}
+                    placeholder="Название лекции"
+                    size="md"
+                  />
+                  {errors.name && (
+                    <FormErrorMessage>{errors.name.message}</FormErrorMessage>
+                  )}
+                </FormControl>
+              )}
+            />
+            <Box mt="10">
+              <Button
+                size="lg"
+                type="submit"
+                leftIcon={<AddIcon />}
+                colorScheme="blue"
+                isLoading={isLoading}
+              >
+                Создать
+              </Button>
+            </Box>
+          </VStack>
+
+          {error && <ErrorSpan>{error}</ErrorSpan>}
+        </form>
+      </CardBody>
+    </Card>
+  )
+}
+
 const LessonList = () => {
   const { courseId } = useParams()
   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 [updateLesson, updateLessonRqst] = api.useUpdateLessonMutation()
   const [showForm, setShowForm] = useState(false)
-  const {
+  const [lessonToDelete, setlessonToDelete] = useState<Lesson>(null)
-    control,
+  const cancelRef = React.useRef()
-    handleSubmit,
-    reset,
-    formState: { errors },
-    getValues,
-  } = useForm<NewLessonForm>({
-    defaultValues: {
-      name: '',
-      date: '',
-    },
-  })
   const toast = useToast()
   const toastRef = useRef(null)
+  const createdLessonRef = useRef(null)
+  const [editLesson, setEditLesson] = useState<Lesson>(null)
 
-  const handleChange = useCallback(
+  const onSubmit = (lessonData) => {
-    (event) => {
-      setValue(event.target.value.toUpperCase())
-    },
-    [setValue],
-  )
-  const onSubmit = ({ name, date }) => {
     toastRef.current = toast({
       title: 'Отправляем',
       status: 'loading',
       duration: 9000,
     })
-    createLesson({ name, courseId, date })
+    createdLessonRef.current = lessonData
+    if (editLesson) updateLesson(lessonData)
+    else createLesson({ courseId, ...lessonData })
   }
 
+  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: ({ id, ...toastProps }) => (
+          <Toast
+            {...toastProps}
+            id={id}
+            title={
+              <>
+                <Box pb={3}>
+                  <Text fontSize="xl">{`Удалена лекция ${lesson.name}`}</Text>
+                </Box>
+                <Button
+                  onClick={() => {
+                    createLesson({ courseId, ...lesson })
+                    toast.close(id)
+                  }}
+                >
+                  Восстановить
+                </Button>
+              </>
+            }
+          />
+        ),
+      })
+      setlessonToDelete(null)
+    }
+  }, [deletingRqst.isLoading, deletingRqst.isSuccess, deletingRqst.isError])
+
   useEffect(() => {
     if (crLQuery.isSuccess) {
-      const values = getValues()
+      const toastProps = {
-      if (toastRef.current) {
+        title: 'Лекция создана',
-        toast.update(toastRef.current, {
+        description: `Лекция ${createdLessonRef.current.name} успешно создана`,
-          title: 'Лекция создана',
+        status: 'success' as 'success',
-          description: `Лекция ${values.name} успешно создана`,
+        duration: 9000,
-          status: 'success',
+        isClosable: true,
-          duration: 9000,
-          isClosable: true,
-        })
       }
-      reset()
+      if (toastRef.current) toast.update(toastRef.current, toastProps)
+      else toast(toastProps)
+      setShowForm(false)
     }
   }, [crLQuery.isSuccess])
 
+  useEffect(() => {
+    if (updateLessonRqst.isSuccess) {
+      const toastProps = {
+        title: 'Лекция Обновлена',
+        description: `Лекция ${createdLessonRef.current.name} успешно обновлена`,
+        status: 'success' as 'success',
+        duration: 9000,
+        isClosable: true,
+      }
+      if (toastRef.current) toast.update(toastRef.current, toastProps)
+      else toast(toastProps)
+      setShowForm(false)
+    }
+  }, [updateLessonRqst.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 (
-    <Container maxW="container.xl">
+    <>
-      <Breadcrumb>
+      <AlertDialog
-        <BreadcrumbItem>
+        isOpen={Boolean(lessonToDelete)}
-          <BreadcrumbLink as={Link} to={getNavigationsValue('journal.main')}>
+        leastDestructiveRef={cancelRef}
-            Журнал
+        onClose={() => setlessonToDelete(null)}
-          </BreadcrumbLink>
+      >
-        </BreadcrumbItem>
+        <AlertDialogOverlay>
+          <AlertDialogContent>
+            <AlertDialogHeader fontSize="lg" fontWeight="bold">
+              Удалить занятие от{' '}
+              {dayjs(lessonToDelete?.date).format('DD.MM.YY')}?
+            </AlertDialogHeader>
 
-        <BreadcrumbItem isCurrentPage>
+            <AlertDialogBody>
-          <BreadcrumbLink href="#">Курс</BreadcrumbLink>
+              Все данные о посещении данного занятия будут удалены
-        </BreadcrumbItem>
+            </AlertDialogBody>
-      </Breadcrumb>
 
-      {isTeacher(user) && (
+            <AlertDialogFooter>
-        <Box mt="15" mb="15">
-          {showForm ? (
-            <Card align="left">
-              <CardHeader display="flex">
-                <Heading as="h2" mt="0">
-                  Создание лекции
-                </Heading>
-                <CloseButton ml="auto" onClick={() => setShowForm(false)} />
-              </CardHeader>
-              <CardBody>
-                <form onSubmit={handleSubmit(onSubmit)}>
-                  <VStack spacing="10" align="left">
-                    <Controller
-                      control={control}
-                      name="date"
-                      rules={{ required: 'Обязательное поле' }}
-                      render={({ field }) => (
-                        <FormControl>
-                          <FormLabel>Дата</FormLabel>
-                          <Input
-                            {...field}
-                            required={false}
-                            placeholder="Укажите дату лекции"
-                            size="md"
-                            type="datetime-local"
-                          />
-                          {errors.date ? (
-                            <FormErrorMessage>
-                              {errors.date?.message}
-                            </FormErrorMessage>
-                          ) : (
-                            <FormHelperText>
-                              Укажите дату и время лекции
-                            </FormHelperText>
-                          )}
-                        </FormControl>
-                      )}
-                    />
-
-                    <Controller
-                      control={control}
-                      name="name"
-                      rules={{ required: 'Обязательное поле' }}
-                      render={({ field }) => (
-                        <FormControl
-                          isRequired
-                          isInvalid={Boolean(errors.name)}
-                        >
-                          <FormLabel>Название новой лекции:</FormLabel>
-                          <Input
-                            {...field}
-                            required={false}
-                            placeholder="Название лекции"
-                            size="md"
-                          />
-                          {errors.name && (
-                            <FormErrorMessage>
-                              {errors.name.message}
-                            </FormErrorMessage>
-                          )}
-                        </FormControl>
-                      )}
-                    />
-                    <Box mt="10">
-                      <Button
-                        size="lg"
-                        type="submit"
-                        leftIcon={<AddIcon />}
-                        colorScheme="blue"
-                      >
-                        Создать
-                      </Button>
-                    </Box>
-                  </VStack>
-
-                  {crLQuery.error && (
-                    <ErrorSpan>{(crLQuery.error as any).error}</ErrorSpan>
-                  )}
-                </form>
-              </CardBody>
-            </Card>
-          ) : (
-            <Box p="2" m="2">
               <Button
-                leftIcon={<AddIcon />}
+                isDisabled={deletingRqst.isLoading}
-                colorScheme="green"
+                ref={cancelRef}
-                onClick={() => setShowForm(true)}
+                onClick={() => setlessonToDelete(null)}
               >
-                Добавить
+                Cancel
               </Button>
-            </Box>
+              <Button
-          )}
+                colorScheme="red"
-        </Box>
+                loadingText=""
-      )}
+                isLoading={deletingRqst.isLoading}
-      <ul style={{ paddingLeft: 0 }}>
+                onClick={() => deleteLesson(lessonToDelete._id)}
-        {data?.body?.map((lesson) => (
+                ml={3}
-          <LessonItem key={lesson._id}>
+              >
-            <Link
+                Delete
-              to={
+              </Button>
-                isTeacher(user)
+            </AlertDialogFooter>
-                  ? `${getNavigationsValue('journal.main')}/lesson/${courseId}/${lesson._id}`
+          </AlertDialogContent>
-                  : ''
+        </AlertDialogOverlay>
-              }
+      </AlertDialog>
-              style={{ display: 'flex' }}
+      <BreadcrumbsWrapper>
-            >
+        <Breadcrumb>
-              <Lessonname>{lesson.name}</Lessonname>
+          <BreadcrumbItem>
-              <span>{dayjs(lesson.date).format('DD MMMM YYYYг.')}</span>
+            <BreadcrumbLink as={Link} to={getNavigationsValue('journal.main')}>
-              <span style={{ marginLeft: 'auto' }}>
+              Журнал
-                Участников - {lesson.students.length}
+            </BreadcrumbLink>
-              </span>
+          </BreadcrumbItem>
-            </Link>
+
-          </LessonItem>
+          <BreadcrumbItem isCurrentPage>
-        ))}
+            <BreadcrumbLink href="#">Курс</BreadcrumbLink>
-      </ul>
+          </BreadcrumbItem>
-    </Container>
+        </Breadcrumb>
+      </BreadcrumbsWrapper>
+      <Container maxW="container.xl">
+        {isTeacher(user) && (
+          <Box mt="15" mb="15">
+            {showForm ? (
+              <LessonForm
+                key={editLesson?._id}
+                isLoading={crLQuery.isLoading}
+                onSubmit={onSubmit}
+                onCancel={() => {
+                  setShowForm(false)
+                  setEditLesson(null)
+                }}
+                error={(crLQuery.error as any)?.error}
+                lesson={editLesson}
+              />
+            ) : (
+              <Box p="2" m="2">
+                <Button
+                  leftIcon={<AddIcon />}
+                  colorScheme="green"
+                  onClick={() => setShowForm(true)}
+                >
+                  Добавить
+                </Button>
+              </Box>
+            )}
+          </Box>
+        )}
+        <TableContainer whiteSpace="wrap">
+          <Table variant="striped" colorScheme="cyan">
+            <Thead>
+              <Tr>
+                {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}>
+                  {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>{lesson.name}</Td>
+                  <Td>
+                    <Menu>
+                      <MenuButton as={Button}>
+                        <EditIcon />
+                      </MenuButton>
+                      <MenuList>
+                        <MenuItem
+                          onClick={() => {
+                            setShowForm(true)
+                            setEditLesson(lesson)
+                          }}
+                        >
+                          Edit
+                        </MenuItem>
+                        <MenuItem onClick={() => setlessonToDelete(lesson)}>
+                          Delete
+                        </MenuItem>
+                      </MenuList>
+                    </Menu>
+                  </Td>
+                  <Td isNumeric>{lesson.students.length}</Td>
+                </Tr>
+              ))}
+            </Tbody>
+          </Table>
+        </TableContainer>
+      </Container>
+    </>
   )
 }
 

src/pages/style.ts

@@ -4,6 +4,9 @@ import {
   Card
 } from '@chakra-ui/react'
 
+export const BreadcrumbsWrapper = styled.div`
+  padding: 12px;
+`;
 
 export const MainWrapper = styled.main`
   display: flex;

stubs/api/index.js

@@ -45,4 +45,12 @@ router.get('/lesson/:lessonId', (req, res) => {
   res.send(require('../mocks/lessons/byid/success.json'))
 })
 
+router.delete('/lesson/:lessonId', (req, res) => {
+  res.send({ success: true, body: { ok: true }})
+})
+
+router.put('/lesson', (req, res) => {
+  res.send({ success: true, body: req.body })
+})
+
 module.exports = router