marco/contexted-v3
1
0
Fork 0
Code Issues 7 Pull Requests Packages Projects 1 Releases Wiki Activity

delete notes & sync to firebase

Browse Source
This commit is contained in:
Marco Crapts
2023-05-25 22:29:40 +02:00
parent 2b7ba1faf7
commit e384495e73
10 changed files with 64 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/App.vue
View File

@@ -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">

5
src/components/Search/SearchBar.vue
View File

@@ -20,8 +20,7 @@ const results = computed<Note[]>(() => {
return query.value ? findNotes(query.value) : notes.value
})
const goToNote = (note: Note, element?: HTMLElement) => {
console.log(element)
const goToNote = (note: Note) => {
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>

2
src/components/SideBar.vue
View File

@@ -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>

2
src/components/SideBar/SideBarMenuItem.vue
View File

@@ -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>

17
src/composables/useEncryption.ts
View File

@@ -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
}

52
src/composables/useNotes.ts
View File

@@ -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,
modified: note.modified,
isRoot: note.isRoot
isRoot: Boolean(note.isRoot),
created: note.created || note.modified || new Date().getTime(),
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
const firebaseNotes = (
await getDoc(doc(db.value, 'pages', user.value?.uid || ''))
).data() as { [noteId: string]: any }
if (encryptionKey.value === undefined || !user.value) return
const firebaseNotes = (await getDoc(doc(db.value, 'pages', user.value.uid))).data() as {
[noteId: string]: any
}
notes = encryptionKey.value ? decryptNotes(firebaseNotes, encryptionKey.value) : firebaseNotes
console.log('get notes from firebase', notes)
}

2
src/types.d.ts vendored
View File

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

4
src/utils/crypto.ts
View File

@@ -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()
}

1
src/utils/defaultNotes.ts
View File

@@ -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(),

2
tailwind.config.ts
View File

@@ -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]