group by date feature

ijl.config.js

@@ -1,27 +1,32 @@
 const pkg = require('./package')
 
 module.exports = {
-    apiPath: 'stubs/api',
-    webpackConfig: {
-        output: {
-            publicPath: `/static/${pkg.name}/${process.env.VERSION || pkg.version}/`
-        }
+  apiPath: 'stubs/api',
+  webpackConfig: {
+    output: {
+      publicPath: `/static/${pkg.name}/${process.env.VERSION || pkg.version}/`,
     },
-    navigations: {
-        'journal.main': '/journal.pl'
+  },
+  navigations: {
+    'journal.main': '/journal.pl',
+  },
+  features: {
+    journal: {
+      // add your features here in the format [featureName]: { value: string }
+      'lesson.bar': {
+        on: true,
+        value: '',
+        key: 'lesson.bar',
+      },
+      'group.by.date': {
+        on: true,
+        value: '',
+        key: 'group.by.date',
+      },
     },
-    features: {
-        'journal': {
-            // add your features here in the format [featureName]: { value: string }
-            "lesson.bar": {
-              "on": true,
-              "value": "",
-              "key": "lesson.bar"
-          }
-        },
-    },
-    config: {
-    "journal.back.url": "/api",
-    "journal.polling-interval": "10000"
-  }
+  },
+  config: {
+    'journal.back.url': '/api',
+    'journal.polling-interval': '10000',
+  },
 }

src/pages/lesson-list.tsx

@@ -1,4 +1,9 @@
-import React, { useEffect, useRef, useState } from 'react'
+import React, {
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
 import { ResponsiveBar } from '@nivo/bar'
 import dayjs from 'dayjs'
 import { Link, useParams } from 'react-router-dom'
@@ -52,13 +57,13 @@ import { api } from '../__data__/api/api'
 import { isTeacher } from '../utils/user'
 import { qrCode } from '../assets'
 import { Lesson } from '../__data__/model'
-import pkg from '../../package.json'
 
 import { ErrorSpan, BreadcrumbsWrapper } from './style'
 
 const features = getFeatures('journal')
 
 const barFeature = features?.['lesson.bar']
+const groupByDate = features?.['group.by.date']
 
 interface NewLessonForm {
   name: string
@@ -178,7 +183,7 @@ const LessonForm = ({
 const LessonList = () => {
   const { courseId } = useParams()
   const user = useAppSelector((s) => s.user)
-  const { data, isLoading, error } = api.useLessonListQuery(courseId)
+  const { data, isLoading, error, isSuccess } = api.useLessonListQuery(courseId)
   const [createLesson, crLQuery] = api.useCreateLessonMutation()
   const [deleteLesson, deletingRqst] = api.useDeleteLessonMutation()
   const [updateLesson, updateLessonRqst] = api.useUpdateLessonMutation()
@@ -189,6 +194,36 @@ const LessonList = () => {
   const toastRef = useRef(null)
   const createdLessonRef = useRef(null)
   const [editLesson, setEditLesson] = useState<Lesson>(null)
+  const lessonCalc = useMemo(() => {
+    if (!isSuccess) {
+      return []
+    }
+
+    const sorted = [...data?.body].sort((a, b) => a.date > b.date ? 1 : -1)
+
+    if (!groupByDate) {
+      return [{ date: '', data: sorted }]
+    }
+
+    const lessonsData = []
+    for (let i = 0; i < sorted.length; i++) {
+      const element = sorted[i]
+      const find = lessonsData.find(
+        (item) => dayjs(element.date).diff(dayjs(item.date), 'day') === 0,
+      )
+
+      if (find) {
+        find.data.push(element)
+      } else {
+        lessonsData.push({
+          date: element.date,
+          data: [element],
+        })
+      }
+    }
+
+    return lessonsData
+  }, [groupByDate, isSuccess])
 
   const onSubmit = (lessonData) => {
     toastRef.current = toast({
@@ -397,50 +432,57 @@ const LessonList = () => {
               </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>
-                  {isTeacher(user) && (
-                    <Td>
-                      <Menu>
-                        <MenuButton as={Button}>
-                          <EditIcon />
-                        </MenuButton>
-                        <MenuList>
-                          <MenuItem
-                            onClick={() => {
-                              setShowForm(true)
-                              setEditLesson(lesson)
-                            }}
+              {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' }}
                           >
-                            Edit
-                          </MenuItem>
-                          <MenuItem onClick={() => setlessonToDelete(lesson)}>
-                            Delete
-                          </MenuItem>
-                        </MenuList>
-                      </Menu>
-                    </Td>
-                  )}
-                  <Td isNumeric>{lesson.students.length}</Td>
-                </Tr>
+                            <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>
+                      {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>
@@ -452,7 +494,7 @@ const LessonList = () => {
 
 export default LessonList
 
-const Bar = ({ data /* see data tab */ }) => (
+const Bar = ({ data }) => (
   <ResponsiveBar
     data={data}
     keys={['count']}