From d619ac97968dab4da570b8dbba4b1cffebba6fea Mon Sep 17 00:00:00 2001
From: Gamebrary <contact@gamebrary.com>
Date: Thu, 11 Aug 2022 23:34:40 -0700
Subject: [PATCH] Refactor tags

---
 public/index.html                            |   2 +-
 src/App.vue                                  |   4 -
 src/components/GameCards/GameCardCompact.vue |  26 ++--
 src/components/GameCards/GameCardDefault.vue |   6 +-
 src/components/GameCards/GameCardGrid.vue    |   5 +-
 src/components/GameCards/GameCardText.vue    |   5 +-
 src/components/Tags/TagsList.vue             |  32 ++---
 src/constants.js                             |   2 +-
 src/mixins/gameCardMixin.js                  |  19 +--
 src/pages/CreateTagPage.vue                  | 121 +++++++------------
 src/pages/EditTagPage.vue                    |  47 ++-----
 src/pages/GamePage.vue                       |  10 +-
 src/pages/GameTagsPage.vue                   |  97 ++++++---------
 src/pages/TagsPage.vue                       |   5 +-
 src/store/actions.js                         |  17 ++-
 src/store/getters.js                         |  13 --
 src/store/mutations.js                       |  44 ++++---
 17 files changed, 181 insertions(+), 274 deletions(-)

diff --git a/public/index.html b/public/index.html
index 71cc8d74..9ec60d6b 100644
--- a/public/index.html
+++ b/public/index.html
@@ -7,7 +7,7 @@
     <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
     <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
     <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
-    <link rel="manifest" href="/site.webmanifest">
+    <!-- <link rel="manifest" href="/site.webmanifest"> -->
     <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
     <meta name="msapplication-TileColor" content="#da532c">
     <meta name="theme-color" content="#ffffff">
