feat: implement optimistic updates for column visibility toggle
- Enhanced `toggleColumnVisibility` function to optimistically update the UI by modifying `hiddenStatuses` before awaiting server response. - Added error handling to revert to original visibility state if the server action fails, improving user experience. - Updated dependencies in the `useCallback` hook to include `preferences.columnVisibility` for accurate state management.
This commit is contained in:
@@ -183,9 +183,36 @@ export function UserPreferencesProvider({ children, initialPreferences }: UserPr
|
|||||||
|
|
||||||
const toggleColumnVisibility = useCallback((status: TaskStatus) => {
|
const toggleColumnVisibility = useCallback((status: TaskStatus) => {
|
||||||
startTransition(async () => {
|
startTransition(async () => {
|
||||||
await toggleColumnVisibilityAction(status);
|
const originalVisibility = preferences.columnVisibility;
|
||||||
|
const hiddenStatuses = [...preferences.columnVisibility.hiddenStatuses];
|
||||||
|
|
||||||
|
// Optimistic update
|
||||||
|
if (hiddenStatuses.includes(status)) {
|
||||||
|
// Remove from hidden
|
||||||
|
const index = hiddenStatuses.indexOf(status);
|
||||||
|
hiddenStatuses.splice(index, 1);
|
||||||
|
} else {
|
||||||
|
// Add to hidden
|
||||||
|
hiddenStatuses.push(status);
|
||||||
|
}
|
||||||
|
|
||||||
|
setPreferences(prev => ({
|
||||||
|
...prev,
|
||||||
|
columnVisibility: { ...prev.columnVisibility, hiddenStatuses }
|
||||||
|
}));
|
||||||
|
|
||||||
|
try {
|
||||||
|
const result = await toggleColumnVisibilityAction(status);
|
||||||
|
if (!result.success) {
|
||||||
|
console.error('Erreur server action:', result.error);
|
||||||
|
setPreferences(prev => ({ ...prev, columnVisibility: originalVisibility }));
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Erreur lors du toggle de la visibilité des colonnes:', error);
|
||||||
|
setPreferences(prev => ({ ...prev, columnVisibility: originalVisibility }));
|
||||||
|
}
|
||||||
});
|
});
|
||||||
}, []);
|
}, [preferences.columnVisibility]);
|
||||||
|
|
||||||
const isColumnVisible = useCallback((status: TaskStatus) => {
|
const isColumnVisible = useCallback((status: TaskStatus) => {
|
||||||
return !preferences.columnVisibility.hiddenStatuses.includes(status);
|
return !preferences.columnVisibility.hiddenStatuses.includes(status);
|
||||||
|
|||||||
Reference in New Issue
Block a user