delete notes & sync to firebase

src/App.vue

@@ -89,49 +89,6 @@ provide('loading', loading)
         <Mindmap v-else-if="activeViewMode.name === 'Mindmap'" />
       </template>
       <SkeletonNote v-else />
-      <!-- <div>
-        <p>bla</p>
-        <p>bla</p>
-        <p>bla</p>
-        <p>bla</p>
-        <p>bla</p>
-        <p>bla</p>
-        <p>bla</p>
-        <p>bla</p>
-        <p>bla</p>
-        <p>bla</p>
-        <p>bla</p>
-        <p>bla</p>
-        <p>bla</p>
-        <p>bla</p>
-        <p>bla</p>
-        <p>bla</p>
-        <p>bla</p>
-        <p>bla</p>
-        <p>bla</p>
-        <p>bla</p>
-        <p>bla</p>
-        <p>bla</p>
-        <p>bla</p>
-        <p>bla</p>
-        <p>bla</p>
-        <p>bla</p>
-        <p>bla</p>
-        <p>bla</p>
-        <p>bla</p>
-        <p>bla</p>
-        <p>bla</p>
-        <p>bla</p>
-        <p>bla</p>
-        <p>bla</p>
-        <p>bla</p>
-        <p>bla</p>
-        <p>bla</p>
-        <p>bla</p>
-        <p>bla</p>
-        <p>bla</p>
-        <p>bla</p>
-      </div> -->
     </main>
   </div>
   <Modal :open="passphraseRequired" :persistent="true">

src/components/Search/SearchBar.vue

@@ -20,8 +20,7 @@ const results = computed<Note[]>(() => {
   return query.value ? findNotes(query.value) : notes.value
 })
 