diff --git a/src/App.vue b/src/App.vue
index 3348125d..e1386f48 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -100,10 +100,6 @@ export default {
     isGamePage() {
       return this.$route.name === 'game';
     },
-
-    isBoard() {
-      return ['public.board', 'board'].includes(this.$route.name);
-    },
   },
 
   watch: {
diff --git a/src/components/GameCards/GameCardCompact.vue b/src/components/GameCards/GameCardCompact.vue
index 1a92031c..59e835f3 100644
--- a/src/components/GameCards/GameCardCompact.vue
+++ b/src/components/GameCards/GameCardCompact.vue
@@ -37,19 +37,19 @@
             height="6px"
           />
 
-          <template v-if="showGameTags">
-            <b-badge
-              v-for="({ hex, tagTextColor }, name) in gameTags"
-              :key="name"
-              pill
-              class="mr-1"
-              variant="primary"
-              tag="small"
-              :style="`background-color: ${hex}; color: ${tagTextColor}`"
-            >
-              <small>{{ name }}</small>
-            </b-badge>
-          </template>
+          <!-- TODO: use correct tags -->
+          <!-- <pre>{{ gameTags }}</pre> -->
+          <!-- <b-badge
+            v-for="({ hex, tagTextColor }, name) in gameTags"
+            :key="name"
+            pill
+            class="mr-1"
+            variant="primary"
+            tag="small"
+            :style="`background-color: ${hex}; color: ${tagTextColor}`"
+          >
+            <small>{{ name }}</small>
+          </b-badge> -->
         </b-card-body>
       </b-col>
     </b-row>
diff --git a/src/components/GameCards/GameCardDefault.vue b/src/components/GameCards/GameCardDefault.vue
index e541615d..ae6349cc 100644
--- a/src/components/GameCards/GameCardDefault.vue
+++ b/src/components/GameCards/GameCardDefault.vue
@@ -42,14 +42,14 @@
             <small v-else>{{ gameProgress }}%</small>
           </b-badge>
 
-          <template v-if="showGameTags">
+          <template v-if="tagsApplied.length">
             <b-badge
-              v-for="({ hex, tagTextColor }, name) in gameTags"
+              v-for="({ bgColor, textColor, name }) in tagsApplied"
               :key="name"
               pill
               class="mr-1"
               variant="primary"
-              :style="`background-color: ${hex}; color: ${tagTextColor}`"
+              :style="`background-color: ${bgColor}; color: ${textColor}`"
             >
               <small>{{ name }}</small>
             </b-badge>
diff --git a/src/components/GameCards/GameCardGrid.vue b/src/components/GameCards/GameCardGrid.vue
index 2abd1697..35e21831 100644
--- a/src/components/GameCards/GameCardGrid.vue
+++ b/src/components/GameCards/GameCardGrid.vue
@@ -21,7 +21,8 @@
         height="6px"
       />
 
-      <template v-if="showGameTags">
+      <!-- TODO: use correct tags -->
+      <!-- <template v-if="showGameTags">
         <b-badge
           v-for="({ hex, tagTextColor }, name) in gameTags"
           :key="name"
@@ -32,7 +33,7 @@
         >
           <small>{{ name }}</small>
         </b-badge>
-      </template>
+      </template> -->
 
       <b-badge variant="warning" v-if="gameNotes">
         <i class="far fa-sticky-note fa-fw" />
diff --git a/src/components/GameCards/GameCardText.vue b/src/components/GameCards/GameCardText.vue
index 13401d74..0dcefa22 100644
--- a/src/components/GameCards/GameCardText.vue
+++ b/src/components/GameCards/GameCardText.vue
@@ -23,7 +23,8 @@
             height="6px"
           />
 
-          <template v-if="showGameTags">
+          <!-- TODO: use correct tags -->
+          <!-- <template v-if="showGameTags">
             <b-badge
               v-for="({ hex, tagTextColor }, name) in gameTags"
               :key="name"
@@ -34,7 +35,7 @@
             >
               <small class="font-weight-bold">{{ name }}</small>
             </b-badge>
-          </template>
+          </template> -->
         </b-card-body>
     </b-row>
   </b-card>
diff --git a/src/components/Tags/TagsList.vue b/src/components/Tags/TagsList.vue
index ddf16b40..0cab58de 100644
--- a/src/components/Tags/TagsList.vue
+++ b/src/components/Tags/TagsList.vue
@@ -1,22 +1,16 @@
 <template lang="html">
-  <b-row>
-    <b-col
-      v-for="({ hex, tagTextColor, name }, index) in tags"
+  <b-row class="p-3">
+    <b-button
+      v-for="({ textColor, bgColor, name }, index) in tags"
       @click="$router.push({ name: 'tag.edit', params: { id: index } })"
-      cols="6"
-      xl="4"
-      class="mb-3"
+      rounded
+      block
+      variant="outline-light"
+      :style="`background-color: ${bgColor}; color: ${textColor}`"
       :key="name"
     >
-      <b-button
-        rounded
-        block
-        variant="outline-light"
-        :style="`background-color: ${hex}; color: ${tagTextColor}`"
-      >
-        {{ name }}
-      </b-button>
-    </b-col>
+      {{ name }}
+    </b-button>
   </b-row>
 </template>
 
@@ -43,13 +37,5 @@ export default {
 
     this.loading = false;
   },
-
-  methods: {
-    openGame(gameId) {
-      const { id, slug } = this.games[gameId];
-
-      this.$router.push({ name: 'game.tags', params: { id, slug } })
-    },
-  },
 };
 </script>
