✨ (history) remove repo from history

src/modules/history/components/LastVisited.vue

@@ -1,18 +1,29 @@
 <template>
-  <ul v-if="lastVisitedRepos.length" class="last-visited">
+  <section v-if="lastVisitedRepos.length" class="last-visited">
-    <li
+    <h4>Last visited repos</h4>
-      v-for="lastVisitedRepo in lastVisitedRepos"
+    <ul>
-      :key="`${lastVisitedRepo.user}-${lastVisitedRepo.repo}`"
+      <li
-    >
+        v-for="lastVisitedRepo in lastVisitedRepos"
-      <router-link
+        :key="`${lastVisitedRepo.user}-${lastVisitedRepo.repo}`"
-        :to="{
-          name: `Home`,
-          params: { user: lastVisitedRepo.user, repo: lastVisitedRepo.repo }
-        }"
-        >{{ lastVisitedRepo.user }}/{{ lastVisitedRepo.repo }}</router-link
       >
-    </li>
+        <div>
-  </ul>
+          <router-link
+            :to="{
+              name: `Home`,
+              params: { user: lastVisitedRepo.user, repo: lastVisitedRepo.repo }
+            }"
+            >{{ 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,17 +4,39 @@ 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')
+      data.get<DataType.History, History>(
-    ),
+        data.generateId(DataType.History, 'history')
+      ),
     null
   )
 
   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
   }
 }