group by date feature

ijl.config.js

@@ -4,24 +4,29 @@ module.exports = {
   apiPath: 'stubs/api',
   webpackConfig: {
     output: {
-            publicPath: `/static/${pkg.name}/${process.env.VERSION || pkg.version}/`
+      publicPath: `/static/${pkg.name}/${process.env.VERSION || pkg.version}/`,
-        }
+    },
   },
   navigations: {
-        'journal.main': '/journal.pl'
+    'journal.main': '/journal.pl',
   },
   features: {
-        'journal': {
+    journal: {
       // add your features here in the format [featureName]: { value: string }
-            "lesson.bar": {
+      'lesson.bar': {
-              "on": true,
+        on: true,
-              "value": "",
+        value: '',
-              "key": "lesson.bar"
+        key: 'lesson.bar',
-          }
+      },
+      'group.by.date': {
+        on: true,
+        value: '',
+        key: 'group.by.date',
+      },
     },
   },
   config: {
-    "journal.back.url": "/api",
+    'journal.back.url': '/api',
-    "journal.polling-interval": "10000"
+    '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,7 +432,10 @@ const LessonList = () => {
               </Tr>
             </Thead>
             <Tbody>
-              {data?.body?.map((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>
@@ -432,7 +470,9 @@ const LessonList = () => {
                               >
                                 Edit
                               </MenuItem>
-                          <MenuItem onClick={() => setlessonToDelete(lesson)}>
+                              <MenuItem
+                                onClick={() => setlessonToDelete(lesson)}
+                              >
                                 Delete
                               </MenuItem>
                             </MenuList>
@@ -442,6 +482,8 @@ const LessonList = () => {
                       <Td isNumeric>{lesson.students.length}</Td>
                     </Tr>
                   ))}
+                </React.Fragment>
+              ))}
             </Tbody>
           </Table>
         </TableContainer>
@@ -452,7 +494,7 @@ const LessonList = () => {
 
 export default LessonList
 
-const Bar = ({ data /* see data tab */ }) => (
+const Bar = ({ data }) => (
   <ResponsiveBar
     data={data}
     keys={['count']}