✨ (history) remove repo from history

src/modules/history/components/LastVisited.vue

@@ -1,9 +1,12 @@
 <template>
-  <ul v-if="lastVisitedRepos.length" class="last-visited">
+  <section v-if="lastVisitedRepos.length" class="last-visited">
+    <h4>Last visited repos</h4>
+    <ul>
       <li
         v-for="lastVisitedRepo in lastVisitedRepos"
         :key="`${lastVisitedRepo.user}-${lastVisitedRepo.repo}`"
       >
+        <div>
           <router-link
             :to="{
               name: `Home`,
@@ -11,8 +14,16 @@
             }"
             >{{ lastVisitedRepo.user }}/{{ lastVisitedRepo.repo }}</router-link
           >
+          <button
+            class="button is-link is-inverted is-small"
+            @click="removeRepo(lastVisitedRepo)"
+          >
+            ❌
+          </button>
+        </div>
       </li>
     </ul>
+  </section>
 </template>
 
 <script lang="ts">
@@ -22,10 +33,11 @@ import { defineComponent } from 'vue'
 export default defineComponent({
   name: 'LastVisited',
   setup() {
-    const { lastVisitedRepos } = useLastVisitedRepos()
+    const { lastVisitedRepos, removeRepo } = useLastVisitedRepos()
 
     return {
-      lastVisitedRepos
+      lastVisitedRepos,
+      removeRepo
     }
   }
 })
@@ -33,5 +45,11 @@ export default defineComponent({
 
 <style scoped lang="scss">
 .last-visited {
+  li {
+    div {
+      display: flex;
+      align-items: center;
+    }
+  }
 }
 </style>

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

@@ -4,8 +4,11 @@ import { History } from '@/data/models/History'
 import { useAsyncState } from '@vueuse/core'
 import { computed } from 'vue'
 
+const HISTORY_ID = data.generateId(DataType.History, 'history')
+
 export const useLastVisitedRepos = () => {
   const history = useAsyncState(
+    () =>
       data.get<DataType.History, History>(
         data.generateId(DataType.History, 'history')
       ),
@@ -14,7 +17,26 @@ export const useLastVisitedRepos = () => {
 
   const lastVisitedRepos = computed(() => history.state.value?.repos ?? [])
 
+  const removeRepo = async (params: { user: string; repo: string }) => {
+    const storedHistory = await data.get<DataType.History, History>(HISTORY_ID)
+    if (!storedHistory) {
+      return
+    }
+
+    const clearedRepo = storedHistory.repos.filter(
+      (repo) => repo.user !== params.user && repo.repo !== params.repo
+    )
+
+    const newHistory: History = {
+      ...storedHistory,
+      repos: clearedRepo
+    }
+    await data.update(newHistory)
+    history.execute()
+  }
+
   return {
-    lastVisitedRepos
+    lastVisitedRepos,
+    removeRepo
   }
 }