3.6.5

ijl.config.js

@@ -10,7 +10,8 @@ module.exports = {
   navigations: {
     'journal.main': '/journal.pl',
     'exam.main': '/exam',
-    'link.exam.details': '/details/:courseId/:examId'
+    'link.exam.details': '/details/:courseId/:examId',
+    'link.journal.attendance': '/attendance/:courseId',
   },
   features: {
     journal: {

openapi-config.ts

@@ -1,12 +0,0 @@
-import type { ConfigFile } from '@rtk-query/codegen-openapi'
-
-const config: ConfigFile = {
-  schemaFile: 'https://platform.bro-js.ru/jrnl-bh/documentation/json',
-  apiFile: './src/__data__/api/api.ts',
-  apiImport: 'api',
-  outputFile: './src/__data__/api/jrnl.ts',
-  exportName: 'jrnlApi',
-  hooks: true,
-}
-
-export default config

package-lock.json

@@ -1,12 +1,12 @@
 {
     "name": "journal.pl",
-    "version": "3.3.0",
+    "version": "3.6.5",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "journal.pl",
-            "version": "3.3.0",
+            "version": "3.6.5",
             "license": "MIT",
             "dependencies": {
                 "@brojs/cli": "^0.0.4-beta.0",

package.json

@@ -1,6 +1,6 @@
 {
     "name": "journal.pl",
-    "version": "3.3.0",
+    "version": "3.6.5",
     "description": "bro-js platform journal ui repo",
     "main": "./src/index.tsx",
     "scripts": {
@@ -19,7 +19,6 @@
     "author": "",
     "license": "MIT",
     "devDependencies": {
-        "@rtk-query/codegen-openapi": "^1.2.0",
         "@typescript-eslint/eslint-plugin": "^7.4.0",
         "@typescript-eslint/parser": "^7.4.0",
         "eslint": "^8.57.0",

src/__data__/model.ts

@@ -53,10 +53,17 @@ export interface Lesson {
   id: string;
   name: string;
   students: User[];
+  teachers: Teacher[];
   date: string;
   created: string;
 }
 
+interface Teacher {
+  sub: string;
+  email_verified: boolean;
+  preferred_username: string;
+}
+
 export interface AccessCode {
   expires: string;
   lesson: Lesson;

src/components/error-boundary/index.tsx

@@ -0,0 +1,26 @@
+import { Alert } from '@chakra-ui/react'
+import React from 'react'
+
+export class ErrorBoundary extends React.Component<
+  React.PropsWithChildren,
+  { hasError: boolean, error?: string }
+> {
+  state = { hasError: false, error: null }
+
+  static getDerivedStateFromError(error: Error) {
+    return { hasError: true, error: error.message }
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <Alert status="error" title="Ошибка">
+          Что-то пошло не так<br />
+          {this.state.error && <span>{this.state.error}</span>}
+        </Alert>
+      )
+    }
+
+    return this.props.children
+  }
+}

src/dashboard.tsx

@@ -9,11 +9,14 @@ import {
   LessonDetailsPage,
   LessonListPage,
   UserPage,
+  AttendancePage,
 } from './pages'
+import { ErrorBoundary } from './components/error-boundary'
 
 const Wrapper = ({ children }: { children: React.ReactElement }) => (
   <Suspense
     fallback={
+      <ErrorBoundary>
         <Container>
           <VStack>
             <Box mt="150">
@@ -23,9 +26,11 @@ const Wrapper = ({ children }: { children: React.ReactElement }) => (
                 emptyColor="gray.200"
                 color="blue.500"
                 size="xl"
-          /></Box>
+              />
+            </Box>
           </VStack>
         </Container>
+      </ErrorBoundary>
     }
   >
     {children}
@@ -67,6 +72,14 @@ export const Dashboard = ({ store }) => (
           </Wrapper>
         }
       />
+      <Route
+        path={`${getNavigationsValue('journal.main')}${getNavigationsValue('link.journal.attendance')}`}
+        element={
+          <Wrapper>
+            <AttendancePage />
+          </Wrapper>
+        }
+      />
     </Routes>
   </Provider>
 )

src/index.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/display-name */
 import React from 'react';
 import ReactDOM from 'react-dom/client';
   
@@ -13,7 +14,7 @@ export default (props) => <App {...props} />;
   
 let rootElement: ReactDOM.Root
   
-export const mount = async (Сomponent, element = document.getElementById('app')) => {
+export const mount = async (Component, element = document.getElementById('app')) => {
   let user = null;
   try {
     await keycloak.init({ onLoad: "login-required" });
@@ -24,12 +25,12 @@ export const mount = async (Сomponent, element = document.getElementById('app')
   }
   const store = createStore({ user });
 
-  const rootElement = ReactDOM.createRoot(element);
-  rootElement.render(<Сomponent store={store} />);
+  rootElement = ReactDOM.createRoot(element);
+  rootElement.render(<Component store={store} />);
 
   if(module.hot) {
       module.hot.accept('./app', ()=> {
-        rootElement.render(<Сomponent store={store} />);
+        rootElement.render(<Component store={store} />);
       })
   }
 };

src/pages/attendance/attendance.tsx

@@ -0,0 +1,140 @@
+import React, { useMemo } from 'react'
+import { useParams } from 'react-router-dom'
+import { Box, Heading, Tooltip, Text } from '@chakra-ui/react'
+import dayjs from 'dayjs'
+
+import { api } from '../../__data__/api/api'
+import { PageLoader } from '../../components/page-loader/page-loader'
+
+export const Attendance = () => {
+  const { courseId } = useParams()
+  const { data: attendance, isLoading } = api.useLessonListQuery(courseId, {
+    selectFromResult: ({ data, isLoading }) => ({
+      data: data?.body,
+      isLoading,
+    }),
+  })
+  const { data: courseInfo, isLoading: courseInfoIssLoading } =
+    api.useGetCourseByIdQuery(courseId)
+
+  const data = useMemo(() => {
+    if (!attendance) return null
+
+    const studentsMap = new Map()
+    const teachersMap = new Map()
+
+    attendance.forEach((lesson) => {
+      lesson.teachers?.map((teacher: any) => {
+        teachersMap.set(teacher.sub, {  id: teacher.sub, ...teacher, value: teacher.value || (teacher.family_name && teacher.given_name
+          ? `${teacher.family_name} ${teacher.given_name}`
+          : teacher.name || teacher.email || teacher.preferred_username || teacher.family_name || teacher.given_name), })
+      })
+
+      lesson.students.forEach((student) => {
+        const current = studentsMap.get(student.sub) || {}
+
+        studentsMap.set(student.sub, {
+          ...student,
+          id: student.sub,
+          value: current.value || (student.family_name && student.given_name
+              ? `${student.family_name} ${student.given_name}`
+              : student.name || student.email || student.preferred_username || student.family_name || student.given_name),
+        })
+      })
+    })
+
+    const compare = Intl.Collator('ru').compare
+
+    const students = [...studentsMap.values()]
+    const taechers = [...teachersMap.values()]
+    students.sort(({ family_name: name }, { family_name: nname }) =>
+      compare(name, nname),
+    )
+    return {
+      students,
+      taechers,
+    }
+  }, [attendance])
+
+  if (!data || isLoading || courseInfoIssLoading) {
+    return <PageLoader />
+  }
+
+  return (
+    <Box>
+      <Box mt={12} mb={12}>
+        <Heading>{courseInfo.name}</Heading>
+      </Box>
+      <Box>
+        <table>
+          <thead>
+            <tr>
+              {data.taechers.map(teacher => (
+                <th id={teacher.id} key={teacher.id}>{teacher.value}</th>
+              ))}
+              <th>Дата</th>
+              <th>Название занятия</th>
+              {data.students.map((student) => (
+                <th id={student.id || student.sub} key={student.sub}>{student.name || student.value || 'Имя не определено'}</th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {attendance.map((lesson, index) => (
+              <tr key={lesson.name}>
+                {data?.taechers?.map((teacher) => {
+
+                  const wasThere = Boolean(lesson.teachers) &&
+                    lesson?.teachers?.findIndex((u) => u.sub === teacher.sub) !== -1
+                  return (
+                    <td
+                      style={{
+                        textAlign: 'center',
+                        backgroundColor: wasThere ? '#8ef78a' : '#e09797',
+                      }}
+                      key={teacher.sub}
+                    >
+                      {wasThere ? '+' : '-'}
+                    </td>
+                  )
+                })}
+                <td>{dayjs(lesson.date).format('DD.MM.YYYY')}</td>
+                <td>{<ShortText text={lesson.name} />}</td>
+
+                {data.students.map((st) => {
+                  const wasThere =
+                    lesson.students.findIndex((u) => u.sub === st.sub) !== -1
+                  return (
+                    <td
+                      style={{
+                        textAlign: 'center',
+                        backgroundColor: wasThere ? '#8ef78a' : '#e09797',
+                      }}
+                      key={st.sub}
+                    >
+                      {wasThere ? '+' : '-'}
+                    </td>
+                  )
+                })}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </Box>
+    </Box>
+  )
+}
+
+const ShortText = ({ text }: { text: string }) => {
+  const needShortText = text.length > 20
+
+  if (needShortText) {
+    return (
+      <Tooltip label="На страницу с лекциями" fontSize="12px" top="16px">
+        <Text>{text.slice(0, 20)}...</Text>
+      </Tooltip>
+    )
+  }
+
+  return text
+}

src/pages/attendance/index.ts

@@ -0,0 +1,3 @@
+import { Attendance } from './attendance'
+
+export default Attendance

src/pages/course-list/course-card.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react'
 import dayjs from 'dayjs'
-import { Link as ConnectedLink } from 'react-router-dom'
+import { Link as ConnectedLink, generatePath } from 'react-router-dom'
 import { getNavigationsValue } from '@brojs/cli'
 import {
   Box,
@@ -22,11 +22,7 @@ import { ArrowUpIcon, LinkIcon } from '@chakra-ui/icons'
 import { Course } from '../../__data__/model'
 import { CourseDetails } from './course-details'
 
-export const CourseCard = ({
-    course,
-}: {
-    course: Course
-}) => {
+export const CourseCard = ({ course }: { course: Course }) => {
   const [getLessonList, populatedCourse] = api.useLazyGetCourseByIdQuery()
   const [isOpened, setIsOpened] = useState(false)
   useEffect(() => {
@@ -36,7 +32,7 @@ export const CourseCard = ({
   }, [isOpened])
 
   const handleToggleOpene = useCallback(() => {
-        setIsOpened(opened => !opened)
+    setIsOpened((opened) => !opened)
   }, [setIsOpened])
 
   return (
@@ -57,12 +53,40 @@ export const CourseCard = ({
             </Box>
 
             {populatedCourse.isFetching && <Spinner />}
-                        {!populatedCourse.isFetching && populatedCourse.isSuccess && <CourseDetails populatedCourse={populatedCourse.data} />}
+            {!populatedCourse.isFetching && populatedCourse.isSuccess && (
+              <CourseDetails populatedCourse={populatedCourse.data} />
+            )}
+
+            {getNavigationsValue('link.journal.attendance') && (
+              <Tooltip
+                label="На страницу с лекциями"
+                fontSize="12px"
+                top="16px"
+              >
+                <Button
+                  leftIcon={<LinkIcon />}
+                  as={ConnectedLink}
+                  variant="outline"
+                  colorScheme="blue"
+                  to={generatePath(
+                    `${getNavigationsValue('journal.main')}${getNavigationsValue('link.journal.attendance')}`,
+                    { courseId: course.id },
+                  )}
+                >
+                  <Box mt={3}></Box>
+                  Посещаемость
+                </Button>
+              </Tooltip>
+            )}
           </Stack>
         </CardBody>
       )}
       <CardFooter>
-                <ButtonGroup spacing={[0, 4]} mt="16px" flexDirection={['column', 'row']}>
+        <ButtonGroup
+          spacing={[0, 4]}
+          mt="16px"
+          flexDirection={['column', 'row']}
+        >
           <Tooltip label="На страницу с лекциями" fontSize="12px" top="16px">
             <Button
               leftIcon={<LinkIcon />}
@@ -76,9 +100,13 @@ export const CourseCard = ({
           <Tooltip label="Детали" fontSize="12px" top="16px">
             <Button
               colorScheme="blue"
-                            mt={["16px", 0]}
+              mt={['16px', 0]}
               variant="outline"
-                            leftIcon={<ArrowUpIcon transform={isOpened ? 'rotate(0)' : 'rotate(180deg)'} />}
+              leftIcon={
+                <ArrowUpIcon
+                  transform={isOpened ? 'rotate(0)' : 'rotate(180deg)'}
+                />
+              }
               loadingText="Загрузка"
               isLoading={populatedCourse.isFetching}
               onClick={handleToggleOpene}

src/pages/course-list/course-details.tsx

@@ -1,15 +1,8 @@
 import React from 'react'
 import dayjs from 'dayjs'
 import { Link as ConnectedLink } from 'react-router-dom'
-import { getNavigationsValue } from '@brojs/cli'
-import {
-    Stack,
-    Heading,
-    Link,
-    Button,
-    Tooltip,
-    Box,
-} from '@chakra-ui/react'
+import { getNavigationsValue, getHistory } from '@brojs/cli'
+import { Stack, Heading, Link, Button, Tooltip, Box } from '@chakra-ui/react'
 
 import { useAppSelector } from '../../__data__/store'
 import { isTeacher } from '../../utils/user'
@@ -18,28 +11,50 @@ import { api } from '../../__data__/api/api'
 import { LinkIcon } from '@chakra-ui/icons'
 
 type CourseDetailsProps = {
-    populatedCourse: PopulatedCourse;
+  populatedCourse: PopulatedCourse
 }
 
+const history = getHistory()
+
 export const CourseDetails = ({ populatedCourse }: CourseDetailsProps) => {
   const user = useAppSelector((s) => s.user)
   const exam = populatedCourse.examWithJury
-    const [toggleExamWithJury, examWithJuryRequest] = api.useToggleExamWithJuryMutation()
+  const [toggleExamWithJury, examWithJuryRequest] =
+    api.useToggleExamWithJuryMutation()
 
   return (
     <>
+      {isTeacher(user) && (
         <Heading as="h3" mt={4} mb={3} size="lg">
-                Экзамен: {exam?.name} {exam && <Tooltip label="Начать экзамен" fontSize="12px" top="16px">
+          Экзамен: {exam?.name}{' '}
+          {exam && (
+            <Tooltip label="Начать экзамен" fontSize="12px" top="16px">
               <Button
                 leftIcon={<LinkIcon />}
                 as={'a'}
                 colorScheme="blue"
-                        href={getNavigationsValue('exam.main') + getNavigationsValue('link.exam.details').replace(':courseId', populatedCourse.id).replace(':examId', exam.id)}
+                href={
+                  getNavigationsValue('exam.main') +
+                  getNavigationsValue('link.exam.details')
+                    .replace(':courseId', populatedCourse.id)
+                    .replace(':examId', exam.id)
+                }
+                onClick={(event) => {
+                  event.preventDefault()
+                  history.push(
+                    getNavigationsValue('exam.main') +
+                      getNavigationsValue('link.exam.details')
+                        .replace(':courseId', populatedCourse.id)
+                        .replace(':examId', exam.id),
+                  )
+                }}
               >
                 Открыть
               </Button>
-                </Tooltip>}
+            </Tooltip>
+          )}
         </Heading>
+      )}
       {!Boolean(exam) && (
         <>
           <Heading as="h3" mt={4} mb={3} size="lg">
@@ -49,7 +64,7 @@ export const CourseDetails = ({ populatedCourse }: CourseDetailsProps) => {
             <Tooltip label="Создать экзамен с жюри" fontSize="12px" top="16px">
               <Button
                 colorScheme="blue"
-                                mt={["16px", 0]}
+                mt={['16px', 0]}
                 variant="outline"
                 isLoading={examWithJuryRequest.isLoading}
                 onClick={() => toggleExamWithJury(populatedCourse.id)}
@@ -67,8 +82,8 @@ export const CourseDetails = ({ populatedCourse }: CourseDetailsProps) => {
           </Heading>
           <Heading as="h3" mt={4} mb={3} size="lg">
             {populatedCourse.examWithJury.jury.length}
-                    </Heading></>
-
+          </Heading>
+        </>
       )}
       <Heading as="h3" mt={4} mb={3} size="lg">
         Список занятий:

src/pages/index.ts

@@ -4,3 +4,4 @@ export const CourseListPage = lazy(() => import(/* webpackChunkName: "course-lis
 export const LessonDetailsPage = lazy(() => import(/* webpackChunkName: "lesson-details" */ './lesson-details'));
 export const LessonListPage = lazy(() => import(/* webpackChunkName: "lesson-list" */ './lesson-list'));
 export const UserPage = lazy(() => import(/* webpackChunkName: "user-page" */ './user-page'));
+export const AttendancePage = lazy(() => import(/* webpackChunkName: "attendance-page" */ './attendance'));

src/pages/lesson-details.tsx

@@ -24,6 +24,8 @@ import {
   StudentList,
   BreadcrumbsWrapper,
 } from './style'
+import { useAppSelector } from '../__data__/store'
+import { isTeacher } from '../utils/user'
 
 export function getGravatarURL(email, user) {
   if (!email) return void 0
@@ -37,6 +39,8 @@ export function getGravatarURL(email, user) {
 const LessonDetail = () => {
   const { lessonId, courseId } = useParams()
   const canvRef = useRef(null)
+  const user = useAppSelector((s) => s.user)
+  
   const {
     isFetching,
     data: accessCode,
@@ -45,6 +49,7 @@ const LessonDetail = () => {
   } = api.useCreateAccessCodeQuery(
     { lessonId },
     {
+      skip: !isTeacher(user),
       pollingInterval:
         Number(getConfigValue('journal.polling-interval')) || 3000,
       skipPollingIfUnfocused: true,
@@ -144,7 +149,7 @@ const LessonDetail = () => {
             <QRCanvas ref={canvRef} />
           </a>
           <StudentList>
-            {studentsArr.map((student) => (
+            {isTeacher(user) && studentsArr.map((student) => (
               <UserCard
                 wrapperAS="li"
                 key={student.sub}

src/pages/lesson-list/components/item.tsx

@@ -0,0 +1,144 @@
+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>
+  )
+}

src/pages/lesson-list/components/lesson-items.tsx

@@ -0,0 +1,45 @@
+import React from 'react'
+import dayjs from 'dayjs'
+import {
+  Tr,
+  Td,
+} from '@chakra-ui/react'
+
+import { Lesson } from '../../../__data__/model'
+
+import { Item } from './item'
+
+type LessonItemProps = {
+  date: string
+  lessons: Lesson[]
+  isTeacher: boolean
+  courseId: string
+  setlessonToDelete(lesson: Lesson): void
+}
+
+export const LessonItems: React.FC<LessonItemProps> = ({
+  date,
+  lessons,
+  isTeacher,
+  courseId,
+  setlessonToDelete,
+}) => (
+  <>
+    {date && (
+      <Tr>
+        <Td colSpan={isTeacher ? 5 : 3}>
+          {dayjs(date).format('DD MMMM YYYY')}
+        </Td>
+      </Tr>
+    )}
+    {lessons.map((lesson) => (
+      <Item
+        key={lesson.id}
+        {...lesson}
+        setlessonToDelete={() => setlessonToDelete(lesson)}
+        courseId={courseId}
+        isTeacher={isTeacher}
+      />
+    ))}
+  </>
+)

src/pages/lesson-list/components/lessons-form.tsx

@@ -22,8 +22,8 @@ import { Lesson } from '../../../__data__/model'
 import { ErrorSpan } from '../style'
 
 interface NewLessonForm {
-    name: string;
-    date: string;
+  name: string
+  date: string
 }
 
 interface LessonFormProps {
@@ -51,7 +51,10 @@ export const LessonForm = ({
     reset,
     formState: { errors },
   } = useForm<NewLessonForm>({
-        defaultValues: (lesson && { ...lesson, date: dateToCalendarFormat(lesson.date) }) || {
+    defaultValues: (lesson && {
+      ...lesson,
+      date: dateToCalendarFormat(lesson.date),
+    }) || {
       name: '',
       date: dateToCalendarFormat(),
     },

src/pages/lesson-list/lesson-list.tsx

@@ -1,11 +1,6 @@
-import React, {
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react'
+import React, { useEffect, useMemo, useRef, useState } from 'react'
 import dayjs from 'dayjs'
-import { Link, useParams } from 'react-router-dom'
+import { generatePath, Link, useParams } from 'react-router-dom'
 import { getNavigationsValue, getFeatures } from '@brojs/cli'
 import {
   Breadcrumb,
@@ -22,12 +17,7 @@ import {
   Tr,
   Th,
   Tbody,
-  Td,
-  Menu,
-  MenuButton,
-  MenuItem,
   Text,
-  MenuList,
   AlertDialog,
   AlertDialogBody,
   AlertDialogContent,
@@ -35,18 +25,18 @@ import {
   AlertDialogHeader,
   AlertDialogOverlay,
 } from '@chakra-ui/react'
-import { AddIcon, EditIcon } from '@chakra-ui/icons'
+import { AddIcon } from '@chakra-ui/icons'
 
 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 { XlSpinner } from '../../components/xl-spinner'
 
 import { LessonForm } from './components/lessons-form'
-import { BreadcrumbsWrapper } from './style'
 import { Bar } from './components/bar'
+import { LessonItems } from './components/lesson-items'
+import { BreadcrumbsWrapper } from './style'
 
 const features = getFeatures('journal')
 
@@ -67,7 +57,10 @@ const LessonList = () => {
   const toastRef = useRef(null)
   const createdLessonRef = useRef(null)
   const [editLesson, setEditLesson] = useState<Lesson>(null)
-  const sorted = useMemo(() => [...(data?.body || [])]?.sort((a, b) => a.date > b.date ? 1 : -1), [data, data?.body])
+  const sorted = useMemo(
+    () => [...(data?.body || [])]?.sort((a, b) => (a.date > b.date ? 1 : -1)),
+    [data, data?.body],
+  )
 
   const lessonCalc = useMemo(() => {
     if (!isSuccess) {
@@ -95,7 +88,7 @@ const LessonList = () => {
       }
     }
 
-    return lessonsData.sort((a, b) => a.date < b.date? 1 : -1)
+    return lessonsData.sort((a, b) => (a.date < b.date ? 1 : -1))
   }, [groupByDate, isSuccess, sorted])
 
   const onSubmit = (lessonData) => {
@@ -153,8 +146,8 @@ const LessonList = () => {
     if (crLQuery.isSuccess) {
       const toastProps = {
         title: 'Лекция создана',
-        description: `Лекция ${createdLessonRef.current.name} успешно создана`,
-        status: 'success' as 'success',
+        description: `Лекция ${createdLessonRef.current?.name} успешно создана`,
+        status: 'success' as const,
         duration: 9000,
         isClosable: true,
       }
@@ -168,8 +161,8 @@ const LessonList = () => {
     if (updateLessonRqst.isSuccess) {
       const toastProps = {
         title: 'Лекция Обновлена',
-        description: `Лекция ${createdLessonRef.current.name} успешно обновлена`,
-        status: 'success' as 'success',
+        description: `Лекция ${createdLessonRef.current?.name} успешно обновлена`,
+        status: 'success' as const,
         duration: 9000,
         isClosable: true,
       }
@@ -180,7 +173,7 @@ const LessonList = () => {
   }, [updateLessonRqst.isSuccess])
 
   if (isLoading) {
-    return <XlSpinner />;
+    return <XlSpinner />
   }
 
   return (
@@ -213,7 +206,7 @@ const LessonList = () => {
                 colorScheme="red"
                 loadingText=""
                 isLoading={deletingRqst.isLoading}
-                onClick={() => deleteLesson(lessonToDelete._id)}
+                onClick={() => deleteLesson(lessonToDelete.id)}
                 ml={3}
               >
                 Delete
@@ -240,7 +233,7 @@ const LessonList = () => {
           <Box mt="15" mb="15">
             {showForm ? (
               <LessonForm
-                key={editLesson?._id}
+                key={editLesson?.id}
                 isLoading={crLQuery.isLoading}
                 onSubmit={onSubmit}
                 onCancel={() => {
@@ -253,7 +246,6 @@ const LessonList = () => {
                 nameButton={editLesson ? 'Редактировать' : 'Создать'}
               />
             ) : (
-              <Box p="2" m="2">
               <Button
                 leftIcon={<AddIcon />}
                 colorScheme="green"
@@ -261,11 +253,10 @@ const LessonList = () => {
               >
                 Добавить
               </Button>
-              </Box>
             )}
           </Box>
         )}
-        {barFeature && sorted?.length && (
+        {barFeature && sorted?.length > 1 && (
           <Box height="300">
             <Bar
               data={sorted.map((lesson, index) => ({
@@ -285,7 +276,7 @@ const LessonList = () => {
                   </Th>
                 )}
                 <Th textAlign="center" width={1}>
-                  Дата
+                  {groupByDate ? 'Время' : 'Дата'}
                 </Th>
                 <Th width="100%">Название</Th>
                 {isTeacher(user) && <Th>action</Th>}
@@ -294,56 +285,14 @@ const LessonList = () => {
             </Thead>
             <Tbody>
               {lessonCalc?.map(({ data: lessons, date }) => (
-                <React.Fragment key={date}>
-                  {date && <Tr><Td colSpan={isTeacher(user) ? 5 : 3}>{dayjs(date).format('DD MMMM YYYY')}</Td></Tr>}
-                  {lessons.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' }}
+                <LessonItems
+                  courseId={courseId}
+                  date={date}
+                  isTeacher={isTeacher(user)}
+                  lessons={lessons}
+                  setlessonToDelete={setlessonToDelete}
+                  key={date}
                 />
-                          </Link>
-                        </Td>
-                      )}
-                      <Td textAlign="center">
-                        {dayjs(lesson.date).format(groupByDate ? 'HH:mm' : 'HH:mm DD.MM.YY')}
-                      </Td>
-                      <Td>{lesson.name}</Td>
-                      {isTeacher(user) && (
-                        <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>
-                  ))}
-                </React.Fragment>
               ))}
             </Tbody>
           </Table>

stubs/mocks/lessons/list/success.json

@@ -4,6 +4,13 @@
     {
       "_id": "65e2e5fbec37fec650f28489",
       "name": "ВВЕДЕНИЕ В ВЕБ-РАЗРАБОТКУ. ИНСТРУМЕНТАРИЙ, ОБЗОР ВЕБ-ТЕХНОЛОГИЙ",
+      "teachers": [
+        {
+          "sub": "f62905b1-e223-40ca-910f-c8d84c6137c1",
+          "email_verified": true,
+          "preferred_username": "primakov"
+        }
+      ],
       "students": [
         {
           "sub": "fcde3f22-d9ba-412a-a572-c59e515a290f",