✨ (history) add history list of last visited repos

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()

src/data/DataType.enum.ts

@@ -3,5 +3,6 @@ export enum DataType {
   FavoriteRepo = 'FavoriteRepo',
   Note = 'Note',
   BacklinkNote = 'BacklinkNote',
-  RepetitionCard = 'RepetitionCard'
+  RepetitionCard = 'RepetitionCard',
+  History = 'History'
 }

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
+  }>
+}

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>

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
+  }
+}