clear all data & import backups from json

dmarakom6 · dmarakom6 · commit 175f4e3f8f59 · 2025-06-07T14:09:50.000+03:00
diff --git a/src/components/Settings.tsx b/src/components/Settings.tsx
@@ -1,6 +1,6 @@
 
 import { useEffect, useState } from "react";
-import { Settings as SettingsIcon, Moon, Sun, Monitor, Type, Eye, Contrast } from "lucide-react";
+import { Settings as SettingsIcon, Moon, Sun, Monitor, Type, Eye, Contrast, DatabaseIcon } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import {
   Sheet,
@@ -16,6 +16,9 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import { indexedDBStorage } from "@/utils/indexedDBStorage";
+import { toast } from "@/hooks/use-toast";
+import { Note, Task } from "@/pages/Index";
 
 interface SettingsProps {
   isOpen: boolean;
@@ -27,6 +30,8 @@ export const Settings = ({ isOpen, onClose }: SettingsProps) => {
   const [fontSize, setFontSize] = useState("medium");
   const [highContrast, setHighContrast] = useState(false);
   const [reducedMotion, setReducedMotion] = useState(false);
+  const [dataCleared, setDataCleared] = useState(false);
+  const [isImportingData, setIsImportingData] = useState(false);
 
   useEffect(() => {
     const storedTheme = localStorage.getItem("current-theme");
@@ -35,6 +40,94 @@ export const Settings = ({ isOpen, onClose }: SettingsProps) => {
     }
   }, []);
 
+  useEffect(() => {
+    const checkData = async () => {
+      try {
+        const [notes, tasks] = await Promise.all([
+          indexedDBStorage.loadNotes(),
+          indexedDBStorage.loadTasks(),
+        ]);
+        setDataCleared(notes.length === 0 && tasks.length === 0);
+      } catch (error) {
+        console.error("Error checking data:", error);
+        setDataCleared(false);
+      }
+    };
+    checkData();
+  }, []);
+
+
+  useEffect(() => {
+  const handleDataCleared = () => setDataCleared(true);
+  window.addEventListener("data-cleared", handleDataCleared);
+  return () => window.removeEventListener("data-cleared", handleDataCleared);
+}, []);
+
+  const handleImportData = () => {
+    // Open file browser and look for json files
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.accept = '.json';
+    input.onchange = (event) => {
+      const file = (event.target as HTMLInputElement).files?.[0];
+      if (file) {
+        const reader = new FileReader();
+        reader.onload = (e) => {
+          const data = e.target?.result;
+          if (typeof data === 'string') {
+            try {
+              const parsedData = JSON.parse(data);
+              if (parsedData && (Array.isArray(parsedData.notes) || Array.isArray(parsedData.tasks))) {
+                const notes = Array.isArray(parsedData.notes) ? parsedData.notes : null;
+                const tasks = Array.isArray(parsedData.tasks) ? parsedData.tasks : null;
+
+                // Import notes if present
+                const notesPromise = notes ? indexedDBStorage.saveNotes(notes) : Promise.resolve();
+                // Import tasks if present
+                const tasksPromise = tasks ? indexedDBStorage.saveTasks(tasks) : Promise.resolve();
+
+                Promise.all([notesPromise, tasksPromise])
+                  .then(() => {
+                    toast({
+                      title: "Data imported successfully!",
+                      description: "Your notes and/or tasks have been imported. Please refresh the page to see the changes.",
+                      variant: "success"
+                    });
+                  })
+                  .catch((error) => {
+                    console.error("Error importing data:", error);
+                    toast({
+                      title: "Import Error",
+                      description: "There was an error importing your data.",
+                      variant: "destructive"
+                    });
+                  });
+              } else {
+                alert("Invalid JSON structure. Please ensure the file contains 'notes' and/or 'tasks' arrays.");
+              }
+            } catch (error) {
+              console.error("Error parsing JSON data:", error);
+              alert("Invalid JSON file. Please upload a valid file.");
+            }
+          }
+        };
+        reader.readAsText(file);
+      }
+    };
+    input.click();
+  };
+
+const clearData = () => {
+  indexedDBStorage.clearAllData().then(() => {
+    setDataCleared(true);
+    // Optionally, dispatch event if other components need to know
+    window.dispatchEvent(new Event("data-cleared"));
+  }).catch((error) => {
+    console.error("Error clearing data:", error);
+    alert("Failed to clear data. Please try again.");
+  });
+};
+
   const handleThemeChange = (newTheme: string) => {
     setTheme(newTheme);
     localStorage.setItem("current-theme", newTheme);
@@ -138,7 +231,7 @@ export const Settings = ({ isOpen, onClose }: SettingsProps) => {
           {/* Accessibility Options */}
           <div className="space-y-4">
             <h4 className="text-sm font-medium text-muted-foreground">Accessibility</h4>
-            
+
             <div className="flex items-center justify-between">
               <div className="flex items-center space-x-2">
                 <Contrast className="h-4 w-4" />
@@ -168,9 +261,38 @@ export const Settings = ({ isOpen, onClose }: SettingsProps) => {
                 {reducedMotion ? "On" : "Off"}
               </Button>
             </div>
+            <div className="flex items-center justify-between">
+              <div className="flex items-center space-x-2">
+                <DatabaseIcon className="h-4 w-4" />
+                <span className="text-sm">Data Management</span>
+              </div>
+              <Button
+                variant={dataCleared ? "ghost" : "outline"}
+                size="sm"
+                onClick={() => {
+                  clearData();
+                  setTimeout(() => {
+                    window.location.reload();
+                  }, 1000);
+                }}
+                className={`h-6 w-20 ${dataCleared ? "text-neon-purple" : "text-red-600"} text-xs`}
+                disabled={dataCleared}
+              >
+                {dataCleared ? "No Data" : "Clear Data"}
+              </Button>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={handleImportData}
+                className="h-6 w-24 text-xs text-neon-green"
+              >
+                Import Data
+              </Button>
+            </div>
           </div>
         </div>
       </SheetContent>
     </Sheet>
   );
 };
+
diff --git a/src/components/ShareExport.tsx b/src/components/ShareExport.tsx
@@ -52,7 +52,7 @@ export const ShareExport = ({ isOpen, onClose, notes, tasks }: ShareExportProps)
         break;
       
       case 'json':
-        content = JSON.stringify(notes, null, 2);
+        content = JSON.stringify({ notes }, null, 2);
         filename = 'noted-notes.json';
         mimeType = 'application/json';
         break;
@@ -98,7 +98,7 @@ export const ShareExport = ({ isOpen, onClose, notes, tasks }: ShareExportProps)
         break;
       
       case 'json':
-        content = JSON.stringify(tasks, null, 2);
+        content = JSON.stringify({ tasks }, null, 2);
         filename = 'noted-tasks.json';
         mimeType = 'application/json';
         break;
@@ -181,7 +181,8 @@ export const ShareExport = ({ isOpen, onClose, notes, tasks }: ShareExportProps)
     
     toast({
       title: "Export successful",
-      description: `${filename} has been downloaded.`
+      description: `${filename} has been downloaded.`,
+      variant: "success"
     });
     
     onClose();
diff --git a/src/components/ui/toast.tsx b/src/components/ui/toast.tsx
@@ -30,6 +30,7 @@ const toastVariants = cva(
         default: "border bg-background text-foreground",
         destructive:
           "destructive group border-destructive bg-destructive text-destructive-foreground",
+        success: "border-green-600 bg-green-50 text-green-900",
       },
     },
     defaultVariants: {
diff --git a/src/utils/indexedDBStorage.ts b/src/utils/indexedDBStorage.ts
@@ -53,7 +53,7 @@ class IndexedDBStorage {
       notes.forEach(note => {
         store.add({
           ...note,
-          createdAt: note.createdAt.toISOString()
+          // createdAt: note.createdAt.toISOString()
         });
       });
 
@@ -71,7 +71,7 @@ class IndexedDBStorage {
       const request = store.getAll();
 
       request.onsuccess = () => {
-        const notes = request.result.map((note: any) => ({
+        const notes = request.result.map((note: Note) => ({
           ...note,
           createdAt: new Date(note.createdAt)
         }));
@@ -96,7 +96,7 @@ class IndexedDBStorage {
       tasks.forEach(task => {
         store.add({
           ...task,
-          completedAt: task.completedAt ? task.completedAt.toISOString() : undefined
+          // completedAt: task.completedAt ? task.completedAt.toISOString() : undefined
         });
       });
 
@@ -114,7 +114,7 @@ class IndexedDBStorage {
       const request = store.getAll();
 
       request.onsuccess = () => {
-        const tasks = request.result.map((task: any) => ({
+        const tasks = request.result.map((task: Task) => ({
           ...task,
           completedAt: task.completedAt ? new Date(task.completedAt) : undefined
         }));
@@ -124,6 +124,59 @@ class IndexedDBStorage {
       request.onerror = () => reject(request.error);
     });
   }
+
+
+
+  async clearAllData(): Promise<void> {
+    if (!this.db) await this.init();
+    
+    return new Promise((resolve, reject) => {
+      const transaction = this.db!.transaction([NOTES_STORE, TASKS_STORE], 'readwrite');
+      const notesStore = transaction.objectStore(NOTES_STORE);
+      const tasksStore = transaction.objectStore(TASKS_STORE);
+
+      const notesClearRequest = notesStore.clear();
+      const tasksClearRequest = tasksStore.clear();
+
+      notesClearRequest.onsuccess = () => {
+        tasksClearRequest.onsuccess = () => resolve();
+      };
+
+      notesClearRequest.onerror = () => reject(notesClearRequest.error);
+      tasksClearRequest.onerror = () => reject(tasksClearRequest.error);
+    });
+  }
+
+  async importData(notes: Note[], tasks: Task[]): Promise<void> {
+    if (!this.db) await this.init();
+    
+    return new Promise((resolve, reject) => {
+      const transaction = this.db!.transaction([NOTES_STORE, TASKS_STORE], 'readwrite');
+      const notesStore = transaction.objectStore(NOTES_STORE);
+      const tasksStore = transaction.objectStore(TASKS_STORE);
+
+      // Add new notes
+      notes.forEach(note => {
+        notesStore.add({
+          ...note,
+          createdAt: note.createdAt.toISOString()
+        });
+      });
+
+      // Add new tasks
+      tasks.forEach(task => {
+        tasksStore.add({
+          ...task,
+          completedAt: task.completedAt ? task.completedAt.toISOString() : undefined
+        });
+      });
+
+      transaction.oncomplete = () => resolve();
+      transaction.onerror = () => reject(transaction.error);
+    });
+  }
+
+
 }
 
 export const indexedDBStorage = new IndexedDBStorage();
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -41,6 +41,10 @@ export default {
 					DEFAULT: 'hsl(var(--destructive))',
 					foreground: 'hsl(var(--destructive-foreground))'
 				},
+				success: {
+					DEFAULT: 'hsl(var(--success))',
+					foreground: 'hsl(var(--success-foreground))'
+				},
 				muted: {
 					DEFAULT: 'hsl(var(--muted))',
 					foreground: 'hsl(var(--muted-foreground))'
