84 lines
2.5 KiB
TypeScript
84 lines
2.5 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect, useRef } from 'react';
|
|
import { useFinanzasStore } from '@/lib/store';
|
|
|
|
export function DataSync() {
|
|
const initialized = useRef(false);
|
|
|
|
useEffect(() => {
|
|
async function init() {
|
|
// Prevent double init in StrictMode
|
|
if (initialized.current) return;
|
|
|
|
try {
|
|
const res = await fetch('/api/sync');
|
|
// If 401 (unauthorized), stop here. User needs to login.
|
|
if (res.status === 401) return;
|
|
if (!res.ok) return;
|
|
|
|
const serverData = await res.json();
|
|
|
|
// Comprehensive check if server has ANY data
|
|
const hasServerData =
|
|
(serverData.fixedDebts?.length ?? 0) > 0 ||
|
|
(serverData.variableDebts?.length ?? 0) > 0 ||
|
|
(serverData.creditCards?.length ?? 0) > 0 ||
|
|
(serverData.incomes?.length ?? 0) > 0 ||
|
|
(serverData.serviceBills?.length ?? 0) > 0;
|
|
|
|
if (hasServerData) {
|
|
console.log("Sync: Hydrating from Server");
|
|
useFinanzasStore.setState(serverData);
|
|
} else {
|
|
// Server is empty. If we have local data, push it.
|
|
// But verify we actually have local data worth pushing to avoid overwriting with empty defaults unnecessarily
|
|
const localState = useFinanzasStore.getState();
|
|
const hasLocalData =
|
|
localState.fixedDebts.length > 0 ||
|
|
localState.variableDebts.length > 0 ||
|
|
localState.creditCards.length > 0 ||
|
|
localState.incomes.length > 0;
|
|
|
|
if (hasLocalData) {
|
|
console.log("Sync: Server empty, pushing Local Data");
|
|
syncToServer(localState);
|
|
}
|
|
}
|
|
} catch (e) {
|
|
console.error("Sync init error", e);
|
|
} finally {
|
|
// Mark as initialized so subsequent changes trigger sync
|
|
initialized.current = true;
|
|
}
|
|
}
|
|
|
|
init();
|
|
}, []);
|
|
|
|
// Sync on change
|
|
useEffect(() => {
|
|
const unsub = useFinanzasStore.subscribe((state) => {
|
|
// Only sync to server if we have finished initialization/hydration
|
|
if (initialized.current) {
|
|
syncToServer(state);
|
|
}
|
|
});
|
|
return () => unsub();
|
|
}, []);
|
|
|
|
return null;
|
|
}
|
|
|
|
let timeout: NodeJS.Timeout;
|
|
function syncToServer(state: any) {
|
|
clearTimeout(timeout);
|
|
timeout = setTimeout(() => {
|
|
fetch('/api/sync', {
|
|
method: 'POST',
|
|
headers: {'Content-Type': 'application/json'},
|
|
body: JSON.stringify(state)
|
|
}).catch(e => console.error("Sync error", e));
|
|
}, 2000); // Debounce 2s
|
|
}
|