feat: implement offline-first functionality with local storage
- Add IndexedDB storage layer for notes (src/db/localDB.ts) - Implement sync manager with queue and conflict resolution (src/services/syncManager.ts) - Add online/offline detection hook (src/hooks/useOnlineStatus.ts) - Load notes from local storage immediately on app startup - Add sync status UI indicators (offline badge, pending count) - Auto-sync every 5 minutes when online - Queue operations when offline, sync when connection restored - Fix note content update when synced from server while viewing - Retry failed sync operations up to 5 times - Temporary IDs for offline-created notes
This commit is contained in:
20
src/hooks/useOnlineStatus.ts
Normal file
20
src/hooks/useOnlineStatus.ts
Normal file
@@ -0,0 +1,20 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
|
||||
export function useOnlineStatus() {
|
||||
const [isOnline, setIsOnline] = useState(navigator.onLine);
|
||||
|
||||
useEffect(() => {
|
||||
const handleOnline = () => setIsOnline(true);
|
||||
const handleOffline = () => setIsOnline(false);
|
||||
|
||||
window.addEventListener('online', handleOnline);
|
||||
window.addEventListener('offline', handleOffline);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('online', handleOnline);
|
||||
window.removeEventListener('offline', handleOffline);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return isOnline;
|
||||
}
|
||||
Reference in New Issue
Block a user