Improved exchange page when not logged in and without classes to change

NIAEFEUP · Jan 16, 2025 · 5797d26 · 5797d26
1 parent d543005
commit 5797d26
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 52 deletions.
diff --git a/src/components/exchange/ExchangeSidebar.tsx b/src/components/exchange/ExchangeSidebar.tsx
diff --git a/src/pages/Exchange.tsx b/src/pages/Exchange.tsx
@@ -1,24 +1,17 @@
 import { useContext, useEffect, useState } from "react";
 import { ClassDescriptor } from "../@types";
 import { LoginButton } from "../components/auth/LoginButton";
-import { ExchangeSidebar } from "../components/exchange/ExchangeSidebar";
 import ExchangeSchedule from "../components/exchange/schedule/ExchangeSchedule";
 import ScheduleContext from "../contexts/ScheduleContext";
 import SessionContext from "../contexts/SessionContext";
 import useSchedule from "../hooks/useSchedule";
 import useStudentCourseUnits from "../hooks/useStudentCourseUnits";
 import '../styles/exchange.css';
+import { CreateRequest } from "../components/exchange/requests/issue/CreateRequest";
+import { ViewRequests } from "../components/exchange/requests/view/ViewRequests";
+import { FaceFrownIcon, ShieldExclamationIcon } from "@heroicons/react/24/outline";
+import { Schedule } from "../components/planner";
 
-const ExchangeGuard = ({ children }: { children: React.ReactNode }) => {
-  return (
-    <article className="flex flex-col mx-auto w-full gap-4">
-      <h1 className="text-center text-3xl font-bold">
-        Trocas de Turmas
-      </h1>
-      {children}
-    </article>
-  );
-}
 
 const ExchangePage = () => {
   const [loads, setLoads] = useState<number>(-1);
@@ -40,36 +33,60 @@ const ExchangePage = () => {
     }
   }, [schedule]);
 
-  return <>
-    {signedIn ?
-      <ScheduleContext.Provider value={{ originalExchangeSchedule, exchangeSchedule, loadingSchedule, setExchangeSchedule, enrolledCourseUnits }}>
-        {
-          user?.eligible_exchange ?
-            <div className="grid w-cfull 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">
-                  <ExchangeSchedule />
-                </div>
-              </div>
+  const [creatingRequest, setCreatingRequest] = useState<boolean>(false);
 
-              <ExchangeSidebar />
-            </div>
-            : <ExchangeGuard>
-              <p className="text-center">Não tens nenhuma inscrição numa disciplina com um período de trocas ativo.</p>
-            </ExchangeGuard>
-        }
-      </ScheduleContext.Provider>
-      : <ExchangeGuard>
-        <p className="text-center">
-          Tens de iniciar sessão para acederes a esta funcionalidade.
-        </p>
-        <div className="justify-center mx-auto">
+  if (!signedIn) return <ScheduleContext.Provider value={{ originalExchangeSchedule, exchangeSchedule, loadingSchedule, setExchangeSchedule, enrolledCourseUnits }}>
+    <div className="grid w-cfull grid-cols-12 gap-x-4 gap-y-4 px-4 py-4">
+      <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">
+          <Schedule
+            classes={[]}
+            slots={[]}
+          />
+        </div>
+      </div>
+
+      <div className="lg:min-h-adjusted order-2 col-span-12 flex min-h-min flex-col justify-between rounded bg-lightest px-3 py-3 dark:bg-dark lg:col-span-3 2xl:px-4 2xl:py-4">
+        <div className="flex flex-col items-center justify-center gap-4 h-full">
+          <ShieldExclamationIcon className="w-12 h-12" />
+          <p className="text-center">Tens de iniciar sessão para começares a trocar de turmas</p>
           <LoginButton expanded={true} />
         </div>
+      </div>
+    </div>
+  </ScheduleContext.Provider>
+
+  return <ScheduleContext.Provider value={{ originalExchangeSchedule, exchangeSchedule, loadingSchedule, setExchangeSchedule, enrolledCourseUnits }}>
+    {
+      <div className="grid w-cfull 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">
+            <ExchangeSchedule />
+          </div>
+        </div>
 
-      </ExchangeGuard>}
-  </>
+        <div className="lg:min-h-adjusted order-2 col-span-12 flex min-h-min flex-col justify-between rounded bg-lightest px-3 py-3 dark:bg-dark lg:col-span-3 2xl:px-4 2xl:py-4">
+          {user?.eligible_exchange ?
+            <div>
+              {creatingRequest
+                ? <CreateRequest setCreatingRequest={setCreatingRequest} />
+                : <ViewRequests setCreatingRequest={setCreatingRequest} />}
+            </div>
+            :
+            <div className="flex flex-col items-center justify-center gap-4 h-full">
+              <FaceFrownIcon className="w-12 h-12" />
+              <p className="text-center">Nenhuma das tuas unidades curriculares dá para trocar a turma no TTS</p>
+              {/* TODO: Open the send feedback modal with something already written 
+              <p className="text-center">Gostavas de utilizar esta funcionalidade no teu curso?</p>
+              <Button onClick={() => { }}>Sim!</Button>
+              */}
+            </div>
+          }
+        </div>
+      </div>
+    }
+  </ScheduleContext.Provider>
 }
 
 export default ExchangePage;