Merge pull request #340 from NIAEFEUP/feature/switchSidebarPosition

Feature: Button that allows the user to switch the side where the sidebar is displayed

src/App.tsx

@@ -81,7 +81,7 @@ const App = () => {
                 <Layout location={page.location} title={page.location} liquid={page.liquid}>
                   <div>
                     <page.element />
-                    <Toaster />
+                    <Toaster/>
                   </div>
                 </Layout>
               }

src/components/layout/SidebarPosition.tsx

@@ -0,0 +1,42 @@
+import { createContext, useContext, useState } from "react";
+import PropTypes from "prop-types";
+
+type SidebarContextType = {
+    sidebarPosition: 'left' | 'right';
+    toggleSidebarPosition: () => void;
+};
+
+const SidebarContext = createContext<SidebarContextType | undefined>(undefined);
+
+export const SidebarProvider = ({ children }: { children: JSX.Element }) => {
+    const [sidebarPosition, setSidebarPosition] = useState<'left' | 'right'>(() => {
+    const storedPosition = window.localStorage.getItem("sidebar-position");
+    return storedPosition === "left" || storedPosition === "right" ? storedPosition : "right";
+    });
+
+    const toggleSidebarPosition = () => {
+        setSidebarPosition((prev) => {
+            const newPosition = prev === "right" ? "left" : "right";
+            window.localStorage.setItem("sidebar-position", newPosition);
+            return newPosition;
+        });
+    };
+
+    return (
+        <SidebarContext.Provider value={{ sidebarPosition, toggleSidebarPosition }}>
+            {children}
+        </SidebarContext.Provider>
+    );
+};
+
+SidebarProvider.propTypes = {
+    children: PropTypes.node.isRequired,
+}
+
+export const useSidebarContext = () => {
+    const context = useContext(SidebarContext);
+    if (!context) {
+        throw new Error('useSidebarContext must be used within a SidebarProvider')
+    }
+    return context
+}

src/components/planner/Sidebar.tsx

@@ -4,16 +4,43 @@ import OptionsController from './sidebar/OptionsController'
 import SelectedOptionController from './sidebar/SelectedOptionController'
 import CoursesController from './sidebar/CoursesController'
 import MultipleOptionsContext from '../../contexts/MultipleOptionsContext'
+import { useSidebarContext } from '../layout/SidebarPosition'
+import { ArrowsRightLeftIcon, TrashIcon } from '@heroicons/react/24/outline'
+import { Button } from '../ui/button'
 
 /**
  * Sidebar with all the main schedule interactions
  */
 const Sidebar = () => {
-  const { multipleOptions, selectedOption } = useContext(MultipleOptionsContext);
+  const { multipleOptions, selectedOption, setMultipleOptions } = useContext(MultipleOptionsContext);
+  const { toggleSidebarPosition } = useSidebarContext();
+
+  const noClassesPicked = !multipleOptions[selectedOption]?.course_options.some(
+    (option) => option.picked_class_id !== null
+  );
+
+  const eraseClasses = () => {
+    const currentOption = multipleOptions[selectedOption];
+
+    const updatedCourseOptions = currentOption.course_options.map(courseOption => ({
+      ...courseOption,
+      picked_class_id: null,
+      locked: false,
+    }));
+
+    const updatedMultipleOptions = [...multipleOptions];
+    updatedMultipleOptions[selectedOption] = {
+      ...currentOption,
+      course_options: updatedCourseOptions,
+    };
+
+    setMultipleOptions(updatedMultipleOptions);
+  };
+
 
   return (
     <div className="lg:min-h-adjusted order-2 col-span-12 flex min-h-min flex-col justify-between rounded-md bg-lightest px-3 py-3 dark:bg-dark lg:col-span-3 2xl:px-4 2xl:py-4">
-      <div className="space-y-2">
+      <div className="flex-grow space-y-2">
         <div className="relative flex flex-row flex-wrap items-center justify-center gap-x-2 gap-y-2 lg:justify-start">
           <SessionController />
           <OptionsController />
@@ -23,6 +50,22 @@ const Sidebar = () => {
           <CoursesController />
         </div>
       </div>
+      <footer className="mt-4 gap-x-1 border-white-300 pt-3 text-center flex items-end justify-end">
+        <Button
+          onClick={eraseClasses}
+          variant="icon"
+          className={`bg-lightish text-darkish gap-1.5 ${noClassesPicked ? 'opacity-50 pointer-events-none' : ''}`}
+        >
+          <TrashIcon className="h-5 w-5" />
+          <span>Limpar</span>
+        </Button>
+        <button title='Mudar o lado da Sidebar'
+          onClick={toggleSidebarPosition}
+          className="hidden md:flex items-center justify-center gap-2 w-[48px] h-[40px] bg-primary hover:opacity-80 dark:text-white rounded-md p-1 text-gray text-sm"
+        >
+          <ArrowsRightLeftIcon className="h-5 w-5 text-white dark:text-white" />
+        </button>
+      </footer>
     </div>
   )
 }

src/components/planner/sidebar/CoursesController.tsx

@@ -1,34 +1,14 @@
 import { useContext } from 'react'
 import { PlannerClassSelector }from './CoursesController/PlannerClassSelector'
 import CourseContext from '../../../contexts/CourseContext'
-import MultipleOptionsContext from '../../../contexts/MultipleOptionsContext'
-import { TrashIcon } from "@heroicons/react/24/outline"
 import { NoMajorSelectedSVG } from '../../svgs'
 import { Button } from '../../ui/button'
 
 const CoursesController = () => {
   const { pickedCourses, setUcsModalOpen } = useContext(CourseContext);
-  const { multipleOptions, selectedOption, setMultipleOptions } = useContext(MultipleOptionsContext);
 
   const noCoursesPicked = pickedCourses.length === 0;
 
-  const eraseClasses = () => {
-    const currentOption = multipleOptions[selectedOption];
-
-    const updatedCourseOptions = currentOption.course_options.map(courseOption => ({
-      ...courseOption,
-      picked_class_id: null,
-      locked: false,
-    }));
-
-    const updatedMultipleOptions = [...multipleOptions];
-    updatedMultipleOptions[selectedOption] = {
-      ...currentOption,
-      course_options: updatedCourseOptions,
-    };
-
-    setMultipleOptions(updatedMultipleOptions);
-  };
 
   return (
     <div className={`flex ${noCoursesPicked ? 'h-max justify-center' : ''} w-full flex-col gap-4 px-0 py-2`}>
@@ -53,18 +33,6 @@ const CoursesController = () => {
           ))
       )}
 
