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

---
 .../history/components/LastVisited.vue        | 48 +++++++++++++------
 .../history/hooks/useLastVisitedRepos.hook.ts | 30 ++++++++++--
 2 files changed, 59 insertions(+), 19 deletions(-)

diff --git a/src/modules/history/components/LastVisited.vue b/src/modules/history/components/LastVisited.vue
index 79c7c65..4486b9a 100644
--- a/src/modules/history/components/LastVisited.vue
+++ b/src/modules/history/components/LastVisited.vue
@@ -1,18 +1,29 @@
 <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`,
-          params: { user: lastVisitedRepo.user, repo: lastVisitedRepo.repo }
-        }"
-        >{{ lastVisitedRepo.user }}/{{ lastVisitedRepo.repo }}</router-link
+  <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}`"
       >
-    </li>
-  </ul>
+        <div>
+          <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>
diff --git a/src/modules/history/hooks/useLastVisitedRepos.hook.ts b/src/modules/history/hooks/useLastVisitedRepos.hook.ts
index 95627f4..a684a93 100644
--- a/src/modules/history/hooks/useLastVisitedRepos.hook.ts
+++ b/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
   }
 }