From b4b74155c27abd2a68b47a125dc86f0d67f95171 Mon Sep 17 00:00:00 2001
From: Nathan Lamy <nathan.lamycharrier@gmail.com>
Date: Tue, 19 Aug 2025 14:32:55 +0200
Subject: [PATCH] feat: add filters

---
 app/components/home/index.tsx       | 246 +++++++++++-----------------
 app/components/home/tab-content.tsx |   8 +-
 2 files changed, 105 insertions(+), 149 deletions(-)

diff --git a/app/components/home/index.tsx b/app/components/home/index.tsx
index 389d128..a975e5b 100644
--- a/app/components/home/index.tsx
+++ b/app/components/home/index.tsx
@@ -1,15 +1,14 @@
 import { DateTime } from "luxon";
-import { useState, useEffect } from "react";
+import { useState } from "react";
 import { Button } from "~/components/ui/button";
 import {
   ChevronLeft,
   ChevronRight,
   Star,
-  Filter,
-  X,
   Users,
   User,
-  ArrowUpDown,
+  SortAsc,
+  SortDesc,
 } from "lucide-react";
 import {
   Select,
@@ -18,13 +17,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "~/components/ui/select";
-import { Label } from "~/components/ui/label";
 import { Tabs, TabsList, TabsTrigger } from "~/components/ui/tabs";
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from "~/components/ui/collapsible";
 import DatePickerWithRange from "~/components/home/date-picker";
 import BottomNavigation from "~/components/home/bottom-nav";
 import Error from "~/components/error";
@@ -74,13 +67,6 @@ export default function Home() {
   // Fetch colles from API
   const { studentColles, classColles, favoriteColles, error, isLoading } =
     useColles(startDate);
-  console.log("Colles loaded:", {
-    studentColles,
-    classColles,
-    favoriteColles,
-    error,
-    isLoading,
-  });
 
   // Error handling (after all hooks)
   if (error)
@@ -95,30 +81,60 @@ export default function Home() {
 
   // TODO: FAVORITES
   const useToggleStar = (auth: any) => {};
-  // TODO: FILTERS
-  const getSessionFilter = (key: string) => {
-    const filter = sessionStorage.getItem(key);
-    if (filter) {
-      return filter;
-    }
-    return "all";
-  };
+
+  // Filter state
+  const rawSubject = query.get("subject");
   const [subjectFilter, setSubjectFilter] = useState<string>(
-    getSessionFilter("subject")
+    rawSubject === "all" ? "" : rawSubject || ""
   );
+  const setSubject = (subject: string) => {
+    updateQuery("subject", subject);
+    setSubjectFilter(subject);
+  };
+  const rawExaminer = query.get("examiner");
   const [examinerFilter, setExaminerFilter] = useState<string>(
-    getSessionFilter("examiner")
+    rawExaminer === "all" ? "" : rawExaminer || ""
   );
-  // const [studentFilter, setStudentFilter] = useState<string>("all")
-  const [isFilterOpen, setIsFilterOpen] = useState(
-    getSessionFilter("subject") !== "all" ||
-      getSessionFilter("examiner") !== "all"
+  const setExaminer = (examiner: string) => {
+    updateQuery("examiner", examiner);
+    setExaminerFilter(examiner);
+  };
+  const [sorted, setSort] = useState<string>(query.get("sort") || "desc");
+  const toggleSort = () => {
+    const newSort = sorted === "asc" ? "desc" : "asc";
+    updateQuery("sort", newSort);
+    setSort(newSort);
+  };
+
+  const keepUnique = (arr: any[]) => {
+    return [...new Set(arr)];
+  };
+  const subjects = keepUnique(classColles.map((colle) => colle.subject?.name));
+  const examiners = keepUnique(
+    classColles.map((colle) => colle.examiner?.name)
   );
-  useEffect(() => {
-    sessionStorage.setItem("subject", subjectFilter);
-    sessionStorage.setItem("examiner", examinerFilter);
-    // sessionStorage.setItem('student', studentFilter)
-  }, [subjectFilter, examinerFilter]);
+
+  const applyFilters = (colles: any[]) => {
+    return colles
+      .filter((colle) => {
+        const subjectMatch =
+          subjectFilter === "all" || !subjectFilter
+            ? true
+            : colle.subject?.name === subjectFilter;
+        const examinerMatch =
+          examinerFilter === "all" || !examinerFilter
+            ? true
+            : colle.examiner?.name === examinerFilter;
+        return subjectMatch && examinerMatch;
+      })
+      .sort((a, b) => {
+        if (sorted === "asc") {
+          return a.date.localeCompare(b.date);
+        } else {
+          return b.date.localeCompare(a.date);
+        }
+      });
+  };
 
   return (
     <div className="space-y-6 pb-20 md:pb-0">
@@ -164,118 +180,50 @@ export default function Home() {
       </div>
 
       {/* TODO: Filter component */}
-      <Collapsible open={isFilterOpen} onOpenChange={setIsFilterOpen}>
-        <div className="flex justify-between">
-          <div className="flex gap-2">
-            {activeTab === "class" && (
-              <>
-                <Button
-                  variant="outline"
-                  size="sm"
-                  // TODO: Implement sorting
-                  onClick={() => {}}
-                >
-                  <ArrowUpDown className="h-4 w-4" />
-                </Button>
-                <div className="flex mb-4">
-                  <CollapsibleTrigger asChild>
-                    <Button variant="outline" size="sm">
-                      {isFilterOpen ? (
-                        <>
-                          <X className="h-4 w-4 mr-2" />
-                          Fermer
-                        </>
-                      ) : (
-                        <>
-                          <Filter className="h-4 w-4 mr-2" />
-                          Recherche
-                        </>
-                      )}
-                    </Button>
-                  </CollapsibleTrigger>
-                </div>
-              </>
-            )}
-          </div>
-          {/* TODO: DEBUG */}
-          {/* {activeTab === "all" &&
-            (getWeekStart().getTime() != startDate.getTime() ? (
-              <Button variant="outline" size="sm" onClick={resetWeek}>
-                <CalendarArrowUp className="h-4 w-4 mr-2" />
-                Cette semaine
-              </Button>
-            ) : (
-              <Button variant="outline" size="sm" onClick={goPastYear}>
-                <CalendarArrowDown className="h-4 w-4 mr-2" />
-                Colles des spés
-              </Button>
-            ))} */}
-        </div>
+      <div className="flex gap-1 pb-0 pt-2">
+        <Select value={subjectFilter} onValueChange={setSubject}>
+          <SelectTrigger className="rounded-full data-[placeholder]:text-primary">
+            <SelectValue placeholder="Matière" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">Toutes</SelectItem>
+            {subjects.map((subject) => (
+              <SelectItem key={subject} value={subject}>
+                {subject}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
 
-        <CollapsibleContent className="space-y-4">
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-            <div className="space-y-2">
-              <Label htmlFor="subject-filter">Filtrer par matière</Label>
-              <Select value={subjectFilter} onValueChange={setSubjectFilter}>
-                <SelectTrigger id="subject-filter">
-                  <SelectValue placeholder="Toutes les matières" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="all">Toutes les matières</SelectItem>
-                  {/* TODO: */}
-                  {/* {uniqueTopics.map((subject) => (
-                    <SelectItem key={subject} value={subject}>
-                      {subject}
-                    </SelectItem>
-                  ))} */}
-                </SelectContent>
-              </Select>
-            </div>
+        <Select value={examinerFilter} onValueChange={setExaminer}>
+          <SelectTrigger className="rounded-full data-[placeholder]:text-primary">
+            <SelectValue placeholder="Colleur" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">Tous</SelectItem>
+            {/* TODO: */}
+            {examiners.map((examiner) => (
+              <SelectItem key={examiner} value={examiner}>
+                {examiner}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
 
-            <div className="space-y-2">
-              <Label htmlFor="examiner-filter">Filtrer par colleur</Label>
-              <Select value={examinerFilter} onValueChange={setExaminerFilter}>
-                <SelectTrigger id="examiner-filter">
-                  <SelectValue placeholder="Tous les colleurs" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="all">Tous les colleurs</SelectItem>
-                  {/* TODO: */}
-                  {/* {uniqueExaminers.map((examiner) => (
-                    <SelectItem key={examiner} value={examiner}>
-                      {examiner}
-                    </SelectItem>
-                  ))} */}
-                </SelectContent>
-              </Select>
-            </div>
-
-            {/* <div className="space-y-2">
-                <Label htmlFor="student-filter">Filtrer par élève</Label>
-                <Select value={studentFilter} onValueChange={setStudentFilter}>
-                  <SelectTrigger id="student-filter">
-                    <SelectValue placeholder="Tous les élèves" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="all">Tous les élèves</SelectItem>
-                    {uniqueStudents.map((student) => (
-                      <SelectItem key={student} value={student}>
-                        {student}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              </div> */}
-          </div>
-
-          <div className="flex justify-end">
-            <Button variant="outline" size="sm">
-              {/* //TODO: onClick={resetFilters} */}
-              Réinitialiser les filtres
-            </Button>
-          </div>
-        </CollapsibleContent>
-      </Collapsible>
+        <Button
+          variant="outline"
+          size="sm"
+          className="rounded-full dark:bg-input/30 text-primary font-normal"
+          onClick={toggleSort}
+        >
+          {sorted == "asc" ? (
+            <SortAsc className="h-5 w-5" />
+          ) : (
+            <SortDesc className="h-5 w-5" />
+          )}
+          Trier
+        </Button>
+      </div>
 
       {/* Tab Content */}
       <div>
@@ -285,7 +233,8 @@ export default function Home() {
             tabTitle="Vos colles"
             emptyCollesText="Vous n'avez pas encore de colle cette semaine."
             isLoading={isLoading}
-            colles={studentColles}
+            isSorted={sorted === "desc"}
+            colles={applyFilters(studentColles)}
           />
         )}
 
@@ -306,7 +255,8 @@ export default function Home() {
           tabTitle="Les colles de la classe"
           emptyCollesText="Aucune colle trouvée."
           isLoading={isLoading}
-          colles={classColles}
+          isSorted={sorted === "desc"}
+          colles={applyFilters(classColles)}
         />
       )}
 
diff --git a/app/components/home/tab-content.tsx b/app/components/home/tab-content.tsx
index 67bd80e..e61ec85 100644
--- a/app/components/home/tab-content.tsx
+++ b/app/components/home/tab-content.tsx
@@ -9,7 +9,8 @@ type TabContentProps = {
   emptyCollesText: string;
   isLoading: boolean;
   colles: Colle[];
-};
+  isSorted?: boolean;
+}
 
 const WEEK_DAYS = [
   "Lundi",
@@ -26,6 +27,7 @@ export default function TabContent({
   emptyCollesText,
   isLoading,
   colles,
+  isSorted
 }: TabContentProps) {
   const collesByDay: Record<string, Colle[]> = {};
   colles.forEach((colle) => {
@@ -40,6 +42,10 @@ export default function TabContent({
   const days = WEEK_DAYS.filter(
     (day) => collesByDay[day] && collesByDay[day].length > 0
   );
+  // If not sorted, reverse the order of days
+  if (!isSorted) {
+    days.reverse();
+  }
 
   return (
     <>