Merge pull request #196 from NIAEFEUP/fix/bug-fixes

Fix/bug fixes

src/@types/index.d.ts

@@ -108,7 +108,6 @@ export type MultipleOptions = {
   index: number
   selected: CourseOption[]
   options: CourseOption[][]
-  names: string[]
 }
 
 export type ImportedCourses = { 

src/api/storage.ts

@@ -3,7 +3,7 @@ import { getCourseTeachers } from '../utils/utils'
 import API from './backend'
 
 
-const INITIAL_VALUE = { index: 0, selected: [], options: [], names: Array.from({ length: 10 }, (_, i) => `Horário ${i + 1}`) }
+const INITIAL_VALUE = { index: 0, selected: [], options: [] }
 
 const isStorageValid = (key: string, daysElapsed: number) => {
   const stored = JSON.parse(localStorage.getItem(key))
@@ -32,8 +32,6 @@ const getOptionsStorage = (): MultipleOptions => {
   try {
     if (isStorageValid(key, 7)) {
       const courseOptions: MultipleOptions = JSON.parse(localStorage.getItem(key))
-      // For older files (which don't have the attribute 'names')
-      if (courseOptions.names === undefined) courseOptions.names = INITIAL_VALUE.names
 
       for (let i = 0; i < courseOptions.options.length; i++) {
         for (let j = 0; j < courseOptions.options[i].length; j++) {

src/components/planner/schedule/PrintSchedule.tsx

@@ -1,32 +1,38 @@
-import { useCallback } from 'react'
+import { useCallback, useContext } from 'react'
+import { ThemeContext } from '../../../contexts/ThemeContext'
 import { Button } from '../../ui/button'
 import { CameraIcon } from '@heroicons/react/24/outline'
 import { toPng } from 'html-to-image'
 import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from '../../ui/tooltip'
 
 const PrintSchedule = ({ component }) => {
-  const takeScreenshot = useCallback(() => {
-    if (component.current === null) {
-      return
-    }
+  const { enabled, setEnabled } = useContext(ThemeContext)
 
-    toPng(component.current, { cacheBust: true, backgroundColor: 'white' })
-      .then((dataUrl) => {
-        const link = document.createElement('a')
-        link.download = 'horario.png'
-        link.href = dataUrl
-        link.click()
-      })
-      .catch((err) => {
-        console.log(err)
-      })
-  }, [component])
+  const takeScreenshot = useCallback(
+    (isThemeEnabled) => {
+      if (component.current === null) {
+        return
+      }
+
+      toPng(component.current, { cacheBust: true, backgroundColor: isThemeEnabled ? '#252733' : '#fbfbfb' })
+        .then((dataUrl) => {
+          const link = document.createElement('a')
+          link.download = 'horario.png'
+          link.href = dataUrl
+          link.click()
+        })
+        .catch((err) => {
+          console.log(err)
+        })
+    },
+    [component]
+  )
 
   return (
     <TooltipProvider delayDuration={300}>
       <Tooltip>
         <TooltipTrigger asChild>
-          <Button variant="icon" className="bg-lightish text-black" onClick={takeScreenshot}>
+          <Button variant="icon" className="bg-lightish text-black" onClick={() => takeScreenshot(enabled)}>
             <CameraIcon className="h-5 w-5" />
           </Button>
         </TooltipTrigger>

src/components/planner/sidebar/ClassSelector.tsx

@@ -85,7 +85,6 @@ const ClassSelector = ({ courseOption, multipleOptionsHook, isImportedOptionHook
         index: prev.index,
         selected: [...newCourseOptions],
         options: prev.options,
-        names: prev.names,
       }
     })
   }
@@ -122,7 +121,6 @@ const ClassSelector = ({ courseOption, multipleOptionsHook, isImportedOptionHook
           index: prev.index,
           selected: [...newCourseOptions],
           options: prev.options,
-          names: prev.names,
         }
       })
     } else if (type === 'TP') {
@@ -141,7 +139,6 @@ const ClassSelector = ({ courseOption, multipleOptionsHook, isImportedOptionHook
           index: prev.index,
           selected: [...newCourseOptions],
           options: prev.options,
-          names: prev.names,
         }
       })
     }
@@ -183,7 +180,6 @@ const ClassSelector = ({ courseOption, multipleOptionsHook, isImportedOptionHook
         index: prevMultipleOptions.index,
         selected: resolvedCourseOptions,
         options: resolvedOptions,
-        names: prevMultipleOptions.names,
       }
 
       return value

src/components/planner/sidebar/CoursesController.tsx

@@ -1,5 +1,5 @@
 import { removeDuplicatesFromCourseOption } from '../../../utils/utils'
-import { default as ClassSelector } from './ClassSelector'
+import ClassSelector from './ClassSelector'
 
 const CoursesController = ({ multilpleOptionsHook, isImportedOptionHook }) => {
   const [multipleOptions, setMultipleOptions] = multilpleOptionsHook
@@ -8,16 +8,16 @@ const CoursesController = ({ multilpleOptionsHook, isImportedOptionHook }) => {
   return (
     <div className="flex w-full flex-col gap-4 px-0 py-2">
       {multipleOptions.selected.length > 0 &&
-        removeDuplicatesFromCourseOption(multipleOptions.options[multipleOptions.index]).map(
-          (courseOption, courseOptionIdx) => (
+        removeDuplicatesFromCourseOption(multipleOptions.options[multipleOptions.index])
+          .sort((a, b) => a.course.info.sigarra_id - b.course.info.sigarra_id)
+          .map((courseOption, courseOptionIdx) => (
             <ClassSelector
               courseOption={courseOption}
               multipleOptionsHook={[multipleOptions, setMultipleOptions]}
               isImportedOptionHook={[isImportedOption, setIsImportedOption]}
               key={`course-schedule-${multipleOptions.index}-${courseOption.course.info.id}`}
             />
-          )
-        )}
+          ))}
     </div>
   )
 }

src/components/planner/sidebar/OptionsController.tsx

@@ -24,7 +24,6 @@ const Option = ({ item, selectedHook, multipleOptionsHook }) => {
       index: newIndex - 1,
       selected: prev.options[newIndex - 1],
       options: [...prev.options],
-      names: prev.names,
     }))
   }
 

src/components/planner/sidebar/index.ts

@@ -2,10 +2,12 @@ import SessionController from './SessionController'
 import OptionsController from './OptionsController'
 import SelectedOptionController from './SelectedOptionController'
 import CoursesController from './CoursesController'
+import ClassSelector from './ClassSelector'
 
 export {
     SessionController,
     OptionsController,
     SelectedOptionController,
-    CoursesController
+    CoursesController,
+    ClassSelector
 }

src/components/planner/sidebar/selectedOptionController/CopyOption.tsx

@@ -4,11 +4,12 @@ import { CheckIcon, DocumentDuplicateIcon } from '@heroicons/react/24/outline'
 import { Major, CourseOption } from '../../../../@types'
 import { useToast } from '../../../ui/use-toast'
 import { Buffer } from 'buffer'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../../../ui/tooltip'
 
 type Props = {
   majorHook: [Major, React.Dispatch<React.SetStateAction<Major>>]
   currentOption: CourseOption[]
-  className?: string,
+  className?: string
 }
 
 /**
@@ -68,13 +69,20 @@ const CopyOption = ({ majorHook, currentOption, className }: Props) => {
   }
 
   return (
-    <Button
-      variant="icon"
-      className={className.concat(' h-min w-min flex-grow bg-primary')}
-      onClick={() => copyOption()}
-    >
-      {icon ? <CheckIcon className="h-5 w-5" /> : <DocumentDuplicateIcon className="h-5 w-5" />}
-    </Button>
+    <TooltipProvider delayDuration={300}>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            variant="icon"
+            className={className.concat(' h-min w-min flex-grow bg-primary')}
+            onClick={() => copyOption()}
+          >
+            {icon ? <CheckIcon className="h-5 w-5" /> : <DocumentDuplicateIcon className="h-5 w-5" />}
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>Copiar horário</TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
   )
 }
 

src/components/planner/sidebar/selectedOptionController/PasteOption.tsx

@@ -16,6 +16,7 @@ import React, { useEffect, useState } from 'react'
 import ConfirmationModal from './ConfirmationModal'
 import { Buffer } from 'buffer'
 import fillOptions from './fillOptions'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../../../ui/tooltip'
 
 type Props = {
   majors: Major[]
@@ -25,13 +26,7 @@ type Props = {
   isImportedOptionHook: [boolean, React.Dispatch<React.SetStateAction<boolean>>]
 }
 
-const PasteOption = ({
-  majors,
-  majorHook,
-  multipleOptionsHook,
-  checkCourses,
-  isImportedOptionHook,
-}: Props) => {
+const PasteOption = ({ majors, majorHook, multipleOptionsHook, checkCourses, isImportedOptionHook }: Props) => {
   const [multipleOptions, setMultipleOptions] = multipleOptionsHook
   const [major, setMajor] = majorHook
   const [modalOpen, setModalOpen] = useState(false)
@@ -54,12 +49,14 @@ const PasteOption = ({
     }
   }, [])
 
-  const importSchedule = async (value = null) => {
-    const url = value ?? await navigator.clipboard.readText()
+  const importSchedule = async (value) => {
+    const url = value
     const decoded_url = Buffer.from(url, 'base64').toString()
 
     if (!isValidURL(decoded_url)) {
-      const description = value ? 'O texto inserido não é uma opção válida' : 'O texto do clipboard não é uma opção válida';
+      const description = value
+        ? 'O texto inserido não é uma opção válida'
+        : 'O texto do clipboard não é uma opção válida'
       toast({
         title: 'Erro ao colar opção',
         description,
@@ -168,8 +165,8 @@ const PasteOption = ({
       const selected_option =
         class_name_option !== 'null'
           ? course_schedules.find(
-            (schedule) => schedule.class_name === class_name_option && schedule.lesson_type !== 'T'
-          )
+              (schedule) => schedule.class_name === class_name_option && schedule.lesson_type !== 'T'
+            )
           : null
 
       const course_option: CourseOption = {
@@ -205,7 +202,6 @@ const PasteOption = ({
         index: prevMultipleOptions.index,
         selected: importedOption.courses,
         options: newOptions,
-        names: prevMultipleOptions.names,
       }
 
       return value
@@ -217,34 +213,59 @@ const PasteOption = ({
 
   return (
     <>
-      {isClipboardSupported
-        ? <Button variant="icon" onClick={importSchedule} className="sm:py-0 xl:p-1 h-min w-min flex-grow bg-primary">
-          <ClipboardDocumentIcon className="h-5 w-5" />
-        </Button>
-        :
+      {isClipboardSupported ? (
+        <TooltipProvider delayDuration={300}>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="icon"
+                onClick={async () => {
+                  const value = await navigator.clipboard.readText()
+                  importSchedule(value)
+                }}
+                className="h-min w-min flex-grow bg-primary sm:py-0 xl:p-1"
+              >
+                <ClipboardDocumentIcon className="h-5 w-5" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>Colar horário</TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      ) : (
         <DropdownMenu open={isDropdownOpen}>
-          <DropdownMenuTrigger asChild>
-            <Button onClick={() => setIsDropdownOpen(true)} variant="icon" className="sm:py-0 xl:p-1 h-min w-min flex-grow bg-primary">
-              <ClipboardDocumentIcon className="h-5 w-5" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent>
-            <input
-              autoFocus
-              type="text"
-              placeholder="Colar aqui opção"
-              className="w-full p-2 rounded border border-slate-200 dark:border-slate-800 text-slate-950 dark:text-slate-50 focus:outline-none focus:ring-2 focus:ring-primary"
-              onPaste={(e) => importSchedule(e.clipboardData.getData('text/plain'))}
-              onKeyDown={(e) => {
-                if (e.key === 'Enter') {
-                  importSchedule(e.currentTarget.value)
-                }
-              }}
-              onBlur={() => setIsDropdownOpen(false)}
-            />
-          </DropdownMenuContent>
+          <TooltipProvider delayDuration={300}>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <DropdownMenuTrigger asChild>
+                  <Button
+                    onClick={() => setIsDropdownOpen(true)}
+                    variant="icon"
+                    className="h-min w-min flex-grow bg-primary sm:py-0 xl:p-1"
+                  >
+                    <ClipboardDocumentIcon className="h-5 w-5" />
+                  </Button>
+                </DropdownMenuTrigger>
+              </TooltipTrigger>
+              <TooltipContent>Colar horário</TooltipContent>
+              <DropdownMenuContent>
+                <input
+                  autoFocus
+                  type="text"
+                  placeholder="Colar aqui opção"
+                  className="text-slate-950 w-full rounded border border-slate-200 p-2 focus:outline-none focus:ring-2 focus:ring-primary dark:border-slate-800 dark:text-slate-50"
+                  onPaste={(e) => importSchedule(e.clipboardData.getData('text/plain'))}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter') {
+                      importSchedule(e.currentTarget.value)
+                    }
+                  }}
+                  onBlur={() => setIsDropdownOpen(false)}
+                />
+              </DropdownMenuContent>
+            </Tooltip>
+          </TooltipProvider>
         </DropdownMenu>
-      }
+      )}
       <ConfirmationModal
         major={importingMajor}
         isOpen={modalOpen}