From e96253959dcedeecc65d28acca9069c77ea3979b Mon Sep 17 00:00:00 2001
From: Julien Calixte <julienc@bam.tech>
Date: Sun, 21 Mar 2021 11:00:56 +0100
Subject: [PATCH] :sparkles: (draft) add draft folder page in note header

Closes #1
---
 src/components/HeaderNote.vue                 | 19 ++++++-
 ...{useFleetingNotes.ts => useFolderNotes.ts} | 10 ++--
 src/router/router.ts                          |  7 +++
 src/views/DraftNotes.vue                      | 52 +++++++++++++++++++
 src/views/FleetingNotes.vue                   | 10 +++-
 5 files changed, 91 insertions(+), 7 deletions(-)
 rename src/modules/note/hooks/{useFleetingNotes.ts => useFolderNotes.ts} (63%)
 create mode 100644 src/views/DraftNotes.vue

diff --git a/src/components/HeaderNote.vue b/src/components/HeaderNote.vue
index 50f5036..e1cbd7f 100644
--- a/src/components/HeaderNote.vue
+++ b/src/components/HeaderNote.vue
@@ -3,7 +3,16 @@
     <router-link :to="{ name: 'Home' }">
       <img src="@/assets/icons/dark-left-arrow.svg" alt="go back left arrow" />
     </router-link>
-    <router-link :to="{ name: 'FleetingNotes', params: { user, repo } }">
+    <router-link
+      class="special-folder"
+      :to="{ name: 'DraftNotes', params: { user, repo } }"
+    >
+      Draft
+    </router-link>
+    <router-link
+      class="special-folder"
+      :to="{ name: 'FleetingNotes', params: { user, repo } }"
+    >
       Fleeting notes
     </router-link>
   </header>
@@ -27,6 +36,14 @@ export default defineComponent({
   align-items: center;
   justify-content: space-between;
 
+  a {
+    flex: 1;
+  }
+
+  .special-folder {
+    text-align: center;
+  }
+
   img:hover {
     cursor: pointer;
   }
diff --git a/src/modules/note/hooks/useFleetingNotes.ts b/src/modules/note/hooks/useFolderNotes.ts
similarity index 63%
rename from src/modules/note/hooks/useFleetingNotes.ts
rename to src/modules/note/hooks/useFolderNotes.ts
index b839fae..b8bb755 100644
--- a/src/modules/note/hooks/useFleetingNotes.ts
+++ b/src/modules/note/hooks/useFolderNotes.ts
@@ -1,13 +1,15 @@
 import { useRepo } from '@/hooks/useRepo.hook'
 import { computed, Ref } from 'vue'
 
-const FLEETING_NOTES_FOLDER = 'fleeting-notes'
-
-export const useFleetingNotes = (owner: Ref<string>, repo: Ref<string>) => {
+export const useFolderNotes = (
+  folder: string,
+  owner: Ref<string>,
+  repo: Ref<string>
+) => {
   const { tree } = useRepo(owner, repo)
 
   const fleetingNotes = computed(() =>
-    tree.value.filter((file) => file.path?.startsWith(FLEETING_NOTES_FOLDER))
+    tree.value.filter((file) => file.path?.startsWith(folder))
   )
 
   const content = computed(() =>
diff --git a/src/router/router.ts b/src/router/router.ts
index c3bb958..8ed7122 100644
--- a/src/router/router.ts
+++ b/src/router/router.ts
@@ -35,6 +35,13 @@ const routes: Array<RouteRecordRaw> = [
         /* webpackChunkName: "fleeting-notes" */ '@/views/FleetingNotes.vue'
       )
   },
+  {
+    path: '/:user/:repo/draft',
+    name: 'DraftNotes',
+    props: true,
+    component: () =>
+      import(/* webpackChunkName: "draft-notes" */ '@/views/DraftNotes.vue')
+  },
   {
     path: '/about',
     name: 'About',
diff --git a/src/views/DraftNotes.vue b/src/views/DraftNotes.vue
new file mode 100644
index 0000000..6d3527e
--- /dev/null
+++ b/src/views/DraftNotes.vue
@@ -0,0 +1,52 @@
+<template>
+  <div class="draft-notes">
+    <flux-note :user="user" :repo="repo" :content="content">
+      <h3 class="subtitle is-3">
+        Drafts
+      </h3>
+    </flux-note>
+  </div>
+</template>
+
+<script lang="ts">
+import { useFolderNotes } from '@/modules/note/hooks/useFolderNotes'
+import { defineAsyncComponent, defineComponent, toRefs } from 'vue'
+
+const FluxNote = defineAsyncComponent(() => import('@/components/FluxNote.vue'))
+
+const DRAFT_FOLDER = 'drafts'
+
+export default defineComponent({
+  name: 'DraftNotes',
+  components: {
+    FluxNote
+  },
+  props: {
+    user: { type: String, required: true },
+    repo: { type: String, required: true }
+  },
+  setup(props) {
+    const refProps = toRefs(props)
+    const { content } = useFolderNotes(
+      DRAFT_FOLDER,
+      refProps.user,
+      refProps.repo
+    )
+
+    return {
+      content
+    }
+  }
+})
+</script>
+
+<style scoped lang="scss">
+.draft-notes {
+  display: flex;
+  flex: 1;
+
+  .subtitle {
+    text-align: center;
+  }
+}
+</style>
diff --git a/src/views/FleetingNotes.vue b/src/views/FleetingNotes.vue
index 0c825f2..13292f6 100644
--- a/src/views/FleetingNotes.vue
+++ b/src/views/FleetingNotes.vue
@@ -9,11 +9,13 @@
 </template>
 
 <script lang="ts">
-import { useFleetingNotes } from '@/modules/note/hooks/useFleetingNotes'
+import { useFolderNotes } from '@/modules/note/hooks/useFolderNotes'
 import { defineAsyncComponent, defineComponent, toRefs } from 'vue'
 
 const FluxNote = defineAsyncComponent(() => import('@/components/FluxNote.vue'))
 
+const FLEETING_NOTES_FOLDER = 'fleeting-notes'
+
 export default defineComponent({
   name: 'FleetingNotes',
   components: {
@@ -25,7 +27,11 @@ export default defineComponent({
   },
   setup(props) {
     const refProps = toRefs(props)
-    const { content } = useFleetingNotes(refProps.user, refProps.repo)
+    const { content } = useFolderNotes(
+      FLEETING_NOTES_FOLDER,
+      refProps.user,
+      refProps.repo
+    )
 
     return {
       content