feat: improve bjrepas integration

app/components/repas/credentials.tsx

@@ -7,11 +7,17 @@ import { Link } from "react-router";
 import { getCredentialsStatus, testCredentials } from "~/lib/api";
 import { useState } from "react";
 import { toast } from "sonner";
+import MealRegistration from "./registration";
 
 export default function BJRepas() {
   const credentials = getSavedCredentials();
-  const [username, setUsername] = useState(credentials?.username || "");
-  const [password, setPassword] = useState(credentials?.password || "");
+
+  if (credentials) {
+    return <MealRegistration credentials={credentials} />;
+  }
+
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
 
   let intervalId: NodeJS.Timeout | null = null;
   const [isLoading, setLoading] = useState(false);
@@ -39,6 +45,8 @@ export default function BJRepas() {
             toast.success("Vos identifiants ont été enregistrés avec succès.");
             setLoading(false);
             if (intervalId) clearInterval(intervalId);
+            // Reload the page to reflect the changes
+            window.location.reload();
           }
           // Credentials are invalid
           if (res.authenticated === "ERROR") {
@@ -61,6 +69,7 @@ export default function BJRepas() {
       );
     }
   };
+
   return (
     <div className="space-y-4 px-2">
       <h2 className="text-2xl font-bold">Inscription aux repas</h2>

app/components/repas/date-picker.tsx

@@ -52,6 +52,9 @@ export default function DatePickerWithRange({
             locale={fr}
             className="rounded-md border shadow-sm"
             captionLayout="dropdown"
+            // Start month (janvier 2010) to end month (décembre 2030)
+            startMonth={new Date(2010, 0)}
+            endMonth={new Date(2030, 11)}
           />
         </PopoverContent>
       </Popover>
@@ -59,7 +62,7 @@ export default function DatePickerWithRange({
   );
 }
 
-const formatDate = (date: DateTime, includeYear = false) => {
+export const formatDate = (date: DateTime, includeYear = false) => {
   const localDate = date.setLocale("fr");
   return includeYear
     ? localDate.toFormat("dd MMM yyyy")

app/components/repas/menu-card.tsx

@@ -6,16 +6,11 @@ import {
   CookingPot,
   Icon,
   Carrot,
-  CalendarCheck,
   CheckCheck,
-  Loader2,
 } from "lucide-react";
 import { cheese } from "@lucide/lab";
-import { registerForMeal, type Meal } from "~/lib/api";
+import { type Meal } from "~/lib/api";
 import { Button } from "../ui/button";
-import { toast } from "sonner";
-import { useState } from "react";
-import { getSavedCredentials } from "./credentials";
 
 const getCourseIcon = (courseName: string) => {
   const name = courseName.toLowerCase();
@@ -28,13 +23,7 @@ const getCourseIcon = (courseName: string) => {
   return <Utensils className="h-6 w-6" />;
 };
 
-export function DailyMenu({
-  meals,
-  refetchMeals,
-}: {
-  meals: Meal[];
-  refetchMeals: () => Promise<any>;
-}) {
+export function DailyMenu({ meals }: { meals: Meal[] }) {
   if (meals.length === 0) {
     return (
       <div className="flex items-center justify-center p-4">
@@ -45,28 +34,6 @@ export function DailyMenu({
     );
   }
 
-  const [isLoading, setLoading] = useState(false);
-  const credentials = getSavedCredentials();
-
-  const handleRegister = async (id: number) => {
-    try {
-      if (!credentials) {
-        toast.error(
-          "Veuillez d'abord enregistrer vos identifiants dans l'onglet BJRepas."
-        );
-        return;
-      }
-      await registerForMeal(id, credentials.username, credentials.password);
-      await refetchMeals();
-      setLoading(false);
-    } catch (error) {
-      console.error("Error registering for meal:", error);
-      toast.error(
-        "Une erreur est survenue lors de l'inscription au repas. Veuillez réessayer."
-      );
-    }
-  };
-
   return (
     <div className="px-4 py-2">
       <h2 className="text-2xl font-bold mb-4">
@@ -118,7 +85,7 @@ export function DailyMenu({
                 Vous êtes inscrit(e) à ce repas
               </Button>
             )}
-            {credentials &&
+            {/* {credentials &&
               !meal.isRegistered &&
               meal.submittable &&
               (isLoading ? (
@@ -135,7 +102,7 @@ export function DailyMenu({
                   <CalendarCheck className="h-5 w-5 mr-2" />
                   S'inscrire à ce repas
                 </Button>
-              ))}
+              ))} */}
           </CardContent>
         </Card>
       ))}

app/components/repas/menus.tsx

@@ -5,13 +5,13 @@ import { useState } from "react";
 import DayNavigation from "./day-navigation";
 
 export default function Menus() {
-  const { isLoading, error, meals, refetch } = useMeals();
+  const { isLoading, error, meals } = useMeals();
   const [date, setDate] = useState(DateTime.now().startOf("day"));
 
   const findMenuForDate = (date: DateTime) => {
     return meals?.filter((meal) => {
-      const mealDate = DateTime.fromISO(meal.date).startOf("day");
-      return mealDate.equals(date);
+      const mealDate = DateTime.fromISO(meal.date);
+      return mealDate.hasSame(date.toLocal(), "day");
     });
   };
 
@@ -25,10 +25,7 @@ export default function Menus() {
 
       {/* Menus */}
       <DayNavigation startDate={date} setStartDate={setDate} />
-      <DailyMenu
-        meals={findMenuForDate(date) || ([] as Meal[])}
-        refetchMeals={refetch}
-      />
+      <DailyMenu meals={findMenuForDate(date) || ([] as Meal[])} />
     </div>
   );
 }

app/components/repas/registration.tsx

@@ -0,0 +1,118 @@
+import { CalendarCheck, CheckCheck, Loader2 } from "lucide-react";
+import { Button } from "../ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
+import { registerForMeal, useMeals, type Meal } from "~/lib/api";
+import { useState } from "react";
+import { toast } from "sonner";
+import { formatDate } from "./date-picker";
+import { DateTime } from "luxon";
+
+export default function MealRegistration({
+  credentials,
+}: {
+  credentials: { username: string; password: string };
+}) {
+  const [isPosting, setLoading] = useState(false);
+  const { isLoading, error, meals: rawMeals, refetch } = useMeals();
+
+  const filterRegisteredMeals = (meals: Meal[]) => {
+    return meals?.filter((meal) => meal.isRegistered || meal.submittable);
+  };
+  const meals = filterRegisteredMeals(rawMeals || []);
+
+  const handleRegister = async (id: number) => {
+    try {
+      await registerForMeal(id, credentials.username, credentials.password);
+      await refetch();
+      setLoading(false);
+    } catch (error) {
+      console.error("Error registering for meal:", error);
+      toast.error(
+        "Une erreur est survenue lors de l'inscription au repas. Veuillez réessayer."
+      );
+    }
+  };
+
+  return (
+    <div className="space-y-4">
+      {isLoading && <p>Chargement du menu...</p>}
+      {error && (
+        <p className="text-red-500">Erreur lors du chargement des menus.</p>
+      )}
+      {meals && meals.length === 0 && <p>Aucun menu disponible.</p>}
+
+      {/* Menus */}
+      <div className="px-4 py-2">
+        <h2 className="text-2xl font-bold mb-4">Inscription aux repas</h2>
+
+        <Card className="w-full mb-6">
+          <CardHeader className="pb-6">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-3">
+                <div>
+                  <CardTitle className="text-xl2 font-bold text-foreground capitalize">
+                    <CalendarCheck className="inline h-5 w-5 mr-4 text-primary" />
+                    Prochains Repas
+                  </CardTitle>
+                </div>
+              </div>
+            </div>
+          </CardHeader>
+
+          <CardContent className="pt-0 pb-4">
+            {meals.map((meal, i) => (
+              <>
+                <div className="flex items-start gap-1 mt-4">
+                  <h4 className="font-semibold text-primary mb-1">
+                    Repas du {formatDate(DateTime.fromISO(meal.date))}
+                  </h4>
+                  <p className="text-sm text-muted-foreground leading-relaxed">
+                    ({meal.name})
+                  </p>
+                </div>
+
+                <div className="mb-4">
+                  {meal.isRegistered && (
+                    <Button
+                      variant="outline"
+                      className="w-full bg-green-600 hover:bg-green-700 text-white mt-4 mb-1"
+                      // onClick={handleUnregister}
+                      disabled
+                    >
+                      <CheckCheck className="h-5 w-5 mr-2" />
+                      Vous êtes inscrit à ce repas
+                    </Button>
+                  )}
+                  {isPosting && !meal.isRegistered && (
+                    <Button
+                      variant="default"
+                      className="hidden w-full mt-4 mb-1"
+                      disabled
+                    >
+                      <Loader2 className="h-5 w-5 mr-2 animate-spin" />
+                      Inscription en cours...
+                    </Button>
+                  )}
+                  {!isPosting && !meal.isRegistered && meal.submittable && (
+                    <Button
+                      variant="default"
+                      className="w-full mt-2 mb-1"
+                      onClick={async () => {
+                        setLoading(true);
+                        await handleRegister(meal.id);
+                      }}
+                    >
+                      <CalendarCheck className="h-5 w-5 mr-2" />
+                      S'inscrire à ce repas
+                    </Button>
+                  )}
+                </div>
+                {i < meals.length - 1 && <hr className="my-2" />}
+              </>
+            ))}
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}