sync with local storage

src/composables/useFirebase.ts

@@ -29,6 +29,6 @@ export const initializeFirebase = () => {
   })
 }
 
-export const initialized = computed(() => user.value !== undefined)
+export const initialized = computed<boolean>(() => user.value !== undefined)
 
 export const signOut = () => firebase.auth().signOut()

src/composables/useNotes.ts

@@ -1,13 +1,34 @@
+import { defaultNotes } from '@/utils/defaultNotes'
 import { viewModes, activeViewMode } from '@/composables/useViewMode'
 import { useTitle } from '@vueuse/core'
 import { mdToHtml } from '@/utils/markdown'
 import { getAllMatches } from '@/utils/helpers'
+import { initialized, user } from '@/composables/useFirebase'
 import shortid from 'shortid'
 
-const baseNotes = reactive<{ [noteId: string]: BaseNote }>({})
+const notesSource = computed<'firebase' | 'local' | null>(() => {
+  if (!initialized.value) return null
+  return user.value ? 'firebase' : 'local'
+})
+
+const baseNotes = ref<{ [noteId: string]: BaseNote }>({})
+watch(
+  baseNotes,
+  () => {
+    console.log(`Sync base notes with ${notesSource.value}`, baseNotes.value)
+    if (!notesSource.value) return
+    if (notesSource.value === 'local') {
+      console.log('sync with local')
+      localStorage.setItem('notes', JSON.stringify(baseNotes.value))
+    } else if (notesSource.value === 'firebase') {
+      console.log('sync with firebase')
+    }
+  },
+  { deep: true }
+)
 
 export const notes = computed<Note[]>(() => {
-  return Object.entries(baseNotes)
+  return Object.entries(baseNotes.value)
     .map(([, note]) => ({
       ...note,
       wordCount: note.content.split(' ').filter((word) => word.length > 0).length
@@ -40,17 +61,17 @@ export const rootNote = computed<Note | undefined>(() => {
 
 export const setRootNote = (noteId: string) => {
   if (rootNote.value) {
-    const updatedRootNote = { ...baseNotes[rootNote.value.id], isRoot: false }
+    const updatedRootNote = { ...baseNotes.value[rootNote.value.id], isRoot: false }
     updateNote(updatedRootNote.id, updatedRootNote)
   }
-  const note = { ...baseNotes[noteId], isRoot: true }
+  const note = { ...baseNotes.value[noteId], isRoot: true }
   updateNote(noteId, note)
   setActiveNote(noteId)
 }
 
 export const setDefaultNotes = (defaultNotes: BaseNote[]) => {
   defaultNotes.forEach((defaultNote) => {
-    baseNotes[defaultNote.id] = defaultNote
+    baseNotes.value[defaultNote.id] = defaultNote
   })
 }
 
@@ -86,7 +107,7 @@ export const updateNote = (noteId: string, note: BaseNote) => {
     ...note,
     modified: new Date().getTime()
   }
-  baseNotes[noteId] = updatedNote
+  baseNotes.value[noteId] = updatedNote
 }
 
 export const addNote = (title: string, content: string, goToNote: boolean = false) => {
@@ -98,38 +119,26 @@ export const addNote = (title: string, content: string, goToNote: boolean = fals
     created: new Date().getTime(),
     modified: new Date().getTime()
   }
-  baseNotes[id] = newNote
+  baseNotes.value[id] = newNote
   if (goToNote) setActiveNote(id)
   return newNote
 }
 
 export const deleteNote = (noteId: string) => {
-  delete baseNotes[noteId]
+  delete baseNotes.value[noteId]
 }
 
 const getNoteLinksByNoteId = (noteId: string): string[] => {
-  const note = baseNotes[noteId]
+  const note = baseNotes.value[noteId]
   const regex = /\[\[(.*?)\]\]/g
   const links = getAllMatches(regex, note.content || '')
     .map((to) => notes.value.find((note) => note.title === to[1])?.id || '')
-    .filter((noteId) => Object.keys(baseNotes).includes(noteId))
+    .filter((noteId) => Object.keys(baseNotes.value).includes(noteId))
   return [...links]
 }
 
-interface NoteRelations {
-  id: string
-  to: string[]
-  from: string[]
-}
-
-interface NotesRelations {
-  [noteId: string]: {
-    to: string[]
-    from: string[]
-  }
-}
 export const notesRelations = computed(() => {
-  const noteIds = Object.keys(baseNotes)
+  const noteIds = Object.keys(baseNotes.value)
   const relations = noteIds
     .filter((id) => id !== undefined)
     .map((id) => {
@@ -166,3 +175,22 @@ export function getNoteReferences(note: Note) {
         .filter((note): note is Note => note !== undefined)
     : []
 }
+
+watch(
+  notesSource,
+  () => {
+    if (!notesSource.value) return
+    baseNotes.value = {}
+    if (notesSource.value === 'local') {
+      const localNotes = JSON.parse(localStorage.getItem('notes') || '{}')
+      baseNotes.value = localNotes
+    } else if (notesSource.value === 'firebase') {
+      console.log('get notes from firebase')
+    }
+    if (Object.entries(baseNotes.value).length === 0) {
+      setDefaultNotes(defaultNotes)
+    }
+    setActiveNote(rootNote.value?.id)
+  },
+  { immediate: true }
+)

src/composables/useViewMode.ts

@@ -3,4 +3,4 @@ export const viewModes: ViewMode[] = [
   { name: 'List', icon: 'fas fa-list fa-fw' },
   { name: 'Mindmap', icon: 'fas fa-project-diagram fa-fw' },
 ]
-export const activeViewMode = ref(viewModes[0])
+export const activeViewMode = ref<ViewMode>(viewModes[0])