From c466f45de16837987a6dee2719f7c4a4ef1a6ca3 Mon Sep 17 00:00:00 2001
From: Hao Wu <wuhaoecho@gmail.com>
Date: Sat, 21 Sep 2024 12:01:00 +0800
Subject: [PATCH] Todo nav (#50)

* move nav to home

* Refactor DiaryEditor and Home components:
- Add loading icon to DiaryEditor.
- Remove unnecessary interval and styles from DiaryEditor.
- Update navigation links in NavBar and Home.
- Improve date navigation in Home.
- Scope styles to components.
---
 api/Notepad.fsproj                 |  3 +-
 api/Program.fs                     |  1 +
 api/Word.fs                        | 13 +++++
 web/src/components/DiaryEditor.vue | 58 +++----------------
 web/src/components/NavBar.vue      |  2 +-
 web/src/router.js                  |  2 +-
 web/src/util.js                    |  2 +-
 web/src/views/Home.vue             | 93 ++++++++++++++++++++++++++++--
 8 files changed, 115 insertions(+), 59 deletions(-)
 create mode 100644 api/Word.fs

diff --git a/api/Notepad.fsproj b/api/Notepad.fsproj
index 3c9b38c..2bbf20a 100644
--- a/api/Notepad.fsproj
+++ b/api/Notepad.fsproj
@@ -1,4 +1,4 @@
-<Project Sdk="Microsoft.NET.Sdk">
+<Project Sdk="Microsoft.NET.Sdk">
   <PropertyGroup>
     <OutputType>Exe</OutputType>
     <TargetFramework>net8.0</TargetFramework>
@@ -16,6 +16,7 @@
     <Compile Include="queries/summary.sql.fs" />
     <Compile Include="Database.fs" />
     <Compile Include="Json.fs" />
+    <Compile Include="Word.fs" />
     <Compile Include="Summary.fs" />
     <Compile Include="Note.fs" />
     <Compile Include="Program.fs" />
diff --git a/api/Program.fs b/api/Program.fs
index 9a5a5ad..45e7a08 100644
--- a/api/Program.fs
+++ b/api/Program.fs
@@ -153,6 +153,7 @@ webHost [||] {
           get "/api/diary/{id}" Note.noteByIdPartDebug
           put "/api/diary/{id}" Note.addNotePart
           get "/api/todo"  Note.todoListsHandler
+          get "/api/random-word" Word.getRandomWord 
         ]
 
     use_middleware serveVueFiles
diff --git a/api/Word.fs b/api/Word.fs
new file mode 100644
index 0000000..e840eaa
--- /dev/null
+++ b/api/Word.fs
@@ -0,0 +1,13 @@
+module Word
+
+open System
+
+let randomWords =
+    [  ] // Add more words as needed
+
+let getRandomWord =
+    fun ctx ->
+        let random = Random()
+        let word = randomWords.[random.Next(randomWords.Length)]
+        // refresh note summary
+        Falco.Request.mapRoute (ignore) (fun _ -> {| word = word |} |> Json.Response.ofJson) ctx
diff --git a/web/src/components/DiaryEditor.vue b/web/src/components/DiaryEditor.vue
index 47d53db..e55618c 100644
--- a/web/src/components/DiaryEditor.vue
+++ b/web/src/components/DiaryEditor.vue
@@ -1,18 +1,9 @@
 <template>
   <div class="content">
-    <div class="nav">
-      {{ time }}
-      <a href="#">{{ date }}</a>
-      <a v-if="date != today" :href="'/view?date=' + today">Today</a>
-      <a v-if="date == today" href="/todo">Todo</a>
-      <a href="content">
-        <Icon :icon="icons.tableOfContents" />
-        <Icon v-if="loading" icon="line-md:loading-alt-loop" />
-      </a>
-    </div>
     <div class="editor">
-      <el-tiptap :content="content" :extensions="extensions" @onUpdate="debouncedOnUpdate" @onInit="onInit"></el-tiptap>
+      <el-tiptap :key="'editor-' + date" :content="content" :extensions="extensions" @onUpdate="debouncedOnUpdate" @onInit="onInit"></el-tiptap>
     </div>
+    <Icon v-if="loading" icon="line-md:loading-alt-loop" />
   </div>
 </template>
 
@@ -42,29 +33,12 @@ const props = defineProps({
 });
 
 
-const now = ref(moment());
 const loading = ref(true);
-const timeFormat = 'h:mm:ss a';
 const last_note_json = ref(null);
 const content = ref(null);
-const icons = {
-  tableOfContents,
-};
 const extensions = createExtensions();
 const json = ref(null);
 
-onMounted(() => {
-  // eslint-disable-next-line no-unused-vars
-  const interval = setInterval(() => now.value = moment(), 1000);
-});
-
-const today = computed(() => {
-  return now.value.format('YYYYMMDD');
-});
-
-const time = computed(() => {
-  return now.value.format(timeFormat);
-});
 
 const mutation = useMutation({
   mutationFn: async () => {
@@ -122,6 +96,11 @@ const onInit = async ({ editor }) => {
       editor.setContent(lastNoteJson);
     }
   } catch (error) {
+    if (error.response && error.response.status === 401) {
+      // Use the correct router method in the Vue 3 setup
+      router.push({ name: 'login' });
+    }
+    console.error('Error updating diary:', error);
     console.error('Error fetching diary content:', error);
   } finally {
     loading.value = false;
@@ -129,31 +108,10 @@ const onInit = async ({ editor }) => {
 };
 </script>
 
-<style>
-.content {
-  max-width: 65rem;
-  margin: auto;
-}
-
-.nav {
-  margin: 1em 1em 1rem 1em;
-  display: flex;
-  justify-content: space-between;
-}
-
+<style scoped>
 pre code {
   font-family: "Fira Code", Courier, Monaco, monospace;
 }
 
-.nav a {
-  display: inline-block;
-  text-decoration: none;
-  border-radius: 5%;
-}
 
-/* Change the link color on hover */
-.nav a:hover {
-  background-color: rgb(223, 214, 214);
-  color: white;
-}
 </style>
diff --git a/web/src/components/NavBar.vue b/web/src/components/NavBar.vue
index 2fb420e..57cf9db 100644
--- a/web/src/components/NavBar.vue
+++ b/web/src/components/NavBar.vue
@@ -1,6 +1,6 @@
 <template>
         <div class="nav">
-                <a v-if="date != today" :href="'/view?date=' + today">Diary</a>
+                <a v-if="date != today" href="/">Diary</a>
                 <a href="content">
                         <Icon :icon="icons.tableOfContents" />
                         <Icon v-if="loading" icon="line-md:loading-alt-loop" />
diff --git a/web/src/router.js b/web/src/router.js
index 58d33c8..491e05a 100644
--- a/web/src/router.js
+++ b/web/src/router.js
@@ -14,7 +14,7 @@ export default new Router({
       name: 'home',
       component: Home
     },
-    { path: '/login', component: Login },
+    { path: '/login', component: Login, name: 'login' },
     { path: '/logout', component: Logout },
     {
       path: '/content',
diff --git a/web/src/util.js b/web/src/util.js
index 5b814d4..a012713 100644
--- a/web/src/util.js
+++ b/web/src/util.js
@@ -13,4 +13,4 @@ export function parseJwt (token) {
     }).join(''))
   
     return JSON.parse(jsonPayload)
-  }
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/web/src/views/Home.vue b/web/src/views/Home.vue
index 7c6fec9..c34aa3e 100644
--- a/web/src/views/Home.vue
+++ b/web/src/views/Home.vue
@@ -1,15 +1,98 @@
 <template>
-  <DiaryEditor :date="date"></DiaryEditor>
+  <div class="content">
+    <div class="nav">
+      {{ time }}
+      <div class="date-nav">
+        <div @click="navigateDate(-1)" class="icon-container">
+          <Icon icon="grommet-icons:form-previous" width="1.2rem" />
+        </div>
+        <div>
+          {{ displayDate }}
+        </div>
+        <div v-if="date < today" @click="navigateDate(1)" class="icon-container">
+          <Icon icon="grommet-icons:form-next" width="1.2rem" />
+        </div>
+        <div v-if="date != today" @click="navigateDateToToday" class="icon-container">
+          <Icon icon="fluent:arrow-next-16-regular" width="1.2rem" />
+        </div>
+      </div>
+      <a href="/todo">Todo</a>
+      <a href="content">
+        <Icon :icon="tableOfContents" />
+      </a>
+    </div>
+    <DiaryEditor :date="date"></DiaryEditor>
+  </div>
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue';
+import { ref, computed, onMounted } from 'vue';
+import moment from 'moment';
+import { Icon } from '@iconify/vue2';
+import tableOfContents from '@iconify/icons-mdi/table-of-contents';
 import DiaryEditor from "@/components/DiaryEditor";
-import { get_date_of_today } from "../util.js";
 
-const date = ref(get_date_of_today());
+
+const now = ref(moment());
+const date = ref(moment().format('YYYYMMDD'))
 
 onMounted(() => {
-  date.value = get_date_of_today();
+  // eslint-disable-next-line no-unused-vars
+  date.value = now.value.format("YYYYMMDD")
+  const interval = setInterval(() => now.value = moment(), 1000);
+});
+
+const today = computed(() => {
+  return now.value.format('YYYYMMDD');
 });
+
+const time = computed(() => {
+  const timeFormat = 'h:mm:ss a';
+  return now.value.format(timeFormat);
+});
+
+const displayDate = computed(() => {
+  if (date.value == today.value) {
+    return 'Today'
+  } else {
+    return date.value
+  }
+})
+
+function navigateDate(offset) {
+  const newDate = moment(date.value).add(offset, 'days').format("YYYYMMDD");
+  if (newDate > today.value) {
+    alert("can not into future")
+  }
+  date.value = newDate
+}
+
+function navigateDateToToday() {
+  date.value = today.value
+}
+
 </script>
+
+<style scoped>
+.content {
+  max-width: 65rem;
+  margin: auto;
+}
+
+.nav {
+  margin: 1em 1em 1rem 1em;
+  display: flex;
+  justify-content: space-between;
+}
+
+.nav .date-nav {
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+}
+
+.icon-container {
+  display: flex;
+  align-items: center;
+}
+</style>
\ No newline at end of file