Merge pull request #3 from codeAntu/main

Added backup options
codeAbinash · Dec 31, 2023 · 1f69dd2 · 1f69dd2
2 parents 3e641aa + 8141770
commit 1f69dd2
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 24 deletions.
diff --git a/src/pages/backup-restore/Backup.tsx b/src/pages/backup-restore/Backup.tsx
@@ -14,11 +14,11 @@ function Backup() {
       <div className='backup screen dark:text-darkText'>
          <BackHeader title='Backup your data' />
          <div className='flex min-h-[80dvh] flex-col items-center justify-center gap-7 p-5'>
-            <p className='text-balance whitespace-pre text-center text-xl font-semibold'>
+            <p className='whitespace-pre text-balance text-center text-xl font-semibold'>
                Backup your data <TextEmoji emoji='📂' />{' '}
             </p>
             <img src={icons.backup_folder} className='mx-auto w-[45%] drop-shadow-2xl' />
-            <p className='text-balance text-secondary text-center text-xs'>
+            <p className='text-secondary text-balance text-center text-xs'>
                You can backup your data by downloading a file. This file can be used to restore your data on another
                device. Or you can use it to restore your data if you reinstall the app.
             </p>
@@ -47,14 +47,14 @@ function BackupUi() {
             {isBackingUp ? (
                <div className='flex items-center justify-center font-medium text-accent'>
                   <img src={icons.spinner} className='h-10 w-10' />
-                  <p className='text-balance text-md whitespace-pre pr-5 text-center'>
+                  <p className='text-md whitespace-pre text-balance pr-5 text-center'>
                      {' '}
                      Preparing Backup <TextEmoji emoji='📂' />
                   </p>
                </div>
             ) : isBackedUp ? (
                <div className='flex items-center justify-center gap-2'>
-                  <p className='text-balance text-md whitespace-pre pr-5 text-center font-medium'>
+                  <p className='text-md whitespace-pre text-balance pr-5 text-center font-medium'>
                      Backup Complete <TextEmoji emoji='📂' />{' '}
                      <span className='text-sm'>
                         <TextEmoji emoji='✅' />
@@ -72,7 +72,7 @@ function BackupUi() {
                </button>
             )}
          </div>
-         <p className='text-balance mt-5 text-center text-xs text-grey'>
+         <p className='mt-5 text-balance text-center text-xs text-grey'>
             This will download a backup file containing all your data.{' '}
          </p>
       </>
@@ -82,10 +82,15 @@ function BackupUi() {
 function createBackup() {
    const routines = JSON.parse(ls.get('routines') || '[]');
    const subscriptions = JSON.parse(ls.get('subscriptions') || '[]');
+   // const notes = JSON.parse(localStorage.getItem('notes') || '[]');
+   const notes = JSON.parse(ls.get('notes') || '[]');
+
+   console.log(notes);
 
    const backup: BackupType = {
       routines,
       subscriptions,
+      notes,
    };
    // File name will be routines_backup_2021-09-18_12-00-00.json
    const fileName =

diff --git a/src/pages/backup-restore/Restore.tsx b/src/pages/backup-restore/Restore.tsx
@@ -18,12 +18,12 @@ function Restore() {
             className={`${startedUsing ? 'min-h-[85vh]' : 'min-h-[100vh]'} flex flex-col items-center
        justify-between gap-5 p-5`}
          >
-            <p className='text-balance whitespace-pre text-center text-xl font-semibold'>
+            <p className='whitespace-pre text-balance text-center text-xl font-semibold'>
                Restore Your <br /> Backed up data <TextEmoji emoji='📂' />{' '}
             </p>
             <div>
                <img src={icons.restore_file} className='mx-auto w-[45%] drop-shadow-2xl' />
-               <p className='text-balance text-secondary mt-5 px-[5%] text-center text-xs'>
+               <p className='text-secondary mt-5 text-balance px-[5%] text-center text-xs'>
                   Select a backup file that is previously backed up from this application. This will restore all your
                   data from that backup file.
                </p>
@@ -36,30 +36,39 @@ function Restore() {
    );
 }
 
-function restoredCountStatus(routineCount: number, subscriptionCount: number) {
-   if (routineCount === 0 && subscriptionCount === 0) return 'No data restored, maybe you selected a wrong file?';
-   if (routineCount === 0) return `${subscriptionCount} subscriptions restored`;
-   if (subscriptionCount === 0) return `${routineCount} routines restored`;
-   return `${routineCount} routines and ${subscriptionCount} subscriptions restored`;
+function restoredCountStatus(routineCount: number, subscriptionCount: number, notesCount: number) {
+   if (routineCount === 0 && subscriptionCount === 0 && notesCount === 0)
+      return 'No data restored, maybe you selected a wrong file?';
+   if (routineCount === 0 && notesCount === 0) return `${subscriptionCount} subscriptions restored`;
+   if (subscriptionCount === 0 && notesCount === 0) return `${routineCount} routines restored`;
+   if (routineCount === 0 && subscriptionCount === 0) return `${notesCount} notes restored`;
+
+   return `${routineCount} routines, ${notesCount} notes  and ${subscriptionCount} subscriptions restored`;
 }
 
 export function storeInLs(data: BackupType) {
    const routines = JSON.parse(ls.get('routines') || '[]');
    const subscriptions = JSON.parse(ls.get('subscriptions') || '{}');
+   const notes = JSON.parse(ls.get('notes') || '[]');
 
    routines.unshift(...data.routines);
    // Add subscriptions key values to the existing subscriptions
    // For each key in data.subscriptions
 
    for (const key in data.subscriptions) subscriptions[key] = data.subscriptions[key];
 
+   // Add notes
+   notes.unshift(...data.notes);
+
    ls.set('routines', JSON.stringify(routines));
    ls.set('subscriptions', JSON.stringify(subscriptions));
+   ls.set('notes', JSON.stringify(notes));
 
    const restoredRoutineCount = data.routines.length;
    const restoredSubscriptionCount = Object.keys(data.subscriptions).length;
-   const status = restoredCountStatus(restoredRoutineCount, restoredSubscriptionCount);
-   return { status, restoredRoutineCount, restoredSubscriptionCount };
+   const restoredNotesCount = data.notes.length;
+   const status = restoredCountStatus(restoredRoutineCount, restoredSubscriptionCount, restoredNotesCount);
+   return { status, restoredRoutineCount, restoredSubscriptionCount, restoredNotesCount };
 }
 
 function RestoreUi({ startedUsing }: { startedUsing: string | null }) {

diff --git a/src/pages/backup-restore/file.ts b/src/pages/backup-restore/file.ts
@@ -3,4 +3,5 @@ import { Routine } from '../../lib/dateMethods';
 export type BackupType = {
    routines: Routine[];
    subscriptions: string[];
+   notes: string[];
 };
diff --git a/src/pages/notes/AddNotes.tsx b/src/pages/notes/AddNotes.tsx
@@ -1,6 +1,7 @@
 import { ChevronLeft } from 'lucide-react';
 import { useEffect, useRef, useState } from 'react';
 import { Link } from 'react-router-dom';
+import ls from '../../lib/storage';
 
 export default function Add() {
    const [title, setTitle] = useState('');
@@ -10,7 +11,7 @@ export default function Add() {
    const inputRef = useRef<HTMLTextAreaElement>(null);
 
    useEffect(() => {
-      const notes = localStorage.getItem('notes');
+      const notes = ls.get('notes');
       if (notes) {
          setNotes(JSON.parse(notes));
       }
@@ -20,7 +21,7 @@ export default function Add() {
       if (title === '' && content === '') {
          setNotes((prevNotes: any) => {
             const newNotes = prevNotes.filter((n: any) => n.id !== id);
-            localStorage.setItem('notes', JSON.stringify(newNotes));
+            ls.set('notes', JSON.stringify(newNotes));
             return newNotes;
          });
       } else if (title !== '' || content !== '') {
@@ -33,7 +34,7 @@ export default function Add() {
          setNotes((prevNotes: any) => {
             const newNotes = prevNotes.filter((n: any) => n.id !== note.id);
             newNotes.push(note);
-            localStorage.setItem('notes', JSON.stringify(newNotes));
+            ls.set('notes', JSON.stringify(newNotes));
             return newNotes;
          });
       }

diff --git a/src/pages/notes/EditNotes.tsx b/src/pages/notes/EditNotes.tsx
@@ -2,6 +2,7 @@ import { useLoaderData, useLocation, useSubmit } from 'react-router-dom';
 import { useEffect, useRef, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { Check, ChevronLeft, Pencil, Trash2 } from 'lucide-react';
+import ls from '../../lib/storage';
 
 export default function Edit() {
    const { state } = useLocation();
@@ -16,7 +17,7 @@ export default function Edit() {
    console.log(state);
 
    useEffect(() => {
-      const notes = localStorage.getItem('notes');
+      const notes = ls.get('notes');
       if (notes) {
          setNotes(JSON.parse(notes));
       }
@@ -25,15 +26,15 @@ export default function Edit() {
    function delNote() {
       const temp = notes.filter((note: any) => note.id !== id);
       setNotes(temp);
-      localStorage.setItem('notes', JSON.stringify(temp));
+      ls.set('notes', JSON.stringify(temp));
    }
 
    useEffect(() => {
       if (isEdited) {
          if (title === '' && content === '') {
             setNotes((prevNotes: any) => {
                const newNotes = prevNotes.filter((n: any) => n.id !== id);
-               localStorage.setItem('notes', JSON.stringify(newNotes));
+               ls.set('notes', JSON.stringify(newNotes));
                return newNotes;
             });
          } else if (title !== '' || content !== '') {
@@ -47,7 +48,8 @@ export default function Edit() {
             setNotes((prevNotes: any) => {
                const newNotes = prevNotes.filter((n: any) => n.id !== note.id);
                newNotes.push(note);
-               localStorage.setItem('notes', JSON.stringify(newNotes));
+               ls.set('notes', JSON.stringify(newNotes));
+
                return newNotes;
             });
          }

diff --git a/src/pages/notes/Notes.tsx b/src/pages/notes/Notes.tsx
@@ -1,9 +1,11 @@
-import { Camera, Search, Settings, Plus, Divide, X } from 'lucide-react';
+import { Camera, Search, Settings, Plus, Divide, X, MoreVertical } from 'lucide-react';
 import { useEffect, useState } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 import Header from '../../components/Header';
 import FloatingButton from '../../components/FloatingButton';
 import Watermark from '../../components/Watermark';
+import More from '../More';
+import ls from '../../lib/storage';
 
 export default function Home() {
    const [notes, setNotes] = useState([]) as any;
@@ -13,7 +15,7 @@ export default function Home() {
    const [searchedNotes, setSearchedNotes] = useState([]) as any;
 
    useEffect(() => {
-      const notes = localStorage.getItem('notes');
+      const notes = ls.get('notes');
       if (notes) {
          setNotes(JSON.parse(notes).reverse());
       }
@@ -28,7 +30,6 @@ export default function Home() {
 
    return (
       <div className='home-screen screen-navbar select-none dark:bg-black dark:text-darkText'>
-         <div className='scrollToTop'></div>
          <Header
             title={<span>Notes</span>}
             placeholder='Search Notes'