From 49d2571f5f0180b48713bf935eb7261034811cb8 Mon Sep 17 00:00:00 2001
From: Julien Calixte <julienc@bam.tech>
Date: Sun, 27 Aug 2023 17:50:42 +0200
Subject: [PATCH] create today fleeting note

---
 src/components/StackedNote.vue                | 21 ++----
 src/hooks/useEditionMode.ts                   | 22 ++++++
 ...pdate.hook.ts => useGitHubContent.hook.ts} | 13 ++--
 src/hooks/useRouteQueryStackedNotes.hook.ts   |  4 --
 src/views/FleetingNotes.vue                   | 72 ++++++++++++++++++-
 5 files changed, 105 insertions(+), 27 deletions(-)
 create mode 100644 src/hooks/useEditionMode.ts
 rename src/hooks/{useGitHubUpdate.hook.ts => useGitHubContent.hook.ts} (76%)

diff --git a/src/components/StackedNote.vue b/src/components/StackedNote.vue
index cbc1683..18d6323 100644
--- a/src/components/StackedNote.vue
+++ b/src/components/StackedNote.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import { useMagicKeys } from '@vueuse/core'
 import {
   computed,
   defineAsyncComponent,
@@ -9,8 +8,9 @@ import {
   watch
 } from 'vue'
 
+import { useEditionMode } from '@/hooks/useEditionMode'
 import { useFile } from '@/hooks/useFile.hook'
-import { useGitHubUpdate } from '@/hooks/useGitHubUpdate.hook'
+import { useGitHubContent } from '@/hooks/useGitHubContent.hook'
 import { useImages } from '@/hooks/useImages.hook'
 import { useLinks } from '@/hooks/useLinks.hook'
 import { useNoteOverlay } from '@/hooks/useNoteOverlay.hook'
@@ -58,20 +58,17 @@ const hasBacklinks = computed(() => store.userSettings?.backlink)
 const { displayNoteOverlay } = useNoteOverlay(className.value, index)
 const displayedTitle = computed(() => filenameToNoteTitle(props.title))
 
-const { updateFile } = useGitHubUpdate({
+const { updateFile } = useGitHubContent({
   user: user.value,
   repo: repo.value
 })
 
-const mode = ref<'read' | 'edit'>('read')
-const toggleMode = () => {
-  mode.value = mode.value === 'read' ? 'edit' : 'read'
-}
-
 onMounted(async () => {
   initialRawContent.value = await getRawContent()
 })
 
+const { mode, toggleMode } = useEditionMode()
+
 watch([content, mode], () => {
   if (!content.value) {
     return
@@ -101,14 +98,6 @@ watch(mode, async (newMode) => {
     initialRawContent.value = rawContent.value
   }
 })
-
-const { escape } = useMagicKeys()
-
-watch(escape, () => {
-  if (mode.value === 'edit') {
-    toggleMode()
-  }
-})
 </script>
 
 <template>
diff --git a/src/hooks/useEditionMode.ts b/src/hooks/useEditionMode.ts
new file mode 100644
index 0000000..b120ec2
--- /dev/null
+++ b/src/hooks/useEditionMode.ts
@@ -0,0 +1,22 @@
+import { useMagicKeys } from '@vueuse/core'
+import { ref, watch } from 'vue'
+
+export const useEditionMode = () => {
+  const mode = ref<'read' | 'edit'>('read')
+  const toggleMode = () => {
+    mode.value = mode.value === 'read' ? 'edit' : 'read'
+  }
+
+  const { escape } = useMagicKeys()
+
+  watch(escape, () => {
+    if (mode.value === 'edit') {
+      toggleMode()
+    }
+  })
+
+  return {
+    mode,
+    toggleMode
+  }
+}
diff --git a/src/hooks/useGitHubUpdate.hook.ts b/src/hooks/useGitHubContent.hook.ts
similarity index 76%
rename from src/hooks/useGitHubUpdate.hook.ts
rename to src/hooks/useGitHubContent.hook.ts
index 08ed73a..f0fbfdc 100644
--- a/src/hooks/useGitHubUpdate.hook.ts
+++ b/src/hooks/useGitHubContent.hook.ts
@@ -2,21 +2,21 @@ import { getOctokit } from '@/modules/repo/services/octo'
 import { encodeUTF8ToBase64 } from '@/utils/decodeBase64ToUTF8'
 import { confirmMessage, errorMessage } from '@/utils/notif'
 
-export const useGitHubUpdate = ({
+export const useGitHubContent = ({
   user,
   repo
 }: {
   user: string
   repo: string
 }) => {
-  const updateFile = async ({
+  const putFile = async ({
     content,
     path,
     sha
   }: {
     content: string
     path: string
-    sha: string
+    sha?: string
   }) => {
     try {
       const octokit = await getOctokit()
@@ -35,8 +35,6 @@ export const useGitHubUpdate = ({
 
       confirmMessage('file saved on GitHub')
 
-      console.log(response)
-
       return response?.data.content?.sha ?? null
     } catch (error) {
       errorMessage('File could not be saved')
@@ -46,6 +44,9 @@ export const useGitHubUpdate = ({
   }
 
   return {
-    updateFile
+    updateFile: async (props: { content: string; path: string; sha: string }) =>
+      putFile(props),
+    createFile: async (props: { content: string; path: string }) =>
+      putFile(props)
   }
 }
diff --git a/src/hooks/useRouteQueryStackedNotes.hook.ts b/src/hooks/useRouteQueryStackedNotes.hook.ts
index fdfae3b..805150f 100644
--- a/src/hooks/useRouteQueryStackedNotes.hook.ts
+++ b/src/hooks/useRouteQueryStackedNotes.hook.ts
@@ -41,10 +41,6 @@ export const useRouteQueryStackedNotes = () => {
   }
 
   const addStackedNote = (currentSHA: string, sha: string) => {
-    if (!stackedNotes.value) {
-      return
-    }
-
     if (stackedNotes.value.includes(sha)) {
       scrollToFocusedNote(sha)
       return
diff --git a/src/views/FleetingNotes.vue b/src/views/FleetingNotes.vue
index 96da35e..28ac28f 100644
--- a/src/views/FleetingNotes.vue
+++ b/src/views/FleetingNotes.vue
@@ -1,11 +1,59 @@
 <script lang="ts" setup>
+import { computed, ref, watch } from 'vue'
+
 import FluxNote from '@/components/FluxNote.vue'
+import { useEditionMode } from '@/hooks/useEditionMode'
+import { useGitHubContent } from '@/hooks/useGitHubContent.hook'
+import { useRouteQueryStackedNotes } from '@/hooks/useRouteQueryStackedNotes.hook'
+import { prepareNoteCache } from '@/modules/note/cache/prepareNoteCache'
+import EditNote from '@/modules/note/components/EditNote.vue'
 import { useFolderNotes } from '@/modules/note/hooks/useFolderNotes'
+import { encodeUTF8ToBase64 } from '@/utils/decodeBase64ToUTF8'
 
 const FLEETING_NOTES_FOLDER = ['inbox', '_inbox']
 
-defineProps<{ user: string; repo: string }>()
+const props = defineProps<{ user: string; repo: string }>()
+const user = computed(() => props.user)
+const repo = computed(() => props.repo)
+
+const { addStackedNote } = useRouteQueryStackedNotes()
 const { content } = useFolderNotes(FLEETING_NOTES_FOLDER)
+
+const today = new Date().toISOString().split('T')[0]
+const newContentPath = `_inbox/${today}.md`
+const initialContent = ``
+const newContent = ref(initialContent)
+const { mode, toggleMode } = useEditionMode()
+
+const { createFile } = useGitHubContent({
+  repo: repo.value,
+  user: user.value
+})
+
+const hasTodayNote = computed(() => content.value.includes(today))
+
+watch(mode, async (newMode) => {
+  if (newMode === 'read' && newContent.value.trim() !== initialContent) {
+    const content = `# ${new Date().toLocaleDateString()}\n\n${
+      newContent.value
+    }`
+
+    const newSha = await createFile({
+      content,
+      path: newContentPath
+    })
+
+    if (!newSha) {
+      return
+    }
+
+    newContent.value = initialContent
+    const { saveCacheNote } = prepareNoteCache(newSha)
+    await saveCacheNote(encodeUTF8ToBase64(content))
+
+    addStackedNote('', newSha)
+  }
+})
 </script>
 
 <template>
@@ -17,6 +65,23 @@ const { content } = useFolderNotes(FLEETING_NOTES_FOLDER)
       :content="content"
     >
       <h3 class="subtitle is-3">Inbox</h3>
+      <div v-if="!hasTodayNote" class="columns is-centered">
+        <div class="column is-half is-centered">
+          <button class="button is-primary is-light" @click="toggleMode">
+            new fleeting note
+          </button>
+        </div>
+      </div>
+      <div v-if="mode === 'edit'">
+        <edit-note v-model="newContent" />
+        <div class="columns is-centered">
+          <div class="column is-half is-centered">
+            <button class="button is-light" @click="toggleMode">
+              <img src="@/assets/icons/saved.svg" alt="save" />
+            </button>
+          </div>
+        </div>
+      </div>
     </flux-note>
   </div>
 </template>
@@ -29,5 +94,10 @@ const { content } = useFolderNotes(FLEETING_NOTES_FOLDER)
   .subtitle {
     text-align: center;
   }
+
+  .column {
+    display: flex;
+    justify-content: center;
+  }
 }
 </style>