diff --git a/src/constants.js b/src/constants.js
index 99f58248..d361aea6 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -74,7 +74,7 @@ export const GENRE_ICONS = {
 export const KEYBOARD_SHORTCUTS = {
   'MODAL_keyboard-shortcuts': ['shift', '?'],
   'MODAL_create-board': ['shift', 'c'],
-  MODAL_devTools: ['shift', 'd'],
+  // MODAL_devTools: ['shift', 'd'],
   ROUTE_boards: ['shift', 'b'],
   ROUTE_tags: ['shift', 't'],
   ROUTE_notes: ['shift', 'n'],
diff --git a/src/mixins/gameCardMixin.js b/src/mixins/gameCardMixin.js
index f2d8cfef..c2ceb332 100644
--- a/src/mixins/gameCardMixin.js
+++ b/src/mixins/gameCardMixin.js
@@ -17,25 +17,10 @@ export default {
       return this.gameProgress && Number(this.gameProgress) === 100;
     },
 
-    gameTags() {
-      const tagsArray = Object.entries(this.tags);
-      const filteredTags = tagsArray.filter(([key, value]) => {
-        return value.games.includes(this.gameId);
-      });
-
-      const filteredTagsObject = Object.fromEntries(filteredTags);
-
-      return filteredTagsObject;
-    },
-
     showGameProgress() {
       return this.gameProgress > 0;
     },
 
-    showGameTags() {
-      return this.list?.settings?.showGameTags && this.gameTags;
-    },
-
     showReleaseDates() {
       return this.list?.settings?.showReleaseDates;
     },
@@ -48,6 +33,10 @@ export default {
         : 0;
     },
 
+    tagsApplied() {
+      return this.tags?.filter((tag) => tag?.games?.includes(this.game?.id))
+    },
+
     gameNotes() {
       const { settings } = this.list;
 
diff --git a/src/pages/CreateTagPage.vue b/src/pages/CreateTagPage.vue
index 62832273..4442ac13 100644
--- a/src/pages/CreateTagPage.vue
+++ b/src/pages/CreateTagPage.vue
@@ -4,112 +4,85 @@
       Create tag
     </portal>
 
-    <form
-      ref="newTagForm"
-      @submit.stop.prevent="submit"
-    >
-      <b-form-row class="mb-3">
-        <b-col cols="8" md="9">
-          <b-form-input
-            maxlength="20"
-            :placeholder="$t('tags.form.inputPlaceholder')"
-            required
-            v-model.trim="tagName"
-          />
+    <form @submit.prevent="submit">
+      <label for="tagName">Tag name:</label>
+      <b-form-input
+        id="tagName"
+        v-model.trim="tag.name"
+        class="mb-3 field"
+        maxlength="20"
+        :placeholder="$t('tags.form.inputPlaceholder')"
+        required
+        trim
+      />
 
-          <b-form-text v-if="tagName" tag="span">
-            {{ $t('tags.form.preview') }}
+      <p>Background color</p>
+      <v-swatches v-model="tag.bgColor" show-fallback />
 
-            <b-badge :style="`background-color: ${hex}; color: ${tagTextColor}`">
-              {{ tagName }}
-            </b-badge>
-          </b-form-text>
-        </b-col>
+      <p>Text color</p>
+      <v-swatches v-model="tag.textColor" show-fallback />
 
-        <b-col cols="4" md="3">
-          <b-input-group>
-            <b-form-input
-              v-model="hex"
-              type="color"
-              required
-            />
+      <p>Preview</p>
 
-            <b-form-input
-              v-model="tagTextColor"
-              type="color"
-              required
-            />
-          </b-input-group>
-        </b-col>
-      </b-form-row>
+      <b-button
+        rounded
+        block
+        size="sm"
+        class="mr-2 mb-2 field"
+        variant="outline-light"
+        :style="`background-color: ${tag.bgColor}; color: ${tag.textColor}`"
+      >
+        {{ tag.name || 'Tag preview' }}
+      </b-button>
 
       <b-button
         variant="primary"
-        class="d-flex ml-auto"
-        :disabled="isDuplicate || saving || !Boolean(tagName)"
-        @click="submit"
+        :disabled="saving"
+        type="submit"
       >
         <b-spinner small v-if="saving" />
-        <span v-else>{{ $t('tags.form.addTag')}}</span>
+        <span v-else>Create</span>
       </b-button>
-
-      <b-alert
-        class="mt-3 mb-0"
-        :show="isDuplicate"
-        variant="warning"
-      >
-        {{ $t('tags.form.duplicateMessage', { tagName }) }}
-         <strong>{{ tagName }}</strong>
-      </b-alert>
     </form>
   </b-container>
 </template>
 
 <script>
 import { mapState } from 'vuex';
+import VSwatches from 'vue-swatches'
 
 export default {
   data() {
     return {
-      colorCombinations: [
-        ['#0d1137', '#e52165'],
-        ['#ffffff', '#000000'],
-        ['#101820', '#FEE715'],
-        ['#F2AA4C', '#101820'],
-        ['#F93822', '#FDD20E'],
-      ],
-      tagTextColor: '#F4B41A',
-      tagName: '',
+      tag: {
+        name: '',
+        textColor: '#DDE6E8',
+        bgColor: '#1FBC9C',
+        games: [],
+      },
+      saving: false,
     }
   },
 
-  mounted() {
-      this.setRandomColors();
+  components: {
+    VSwatches,
   },
 
   computed: {
-    ...mapState(['tags', 'platform', 'games']),
-    // isDuplicate() {
-    //   const { tagName, localTags } = this;
-    //
-    //   const tagNames = Object.keys(localTags)
-    //     .filter(name => name !== tagName)
-    //     .map(name => name.toLowerCase());
-    //
-    //   return tagNames.includes(tagName.toLowerCase());
-    // },
+    ...mapState(['tags']),
   },
 
   methods: {
-    setRandomColors() {
-      const { colorCombinations } = this;
+    async submit() {
+      this.$store.commit('CREATE_TAG', this.tag);
+      this.saving = true;
 
-      const randomNumber = Math.floor(Math.random() * colorCombinations.length);
+      await this.$store.dispatch('SAVE_GAME_TAGS')
+        .catch(() => {});
 
-      this.tagTextColor = colorCombinations[randomNumber][0];
-      this.hex = colorCombinations[randomNumber][1];
+      this.saving = true;
+      this.$router.push({ name: 'tags' })
     },
-
   },
 };
 </script>
diff --git a/src/pages/EditTagPage.vue b/src/pages/EditTagPage.vue
index 6cfb458f..04644574 100644
--- a/src/pages/EditTagPage.vue
+++ b/src/pages/EditTagPage.vue
@@ -34,14 +34,6 @@
       ref="form"
       @submit="saveTag"
     >
-      <b-alert
-        class="mt-3 mb-0"
-        :show="isEditedNameDuplicate && !saving"
-        variant="warning"
-      >
-        You already have a tag named <strong>{{ tag.name }}</strong>
-      </b-alert>
-
       <label for="tagName">Tag name:</label>
 
       <b-form-input
@@ -57,15 +49,14 @@
       <p>Background color</p>
 
       <v-swatches
-        v-model="tag.hex"
+        v-model="tag.bgColor"
         show-fallback
         popover-x="left"
       />
-
       <p>Text color</p>
 
       <v-swatches
-        v-model="tag.tagTextColor"
+        v-model="tag.textColor"
         show-fallback
         popover-x="left"
       />
@@ -79,7 +70,7 @@
         size="sm"
         class="mr-2 mb-2 field"
         variant="outline-light"
-        :style="`background-color: ${tag.hex}; color: ${tag.tagTextColor}`"
+        :style="`background-color: ${tag.bgColor}; color: ${tag.textColor}`"
       >
         {{ tag.name }}
       </b-button>
@@ -88,6 +79,11 @@
 
       <p>Games tagged</p>
 
+      <b-alert :show="tag.games.length === 0" variant="light" class="field">
+        No games tagged
+      </b-alert>
+      <!-- TODO: add quick game picker -->
+
       <div class="tagged-games">
         <b-img
           v-for="game in tag.games"
@@ -103,7 +99,7 @@
 
       <b-button
         variant="primary"
-        :disabled="isEditedNameDuplicate || saving"
+        :disabled="saving"
         type="submit"
       >
         <b-spinner small v-if="saving" />
@@ -122,7 +118,6 @@ export default {
     return {
       tag: {},
       loading: true,
-      originalTagName: '',
       localTags: {},
       saving: false,
     }
@@ -135,18 +130,6 @@ export default {
   computed: {
     ...mapState(['tags', 'games']),
 
-    tagNames() {
-      const sanitizedNames = this.tags?.map(({ name }) => name.toLowerCase());
-
-      return sanitizedNames.length > 0
-        ? sanitizedNames.filter(name => name?.toLowerCase() !== this.originalTagName?.toLowerCase())
-        : [];
-    },
-
-    isEditedNameDuplicate() {
-      return this.tagNames?.includes(this.tag?.name?.toLowerCase());
-    },
-
     tagIndex() {
       return this.$route?.params?.id;
     },
@@ -172,7 +155,6 @@ export default {
       const { tags, tagIndex } = this;
 
       this.tag = JSON.parse(JSON.stringify(tags[tagIndex]));
-      this.originalTagName = JSON.parse(JSON.stringify(this.tag.name));
 
       this.loading = false;
     },
@@ -194,20 +176,15 @@ export default {
     },
 
     deleteTag(tagName) {
-      this.$delete(this.localTags, tagName);
-      this.saveTags(true);
-    },
-
-    removeTag(tagName) {
-      this.$store.commit('REMOVE_GAME_TAG', { tagName, gameId: this.gameId });
-      this.saveTags();
+      // TODO: call mutation to remove tag and save tags
+      // this.saveTags(true);
     },
 
     async saveTag(e) {
       e.preventDefault();
 
       if (this.$refs.form.checkValidity()) {
-        const { tag, tags, originalTagName } = this;
+        const { tag, tags } = this;
 
         tags[this.tagIndex] = tag;
 
diff --git a/src/pages/GamePage.vue b/src/pages/GamePage.vue
index 7486bb7d..dd539123 100644
--- a/src/pages/GamePage.vue
+++ b/src/pages/GamePage.vue
@@ -96,14 +96,12 @@
             </header>
 
             <b-button
-              v-for="({ hex, tagTextColor, name }) in tags"
+              v-for="({ bgColor, textColor, name }) in tagsApplied"
               :key="name"
               rounded
               size="sm"
-              variant="outline-light"
               class="mr-1 my-2"
-              :disabled="saving"
-              :style="`background-color: ${hex}; color: ${tagTextColor}`"
+              :style="`background-color: ${bgColor}; color: ${textColor}`"
               @click="$router.push({ name: 'game.tags', params: { id: game.id, slug: game.slug } })"
             >
               {{ name }}
@@ -335,6 +333,10 @@ export default {
 
     },
 
+    tagsApplied() {
+      return this.tags?.filter((tag) => tag?.games?.includes(this.game?.id))
+    },
+
     legalNotice() {
       return this.game?.steam?.legal_notice;
     },
diff --git a/src/pages/GameTagsPage.vue b/src/pages/GameTagsPage.vue
index b23ceb9f..0fee08f4 100644
--- a/src/pages/GameTagsPage.vue
+++ b/src/pages/GameTagsPage.vue
@@ -51,22 +51,20 @@
           <section>
             <h3 class="mb-3">Tags applied to {{ game.name }}</h3>
 
-            <b-alert
-              v-if="tagsSelected.length === 0"
-              show
-              variant="light"
-            >
+            <b-alert :show="noneSelected" variant="light">
               No tags applied
             </b-alert>
-
+            <!-- TODO: use correct tags -->
             <b-button
-              v-for="{ name, hex, tagTextColor } in tags"
+              v-for="({ selected, name, bgColor, textColor }, index) in formattedTags"
               :key="name"
               rounded
               block
               variant="outline-light"
-              :style="`background-color: ${hex}; color: ${tagTextColor}`"
-              @click="removeTag"
+              :class="{ 'd-none': !selected }"
+              :disabled="saving"
+              :style="`background-color: ${bgColor}; color: ${textColor}`"
+              @click="removeTag(index)"
             >
               {{ name }}
             </b-button>
@@ -76,19 +74,19 @@
 
           <h3 class="my-3">Tags available</h3>
 
-          <pre>{{ tags }}</pre>
-          <!-- <b-button
-            v-for="({ name, hex, tagTextColor }, index) in tags"
+          <b-button
+            v-for="({ selected, name, bgColor, textColor }, index) in formattedTags"
             :key="name"
             rounded
             block
             variant="outline-light"
+            :class="{ 'd-none': selected }"
             :disabled="saving"
-            :style="`background-color: ${hex}; color: ${tagTextColor}`"
+            :style="`background-color: ${bgColor}; color: ${textColor}`"
             @click="addTag(index)"
           >
             {{ name }}
-          </b-button> -->
+          </b-button>
         </section>
       </b-col>
     </b-row>
@@ -131,36 +129,25 @@ export default {
       return Object.keys(this.tags).length === 0;
     },
 
-    tagsSelected() {
-      return this.tags?.filter(({ games }) => {
-        return games?.includes(this.game?.id);
-      })
+    formattedTags() {
+      return this.tags.map((tag) => ({
+        ...tag,
+        selected: tag.games.includes(Number(this.$route.params.id)),
+      }));
     },
 
-    tagsAvailable() {
-      return Object.entries(this.tags).map((t) => {
-        const [name, tag] = t;
-
-        return { name: name, ...tag };
-      })
-      .filter(({ games }) => {
-        return !games.includes(this.game.id);
-      })
+    noneSelected() {
+      return !this.formattedTags.some(({ selected }) => Boolean(selected));
     },
   },
 
   mounted() {
-    if (this.game?.id !== this.$route.params.id) {
-      this.loadGame();
-    } else {
-      this.loading = false;
-    }
+    this.load();
   },
 
   methods: {
-    async loadGame() {
+    async load() {
       this.loading = true;
-      this.$store.commit('CLEAR_GAME');
 
       await this.$store.dispatch('LOAD_GAME', this.$route.params.id);
       await this.$store.dispatch('LOAD_TAGS')
@@ -172,36 +159,28 @@ export default {
     },
 
     async addTag(index) {
-      console.log('add this tag');
-      // TODO: use commit instead?
-      // const gameId = this.game.id;
-      //
-      // if (!gameId) return;
-      //
-      // const tags = JSON.parse(JSON.stringify(this.tags)) ;
-      //
-      // tags[index].games.push(gameId)
-      //
-      // console.log(`game id ${gameId} should be included`, tags[index].games);
+      this.$store.commit('APPLY_TAG_TO_GAME', index);
+      this.saving = true;
 
-      // this.saving = true;
+      await this.$store.dispatch('SAVE_GAME_TAGS')
+        .catch(() => {
+          this.saving = false;
+        });
 
-      // await this.$store.dispatch('SAVE_TAGS', tags)
-      //   .catch((e) => {
-      //     console.log(e);
-      //   });
-
-      // this.saving = false;
-
-      // this.$store.commit('ADD_GAME_TAG', { tagName, gameId });
-      // await this.saveTags();
+      this.saving = false;
     },
 
-    async removeTag(tagName) {
-      const gameId = this.game.id;
+    async removeTag(index) {
+      this.$store.commit('REMOVE_GAME_TAG', index);
 
-      // this.$store.commit('REMOVE_GAME_TAG', { tagName, gameId });
-      // await this.saveTags();
+      this.saving = true;
+
+      await this.$store.dispatch('SAVE_GAME_TAGS')
+        .catch(() => {
+          this.saving = false;
+        });
+
+      this.saving = false;
     },
 
     manageTags() {
diff --git a/src/pages/TagsPage.vue b/src/pages/TagsPage.vue
index 24087c4c..f8460c7f 100644
--- a/src/pages/TagsPage.vue
+++ b/src/pages/TagsPage.vue
@@ -7,6 +7,7 @@
 
       <portal to="headerActions">
         <b-button
+          v-if="!showEmptyState"
           class="mr-2"
           variant="light"
           :to="{ name: 'tag.create' }"
@@ -27,9 +28,7 @@
          </b-button>
        </empty-state>
 
-       <b-col v-else>
-         <tags-list />
-       </b-col>
+       <tags-list v-else />
     </b-row>
   </b-container>
 </template>
diff --git a/src/store/actions.js b/src/store/actions.js
index d7816158..11e303b8 100644
--- a/src/store/actions.js
+++ b/src/store/actions.js
@@ -581,6 +581,18 @@ export default {
     });
   },
 
+  SAVE_GAME_TAGS({ state }) {
+    const db = firestore();
+
+    return new Promise((resolve, reject) => {
+      db.collection('tags')
+        .doc(state.user.uid)
+        .set({ tags: state.tags }, { merge: false })
+        .then(() => resolve())
+        .catch(reject);
+    });
+  },
+
   GET_TWITCH_TOKEN({ commit }) {
     const db = firestore();
 
@@ -726,14 +738,13 @@ export default {
           const { tags } = doc.data();
 
           if (typeof tags === 'object') {
-            console.warn('Legacy tag detected');
-
+            // console.warn('Legacy tag detected');
             const formattedTags = Object.entries(tags).map(([ ,tag]) => ({ ...tag }));
 
             commit('SET_TAGS', formattedTags);
             resolve(formattedTags);
           } else {
-            console.log('is type', typeof tags);
+            // console.log('is type', typeof tags);
           }
         });
     });
diff --git a/src/store/getters.js b/src/store/getters.js
index 11ebdc00..23c73d71 100644
--- a/src/store/getters.js
+++ b/src/store/getters.js
@@ -9,19 +9,6 @@ export default {
     return board?.owner === user?.uid;
   },
 
-  gameTags: ({ tags, game }) => {
-    if (!game?.id) return [];
-    // TODO: refactor architecture, don't use tag name as key
-    const tagsArray = Object.entries(tags);
-    const filteredTags = tagsArray.filter(([key, value]) => {
-      return value.games.includes(game.id);
-    });
-
-    const filteredTagsObject = Object.fromEntries(filteredTags);
-
-    return filteredTagsObject;
-  },
-
   // Arabic is the only ltr language supported at the moment
   isRTL: ({ settings }) => settings && settings.language !== 'ar',
 
diff --git a/src/store/mutations.js b/src/store/mutations.js
index cec1d5a3..fcc9400c 100644
--- a/src/store/mutations.js
+++ b/src/store/mutations.js
@@ -175,21 +175,21 @@ export default {
     state.settings = settings;
   },
 
-  UPDATE_TAG(state, { tagName, tagHex, tempTag }) {
-    const updatedTag = {
-      ...state.tags[tempTag.tagName],
-      hex: tagHex,
-    };
-
-    const renaming = tagName !== tempTag.tagName;
-
-    if (renaming) {
-      Vue.set(state.tags, tagName, updatedTag);
-      Vue.delete(state.tags, tempTag.tagName);
-    } else {
-      state.tags[tempTag.tagName] = updatedTag;
-    }
-  },
+  // UPDATE_TAG(state, { tagName, tagHex, tempTag }) {
+  //   const updatedTag = {
+  //     ...state.tags[tempTag.tagName],
+  //     hex: tagHex,
+  //   };
+  //
+  //   const renaming = tagName !== tempTag.tagName;
+  //
+  //   if (renaming) {
+  //     Vue.set(state.tags, tagName, updatedTag);
+  //     Vue.delete(state.tags, tempTag.tagName);
+  //   } else {
+  //     state.tags[tempTag.tagName] = updatedTag;
+  //   }
+  // },
 
   SET_TAGS(state, tags) {
     state.tags = tags;
@@ -247,12 +247,18 @@ export default {
     }
   },
 
-  ADD_GAME_TAG(state, { tagName, gameId }) {
-    state.tags[tagName].games.push(gameId);
+  APPLY_TAG_TO_GAME(state, tagIndex) {
+    state.tags[tagIndex].games.push(state.game.id);
   },
 
-  REMOVE_GAME_TAG(state, { tagName, gameId }) {
-    state.tags[tagName].games.splice(state.tags[tagName].games.indexOf(gameId), 1);
+  CREATE_TAG(state, tag) {
+    state.tags.push(tag);
+  },
+
+  REMOVE_GAME_TAG(state, tagIndex) {
+    const gameIndex = state.tags[tagIndex].games.indexOf(state.game.id);
+
+    state.tags[tagIndex].games.splice(gameIndex, 1);
   },
 
   SET_SEARCH_RESULTS(state, results) {