Merge branch 'main' of https://github.com/SEP4Y-S24/frontend

src/components/Form/selectForm.tsx

@@ -60,7 +60,7 @@ export default function Dropdown({
               leaveFrom="opacity-100"
               leaveTo="opacity-0"
             >
-              <Listbox.Options className="absolute z-10 mt-1 max-h-56 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
+              <Listbox.Options className="relative z-10 mt-1 max-h-56 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
                 {options.map((element) => (
                   <Listbox.Option
                     key={element.id}

src/components/Layout/MainLayout.tsx

@@ -149,7 +149,7 @@ type MobileSidebarProps = {
 };
   //Get the clock from the storage :
 
-  const clockData : {name : string, clockId : string} = storage.getClock() ? storage.getClock() : {name : "No clock selected", clockId : "SELECTACLOCK"}
+  const clockData : {name : string, clockId : string} = storage.getClock() ? storage.getClock() : {name : "No clock selected", clockId : "Select a clock"}
 
 const MobileSidebar = ({sidebarOpen, setSidebarOpen}: MobileSidebarProps) => {
     return (

src/pages/Settings.tsx

@@ -16,11 +16,18 @@ export const Settings = () => {
     name: "Select",
   });
 
+
   const changeClockOnStorage =(value : {id: string; name: string })=>{
+    const clockToSet = {
+      clockId: value.id,
+      name: value.name
+    }
+    storage.setClock(clockToSet)
+    window.location.reload()
     setSelectedClock(value)
-    storage.setClock(selectedClock)
   }
 
+
   useEffect(() => {
     const fetchData = async () => {
       try {
@@ -51,9 +58,9 @@ export const Settings = () => {
               <SelectForm
                   dropdownLabel="Select a clock"
                   options={clocks}
-                  className="mb-5 z-50 relative"
+                  className="mb-5 z-50 "
                   value={selectedClock}
-                  onChange={() => changeClockOnStorage(selectedClock)}
+                  onChange={(newValue : any) => changeClockOnStorage(newValue)}
               />
           ) : (
               <Heading text={"No clocks have been added yet"} type={"heading4"} />

src/routes/protected.tsx

@@ -21,10 +21,10 @@ const { Categories } = lazyImport(
 const { Alarm } = lazyImport(() => import("../pages/Alarm"), "Alarm");
 
 const App = () => {
-  // const user = storage.getUser();
-  // if (!user) {
-  //   return <Navigate to="/auth/login" />;
-  // }
+  const user = storage.getUser();
+  if (!user) {
+    return <Navigate to="/auth/login" />;
+  }
   return (
     <MainLayout>
       <Outlet />