From 9792e2e56bcaf02dff108311a36352b7c28c6cba Mon Sep 17 00:00:00 2001
From: Julien Calixte <julienc@bam.tech>
Date: Sun, 8 Aug 2021 00:19:49 +0200
Subject: [PATCH] :sparkles: (historic notes) add history note page

---
 src/components/HeaderNote.vue      |  6 ++++
 src/modules/note/hooks/useNotes.ts | 16 ++++++++++
 src/router/router.ts               |  9 ++++++
 src/views/HistoricNotes.vue        | 47 ++++++++++++++++++++++++++++++
 4 files changed, 78 insertions(+)
 create mode 100644 src/modules/note/hooks/useNotes.ts
 create mode 100644 src/views/HistoricNotes.vue

diff --git a/src/components/HeaderNote.vue b/src/components/HeaderNote.vue
index f247e36..853cc3e 100644
--- a/src/components/HeaderNote.vue
+++ b/src/components/HeaderNote.vue
@@ -6,6 +6,12 @@
     >
       <img src="@/assets/icons/dark-left-arrow.svg" alt="go back left arrow" />
     </router-link>
+    <router-link
+      class="special-folder"
+      :to="{ name: 'HistoricNotes', params: { user, repo } }"
+    >
+      history
+    </router-link>
     <router-link
       class="special-folder"
       :to="{ name: 'SpacedRepetitionCard', params: { user, repo } }"
diff --git a/src/modules/note/hooks/useNotes.ts b/src/modules/note/hooks/useNotes.ts
new file mode 100644
index 0000000..5e67c5b
--- /dev/null
+++ b/src/modules/note/hooks/useNotes.ts
@@ -0,0 +1,16 @@
+import { useUserRepoStore } from '@/modules/repo/store/userRepo.store'
+import { computed } from 'vue'
+
+export const useNotes = () => {
+  const store = useUserRepoStore()
+
+  const notes = computed(() => {
+    console.log(store.files)
+
+    return store.files
+  })
+
+  return {
+    notes
+  }
+}
diff --git a/src/router/router.ts b/src/router/router.ts
index 1a14f23..8b2744e 100644
--- a/src/router/router.ts
+++ b/src/router/router.ts
@@ -41,6 +41,15 @@ const routes: Array<RouteRecordRaw> = [
     component: () =>
       import(/* webpackChunkName: "draft-notes" */ '@/views/DraftNotes.vue')
   },
+  {
+    path: '/:user/:repo/history',
+    name: 'HistoricNotes',
+    props: true,
+    component: () =>
+      import(
+        /* webpackChunkName: "historic-notes" */ '@/views/HistoricNotes.vue'
+      )
+  },
   {
     path: '/:user/:repo/spaced-repetition',
     name: 'SpacedRepetitionCard',
diff --git a/src/views/HistoricNotes.vue b/src/views/HistoricNotes.vue
new file mode 100644
index 0000000..dfc4d70
--- /dev/null
+++ b/src/views/HistoricNotes.vue
@@ -0,0 +1,47 @@
+<template>
+  <div class="historic-notes">
+    <flux-note
+      key="historic-notes"
+      :user="user"
+      :repo="repo"
+      :with-content="false"
+    >
+      <h3 class="subtitle is-3">History</h3>
+      {{ notes }}
+    </flux-note>
+  </div>
+</template>
+
+<script lang="ts">
+import { useNotes } from '@/modules/note/hooks/useNotes'
+import { defineAsyncComponent, defineComponent } from 'vue'
+
+const FluxNote = defineAsyncComponent(() => import('@/components/FluxNote.vue'))
+
+export default defineComponent({
+  name: 'HistoricNotes',
+  components: {
+    FluxNote
+  },
+  props: {
+    user: { type: String, required: true },
+    repo: { type: String, required: true }
+  },
+  setup() {
+    const notes = useNotes()
+
+    return { notes }
+  }
+})
+</script>
+
+<style scoped lang="scss">
+.historic-notes {
+  display: flex;
+  flex: 1;
+
+  .subtitle {
+    text-align: center;
+  }
+}
+</style>