feat: add refetch on update

app/components/settings/notifications.tsx

@@ -13,7 +13,6 @@ import { Separator } from "~/components/ui/separator";
 import {
   Bell,
   Smartphone,
-  Monitor,
   Trash2,
   Send,
   AlertTriangle,
@@ -82,42 +81,40 @@ export default function NotificationSettings() {
   const [pushEnabled, setPushEnabled] = useState(isNotificationEnabled());
   const [isRegistering, setIsRegistering] = useState(false);
 
-  function togglePushEnabled() {
+  async function togglePushEnabled() {
     setIsRegistering(true);
     if (pushEnabled) {
       // Unregister notifications
-      unregisterNotification()
-        .then(() => {
-          setPushEnabled(false);
-        })
-        .catch((error) => {
-          console.error("Failed to unregister notifications:", error);
-        })
-        .finally(() => {
-          setIsRegistering(false);
-        });
+      try {
+        await unregisterNotification();
+        setPushEnabled(false);
+      } catch (error) {
+        console.error("Failed to unregister notifications:", error);
+      } finally {
+        setIsRegistering(false);
+      }
     } else {
       // Register notifications
-      registerNotification()
-        .then((result) => {
-          if ("error" in result && result.error) {
-            console.error("Failed to register notifications:", result.error);
-          } else {
-            setPushEnabled(true);
-          }
-        })
-        .catch((error) => {
-          console.error("Failed to unregister notifications:", error);
-        })
-        .finally(() => {
-          setIsRegistering(false);
-        });
+      try {
+        const result = await registerNotification();
+        if ("error" in result && result.error) {
+          console.error("Failed to unregister previous notifications:", result.error);
+        } else {
+          setPushEnabled(true);
+        }
+      } catch (error) {
+        console.error("Failed to unregister previous notifications:", error);
+      } finally {
+        setIsRegistering(false);
+      }
     }
+
+    await refetch();
   }
 
   const [events, setEvents] = useState<Event[]>([]);
   // TODO: Loader and error handling
-  const { notifications, isError, isLoading } = useNotifications();
+  const { notifications, isError, isLoading, refetch } = useNotifications();
 
   const toggleEvent = (eventId: string) => {
     setEvents(
@@ -138,6 +135,20 @@ export default function NotificationSettings() {
     setEvents(currentSubscription?.events || []);
   }, [currentSubscription]);
 
+  async function handleDelete(subscriptionId: string) {
+    try {
+      await unsubscribe(subscriptionId);
+      if (subscriptionId === currentSubscriptionId) {
+        localStorage.removeItem(STORAGE_KEY);
+      }
+      await refetch();
+      toast.success("L'appareil a été désabonné des notifications.");
+    } catch (error) {
+      console.error("Failed to unsubscribe:", error);
+      toast.error("Échec de la désinscription de l'appareil.");
+    }
+  }
+
   return (
     <div className="max-w-4xl mx-auto space-y-6 sm:space-y-8">
       <div className="space-y-2">
@@ -338,20 +349,7 @@ export default function NotificationSettings() {
                       variant="outline"
                       size="sm"
                       className="flex items-center gap-1 text-destructive hover:text-destructive bg-transparent text-xs sm:text-sm px-2 sm:px-3"
-                      onClick={() => {
-                        unsubscribe(subscription.id)
-                          .then(() => {
-                            toast.success(
-                              "L'appareil a été désabonné des notifications."
-                            );
-                          })
-                          .catch((error) => {
-                            console.error("Failed to unsubscribe:", error);
-                            toast.error(
-                              "Échec de la désinscription de l'appareil."
-                            );
-                          });
-                      }}
+                      onClick={() => handleDelete(subscription.id)}
                     >
                       <Trash2 className="h-3 w-3 sm:h-4 sm:w-4" />
                       <span className="hidden xs:inline">Delete</span>

app/lib/api.ts

@@ -24,8 +24,6 @@ const makePostRequest = async (
   return data?.data || data;
 };
 
-// TODO: Use swr or react-query for caching and revalidation
-// TODO: Cache all to localStorage or IndexedDB for offline support
 const makeRequest = async (url: string, error = "Une erreur est survenue") => {
   const response = await fetch(BASE_URL + url, { credentials: "include" });
 
@@ -366,7 +364,7 @@ export const useNotifications = () => {
     queryKey: ["notifications"],
     queryFn: getNotifications,
     staleTime: Duration.fromObject({
-      hours: 1, // 1 hour
+      hours: 0, // 1 hour
     }).toMillis(),
     gcTime: Duration.fromObject({
       days: 3, // 3 days