From 9f2bd5c391900e695463a684ca56b6c5c5f3a64f Mon Sep 17 00:00:00 2001
From: Hao Wu <wuhaoecho@gmail.com>
Date: Sat, 28 Dec 2024 21:17:45 +0800
Subject: [PATCH] Refactor DiaryEditor and Home components: display date and
 content, optimize query key, handle empty note data, and clean up Home view
 layout. (#64)

---
 web/src/components/DiaryEditor.vue | 14 ++++++++++----
 web/src/views/Home.vue             | 14 ++++++--------
 2 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/web/src/components/DiaryEditor.vue b/web/src/components/DiaryEditor.vue
index 07cfad3..27a2d3b 100644
--- 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
index 7fc96f8..53de62b 100644
--- 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,7 +23,7 @@
         <MDView :noteId="date"></MDView>
       </el-dialog>
       <div class="right-corner">
-         <OnlineStatusIndicator />  
+        <OnlineStatusIndicator />
         <div @click="openModalMd">
           <Icon icon="material-symbols:markdown-copy-outline" />
         </div>
@@ -33,14 +31,14 @@
           <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>