From a22218b8b2457ef6dc20eabf5ab24ecf6a58960b Mon Sep 17 00:00:00 2001
From: Julien Calixte <julienc@bam.tech>
Date: Sun, 12 Dec 2021 00:10:38 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20=20(history)=20add=20history=20list?=
 =?UTF-8?q?=20of=20last=20visited=20repos?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/WelcomeWorld.vue               |  5 ++-
 src/data/DataType.enum.ts                     |  3 +-
 src/data/models/History.ts                    |  9 +++++
 .../history/components/LastVisited.vue        | 37 +++++++++++++++++++
 .../history/hooks/useLastVisitedRepos.hook.ts | 20 ++++++++++
 5 files changed, 72 insertions(+), 2 deletions(-)
 create mode 100644 src/data/models/History.ts
 create mode 100644 src/modules/history/components/LastVisited.vue
 create mode 100644 src/modules/history/hooks/useLastVisitedRepos.hook.ts

diff --git a/src/components/WelcomeWorld.vue b/src/components/WelcomeWorld.vue
index 4f01c15..3b999ba 100644
--- a/src/components/WelcomeWorld.vue
+++ b/src/components/WelcomeWorld.vue
@@ -85,6 +85,8 @@
       </div>
     </form>
 
+    <last-visited />
+
     <footer>
       <p>
         Made with <img src="@/assets/icons/love.svg" alt="love" /> by
@@ -105,10 +107,11 @@ import { useForm } from '@/hooks/useForm.hook'
 import { useGitHubLogin } from '@/hooks/useGitHubLogin.hook'
 import { useFavoriteRepos } from '@/modules/repo/hooks/useFavoriteRepos.hook'
 import SignInGithub from '@/components/SignInGithub.vue'
+import LastVisited from '@/modules/history/components/LastVisited.vue'
 
 export default defineComponent({
   name: 'WelcomeWord',
-  components: { SignInGithub },
+  components: { SignInGithub, LastVisited },
   setup() {
     const { isLogged, username } = useGitHubLogin()
     const { savedFavoriteRepos } = useFavoriteRepos()
diff --git a/src/data/DataType.enum.ts b/src/data/DataType.enum.ts
index 4f4af0d..845864d 100644
--- a/src/data/DataType.enum.ts
+++ b/src/data/DataType.enum.ts
@@ -3,5 +3,6 @@ export enum DataType {
   FavoriteRepo = 'FavoriteRepo',
   Note = 'Note',
   BacklinkNote = 'BacklinkNote',
-  RepetitionCard = 'RepetitionCard'
+  RepetitionCard = 'RepetitionCard',
+  History = 'History'
 }
diff --git a/src/data/models/History.ts b/src/data/models/History.ts
new file mode 100644
index 0000000..9cdaf1e
--- /dev/null
+++ b/src/data/models/History.ts
@@ -0,0 +1,9 @@
+import { DataType } from '@/data/DataType.enum'
+import { Model } from '@/data/models/Model'
+
+export interface History extends Model<DataType.History> {
+  repos: ReadonlyArray<{
+    user: string
+    repo: string
+  }>
+}
diff --git a/src/modules/history/components/LastVisited.vue b/src/modules/history/components/LastVisited.vue
new file mode 100644
index 0000000..8768652
--- /dev/null
+++ b/src/modules/history/components/LastVisited.vue
@@ -0,0 +1,37 @@
+<template>
+  <ul v-if="lastVisitedRepos.length" class="last-visited">
+    <li
+      v-for="lastVisitedRepo in lastVisitedRepos"
+      :key="`${lastVisitedRepo.user}-${lastVisitedRepo.repo}`"
+    >
+      <router-link
+        :to="{
+          name: `Home`,
+          props: { user: lastVisitedRepo.user, repo: lastVisitedRepo.repo }
+        }"
+        >{{ lastVisitedRepo.user }}/{{ lastVisitedRepo.repo }}</router-link
+      >
+    </li>
+  </ul>
+</template>
+
+<script lang="ts">
+import { useLastVisitedRepos } from '@/modules/history/hooks/useLastVisitedRepos.hook'
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'LastVisited',
+  setup() {
+    const { lastVisitedRepos } = useLastVisitedRepos()
+
+    return {
+      lastVisitedRepos
+    }
+  }
+})
+</script>
+
+<style scoped lang="scss">
+.last-visited {
+}
+</style>
diff --git a/src/modules/history/hooks/useLastVisitedRepos.hook.ts b/src/modules/history/hooks/useLastVisitedRepos.hook.ts
new file mode 100644
index 0000000..9f328cf
--- /dev/null
+++ b/src/modules/history/hooks/useLastVisitedRepos.hook.ts
@@ -0,0 +1,20 @@
+import { data } from '@/data/data'
+import { DataType } from '@/data/DataType.enum'
+import { History } from '@/data/models/History'
+import { useAsyncState } from '@vueuse/core'
+import { computed } from 'vue'
+
+export const useLastVisitedRepos = () => {
+  const history = useAsyncState(
+    data.get<DataType.History, History>(
+      data.generateId(DataType.BacklinkNote, 'history')
+    ),
+    null
+  )
+
+  const lastVisitedRepos = computed(() => history.state.value?.repos ?? [])
+
+  return {
+    lastVisitedRepos
+  }
+}