first commit

frontend/src/hooks/useAutoSave.ts

@@ -0,0 +1,48 @@
+import { useEffect, useRef } from 'react';
+import * as Y from 'yjs';
+import { documentsApi } from '../api/document';
+
+export const useAutoSave = (documentId: string, ydoc: Y.Doc | null) => {
+  const saveTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const isSavingRef = useRef(false);
+
+  useEffect(() => {
+    if (!ydoc) return;
+
+    const handleUpdate = (update: Uint8Array, origin: any) => {
+      // Ignore updates from initial sync or remote sources
+      if (origin === 'init' || origin === 'remote') return;
+
+      // Clear existing timeout
+      if (saveTimeoutRef.current) {
+        clearTimeout(saveTimeoutRef.current);
+      }
+
+      // Set new timeout: save 2 seconds after last edit
+      saveTimeoutRef.current = setTimeout(async () => {
+        if (isSavingRef.current) return; // Prevent concurrent saves
+
+        isSavingRef.current = true;
+        try {
+          const state = Y.encodeStateAsUpdate(ydoc);
+          await documentsApi.updateState(documentId, state);
+          console.log('✓ Document saved to database');
+        } catch (error) {
+          console.error('Failed to save document:', error);
+        } finally {
+          isSavingRef.current = false;
+        }
+      }, 2000); // 2 second debounce
+    };
+
+    ydoc.on('update', handleUpdate);
+
+    // Cleanup
+    return () => {
+      ydoc.off('update', handleUpdate);
+      if (saveTimeoutRef.current) {
+        clearTimeout(saveTimeoutRef.current);
+      }
+    };
+  }, [documentId, ydoc]);
+};