Merge pull request #222 from sahilrajput0fficial/main

fix: notes lose unsaved changes on refresh (closes #176)

Author: HarshYadav152

savebook/components/notes/AddNote.js

@@ -1,6 +1,6 @@
 "use client"
 import noteContext from '@/context/noteContext';
-import React, { useContext, useState } from 'react'
+import React, { useContext, useState, useEffect, useRef } from 'react'
 import toast from 'react-hot-toast';
 
 import Modal from '../common/Modal';
@@ -149,6 +149,7 @@ export default function Addnote() {
 
             toast.success("Note has been saved");
             setNote({ title: "", description: "", tag: "" });
+            localStorage.removeItem('savebook_note_draft'); // Clear draft on success
             setImages([]);
             setPreview([]);
             clearAudioRecording(); 
@@ -191,6 +192,39 @@ export default function Addnote() {
         setPendingTemplate(null);
     }
 
+    const hasRestored = useRef(false);
+
+    // Restore draft from localStorage on mount
+    useEffect(() => {
+        if (hasRestored.current) return;
+
+        const savedDraft = localStorage.getItem('savebook_note_draft');
+        if (savedDraft) {
+            try {
+                const parsedDraft = JSON.parse(savedDraft);
+                setNote(parsedDraft);
+                toast.success("Resumed your unsaved draft", {
+                    duration: 3000,
+                    icon: '📝',
+                });
+                hasRestored.current = true;
+            } catch (error) {
+                console.error("Failed to parse saved draft", error);
+                localStorage.removeItem('savebook_note_draft');
+            }
+        }
+    }, [setNote]);
+
+    useEffect(() => {
+        if (note.title || (note.description && note.description !== "<p></p>") || note.tag) {
+            const timeoutId = setTimeout(() => {
+                localStorage.setItem('savebook_note_draft', JSON.stringify(note));
+            }, 1000); // 1s debounce
+
+            return () => clearTimeout(timeoutId);
+        }
+    }, [note]);
+
     const userTags = Array.from(
         new Set(
             (Array.isArray(notes) ? notes : [])

savebook/components/notes/Notes.js

@@ -42,6 +42,8 @@ export default function Notes() {
     const [previewImage, setPreviewImage] = useState(null);
     const [searchTerm, setSearchTerm] = useState('');
     const [selectedTag, setSelectedTag] = useState('all');
+    const [saveStatus, setSaveStatus] = useState('idle'); // 'idle', 'saving', 'saved', 'error'
+    const [isAutoSaving, setIsAutoSaving] = useState(false);
 
     useEffect(() => {
         if (isAuthenticated && !loading) {
@@ -103,7 +105,9 @@ export default function Notes() {
     };
 
     const handleClick = async () => {
+        setIsAutoSaving(false); 
         try {
+            setSaveStatus('saving');
             let uploadedUrls = [];
             if (newImages.length > 0) {
                 uploadedUrls = await uploadImages(newImages);
@@ -118,6 +122,7 @@ export default function Notes() {
                 note.etag,
                 finalImages
             );
+            setSaveStatus('saved');
             setIsEditModalOpen(false);
             setExistingImages([]);
             setNewImages([]);
@@ -127,10 +132,38 @@ export default function Notes() {
             toast.success("Note updated successfully! 🎉");
         } catch (error) {
             console.error(error);
+            setSaveStatus('error');
             toast.error("Failed to update note");
         }
     };
 
+    // Autosave logic for editing
+    useEffect(() => {
+        if (!isEditModalOpen || !note.id || isAutoSaving) return;
+
+        // Skip saving if content is too short (min length 5)
+        if (note.etitle.length < 5 || note.edescription.length < 5 || note.etag.length < 2) return;
+
+        const timer = setTimeout(async () => {
+            try {
+                setSaveStatus('saving');
+                await editNote(
+                    note.id,
+                    note.etitle,
+                    note.edescription,
+                    note.etag,
+                    existingImages // Just save current images, new ones handled by manual save or upload-on-select
+                );
+                setSaveStatus('saved');
+            } catch (err) {
+                console.error("Autosave failed", err);
+                setSaveStatus('error');
+            }
+        }, 1000); // 1s debounce
+
+        return () => clearTimeout(timer);
+    }, [note.etitle, note.edescription, note.etag, isEditModalOpen, note.id, editNote, existingImages]);
+
     // Add new images
     const handleNewImageChange = (e) => {
         const files = Array.from(e.target.files);
@@ -195,7 +228,37 @@ export default function Notes() {
                                 <h2 className="text-2xl font-bold text-white">
                                     Edit Note
                                 </h2>
-                                <p className="text-gray-400 text-sm mt-1">Update your note details</p>
+                                <div className="flex items-center mt-1">
+                                    <p className="text-gray-400 text-sm">Update your note details</p>
+                                    <span className="mx-2 text-gray-600">•</span>
+                                    <div className="flex items-center text-xs">
+                                        {saveStatus === 'saving' && (
+                                            <span className="text-blue-400 flex items-center">
+                                                <svg className="animate-spin h-3 w-3 mr-1" viewBox="0 0 24 24">
+                                                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+                                                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                                                </svg>
+                                                Saving...
+                                            </span>
+                                        )}
+                                        {saveStatus === 'saved' && (
+                                            <span className="text-green-400 flex items-center">
+                                                <svg className="h-3 w-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                                                </svg>
+                                                All changes saved
+                                            </span>
+                                        )}
+                                        {saveStatus === 'error' && (
+                                            <span className="text-red-400 flex items-center">
+                                                <svg className="h-3 w-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                                                </svg>
+                                                Save failed
+                                            </span>
+                                        )}
+                                    </div>
+                                </div>
                             </div>
                             <button
                                 onClick={() => setIsEditModalOpen(false)}
@@ -585,4 +648,4 @@ export default function Notes() {
             </div>
         </>
     )
-}
+}