julienfroidefond/towercontrol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: optimize UserPreferencesContext with debounce and local storage

Browse Source 
- Added debounce functionality for kanban filters, view preferences, and column visibility updates to reduce server load.
- Implemented local storage synchronization for immediate updates, ensuring user preferences persist across sessions.
- Removed unnecessary startTransition calls to streamline state updates and improve UI responsiveness.
This commit is contained in:
Julien Froidefond
2025-10-02 12:31:29 +02:00
parent 63ef861360
commit 2e3e8bb222
1 changed files with 113 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

231
src/contexts/UserPreferencesContext.tsx
View File

@@ -1,6 +1,15 @@
'use client'; 'use client';
import { createContext, useContext, ReactNode, useState, useCallback, useEffect, useTransition } from 'react'; import { createContext, useContext, ReactNode, useState, useCallback, useEffect, useTransition } from 'react';
// Types pour les timeouts de debounce
declare global {
interface Window {
kanbanFiltersSyncTimeout?: NodeJS.Timeout;
viewPreferencesSyncTimeout?: NodeJS.Timeout;
columnVisibilitySyncTimeout?: NodeJS.Timeout;
}
}
import { UserPreferences, KanbanFilters, ViewPreferences, ColumnVisibility, TaskStatus } from '@/lib/types'; import { UserPreferences, KanbanFilters, ViewPreferences, ColumnVisibility, TaskStatus } from '@/lib/types';
import { import {
updateViewPreferences as updateViewPreferencesAction, updateViewPreferences as updateViewPreferencesAction,
@@ -79,7 +88,7 @@ const defaultPreferences: UserPreferences = {
export function UserPreferencesProvider({ children, initialPreferences }: UserPreferencesProviderProps) { export function UserPreferencesProvider({ children, initialPreferences }: UserPreferencesProviderProps) {
const [preferences, setPreferences] = useState<UserPreferences>(initialPreferences || defaultPreferences); const [preferences, setPreferences] = useState<UserPreferences>(initialPreferences || defaultPreferences);
const [isPending, startTransition] = useTransition(); const [isPending] = useTransition();
const { toggleTheme: themeToggleTheme, setTheme: themeSetTheme } = useTheme(); const { toggleTheme: themeToggleTheme, setTheme: themeSetTheme } = useTheme();
const { status } = useSession(); const { status } = useSession();
@@ -116,63 +125,63 @@ export function UserPreferencesProvider({ children, initialPreferences }: UserPr
// === KANBAN FILTERS === // === KANBAN FILTERS ===
const updateKanbanFilters = useCallback((updates: Partial<KanbanFilters>) => { const updateKanbanFilters = useCallback((updates: Partial<KanbanFilters>) => {
startTransition(async () => { // Optimistic update immédiat
const originalFilters = preferences.kanbanFilters; setPreferences(prev => ({
...prev,
// Optimistic update kanbanFilters: { ...prev.kanbanFilters, ...updates }
setPreferences(prev => ({ }));
...prev,
kanbanFilters: { ...prev.kanbanFilters, ...updates } // Sauvegarde locale immédiate pour éviter les pertes
})); const newFilters = { ...preferences.kanbanFilters, ...updates };
localStorage.setItem('kanbanFilters', JSON.stringify(newFilters));
try {
const result = await updateKanbanFiltersAction(updates); // Sync en arrière-plan avec debounce
if (!result.success) { clearTimeout(window.kanbanFiltersSyncTimeout);
console.error('Erreur server action:', result.error); window.kanbanFiltersSyncTimeout = setTimeout(() => {
setPreferences(prev => ({ ...prev, kanbanFilters: originalFilters })); updateKanbanFiltersAction(updates).catch(error => {
}
} catch (error) {
console.error('Erreur lors de la mise à jour des filtres Kanban:', error); console.error('Erreur lors de la mise à jour des filtres Kanban:', error);
setPreferences(prev => ({ ...prev, kanbanFilters: originalFilters })); });
} }, 1000); // debounce 1s
});
}, [preferences.kanbanFilters]); }, [preferences.kanbanFilters]);
// === VIEW PREFERENCES === // === VIEW PREFERENCES ===
const updateViewPreferences = useCallback((updates: Partial<ViewPreferences>) => { const updateViewPreferences = useCallback((updates: Partial<ViewPreferences>) => {
startTransition(async () => { // Optimistic update immédiat
const originalPreferences = preferences.viewPreferences; setPreferences(prev => ({
...prev,
// Optimistic update viewPreferences: { ...prev.viewPreferences, ...updates }
setPreferences(prev => ({ }));
...prev,
viewPreferences: { ...prev.viewPreferences, ...updates } // Sauvegarde locale immédiate pour éviter les pertes
})); const newViewPrefs = { ...preferences.viewPreferences, ...updates };
localStorage.setItem('viewPreferences', JSON.stringify(newViewPrefs));
try {
const result = await updateViewPreferencesAction(updates); // Sync en arrière-plan avec debounce
if (!result.success) { clearTimeout(window.viewPreferencesSyncTimeout);
console.error('Erreur server action:', result.error); window.viewPreferencesSyncTimeout = setTimeout(() => {
setPreferences(prev => ({ ...prev, viewPreferences: originalPreferences })); updateViewPreferencesAction(updates).catch(error => {
}
} catch (error) {
console.error('Erreur lors de la mise à jour des préférences de vue:', error); console.error('Erreur lors de la mise à jour des préférences de vue:', error);
setPreferences(prev => ({ ...prev, viewPreferences: originalPreferences })); });
} }, 1000); // debounce 1s
});
}, [preferences.viewPreferences]); }, [preferences.viewPreferences]);
const toggleObjectivesVisibility = useCallback(() => { const toggleObjectivesVisibility = useCallback(() => {
startTransition(async () => { // Non-bloquant : utiliser setTimeout pour éviter de bloquer l'UI
await toggleObjectivesVisibilityAction(); setTimeout(() => {
}); toggleObjectivesVisibilityAction().catch(error => {
console.error('Erreur lors du toggle de la visibilité des objectifs:', error);
});
}, 0);
}, []); }, []);
const toggleObjectivesCollapse = useCallback(() => { const toggleObjectivesCollapse = useCallback(() => {
startTransition(async () => { // Non-bloquant : utiliser setTimeout pour éviter de bloquer l'UI
await toggleObjectivesCollapseAction(); setTimeout(() => {
}); toggleObjectivesCollapseAction().catch(error => {
console.error('Erreur lors du toggle du collapse des objectifs:', error);
});
}, 0);
}, []); }, []);
const toggleTheme = useCallback(() => { const toggleTheme = useCallback(() => {
@@ -184,90 +193,76 @@ export function UserPreferencesProvider({ children, initialPreferences }: UserPr
}, [themeSetTheme]); }, [themeSetTheme]);
const toggleFontSize = useCallback(() => { const toggleFontSize = useCallback(() => {
startTransition(async () => { // Optimistic update - cycle through font sizes
const originalPreferences = preferences.viewPreferences; const fontSizes: ('small' | 'medium' | 'large')[] = ['small', 'medium', 'large'];
const currentIndex = fontSizes.indexOf(preferences.viewPreferences.fontSize);
// Optimistic update - cycle through font sizes const nextIndex = (currentIndex + 1) % fontSizes.length;
const fontSizes: ('small' | 'medium' | 'large')[] = ['small', 'medium', 'large']; const newFontSize = fontSizes[nextIndex];
const currentIndex = fontSizes.indexOf(preferences.viewPreferences.fontSize);
const nextIndex = (currentIndex + 1) % fontSizes.length; setPreferences(prev => ({
const newFontSize = fontSizes[nextIndex]; ...prev,
viewPreferences: { ...prev.viewPreferences, fontSize: newFontSize }
setPreferences(prev => ({ }));
...prev,
viewPreferences: { ...prev.viewPreferences, fontSize: newFontSize } // Non-bloquant : utiliser setTimeout pour éviter de bloquer l'UI
})); setTimeout(() => {
toggleFontSizeAction().catch(error => {
try {
const result = await toggleFontSizeAction();
if (!result.success) {
console.error('Erreur server action:', result.error);
setPreferences(prev => ({ ...prev, viewPreferences: originalPreferences }));
}
} catch (error) {
console.error('Erreur lors du toggle de la taille de police:', error); console.error('Erreur lors du toggle de la taille de police:', error);
setPreferences(prev => ({ ...prev, viewPreferences: originalPreferences })); });
} }, 0);
}); }, [preferences.viewPreferences.fontSize]);
}, [preferences.viewPreferences]);
// === COLUMN VISIBILITY === // === COLUMN VISIBILITY ===
const updateColumnVisibility = useCallback((updates: Partial<ColumnVisibility>) => { const updateColumnVisibility = useCallback((updates: Partial<ColumnVisibility>) => {
startTransition(async () => { // Optimistic update immédiat
const originalVisibility = preferences.columnVisibility; setPreferences(prev => ({
...prev,
// Optimistic update columnVisibility: { ...prev.columnVisibility, ...updates }
setPreferences(prev => ({ }));
...prev,
columnVisibility: { ...prev.columnVisibility, ...updates } // Sauvegarde locale immédiate pour éviter les pertes
})); const newColumnVisibility = { ...preferences.columnVisibility, ...updates };
localStorage.setItem('columnVisibility', JSON.stringify(newColumnVisibility));
try {
const result = await updateColumnVisibilityAction(updates); // Sync en arrière-plan avec debounce
if (!result.success) { clearTimeout(window.columnVisibilitySyncTimeout);
console.error('Erreur server action:', result.error); window.columnVisibilitySyncTimeout = setTimeout(() => {
setPreferences(prev => ({ ...prev, columnVisibility: originalVisibility })); updateColumnVisibilityAction(updates).catch(error => {
}
} catch (error) {
console.error('Erreur lors de la mise à jour de la visibilité des colonnes:', error); console.error('Erreur lors de la mise à jour de la visibilité des colonnes:', error);
setPreferences(prev => ({ ...prev, columnVisibility: originalVisibility })); });
} }, 1000); // debounce 1s
});
}, [preferences.columnVisibility]); }, [preferences.columnVisibility]);
const toggleColumnVisibility = useCallback((status: TaskStatus) => { const toggleColumnVisibility = useCallback((status: TaskStatus) => {
startTransition(async () => { const hiddenStatuses = [...preferences.columnVisibility.hiddenStatuses];
const originalVisibility = preferences.columnVisibility;
const hiddenStatuses = [...preferences.columnVisibility.hiddenStatuses]; // Optimistic update
if (hiddenStatuses.includes(status)) {
// Optimistic update // Remove from hidden
if (hiddenStatuses.includes(status)) { const index = hiddenStatuses.indexOf(status);
// Remove from hidden hiddenStatuses.splice(index, 1);
const index = hiddenStatuses.indexOf(status); } else {
hiddenStatuses.splice(index, 1); // Add to hidden
} else { hiddenStatuses.push(status);
// Add to hidden }
hiddenStatuses.push(status);
} setPreferences(prev => ({
...prev,
setPreferences(prev => ({ columnVisibility: { ...prev.columnVisibility, hiddenStatuses }
...prev, }));
columnVisibility: { ...prev.columnVisibility, hiddenStatuses }
}));
try { // Sauvegarde locale immédiate pour éviter les pertes
const result = await toggleColumnVisibilityAction(status); localStorage.setItem('columnVisibility', JSON.stringify({ hiddenStatuses }));
if (!result.success) {
console.error('Erreur server action:', result.error); // Sync en arrière-plan avec debounce
setPreferences(prev => ({ ...prev, columnVisibility: originalVisibility })); clearTimeout(window.columnVisibilitySyncTimeout);
} window.columnVisibilitySyncTimeout = setTimeout(() => {
} catch (error) { toggleColumnVisibilityAction(status).catch(error => {
console.error('Erreur lors du toggle de la visibilité des colonnes:', error); console.error('Erreur lors du toggle de la visibilité des colonnes:', error);
setPreferences(prev => ({ ...prev, columnVisibility: originalVisibility })); });
} }, 1000); // debounce 1s
}); }, [preferences.columnVisibility.hiddenStatuses]);
}, [preferences.columnVisibility]);
const isColumnVisible = useCallback((status: TaskStatus) => { const isColumnVisible = useCallback((status: TaskStatus) => {
return !preferences.columnVisibility.hiddenStatuses.includes(status); return !preferences.columnVisibility.hiddenStatuses.includes(status);