Exclude recent games already in list

src/components/GameCards/GameCardRecent.vue

@@ -0,0 +1,98 @@
+<template lang="html">
+  <b-card
+    no-body
+    class="game-card"
+    :bg-variant="nightMode ? 'dark' : ''"
+    :text-variant="nightMode ? 'white' : ''"
+    @click="addGame"
+  >
+    <b-row no-gutters v-if="game && game.name">
+      <b-col cols="2">
+        <b-card-img
+          :src="coverUrl"
+          :alt="game.name"
+        />
+      </b-col>
+
+      <b-col cols="10">
+        <b-card-body body-class="p-2">
+          <b-card-title class="mb-2" title-tag="h6">
+            {{ game.name }}
+          </b-card-title>
+
+          <!-- TODO: add release date -->
+
+          <b-form-rating
+            v-if="gameRating"
+            :class="['p-0', { 'bg-dark': nightMode }]"
+            inline
+            :value="gameRating"
+            readonly
+            variant="warning"
+            size="sm"
+            no-border
+          />
+        </b-card-body>
+      </b-col>
+    </b-row>
+  </b-card>
+</template>
+
+<script>
+import GameCardUtils from '@/components/GameCards/GameCard';
+
+export default {
+  mixins: [GameCardUtils],
+
+  methods: {
+    async addGame() {
+      const { list, game, board } = this;
+
+      const listIndex = board.lists.findIndex(({ name }) => name === list.name);
+
+      this.$store.commit('ADD_GAME_TO_LIST', { listIndex, game });
+      await this.$store.dispatch('SAVE_BOARD')
+        .catch(() => {
+          this.$bvToast.toast(`There was an error adding ${this.game.name}`, { title: list.name, variant: 'danger' });
+        });
+
+      this.showGameToast();
+    },
+
+    showGameToast() {
+      const h = this.$createElement;
+
+      const vNodesMsg = h(
+        'div', { class: 'image-toast' }, [
+          h('b-img', {
+            props: {
+              src: this.coverUrl,
+              alt: this.game.name,
+              width: 80,
+            },
+          }),
+          h('small', `${this.game.name} added`),
+        ],
+      );
+
+      this.$bvToast.toast([vNodesMsg], {
+        title: this.list.name,
+        solid: true,
+        variant: 'info',
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" rel="stylesheet/scss" scoped>
+.image-toast {
+  display: grid;
+  grid-gap: .5rem;
+}
+
+.game-card {
+  cursor: pointer;
+}
+</style>
+

src/components/Lists/RecentGames.vue

@@ -41,9 +41,11 @@
       </b-alert>
     </b-modal>
 
-    <game-card-search
+    <game-card-recent
       v-for="{ id } in recentGames"
       :key="id"
+      v-if="!list.games.includes(id)"
+      class="mb-2"
       :game-id="id"
       :list="list"
     />
@@ -51,13 +53,14 @@
 </template>
 
 <script>
-import GameCardSearch from '@/components/GameCards/GameCardSearch';
+// TODO: use array filter OR filter results using endpoint
+import GameCardRecent from '@/components/GameCards/GameCardRecent';
 import PlatformToggleField from '@/components/PlatformToggleField';
 import { mapState, mapGetters } from 'vuex';
 
 export default {
   components: {
-    GameCardSearch,
+    GameCardRecent,
     PlatformToggleField,
   },
 
@@ -76,26 +79,8 @@ export default {
   },
 
   computed: {
-    ...mapState(['results', 'board']),
+    ...mapState(['board']),
     ...mapGetters(['nightMode']),
-
-    noResults() {
-      return !this.loading
-        && this.filteredResults.length === 0
-        && this.searchText.trim().length > 0;
-    },
-
-    filteredResults() {
-      return this.results
-        ? this.results.filter(({ id }) => !this.list.games.includes(id))
-        : [];
-    },
-
-    gamesInList() {
-      return this.results
-        ? this.results.filter(({ id }) => this.list.games.includes(id))
-        : [];
-    },
   },
 
   mounted() {