From 7d74a805206dddc9b51da4a33bcf58b7859106e6 Mon Sep 17 00:00:00 2001
From: "nisch.codes" <hey@nisch.codes>
Date: Sun, 16 Mar 2025 08:48:55 +0100
Subject: [PATCH] feat: add localstorage for persistancy and minor refacotring
---
src/App.vue | 41 ++++++++++++++++++++++++++---------------
1 file changed, 26 insertions(+), 15 deletions(-)
diff --git a/src/App.vue b/src/App.vue
index 7c1b8a3..1b3b009 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,13 +1,22 @@
<script setup lang="ts">
-import {ref} from 'vue'
+import {ref, watchEffect} from 'vue'
import Sidebar from './components/Sidebar.vue'
-const notes = ref([])
+const STORAGE_KEY_CONFIG = 'jane-config'
+const STORAGE_KEY_NOTES = 'jane-notes'
+
+const configs = ref(JSON.parse(localStorage.getItem(STORAGE_KEY_CONFIG) || '[]'))
+const notes = ref(JSON.parse(localStorage.getItem(STORAGE_KEY_NOTES) || '[]'))
const active_note = ref(null)
const input_title = ref('')
const input_content = ref('')
+// find note Index by Id
+function findNoteIndexById(id:any):any {
+ return notes.value.findIndex((note:any) => note.id === id)
+}
+
// create note
function create_note() {
// generate random id
@@ -23,11 +32,11 @@ function create_note() {
}
// delete note
-function delete_note({id, evt}) {
+function delete_note({id, evt}:any) {
// stop the propagation of the event
evt.stopPropagation()
// find the current note id in the notes array
- let noteId = notes.value.findIndex(note => note.id === id)
+ let noteId = findNoteIndexById(id)
// delete the note out of the array
notes.value.splice(noteId, 1)
// unset the active note and the inputs
@@ -39,30 +48,32 @@ function delete_note({id, evt}) {
// update note
function update_note() {
// find the current note id in the notes array
- let noteId = notes.value.findIndex(note => note.id === active_note.value)
+ let noteId = findNoteIndexById(active_note.value)
// set the note properties to the current input values
notes.value[noteId].title = input_title.value
notes.value[noteId].content = input_content.value
}
// set active note
-function set_active_note(id) {
+function set_active_note(id:any) {
// set the active note property
active_note.value = id
// find the current note in the notes array
- let note = notes.value.find(note => note.id === id)
+ let noteId = findNoteIndexById(id)
// set the input properties to the current note
- input_title.value = note.title
- input_content.value = note.content
+ input_title.value = notes.value[noteId].title
+ input_content.value = notes.value[noteId].content
// set timeout to wait a tick to get it ready
- setTimeout(() => {
- document.querySelector('input#note-title').focus()
- }, 0);
+ setTimeout(() => { (document.querySelector('input#note-title') as HTMLInputElement)?.focus() }, 0)
}
-// save notes
-
-// load notes
+// persist state
+watchEffect(() => {
+ // save the current array of notes
+ localStorage.setItem(STORAGE_KEY_NOTES, JSON.stringify(notes.value))
+ // save the current array of configurations
+ localStorage.setItem(STORAGE_KEY_CONFIG, JSON.stringify(configs.value))
+})
</script>