khollise/frontend
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: add refetch on update
All checks were successful
Deploy to Netlify / Deploy to Netlify (push) Successful in 1m48s
Details

Browse source
This commit is contained in:
Nathan Lamy 2025-08-20 12:38:27 +02:00
parent 7831f61fb9
commit 67407a1426
2 changed files with 40 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

80
app/components/settings/notifications.tsx
View file

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

4
app/lib/api.ts
View file

@ -24,8 +24,6 @@ const makePostRequest = async (
return data?.data || data; 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 makeRequest = async (url: string, error = "Une erreur est survenue") => {
const response = await fetch(BASE_URL + url, { credentials: "include" }); const response = await fetch(BASE_URL + url, { credentials: "include" });
@ -366,7 +364,7 @@ export const useNotifications = () => {
queryKey: ["notifications"], queryKey: ["notifications"],
queryFn: getNotifications, queryFn: getNotifications,
staleTime: Duration.fromObject({ staleTime: Duration.fromObject({
hours: 1, // 1 hour hours: 0, // 1 hour
}).toMillis(), }).toMillis(),
gcTime: Duration.fromObject({ gcTime: Duration.fromObject({
days: 3, // 3 days days: 3, // 3 days