-      {!noCoursesPicked && (
-        <div className="mt-4 flex justify-end">
-          <Button
-            onClick={eraseClasses}
-            variant="icon"
-            className="bg-lightish text-darkish gap-1.5"
-          >
-            <TrashIcon className="h-5 w-5" />
-            <span>Limpar</span>
-          </Button>
-        </div>
-      )}
 
     </div>
   )

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

@@ -74,4 +74,4 @@ const ClassItem = ({ course_id, classInfo, onSelect, onMouseEnter, onMouseLeave
   )
 }
 
-export default ClassItem
+export default ClassItem

src/components/planner/sidebar/sessionController/CoursePicker.tsx

@@ -12,7 +12,9 @@ import CoursePickerContext from '../../../../contexts/coursePicker/CoursePickerC
 
 //TODO: absolute imports with @
 
+
 const CoursePicker = () => {
+
   const {
     coursesStorage,
     setCoursesInfo,

src/pages/TimeTableSelector.tsx

@@ -3,10 +3,12 @@ import { useEffect, useContext } from 'react'
 import { Sidebar } from '../components/planner'
 import { Major } from '../@types'
 import MajorContext from '../contexts/MajorContext'
+import { useSidebarContext } from '../components/layout/SidebarPosition'
+import { SidebarProvider } from '../components/layout/SidebarPosition'
 import PlannerSchedule from '../components/planner/schedule/PlannerSchedule'
 
 const TimeTableSelectorPage = () => {
-  const {setMajors} = useContext(MajorContext);
+  const { setMajors } = useContext(MajorContext);
 
   // fetch majors when component is ready
   useEffect(() => {
@@ -17,17 +19,39 @@ const TimeTableSelectorPage = () => {
   }, [])
 
   return (
-    <div className="grid w-full grid-cols-12 gap-x-4 gap-y-4 px-4 py-4">
-      {/* Schedule Preview */}
-      <div className="lg:min-h-adjusted order-1 col-span-12 min-h-min rounded bg-lightest px-3 py-3 dark:bg-dark lg:col-span-9 2xl:px-5 2xl:py-5">
-        <div className="h-full w-full">
-          <PlannerSchedule />
-        </div>
-      </div>
+    <SidebarProvider>
+      <Content />
+    </SidebarProvider>
+  );
+};
+
+const Content = () => {
+  const { sidebarPosition } = useSidebarContext();
 
-      <Sidebar />
+  return (
+    <div className="grid w-full grid-cols-12 gap-x-4 gap-y-4 px-4 py-4">
+      {sidebarPosition === 'left' ? (
+        <>
+          <div className='col-span-12 lg:col-span-3 min-h'>
+            <Sidebar />
+          </div>
+          <div className='col-span-12 lg:col-span-9 min-h rounded-md bg-lightest px-3 py-3 dark:bg-dark 2xl:px-5 2xl:py-5'>
+            <PlannerSchedule />
+          </div>
+        </>
+      ) : (
+        <>
+          <div className='col-span-12 lg:col-span-9 min-h rounded-md bg-lightest px-3 py-3 dark:bg-dark 2xl:px-5 2xl:py-5'>
+            <PlannerSchedule />
+          </div>
+          <div className='col-span-12 lg:col-span-3 min-h'>
+            <Sidebar />
+          </div>
+        </>
+      )}
     </div>
   )
 }
 
-export default TimeTableSelectorPage;
+
+export default TimeTableSelectorPage;