implemented recycle bin

sereneinserenade · Mar 1, 2022 · fc1965a · fc1965a
1 parent 29ace6c
commit fc1965a
Show file tree

Hide file tree

Showing 8 changed files with 111 additions and 47 deletions.
diff --git a/src/pages/Newtab/Main.tsx b/src/pages/Newtab/Main.tsx
@@ -5,7 +5,7 @@ import { useRecoilState, useRecoilValue } from 'recoil';
 // import { ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.min.css';
 
-import { EditorAreaContainer, Maintop, Sidebar, Tiptap } from './components';
+import { EditorAreaContainer, Maintop, Sidebar } from './components';
 import { notesState, activeNoteState, sidebarActiveState, binNotesState } from './Store';
 import { Note } from './types';
 import PlaceNoterLogo from '../../assets/img/logo.svg';
@@ -34,17 +34,46 @@ function Main() {
   useEffect(() => {
     if (!activeNote) return
 
+    const binNoteIndex = binNotes.findIndex((n) => n?.id === activeNote.id)
+
+    const isInBin = binNoteIndex >= 0
+
     const noteIndex = notes.findIndex((n) => n?.id === activeNote.id)
-    const foundNote = notes[noteIndex]
 
-    if (activeNote?.content === foundNote?.content && activeNote?.title === foundNote?.title) return
+    if (isInBin) {
+      const foundNote = binNotes[binNoteIndex]
+
+      if (activeNote?.content === foundNote?.content && activeNote?.title === foundNote?.title) return
+
+      const copyOfNotes = [...binNotes.slice()]
+
+      if (activeNote) {
+        copyOfNotes[binNoteIndex] = activeNote
+        setBinNotes(copyOfNotes)
+      }
+
+      return
+    } else if (noteIndex >= 0) {
+
+      const foundNote = notes[noteIndex]
 
-    const copyOfNotes = [...notes.slice()]
+      if (activeNote?.content === foundNote?.content && activeNote?.title === foundNote?.title) return
 
-    if (activeNote) {
-      copyOfNotes[noteIndex] = activeNote
-      setNotes(copyOfNotes)
+      const copyOfNotes = [...notes.slice()]
+
+      if (activeNote) {
+        copyOfNotes[noteIndex] = activeNote
+        setNotes(copyOfNotes)
+      }
+
+      return
     }
+
+    const { id, title } = activeNote
+
+    debugger
+
+    console.error(`This activeNote is not inside \`notes\` and \`binNotes\` \n ${JSON.stringify({ id, title })}`)
   }, [activeNote])
 
   const setNotesInLocalStorage = () => storage.local.set({ dbnotes: notes })
@@ -57,7 +86,7 @@ function Main() {
 
   const debouncedSetBinNotesInLocalStorage = debounce(setBinNotesInLocalStorage, 300)
 
-  useEffect(() => { binNotesFetchedFromDb && debouncedSetBinNotesInLocalStorage() })
+  useEffect(() => { binNotesFetchedFromDb && debouncedSetBinNotesInLocalStorage() }, [binNotes])
 
   const checkIfAnEmptyNoteExists = (): Note | undefined => {
     return notes.find((n) => n.title.trim() === "" && n.textContent.trim() === "")
@@ -68,7 +97,6 @@ function Main() {
     if (emptyNoteInNotesList) {
       setActiveNote(undefined)
       setTimeout(() => setActiveNote(emptyNoteInNotesList))
-
       return
     }
 
@@ -83,8 +111,8 @@ function Main() {
     setActiveNote(undefined)
 
     setTimeout(() => {
-      setActiveNote(JSON.parse(JSON.stringify(newNote)))
       setNotes([newNote, ...notes])
+      setActiveNote(newNote)
     })
   }
 
@@ -104,8 +132,9 @@ function Main() {
     })
 
     storage.local.get('binNotes', ({ binNotes }) => {
-      if (binNotes) setBinNotes(binNotes)
-      else storage.local.set({ binNotes: [] })
+      if (binNotes) {
+        setBinNotes(binNotes)
+      } else storage.local.set({ binNotes: [] })
 
       setBinNotesFetchedFromDb(true)
     })

diff --git a/src/pages/Newtab/Newtab.tsx b/src/pages/Newtab/Newtab.tsx
@@ -16,7 +16,8 @@ const Newtab = () => {
     type: 'dark',
     theme: {
       colors: {
-        primary: '#3D9CF7'
+        primary: '#3D9CF7',
+        link: '#3D9CF7',
       }
     }
   })

diff --git a/src/pages/Newtab/components/MainTop.scss b/src/pages/Newtab/components/MainTop.scss
@@ -18,6 +18,6 @@
   }
 
   .right-controls {
-    gap: 1em;
+    gap: 0.5em;
   }
 }
diff --git a/src/pages/Newtab/components/MainTop.tsx b/src/pages/Newtab/components/MainTop.tsx
@@ -47,8 +47,8 @@ const MainTop = () => {
     setActiveNote(undefined)
 
     setTimeout(() => {
-      setActiveNote(JSON.parse(JSON.stringify(newNote)))
       setNotes([newNote, ...notes])
+      setActiveNote(newNote)
     })
   }
 
@@ -138,19 +138,20 @@ const MainTop = () => {
           <Button color="primary" auto ghost size='sm' onClick={onSidebarControlButtonClicked} className={`sidebar-control-button flex`} icon={sidebarActive ? <RiMenuFoldFill /> : <RiMenuUnfoldFill />} />
         </Tooltip>
         <Tooltip placement='bottomStart' content={'Create new note'}>
-          <Button color="primary" auto ghost size='sm' onClick={createNewNoteAndSetItAsActiveNote} className="sidebar-control-button flex" icon={< RiAddLine />} />
-        </Tooltip>
-        <Tooltip placement='bottomStart' content={'Home'}>
-          <Button color="primary" auto ghost size='sm' onClick={() => goHome()} className="sidebar-control-button flex" icon={< FiHome />} />
-        </Tooltip>
-        <Tooltip placement='bottomStart' content={'Export Data'}>
-          <Button color="primary" auto ghost size='sm' onClick={() => exportData(notes, binNotes)} className="sidebar-control-button flex" icon={< FiShare />} />
+          <Button
+            color="gradient"
+            auto
+            size='sm'
+            onClick={createNewNoteAndSetItAsActiveNote}
+            className="sidebar-control-button flex"
+            icon={< RiAddLine />}
+          />
         </Tooltip>
       </section>
 
       <section className='middle-controls'>
         {
-          activeNote &&
+          activeNote && binNotes.findIndex(n => n.id === activeNote.id) === -1 &&
           <Input
             underlined
             placeholder="Title..."
@@ -170,6 +171,13 @@ const MainTop = () => {
           </Tooltip>
         }
 
+        <Tooltip placement='bottomStart' content={'Home'}>
+          <Button color="primary" auto ghost size='sm' onClick={() => goHome()} className="sidebar-control-button flex" icon={< FiHome />} />
+        </Tooltip>
+        <Tooltip placement='bottomStart' content={'Export Data'}>
+          <Button color="primary" auto ghost size='sm' onClick={() => exportData(notes, binNotes)} className="sidebar-control-button flex" icon={< FiShare />} />
+        </Tooltip>
+
         <Tooltip placement='bottomEnd' content={isDark ? 'Light mode' : 'Dark mode'}>
           <Switch
             checked={isDark}

diff --git a/src/pages/Newtab/components/Sidebar.scss b/src/pages/Newtab/components/Sidebar.scss
@@ -82,12 +82,20 @@
   .sidebar {
     border-right: 1px solid gray;
 
-    .sidebar-note {
-      border-bottom: 1px solid gray;
+    .sidebar-notes-list {
+      .sidebar-note {
+        border-bottom: 1px solid gray;
 
-      &.active {
-        border-left: 6px solid gray;
-        background: rgba($color: gray, $alpha: 0.25);
+        &.active {
+          border-left: 6px solid gray;
+          background: rgba($color: gray, $alpha: 0.25);
+        }
+      }
+
+      .bin-section {
+        .sidebar-note:first-of-type {
+          border-top: 1px solid gray;
+        }
       }
     }
   }

diff --git a/src/pages/Newtab/components/Sidebar.tsx b/src/pages/Newtab/components/Sidebar.tsx
@@ -55,8 +55,8 @@ const Sidebar = () => {
     setActiveNote(undefined)
 
     setTimeout(() => {
-      setActiveNote(JSON.parse(JSON.stringify(newNote)))
       setNotes([newNote, ...notes])
+      setActiveNote(newNote)
     })
   }
 
@@ -70,28 +70,30 @@ const Sidebar = () => {
     storage.local.set({ lastActiveNoteId: note?.id })
   }
 
-  const setNoteTitle = (note: Note, newTitle: string) => {
+  const setNoteTitle = (note: Note, newTitle: string, isInBin: boolean = false) => {
     const { id } = note
 
-    const localNotes: Note[] = JSON.parse(JSON.stringify(notes))
+    const localNotes: Note[] = isInBin ? JSON.parse(JSON.stringify(binNotes)) : JSON.parse(JSON.stringify(notes))
 
     const index = localNotes.findIndex(n => n.id === id)
 
     const newNote = { ...note, title: newTitle }
 
     localNotes[index] = JSON.parse(JSON.stringify(newNote))
 
-    setNotes(localNotes)
+    if (isInBin) setBinNotes(localNotes)
+    else setNotes(localNotes)
 
     if (note.id === activeNote?.id) setActiveNote(JSON.parse(JSON.stringify(newNote)))
   }
 
-  const GetNoteTitle = (note: Note) => (<input
+  const GetNoteTitle = (note: Note, isInBin: boolean = false) => (<input
     placeholder='Add Title...'
     className='title-editor-input'
     onClick={e => e.stopPropagation()}
     value={note.title}
-    onInput={e => setNoteTitle(note, (e as any).target.value)}
+    onInput={e => setNoteTitle(note, (e as any).target.value, isInBin)}
+    disabled={isInBin}
   />)
 
 
@@ -126,11 +128,12 @@ const Sidebar = () => {
   const moveNoteToBin = (note: Note) => {
     const { id } = note
 
-    // Adding note to `binNotes`
-    setBinNotes(JSON.parse(JSON.stringify([note, ...binNotes])))
-
     // Removing note from `notes`
     setNotes(JSON.parse(JSON.stringify(notes.filter(n => n.id !== id))))
+
+    // Adding note to `binNotes`
+    // TODO: don't need so much vars/consts
+    setBinNotes(JSON.parse(JSON.stringify([note, ...binNotes])))
   }
 
   const initiateMoveToBin = (e: any, note: Note) => {
@@ -208,7 +211,7 @@ const Sidebar = () => {
                           className={`sidebar-note ${note.id === activeNote?.id ? 'active' : ''}`}
                         >
                           <section className='title-and-action-center flex'>
-                            {GetNoteTitle(note)}
+                            {GetNoteTitle(note, true)}
                             <Tooltip
                               placement='top'
                               content={'Recycle'}
@@ -303,7 +306,7 @@ const Sidebar = () => {
             margin: '1rem 0 0 10px',
             fontSize: '1.1em'
           }}>
-            No notes here, <Link onClick={createNewNoteAndSetItAsActiveNote}> Create one + </Link>
+            No notes here, <Link onClick={createNewNoteAndSetItAsActiveNote}> Create a note + </Link>
           </Text>
         )
     )

diff --git a/src/pages/Newtab/components/editor/EditorAreaContainer.tsx b/src/pages/Newtab/components/editor/EditorAreaContainer.tsx
@@ -1,8 +1,8 @@
-import React from 'react'
-import { useRecoilState } from 'recoil'
+import React, { useEffect, useState } from 'react'
+import { useRecoilState, useRecoilValue } from 'recoil'
 import { Container } from '@nextui-org/react'
 
-import { activeNoteState } from '../../Store'
+import { activeNoteState, binNotesState } from '../../Store'
 import { Note } from '../../types'
 import Tiptap from './Tiptap'
 
@@ -12,6 +12,14 @@ import { useTitle } from 'react-use'
 const EditorAreaContainer = () => {
   const [activeNote, setActiveNote] = useRecoilState(activeNoteState)
 
+  const binNotes = useRecoilValue(binNotesState)
+
+  const [isActiveNoteInBin, setIsActiveNoteInBin] = useState<boolean>(false)
+
+  useEffect(() => {
+    setIsActiveNoteInBin(binNotes.findIndex(n => n.id === activeNote?.id) >= 0)
+  }, [activeNote, binNotes])
+
   useTitle(activeNote?.title || "PlaceNoter")
 
   const setNoteContent = (content: string, textContent: string) => {
@@ -23,7 +31,11 @@ const EditorAreaContainer = () => {
 
   return (
     <Container sm>
-      <Tiptap content={`${activeNote?.content}` || ''} onUpdate={setNoteContent} />
+      <Tiptap
+        content={`${activeNote?.content}` || ''}
+        onUpdate={setNoteContent}
+        isNoteInBin={isActiveNoteInBin}
+      />
     </Container>
   )
 }

diff --git a/src/pages/Newtab/components/editor/Tiptap.tsx b/src/pages/Newtab/components/editor/Tiptap.tsx
@@ -1,4 +1,4 @@
-import React, { useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 
 import { useEditor, EditorContent, Content } from '@tiptap/react'
 import StarterKit from '@tiptap/starter-kit'
@@ -25,9 +25,10 @@ import { linkModalState } from '../../Store';
 interface TiptapProps {
   onUpdate: Function
   content: Content
+  isNoteInBin: boolean
 }
 
-const Tiptap = ({ onUpdate, content }: TiptapProps) => {
+const Tiptap = ({ onUpdate, content, isNoteInBin }: TiptapProps) => {
   const setGlobalLinkModalVisibleState = useSetRecoilState(linkModalState)
 
   const [isLocalSearchVisible, setIsLocalSearchVisible] = useState<boolean>(false)
@@ -107,13 +108,15 @@ const Tiptap = ({ onUpdate, content }: TiptapProps) => {
       attributes: {
         spellcheck: 'false'
       }
-    }
+    },
   })
 
+  useEffect(() => { editor?.setEditable(!isNoteInBin) }, [isNoteInBin])
+
   return (
     <>
       {
-        editor && (
+        editor && !isNoteInBin && (
           <Menubar
             editor={editor}
             isLocalSearchVisible={isLocalSearchVisible}