-const goToNote = (note: Note, element?: HTMLElement) => {
+const goToNote = (note: Note) => {
-  console.log(element)
   setActiveNote(note.id)
   active.value = false
   if (queryElem.value) queryElem.value.blur()
@@ -75,7 +74,7 @@ const resultsRefs = ref<InstanceType<typeof SearchResult>[]>([])
               :key="result.id"
               :result="result"
               :active-result="activeResult"
-              @go-to-note="(element) => goToNote(result, element)"
+              @go-to-note="goToNote(result)"
               ref="resultsRefs"
             />
           </template>

src/components/SideBar.vue

@@ -28,7 +28,7 @@ const setViewMode = (viewMode: ViewMode) => {
 <template>
   <div
     id="sidebar"
-    class="fixed bottom-0 top-0 flex max-sm:w-sidebar-mobile sm:w-sidebar flex-col gap-4 overflow-y-auto px-2 py-3 text-[90%] max-sm:text-[120%]"
+    class="fixed bottom-0 top-0 flex flex-col gap-4 overflow-y-auto px-2 py-3 text-[90%] max-sm:w-sidebar-mobile max-sm:gap-6 max-sm:text-[110%] sm:w-sidebar"
   >
     <SideBarMenu>
       <template #header>Root note</template>

src/components/SideBar/SideBarMenuItem.vue

@@ -6,7 +6,7 @@ const props = defineProps<{
 </script>
 <template>
   <a
-    class="mt-1 block w-full cursor-pointer overflow-x-hidden text-ellipsis whitespace-nowrap rounded hover:bg-gray-200 active:bg-primary active:text-primary-content"
+    class="max-sm:mt-2 mt-1 block w-full cursor-pointer overflow-x-hidden text-ellipsis whitespace-nowrap rounded hover:bg-gray-200 active:bg-primary active:text-primary-content"
     :class="props.active ? 'font-bold text-primary' : 'text-secondary'"
   >
     <i :class="props.icon" class="mr-2" v-if="props.icon"></i>

src/composables/useEncryption.ts

@@ -1,6 +1,6 @@
 import { doc, getDoc } from 'firebase/firestore'
 import { user, db } from '@/composables/useFirebase'
-import { decrypt, calculateClientKey } from '@/utils/crypto'
+import { decrypt, encrypt, calculateClientKey } from '@/utils/crypto'
 
 function getClientKeysFromLocalStorage(): { [uid: string]: string } {
   try {
@@ -76,3 +76,18 @@ export const decryptNotes = (notes: BaseNotes, encryptionKey: EncryptionKey) =>
   )
   return decryptedNotes
 }
+
+const encryptNote = (note: BaseNote, key: EncryptionKey) => {
+  return {
+    ...note,
+    title: encrypt(note.title, key),
+    content: encrypt(note.content, key)
+  }
+}
+
+export const encryptNotes = (notes: BaseNotes, encryptionKey: EncryptionKey) => {
+  const encryptedNotes = Object.fromEntries(
+    Object.entries(notes).map(([noteId, note]) => [noteId, { ...encryptNote(note, encryptionKey) }])
+  )
+  return encryptedNotes
+}

src/composables/useNotes.ts

@@ -1,9 +1,9 @@
 import shortid from 'shortid'
 import { useTitle } from '@vueuse/core'
-import { doc, getDoc } from 'firebase/firestore'
+import { doc, getDoc, updateDoc, deleteField } from 'firebase/firestore'
 import { viewModes, activeViewMode } from '@/composables/useViewMode'
 import { initialized, user, db } from '@/composables/useFirebase'
-import { decryptNotes, encryptionKey } from '@/composables/useEncryption'
+import { decryptNotes, encryptNotes, encryptionKey } from '@/composables/useEncryption'
 import { defaultNotes } from '@/utils/defaultNotes'
 import { mdToHtml } from '@/utils/markdown'
 import { getAllMatches } from '@/utils/helpers'
@@ -39,18 +39,37 @@ watchEffect(() => {
   activeNotesSource.value = getSource()
 })
 
-const baseNotes = ref<{ [noteId: string]: BaseNote }>({})
+const baseNotes = ref<BaseNotes>({})
 watch(
   baseNotes,
-  () => {
+  async (newBaseNotes, oldBaseNotes) => {
     if (!activeNotesSource.value || Object.keys(baseNotes.value).length === 0) return
+    console.log()
+
     if (activeNotesSource.value === 'local') {
-      console.log('sync with local')
       localStorage.setItem('notes', JSON.stringify(baseNotes.value))
     } else if (activeNotesSource.value === 'firebase') {
-      console.log('sync with firebase')
+      if (!db.value) throw Error("Database undefined, can't sync to Firebase")
+      if (!user.value) throw Error("User undefined, can't sync to Firebase")
+      const notes = encryptionKey.value
+        ? encryptNotes(baseNotes.value, encryptionKey.value)
+        : baseNotes.value
+
+      const notesToDelete = Object.keys(oldBaseNotes).filter(
+        (x) => !Object.keys(newBaseNotes).includes(x)
+      )
+      try {
+        const docRef = doc(db.value, 'pages', user.value.uid)
+        await Promise.all(
+          notesToDelete.map((noteId: string) => {
+            return updateDoc(docRef, { [noteId]: deleteField() })
+          })
+        )
+        await updateDoc(docRef, notes)
+      } catch (error: any) {
+        console.error(error)
+      }
     }
-    console.log(`Sync base notes with ${activeNotesSource.value}`, baseNotes.value)
   },
   { deep: true }
 )
@@ -144,6 +163,7 @@ export const addNote = (title: string, content: string, goToNote: boolean = fals
     id,
     title,
     content,
+    isRoot: false,
     created: new Date().getTime(),
     modified: new Date().getTime()
   }
@@ -153,7 +173,9 @@ export const addNote = (title: string, content: string, goToNote: boolean = fals
 }
 
 export const deleteNote = (noteId: string) => {
-  delete baseNotes.value[noteId]
+  const baseNotesClone: BaseNotes = structuredClone(toRaw(baseNotes.value))
+  delete baseNotesClone[noteId]
+  baseNotes.value = baseNotesClone
 }
 
 const getNoteLinksByNoteId = (noteId: string): string[] => {
@@ -213,9 +235,9 @@ const parseBaseNotes = (notes: BaseNotes): BaseNotes => {
           id: noteId,
           title: note.title,
           content: note.content,
-          created: note.created,
+          isRoot: Boolean(note.isRoot),
-          modified: note.modified,
+          created: note.created || note.modified || new Date().getTime(),
-          isRoot: note.isRoot
+          modified: note.modified || note.created || new Date().getTime()
         }
       ]
     })
@@ -235,10 +257,10 @@ watch(
         console.log(error)
       }
     } else if (activeNotesSource.value === 'firebase' && db.value) {
-      if (encryptionKey.value === undefined) return
+      if (encryptionKey.value === undefined || !user.value) return
-      const firebaseNotes = (
+      const firebaseNotes = (await getDoc(doc(db.value, 'pages', user.value.uid))).data() as {
-        await getDoc(doc(db.value, 'pages', user.value?.uid || ''))
+        [noteId: string]: any
-      ).data() as { [noteId: string]: any }
+      }
       notes = encryptionKey.value ? decryptNotes(firebaseNotes, encryptionKey.value) : firebaseNotes
       console.log('get notes from firebase', notes)
     }

src/types.d.ts

@@ -5,7 +5,7 @@ declare global {
     content: string
     created: number
     modified: number
-    isRoot?: boolean
+    isRoot: boolean
   }
 
   interface Note extends BaseNote {

src/utils/crypto.ts

@@ -13,3 +13,7 @@ export const decrypt = (encryptedMessage: string, key: string): string => {
     throw new Error("Message doesn't have valid encryption")
   return decryptedMessage.substring(encryptionPrefix.length)
 }
+
+export const encrypt = (unencryptedMessage: string, key: string): string => {
+  return CryptoJS.AES.encrypt(encryptionPrefix + unencryptedMessage, key).toString()
+}

src/utils/defaultNotes.ts

@@ -14,6 +14,7 @@ Let's get started!`,
   {
     title: 'brackets',
     content: `If you type square brackets around text a link is created automatically. Like magic!`,
+    isRoot: false
   },
 ].map((note) => ({
   id: shortid.generate(),

tailwind.config.ts

@@ -1,7 +1,7 @@
 const colors = require('tailwindcss/colors')
 const appWidth = '1280px'
 const sideBarWidth = '220px'
-const sideBarWidthMobile ='320px'
+const sideBarWidthMobile ='260px'
 const primary = '#1E4BC4'
 const secondary = colors.gray[500]