From 3395f7029d84f0e40a7fdacf99ce6dd9aff2f6cf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1s=20Palma?= <up202108880@edu.fe.up.pt>
Date: Wed, 28 Aug 2024 14:13:17 +0100
Subject: [PATCH] feat: slot boxes are now ordered on mobile and smaller
 devices

---
 src/@types/index.d.ts                         |  2 +-
 src/components/planner/Schedule.tsx           | 50 +++++++++----------
 src/components/planner/schedules/ClassBox.tsx | 43 ----------------
 src/components/planner/schedules/SlotBox.tsx  | 37 ++++++++++++++
 .../planner/schedules/SlotBoxes.tsx           | 35 +++++++++++++
 5 files changed, 96 insertions(+), 71 deletions(-)
 delete mode 100644 src/components/planner/schedules/ClassBox.tsx
 create mode 100644 src/components/planner/schedules/SlotBox.tsx
 create mode 100644 src/components/planner/schedules/SlotBoxes.tsx

diff --git a/src/@types/index.d.ts b/src/@types/index.d.ts
index 37da2c27..e8b699aa 100644
--- a/src/@types/index.d.ts
+++ b/src/@types/index.d.ts
@@ -79,7 +79,7 @@ export type CourseOption = {
 export type ClassDescriptor = {
   classInfo: ClassInfo
   courseInfo: CourseInfo
-  slotInfo?: SlotInfo
+  slotInfo?: SlotInfo // used for conflict calculation
 }
 
 export type ConflictInfo = {
diff --git a/src/components/planner/Schedule.tsx b/src/components/planner/Schedule.tsx
index 793afe96..2c43f2ed 100644
--- a/src/components/planner/Schedule.tsx
+++ b/src/components/planner/Schedule.tsx
@@ -1,17 +1,18 @@
 import '../../styles/schedule.css'
 import classNames from 'classnames'
 import { useEffect, useMemo, useRef, useState } from 'react'
-import { ScheduleGrid, } from './schedules'
+import { LessonBox, ScheduleGrid, } from './schedules'
 import ToggleScheduleGrid from './schedule/ToggleScheduleGrid'
 import PrintSchedule from './schedule/PrintSchedule'
 import { useContext } from 'react'
-import ClassBox from './schedules/ClassBox'
+import SlotBox from './schedules/SlotBox'
 import ScheduleTypes from './ScheduleType'
-import { ClassDescriptor } from '../../@types'
+import { ClassDescriptor, SlotInfo } from '../../@types'
 import CourseContext from '../../contexts/CourseContext'
 import MultipleOptionsContext from '../../contexts/MultipleOptionsContext'
 import { useShowGrid } from '../../hooks'
 import { maxHour, minHour, convertWeekdayLong, convertHour } from '../../utils'
+import SlotBoxes from './schedules/SlotBoxes'
 
 const dayValues = Array.from({ length: 6 }, (_, i) => i)
 const hourValues = Array.from({ length: maxHour - minHour + 1 }, (_, i) => minHour + i)
@@ -21,6 +22,7 @@ const Schedule = () => {
   const { multipleOptions, selectedOption } = useContext(MultipleOptionsContext)
 
   const [classes, setClasses] = useState<ClassDescriptor[]>([])
+  const [slots, setSlots] = useState<SlotInfo[]>([])
   const scheduleRef = useRef(null)
 
   useEffect(() => {
@@ -43,6 +45,7 @@ const Schedule = () => {
     }
 
     setClasses(newClasses)
+    setSlots(newClasses.map((newClass) => newClass.classInfo.slots).flat())
   }, [multipleOptions, pickedCourses, selectedOption])
 
   // TODO: Improvements by functional programming
@@ -60,6 +63,12 @@ const Schedule = () => {
     return Array.from(aux) as string[]
   }, [classes])
 
+  const slotsOrderedByDay = (slots: Array<SlotInfo>): Array<SlotInfo> => {
+    return slots.sort((slot1, slot2) => (
+      slot1.day - slot2.day
+    ));
+  }
+
   // Bottom Bar Configurations
   const [hiddenLessonsTypes, setHiddenLessonsTypes] = useState<string[]>([])
   const [showGrid, setShowGrid] = useShowGrid()
@@ -93,23 +102,16 @@ const Schedule = () => {
             <div className={classNames('schedule-grid-wrapper', showGrid ? 'show-grid-yes' : 'show-grid-no')}>
               <ScheduleGrid showGrid={showGrid} />
               <div className="schedule-classes">
-                {classes
-                  .filter((c) => c.classInfo !== undefined)
-                  .map((c) => (
-                    <ClassBox
-                      key={`course[${c.courseInfo.id}]-class[${c.classInfo.id}]`}
-                      courseInfo={c.courseInfo}
-                      classInfo={c.classInfo ?? null}
-                      classes={classes}
-                      hiddenLessonsTypes={hiddenLessonsTypes}
-                    />
-                  ))}
+                <SlotBoxes
+                  slots={slots}
+                  hiddenLessonsTypes={hiddenLessonsTypes}
+                  classes={classes}
+                />
               </div>
             </div>
           </div>
         </div>
 
-
         {/* Bottom bar */}
         <div className="flex justify-between gap-5 pl-16">
           <div className="flex flex-wrap gap-4 gap-y-1 text-sm text-gray-600 dark:text-white 2xl:gap-y-2 2xl:text-base">
@@ -127,18 +129,12 @@ const Schedule = () => {
         <div className="flex w-full items-center justify-start gap-2" key={`responsive-lesson-row-${""}`}>
           <div className="h-full w-1 rounded bg-primary" />
           <div className="flex w-full flex-row flex-wrap items-center justify-start gap-2">
-            {classes
-              .filter((c) => c.classInfo !== undefined)
-              .map((c) => (
-                <ClassBox
-                  key={`course[${c.courseInfo.id}]-class[${c.classInfo.id}]`}
-                  courseInfo={c.courseInfo}
-                  classInfo={c.classInfo ?? null}
-                  classes={classes}
-                  hiddenLessonsTypes={hiddenLessonsTypes}
-                />
-              ))}
-            {classes.length === 0 && <p>Ainda não foram selecionadas turmas!</p>}
+            {slots.length === 0 && <p>Ainda não foram selecionadas turmas!</p>}
+            <SlotBoxes
+              slots={slotsOrderedByDay(slots)}
+              classes={classes}
+              hiddenLessonsTypes={hiddenLessonsTypes}
+            />
           </div>
         </div>
       </div>
diff --git a/src/components/planner/schedules/ClassBox.tsx b/src/components/planner/schedules/ClassBox.tsx
deleted file mode 100644
index f8236009..00000000
--- a/src/components/planner/schedules/ClassBox.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { CourseInfo, ClassInfo, ClassDescriptor } from '../../../@types'
-import LessonBox from './LessonBox'
-import ResponsiveLessonBox from './ResponsiveLessonBox'
-
-type Props = {
-  courseInfo: CourseInfo
-  classInfo: ClassInfo
-  classes: ClassDescriptor[]
-  hiddenLessonsTypes: string[]
-}
-
-const ClassBox = ({ courseInfo, classInfo, classes, hiddenLessonsTypes }: Props) => {
-  return (
-    <>
-      {classInfo.slots
-        .filter((slot) => !hiddenLessonsTypes.includes(slot.lesson_type))
-        .map((slot, index) => (
-          <>
-            <div className="hidden lg:flex lg:flex-col">
-              <LessonBox
-                key={`course[${courseInfo.id}]-class[${classInfo.id}]-${slot.lesson_type}-${index}`}
-                courseInfo={courseInfo}
-                classInfo={classInfo}
-                slotInfo={slot}
-                classes={classes.filter((classDescriptor) => classDescriptor.classInfo.id !== classInfo.id)}
-              />
-            </div>
-
-            <div className="lg:hidden flex flex-col ">
-              <ResponsiveLessonBox
-                key={`course[${courseInfo.id}]-class[${classInfo.id}]-${slot.lesson_type}-${index}`}
-                courseInfo={courseInfo}
-                classInfo={classInfo}
-                slotInfo={slot}
-              />
-            </div>
-          </>
-        ))}
-    </>
-  )
-}
-
-export default ClassBox
diff --git a/src/components/planner/schedules/SlotBox.tsx b/src/components/planner/schedules/SlotBox.tsx
new file mode 100644
index 00000000..9848e2ce
--- /dev/null
+++ b/src/components/planner/schedules/SlotBox.tsx
@@ -0,0 +1,37 @@
+import { CourseInfo, ClassInfo, ClassDescriptor, SlotInfo } from '../../../@types'
+import LessonBox from './LessonBox'
+import ResponsiveLessonBox from './ResponsiveLessonBox'
+
+type Props = {
+  courseInfo: CourseInfo
+  classInfo: ClassInfo
+  slot: SlotInfo
+  classes: ClassDescriptor[]
+}
+
+const SlotBox = ({ courseInfo, classInfo, classes, slot }: Props) => {
+  return (
+    <>
+      <div className="hidden lg:flex lg:flex-col">
+        <LessonBox
+          key={`course[${courseInfo.id}]-class[${classInfo.id}]-${slot.lesson_type}-${slot.id}`}
+          courseInfo={courseInfo}
+          classInfo={classInfo}
+          slotInfo={slot}
+          classes={classes.filter((classDescriptor) => classDescriptor.classInfo.id !== classInfo.id)}
+        />
+      </div>
+
+      <div className="lg:hidden flex flex-col ">
+        <ResponsiveLessonBox
+          key={`course[${courseInfo.id}]-class[${classInfo.id}]-${slot.lesson_type}-${slot.id}`}
+          courseInfo={courseInfo}
+          classInfo={classInfo}
+          slotInfo={slot}
+        />
+      </div>
+    </>
+  )
+}
+
+export default SlotBox;
diff --git a/src/components/planner/schedules/SlotBoxes.tsx b/src/components/planner/schedules/SlotBoxes.tsx
new file mode 100644
index 00000000..2184f515
--- /dev/null
+++ b/src/components/planner/schedules/SlotBoxes.tsx
@@ -0,0 +1,35 @@
+import { ClassDescriptor, SlotInfo } from "../../../@types"
+import SlotBox from "./SlotBox"
+
+type Props = {
+  slots: Array<SlotInfo>
+  classes: Array<ClassDescriptor>
+  hiddenLessonsTypes: Array<string>
+}
+
+const SlotBoxes = ({ slots, classes, hiddenLessonsTypes }: Props) => {
+  const filteredSlots = slots.filter((slot: SlotInfo) => !hiddenLessonsTypes.includes(slot.lesson_type));
+
+  return (
+    <>
+      {
+        filteredSlots.map((slot: SlotInfo) => {
+          const classDescriptor = classes.find((classDescriptor) => (
+            classDescriptor.classInfo.slots.filter((otherSlot) => otherSlot.id === slot.id).length > 0
+          ))
+
+          if (!classDescriptor) return <></>;
+
+          return <SlotBox
+            courseInfo={classDescriptor.courseInfo}
+            classInfo={classDescriptor.classInfo}
+            classes={classes}
+            slot={slot}
+          />
+        })
+      }
+    </>
+  );
+}
+
+export default SlotBoxes;