inline edit mode

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

@@ -1,9 +1,4 @@
-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 { getNavigationsValue, getFeatures } from '@brojs/cli'
@@ -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={() => {
@@ -265,7 +258,7 @@ const LessonList = () => {
             )}
           </Box>
         )}
-        {barFeature && sorted?.length && (
+        {barFeature && sorted?.length > 1 && (
           <Box height="300">
             <Bar
               data={sorted.map((lesson, index) => ({
@@ -285,7 +278,7 @@ const LessonList = () => {
                   </Th>
                 )}
                 <Th textAlign="center" width={1}>
-                  Дата
+                  {groupByDate ? 'Время' : 'Дата'}
                 </Th>
                 <Th width="100%">Название</Th>
                 {isTeacher(user) && <Th>action</Th>}
@@ -294,56 +287,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' }}
-                            />
-                          </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>
+                <LessonItems
+                  courseId={courseId}
+                  date={date}
+                  isTeacher={isTeacher(user)}
+                  lessons={lessons}
+                  setlessonToDelete={setlessonToDelete}
+                  key={date}
+                />
               ))}
             </Tbody>
           </Table>