Skip to content
This repository has been archived by the owner on Jan 4, 2025. It is now read-only.

Commit

Permalink
fix(web): navigate when no data
Browse files Browse the repository at this point in the history
  • Loading branch information
@Vexcited
Vexcited committed Mar 14, 2024
1 parent c510a41 commit e113daf
Showing 1 changed file with 60 additions and 61 deletions.
121 changes: 60 additions & 61 deletions packages/website/src/routes/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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. */
Expand All @@ -37,7 +35,6 @@ export default function Home() {

if (dump.status === 403) {
await clearUserData(false);
navigate("/authenticate");
return;
}
else if (dump.status !== 200) {
Expand All @@ -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>
</>
);
}

0 comments on commit e113daf

Please sign in to comment.