♻️ (app)

src/modules/history/components/LastVisited.vue

@@ -10,7 +10,10 @@
           <router-link
             :to="{
               name: `FluxNoteView`,
-              params: { user: lastVisitedRepo.user, repo: lastVisitedRepo.repo }
+              params: {
+                user: lastVisitedRepo.user,
+                repo: lastVisitedRepo.repo
+              }
             }"
             >{{ lastVisitedRepo.user }}/{{ lastVisitedRepo.repo }}</router-link
           >

src/modules/history/hooks/useVisitRepo.hook.ts

@@ -1,18 +1,22 @@
 import { data } from '@/data/data'
 import { DataType } from '@/data/DataType.enum'
 import { History } from '@/data/models/History'
+import { Ref, toValue } from 'vue'
 
 const HISTORY_ID = data.generateId(DataType.History, 'history')
 const MAX_REPO_HISTORY = 10
 
-export const useVisitRepo = (newRepo: { user: string; repo: string }) => {
+export const useVisitRepo = (newRepo: {
+  user: Ref<string> | string
+  repo: Ref<string> | string
+}) => {
   const visitRepo = async () => {
     const history = await data.get<DataType.History, History>(HISTORY_ID)
     if (!history) {
       const newHistory: History = {
         _id: HISTORY_ID,
         $type: DataType.History,
-        repos: [newRepo]
+        repos: [{ user: toValue(newRepo.user), repo: toValue(newRepo.repo) }]
       }
       await data.add<DataType.History>(newHistory)
       return
@@ -22,10 +26,10 @@ export const useVisitRepo = (newRepo: { user: string; repo: string }) => {
       (repo) => repo.user !== newRepo.user && repo.repo !== newRepo.repo
     )
 
-    const historyRepos = [newRepo, ...clearedRepos].slice(
-      0,
-      MAX_REPO_HISTORY - 1
-    )
+    const historyRepos = [
+      { user: toValue(newRepo.user), repo: toValue(newRepo.repo) },
+      ...clearedRepos
+    ].slice(0, MAX_REPO_HISTORY - 1)
 
     const newHistory: History = {
       ...history,