Refactor DiaryEditor and Home components: display date and content, o…

…ptimize query key, handle empty note data, and clean up Home view layout. (#64)
swuecho · Dec 28, 2024 · 9f2bd5c · 9f2bd5c
1 parent 6e2e0ab
commit 9f2bd5c
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 12 deletions.
diff --git a/web/src/components/DiaryEditor.vue b/web/src/components/DiaryEditor.vue
@@ -4,6 +4,8 @@
       <el-tiptap :key="'editor-' + date" :content="content" :extensions="extensions" @onUpdate="debouncedOnUpdate"
         @onInit="onInit"></el-tiptap>
     </div>
+    {{ date }}
+    {{ content }}
   </div>
 </template>
 
@@ -36,9 +38,9 @@ const extensions = createExtensions();
 
 const content = ref({});
 const noteJsonRef = ref(null);
-
+const queryKey = computed(() => ['diaryContent', props.date]);
 const { data: noteData } = useQuery({
-  queryKey: ['diaryContent', props.date],
+  queryKey: queryKey,
   queryFn: () => fetchNote(props.date),
   // TODO: fix the onError removed from the useQuery issue
   onError: (error) => {
@@ -54,8 +56,12 @@ const { data: noteData } = useQuery({
 
 watch(noteData, (newData) => {
   if (newData) {
-    const noteObj = JSON.parse(newData.note);
-    content.value = noteObj;
+    if (newData.note) {
+      const noteObj = JSON.parse(newData.note);
+      content.value = noteObj;
+    } else {
+      content.value = {};
+    }
   }
 });
 

diff --git a/web/src/views/Home.vue b/web/src/views/Home.vue
@@ -1,8 +1,6 @@
 <template>
   <div class="content">
     <div class="nav">
-
-
       {{ time }}
       <div class="date-nav">
         <div @click="navigateDate(-1)" class="icon-container">
@@ -25,22 +23,22 @@
         <MDView :noteId="date"></MDView>
       </el-dialog>
       <div class="right-corner">
-         <OnlineStatusIndicator />  
+        <OnlineStatusIndicator />
         <div @click="openModalMd">
           <Icon icon="material-symbols:markdown-copy-outline" />
         </div>
         <div @click="openModal">
           <Icon icon="ri:todo-line" />
         </div>
         <div>
-        <a href="/content">
-          <Icon :icon="tableOfContents" />
-        </a>
-    </div>
+          <a href="/content">
+            <Icon :icon="tableOfContents" />
+          </a>
+        </div>
       </div>
     </div>
     <DiaryEditor :date="date"></DiaryEditor>
-           
+
 
   </div>
 </template>