Remove game cover url getter in favor of util version

src/components/AddRemoveGame.vue

@@ -84,6 +84,7 @@
 
 <script>
 import { mapState } from 'vuex';
+import { getGameCoverUrl } from '@/utils';
 
 export default {
   data() {
@@ -118,9 +119,7 @@ export default {
     },
 
     coverUrl() {
-      return this.game?.cover?.image_id
-        ? `https://images.igdb.com/igdb/image/upload/t_cover_big_2x/${this.game.cover.image_id}.jpg`
-        : '/no-image.jpg';
+      return getGameCoverUrl(this.game);
     },
   },
 

src/components/Game/GameDropdown.vue

@@ -60,12 +60,16 @@
 </template>
 
 <script>
-import { mapState, mapGetters } from 'vuex';
+import { getGameCoverUrl } from '@/utils';
+import { mapState } from 'vuex';
 
 export default {
   computed: {
     ...mapState(['game']),
-    ...mapGetters(['gameCoverUrl']),
+
+    gameCoverUrl() {
+      return getGameCoverUrl(this.game);
+    }
   },
 };
 </script>

src/components/Game/GameNotes.vue

@@ -1,6 +1,5 @@
 <template lang="html">
   <div>
-    <!-- TODO: get game cover, make getter for game cover url -->
     <game-note
       v-if="note"
       :note="note"
@@ -22,10 +21,6 @@ export default {
   computed: {
     ...mapState(['notes', 'game']),
 
-    isGamePage() {
-      return this.$route.name === 'game';
-    },
-
     note() {
       return this.notes[this.game.id] || null;
     },

src/pages/GameNotesPage.vue

@@ -52,10 +52,11 @@
 </template>
 
 <script>
-import { mapState, mapGetters } from 'vuex';
+import { mapState } from 'vuex';
 
 import GameNote from '@/components/GameNote';
 import MarkdownCheatsheet from '@/components/MarkdownCheatsheet';
+import { getGameCoverUrl } from '@/utils';
 
 export default {
   components: {
@@ -67,12 +68,16 @@ export default {
     return {
       saving: false,
       note: '',
+      deleting: false,
     };
   },
 
   computed: {
     ...mapState(['notes', 'game']),
-    ...mapGetters(['gameCoverUrl']),
+
+    gameCoverUrl() {
+      return getGameCoverUrl(this.game);
+    },
 
     dirtied() {
       return this.note !== this.notes[this.game.id];

src/pages/GameProgressPage.vue

@@ -1,5 +1,6 @@
 <template lang="html">
   <div>
+    <b-img :src="gameCoverUrl" width="200" rounded class="mb-2 mr-2" />
     {{ title }}
 
     <b-progress
@@ -52,7 +53,8 @@
 </template>
 
 <script>
-import { mapState, mapGetters } from 'vuex';
+import { mapState } from 'vuex';
+import { getGameCoverUrl } from '@/utils';
 
 export default {
   data() {
@@ -67,7 +69,10 @@ export default {
 
   computed: {
     ...mapState(['progresses', 'game']),
-    ...mapGetters(['gameCoverUrl']),
+
+    gameCoverUrl() {
+      return getGameCoverUrl(this.game);
+    },
 
     title() {
       return this.localProgress

src/pages/GameTagsPage.vue

@@ -1,6 +1,8 @@
 <!-- TODO: finish layout -->
 <template lang="html">
   <b-container class="p-2">
+    <b-img :src="gameCoverUrl" width="200" rounded class="mb-2 mr-2" />
+
     <empty-state
       v-if="empty"
       class="mb-4"
@@ -49,7 +51,8 @@
 </template>
 
 <script>
-import { mapState, mapGetters } from 'vuex';
+import { mapState } from 'vuex';
+import { getGameCoverUrl } from '@/utils';
 import EmptyState from '@/components/EmptyState';
 
 export default {
@@ -64,7 +67,10 @@ export default {
 
   computed: {
     ...mapState(['tags', 'game']),
-    ...mapGetters(['gameCoverUrl']),
+
+    gameCoverUrl() {
+      return getGameCoverUrl(this.game);
+    },
 
     empty() {
       return Object.keys(this.tags).length === 0;

src/store/getters.js

@@ -5,12 +5,6 @@ import orderby from 'lodash.orderby';
 export default {
   sortedBoards: ({ boards }) => orderby(boards, 'name'),
 
-  gameCoverUrl: ({ game }) => {
-    return game?.cover?.image_id
-      ? `https://images.igdb.com/igdb/image/upload/t_cover_big_2x/${game.cover.image_id}.jpg`
-      : '/no-image.jpg';
-  },
-
   isBoardOwner: ({ board, user }) => {
     return board?.owner === user?.uid;
   },

src/utils.js

@@ -7,3 +7,9 @@ export const bytesToSize = (bytes) => {
 
   return `${Math.round(bytes / (1024 ** i), 2)} ${sizes[i]}`;
 };
+
+export const getGameCoverUrl = (game) => {
+  return game?.cover?.image_id
+    ? `https://images.igdb.com/igdb/image/upload/t_cover_big_2x/${game.cover.image_id}.jpg`
+    : '/no-image.jpg';
+};