From e113daf6f1e9374b4c2deae2780c6490a8b96f77 Mon Sep 17 00:00:00 2001
From: Mikkel RINGAUD <mikkel@milescode.dev>
Date: Thu, 14 Mar 2024 14:59:34 +0100
Subject: [PATCH] fix(web): navigate when no data

---
 packages/website/src/routes/index.tsx | 121 +++++++++++++-------------
 1 file changed, 60 insertions(+), 61 deletions(-)

diff --git a/packages/website/src/routes/index.tsx b/packages/website/src/routes/index.tsx
index 27d9897..1a13355 100644
--- a/packages/website/src/routes/index.tsx
+++ b/packages/website/src/routes/index.tsx
@@ -1,5 +1,5 @@
 import { onMount, Show, For, createSignal } from "solid-js";
-import { useNavigate } from "@solidjs/router";
+import { Navigate } from "@solidjs/router";
 import { setStore, store } from "../store";
 import { createDump } from "../client/dump";
 import Semester from "../components/Semester";
@@ -10,8 +10,6 @@ import { SafeStorage } from "../utils/safeStorage";
 import toast from "solid-toast";
 
 export default function Home() {
-  const navigate = useNavigate();
-
   /** `null` when not selected yet. */
   const [_selectedSemester, _setSelectedSemester] = createSignal(SafeStorage.getItem("selectedSemester"));
   /** Helper function that also stores in the localStorage to keep preference on reload. */
@@ -37,7 +35,6 @@ export default function Home() {
   
       if (dump.status === 403) {
         await clearUserData(false);
-        navigate("/authenticate");
         return;
       }
       else if (dump.status !== 200) {
@@ -58,66 +55,68 @@ export default function Home() {
   })
 
   return (
-    <main class="pt-6 pb-12 mx-auto max-w-[864px] w-full p-4 space-y-2">
-      <Show when={store.dump} fallback={
-        <p class="text-center">Récupération des données...</p>
-      }>
-        {dump => (
-          <div class="w-full">
-            <header class="flex flex-col items-center justify-center gap-4">
-              <div class="flex flex-col items-center justify-center gap-1">
-                <h1 class="text-xl font-medium text-center">
-                  {dump().firstName} {dump().familyName}
-                </h1>
-                <p class="text-center">
-                  Étudiant en {dump().className}
-                </p>
-              </div>
+    <>
+      <Show when={!store.dump && !store.authenticated}>
+        <Navigate href="/authenticate" />
+      </Show>
+      <main class="pt-6 pb-12 mx-auto max-w-[864px] w-full p-4 space-y-2">
+        <Show when={store.dump} fallback={
+          <p class="text-center">Récupération des données...</p>
+        }>
+          {dump => (
+            <div class="w-full">
+              <header class="flex flex-col items-center justify-center gap-4">
+                <div class="flex flex-col items-center justify-center gap-1">
+                  <h1 class="text-xl font-medium text-center">
+                    {dump().firstName} {dump().familyName}
+                  </h1>
+                  <p class="text-center">
+                    Étudiant en {dump().className}
+                  </p>
+                </div>
 
-              <button class="text-sm opacity-50 hover:opacity-100 px-3 py-1 bg-[rgb(240,240,240)] text-[rgb(20,20,20)] rounded-lg"
-                onClick={async () => {
-                  await clearUserData(true)
-                  navigate("/authenticate");
-                }}
-              >
-                Effacer toutes les données
-              </button>
-            </header>
+                <button class="text-sm opacity-50 hover:opacity-100 px-3 py-1 bg-[rgb(240,240,240)] text-[rgb(20,20,20)] rounded-lg"
+                  onClick={() => clearUserData(true)}
+                >
+                  Effacer toutes les données
+                </button>
+              </header>
 
-            <div class="flex items-center justify-center gap-2 my-6">
-              <For each={dump().semesters}>
-                {semester => (
-                    <button
-                      class="w-fit px-4 py-2 rounded-md border border-[rgb(248,113,113)]"
-                      onClick={() => setSelectedSemester(semester.name)}
-                      classList={{
-                        "bg-[rgb(248,113,113)] text-white": semester.name === _selectedSemester(),
-                      }}
-                    >
-                      {semester.name}
-                    </button>
-                )}
-              </For>
-            </div>
+              <div class="flex items-center justify-center gap-2 my-6">
+                <For each={dump().semesters}>
+                  {semester => (
+                      <button
+                        class="w-fit px-4 py-2 rounded-md border border-[rgb(248,113,113)]"
+                        onClick={() => setSelectedSemester(semester.name)}
+                        classList={{
+                          "bg-[rgb(248,113,113)] text-white": semester.name === _selectedSemester(),
+                        }}
+                      >
+                        {semester.name}
+                      </button>
+                  )}
+                </For>
+              </div>
 
-            <Show when={selectedSemester()} fallback={
-              <p class="text-center">Sélectionnez un semestre pour voir les détails.</p>
-            }>
-              {semester => <Semester {...semester()} />}
-            </Show>
-          </div>
-        )}
-      </Show>
+              <Show when={selectedSemester()} fallback={
+                <p class="text-center">Sélectionnez un semestre pour voir les détails.</p>
+              }>
+                {semester => <Semester {...semester()} />}
+              </Show>
+            </div>
+          )}
+        </Show>
 
-      <footer class="pt-6 flex flex-col items-center justify-center text-center">
-        <p class="flex flex-col pb-2 items-center">
-          <span class="flex items-center gap-1">Made with <MdiCardsHeart /> by</span>
-          <span class="flex items-center gap-1"><a class="font-medium opacity-80 hover:opacity-100" href="https://github.com/Vexcited" target="_blank">Vexcited</a> and <a class="font-medium opacity-80 hover:opacity-100" href="https://github.com/Vexcited/Signatures-IUT-Limoges/graphs/contributors" target="_blank">contributors</a></span>
-        </p>
-        <a class="text-sm opacity-60" href="https://github.com/Vexcited/Signatures-IUT-Limoges/tree/main">
-          Deployed from latest main commit.
-        </a>
-      </footer>
-    </main>
+        <footer class="pt-6 flex flex-col items-center justify-center text-center">
+          <p class="flex flex-col pb-2 items-center">
+            <span class="flex items-center gap-1">Made with <MdiCardsHeart /> by</span>
+            <span class="flex items-center gap-1"><a class="font-medium opacity-80 hover:opacity-100" href="https://github.com/Vexcited" target="_blank">Vexcited</a> and <a class="font-medium opacity-80 hover:opacity-100" href="https://github.com/Vexcited/Signatures-IUT-Limoges/graphs/contributors" target="_blank">contributors</a></span>
+          </p>
+          <a class="text-sm opacity-60" href="https://github.com/Vexcited/Signatures-IUT-Limoges/tree/main">
+            Deployed from latest main commit.
+          </a>
+        </footer>
+      </main>
+    </>
   );
 }
\ No newline at end of file