Merge pull request #273 from NIAEFEUP/fix/mobile-professor-dropdown-responsive

feat: mobile professor dropdown menu is responsive

Author: tomaspalma

src/components/planner/sidebar/CoursesController.tsx

@@ -9,7 +9,7 @@ import { Button } from '../../ui/button'
 
 
 const CoursesController = () => {
-  const { pickedCourses,setUcsModalOpen } = useContext(CourseContext);
+  const { pickedCourses, setUcsModalOpen } = useContext(CourseContext);
 
   const noCoursesPicked = pickedCourses.length === 0;
   return (

src/components/planner/sidebar/CoursesController/ClassSelector.tsx

@@ -9,72 +9,31 @@ import { teacherIdsFromCourseInfo, uniqueTeachersFromCourseInfo, getAllPickedSlo
 import { Button } from '../../../ui/button'
 import ProfessorItem from './ProfessorItem'
 import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuPortal, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from '../../../ui/dropdown-menu'
+import ClassSelectorDropdownController from './ClassSelectorDropdownController'
 
 type Props = {
   course: CourseInfo
 }
 
-const buildTeacherFilters = (teachers, filteredTeachers) => {
-  if (!filteredTeachers) return [];
-
-  return teachers.map((teacher) => {
-    return {
-      ...teacher,
-      isFiltered: filteredTeachers.includes(teacher.id)
-    }
-  })
-}
-
 //TODO: Check this code, not too good
 const ClassSelector = ({ course }: Props) => {
   const classSelectorTriggerRef = useRef(null)
   const classSelectorContentRef = useRef(null)
   const [isDropdownOpen, setIsDropdownOpen] = useState(false)
 
   const { multipleOptions, setMultipleOptions, selectedOption } = useContext(MultipleOptionsContext)
-  const { pickedCourses, choosingNewCourse } = useContext(CourseContext)
 
   const [selectedClassId, setSelectedClassId] = useState<number | null>(null);
 
   const courseOption: CourseOption = multipleOptions[selectedOption].course_options.find((opt) => opt.course_id === course.id)
   if (courseOption)
     courseOption.filteredTeachers = [...teacherIdsFromCourseInfo(course)];
 
-  /**
-   * This is used to retrieve the teachers from a course and to populate the filter of the teachers
-   * which is the dropdown menu that appears by clicking on "Professores" on the class selector dropdown
-  */
-  const teachers = useMemo(() => {
-    if (!course.classes) return []
-
-    return uniqueTeachersFromCourseInfo(course);
-  }, [course.classes])
-
-  // This is used to store the ids of the teachers so it is easy to verify if a teacher is filtered or not
-  const [filteredTeachers, setFilteredTeachers] = useState(teacherIdsFromCourseInfo(course));
-
-  useEffect(() => {
-    setFilteredTeachers(teacherIdsFromCourseInfo(course));
-  }, [pickedCourses])
-
-  // This is used as an object with the teacher properties in order for us to being able
-  // to show teacher information on the filter dropdown menu
-  const [teacherFilters, setTeacherFilters] = useState(() => {
-    return buildTeacherFilters(teachers, filteredTeachers);
-  });
-
   const [locked, setLocked] = useState(courseOption?.locked)
 
   const [preview, setPreview] = useState<number | null>(null)
   const [display, setDisplay] = useState(courseOption?.picked_class_id)
 
-  const deleteOption = () => {
-    const multipleOptionsEntry = multipleOptions[selectedOption].course_options.find((option) => option.picked_class_id === selectedClassId);
-    multipleOptionsEntry.picked_class_id = null;
-    setSelectedClassId(null);
-    setMultipleOptions([...multipleOptions]);
-  }
-
   useEffect(() => {
     const course_options = multipleOptions[selectedOption].course_options;
     const option = course_options.filter((option) => option.course_id === course.id && option.picked_class_id !== null)
@@ -88,21 +47,6 @@ const ClassSelector = ({ course }: Props) => {
     setDisplay(option[0].picked_class_id);
   }, [selectedOption, multipleOptions, course.id]);
 
-  useEffect(() => {
-    setTeacherFilters(() => {
-      return buildTeacherFilters(teachers, filteredTeachers);
-    });
-  }, [filteredTeachers])
-
-  /**
-   * This useEffect is used to make the dropdown content width match the trigger width
-   */
-  useEffect(() => {
-    if (classSelectorTriggerRef.current && classSelectorContentRef.current) {
-      classSelectorContentRef.current.style.width = `${classSelectorTriggerRef.current.offsetWidth}px`
-    }
-  }, [isDropdownOpen])
-
   const toggleLocker = () => {
     const newMultipleOptions = [...multipleOptions];
     const courseOptions = newMultipleOptions[selectedOption].course_options.map(opt => {
@@ -120,44 +64,6 @@ const ClassSelector = ({ course }: Props) => {
     setLocked(courseOption?.locked)
   }, [selectedOption]);
 
-  //(thePeras): Classes options should be a new state
-  /**
-   * Return the classes options filtered by the selected teachers
-   * Classes with at least one of its teachers selected will be returned
-   */
-  const getOptions = (): Array<ClassInfo> => {
-    return course.classes?.filter((c) => {
-      return c.slots.some((slot) => slot.professors.filter((prof) => filteredTeachers?.includes(prof.id)).length > 0)
-    })
-  }
-
-  useEffect(() => {
-    setFilteredTeachers(courseOption?.filteredTeachers);
-  }, [choosingNewCourse])
-
-  // Checks if any of the selected classes have time conflicts with the classInfo
-  // This is used to display a warning icon in each class of the dropdown in case of conflicts
-  const timesCollideWithSelected = (classInfo: ClassInfo) => {
-    const pickedSlots = getAllPickedSlots(pickedCourses, multipleOptions[selectedOption])
-    return pickedSlots.some((slot) => classInfo.slots.some((currentSlot) => schedulesConflict(slot, currentSlot)))
-  }
-
-  // Puts inside the preview the actual selected class so we can then restore it later after the user stops
-  // previewing
-  const showPreview = (classInfo: ClassInfo) => {
-    const newMultipleOptions = [...multipleOptions];
-    const newCourseOptions: CourseOption[] = newMultipleOptions[selectedOption].course_options.map((c: CourseOption) => {
-      if (c.course_id === course.id) {
-        setPreview(classInfo.id)
-        c.picked_class_id = classInfo.id
-      }
-
-      return c;
-    });
-
-    newMultipleOptions[selectedOption].course_options = newCourseOptions;
-    setMultipleOptions(newMultipleOptions)
-  }
 
   // Restores into multiple options the picked_class_id prior to when the user started previewing
   const removePreview = () => {
@@ -177,24 +83,8 @@ const ClassSelector = ({ course }: Props) => {
     setPreview(null);
   }
 
-  function toggleTeacher(id: number) {
-    if (filteredTeachers.includes(id)) {
-      setFilteredTeachers(filteredTeachers.filter((t) => t !== id))
-    } else {
-      setFilteredTeachers([...filteredTeachers, id])
-    }
-  }
-
-  function toggleAllTeachers(teachers: ProfessorInfo[]) {
-    if (filteredTeachers.length > 0) {
-      setFilteredTeachers([])
-    } else {
-      setFilteredTeachers(teachers.flatMap((t) => t.id))
-    }
-  }
-
   return (
-    <div className="relative text-sm" key={`course-option-${course.acronym}`}>
+    <div className="text-sm" key={`course-option-${course.acronym}`}>
       {/* Header */}
       <p className="mb-0.5 flex text-xs">
         <strong>{course.acronym}</strong>
@@ -209,87 +99,32 @@ const ClassSelector = ({ course }: Props) => {
             removePreview();
           }
         }}>
-          <DropdownMenuTrigger asChild disabled={courseOption?.locked} ref={classSelectorTriggerRef}>
-            <Button
-              variant="outline"
-              size="sm"
-              className="w-full justify-between truncate bg-lightish text-xs font-normal tracking-tighter hover:bg-primary/75 hover:text-white dark:bg-darkish"
+          <div className="w-full">
+            <DropdownMenuTrigger asChild disabled={courseOption?.locked} ref={classSelectorTriggerRef}>
+              <Button
+                variant="outline"
+                size="sm"
+                className="w-full justify-between truncate bg-lightish text-xs font-normal tracking-tighter hover:bg-primary/75 hover:text-white dark:bg-darkish"
+              >
+                <span className={`${selectedClassId === null ? "opacity-50" : ""}`}>{getClassDisplayText(course, selectedClassId)}</span>
+                {!courseOption?.locked && <ChevronUpDownIcon className="text-blackish h-6 w-6 dark:text-lightish" />}
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent
+              className="bg-lightish text-darkish dark:bg-darkish dark:text-lightish"
+              ref={classSelectorContentRef}
             >
-              <span className={`${selectedClassId === null ? "opacity-50" : ""}`}>{getClassDisplayText(course, selectedClassId)}</span>
-              {!courseOption?.locked && <ChevronUpDownIcon className="text-blackish h-6 w-6 dark:text-lightish" />}
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent
-            className="bg-lightish text-darkish dark:bg-darkish dark:text-lightish"
-            ref={classSelectorContentRef}
-          >
-            {course.classes === null ? (
-              <p className="w-100 select-none p-2 text-center">A carregar as aulas...</p>
-            ) : (
-              <>
-                <DropdownMenuGroup>
-                  <DropdownMenuSub>
-                    <DropdownMenuSubTrigger>
-                      <User className="mr-2 h-4 w-4" />
-                      <span>Professores</span>
-                    </DropdownMenuSubTrigger>
-                    <DropdownMenuPortal>
-                      <DropdownMenuSubContent className="w-80 bg-lightish text-darkish dark:bg-darkish dark:text-lightish">
-                        <DropdownMenuItem
-                          onClick={(e) => {
-                            e.preventDefault()
-                            toggleAllTeachers(teachers)
-                          }}
-                        >
-                          <span className="block truncate dark:text-white">
-                            {filteredTeachers?.length > 0 ? 'Apagar todos' : 'Selecionar Todos'}
-                          </span>
-                        </DropdownMenuItem>
-                        <DropdownMenuSeparator />
-                        {teacherFilters.map((option) => {
-                          return (
-                            <ProfessorItem
-                              key={`${course.acronym}-teacher-${option.acronym}`}
-                              professorInformation={option}
-                              filtered={option.isFiltered}
-                              onSelect={(e) => {
-                                e.preventDefault()
-                                toggleTeacher(option.id)
-                              }}
-                            />
-                          )
-                        })}
-                      </DropdownMenuSubContent>
-                    </DropdownMenuPortal>
-                  </DropdownMenuSub>
-                </DropdownMenuGroup>
-                <DropdownMenuSeparator />
-                <DropdownMenuGroup className="max-h-96 overflow-y-auto">
-                  <DropdownMenuItem onSelect={() => deleteOption()}>
-                    <span className="text-sm tracking-tighter">Remover Seleção</span>
-                  </DropdownMenuItem>
-                  {course.classes &&
-                    getOptions().map((classInfo) => (
-                      <ClassItem
-                        key={`schedule-${classInfo.name}`}
-                        course_id={course.id}
-                        classInfo={classInfo}
-                        displayed={display === classInfo.id}
-                        checked={selectedOption === classInfo.id}
-                        preview={preview}
-                        conflict={timesCollideWithSelected(classInfo)}
-                        onSelect={() => {
-                          setSelectedClassId(classInfo.id)
-                          setPreview(null)
-                        }}
-                        onMouseEnter={() => showPreview(classInfo)}
-                        onMouseLeave={() => removePreview()}
-                      />
-                    ))}
-                </DropdownMenuGroup>
-              </>
-            )}
-          </DropdownMenuContent>
+              <ClassSelectorDropdownController
+                course={course}
+                selectedClassIdHook={[selectedClassId, setSelectedClassId]}
+                previewHook={[preview, setPreview]}
+                display={display}
+                removePreview={removePreview}
+                contentRef={classSelectorContentRef}
+                triggerRef={classSelectorTriggerRef}
+              />
+            </DropdownMenuContent>
+          </div>
         </DropdownMenu>
 
         {/* Lock Button */}