added global game search

functions/index.js

@@ -36,16 +36,20 @@ exports.customSearch = functions.https.onRequest((req, res) => {
     ? `limit ${req.query.limit};`
     : 'limit 50;';
 
+  const search = req.query.searchText
+    ? `search "${req.query.searchText}";`
+    : '';
+
   const fields = req.query.fields
     ? `fields ${req.query.fields};`
     : 'fields id,name,slug,rating,name,cover.image_id,first_release_date;';
 
   const data = `
+    ${search}
     ${fields}
     ${sort}
     ${limit}
-    ${query}
-  `;
+    ${query}`;
 
   axios({
     url: 'https://api.igdb.com/v4/games',
@@ -122,7 +126,7 @@ exports.refreshToken = functions.pubsub.schedule('0 0 * * 0')
   });
 
 exports.platforms = functions.https.onRequest((req, res) => {
-  res.set('Access-Control-Allow-Origin', "*")
+  res.set('Access-Control-Allow-Origin', "*");
 
   const { token } = req.query;
 

src/components/Dock.vue

@@ -24,7 +24,7 @@
 
     <portal-target name="dock" multiple />
 
-    <!-- <global-search /> -->
+    <global-search />
 
     <sidebar />
   </nav>
@@ -34,13 +34,13 @@
 import { mapState, mapGetters } from 'vuex';
 import PinnedBoards from '@/components/Board/PinnedBoards';
 import Sidebar from '@/components/Sidebar';
-// import GlobalSearch from '@/components/GlobalSearch';
+import GlobalSearch from '@/components/GlobalSearch';
 
 export default {
   components: {
     PinnedBoards,
     Sidebar,
-    // GlobalSearch,
+    GlobalSearch,
   },
 
   computed: {

src/components/GlobalSearch.vue

@@ -1,28 +1,87 @@
 <template lang="html">
   <div class="global-search">
-    <b-form-input
-      v-model="searchText"
-      type="search"
-      debounce="500"
-      :placeholder="$t('board.addGame.inputPlaceholder')"
-      @update="search"
-    />
+    <b-button v-b-toggle.global-search>
+      <i class="fas fa-search fa-fw" aria-hidden />
+    </b-button>
 
+    <b-sidebar
+      id="global-search"
+      title="Sidebar"
+      shadow
+      backdrop
+      bg-variant="dark"
+      text-variant="white"
+      right
+      header-class="px-2 pt-2 d-flex align-items-center justify-content-between"
+    >
+      <template #header="{ hide }">
+        <h5 class="mb-0 ml-2">
+          Game search
+        </h5>
+
+        <b-button
+          class="align-self-baseline"
+          @click="hide"
+        >
+          <i class="fas fa-times fa-fw" aria-hidden />
+        </b-button>
+      </template>
+
+      <div class="px-3 py-2">
+        <b-form-input
+          v-model="searchText"
+          type="search"
+          autofocus
+          debounce="500"
+          class="mb-4"
+          :placeholder="$t('board.addGame.inputPlaceholder')"
+          @update="search"
+        />
+
+        <b-list-group
+          v-for="{ id } in searchResults"
+          :key="id"
+          @click="openGame(id)"
+        >
+          <game-card-search
+            :game-id="id"
+            class="mb-2"
+          />
+        </b-list-group>
+      </div>
+    </b-sidebar>
   </div>
 </template>
 
 <script>
+import GameCardSearch from '@/components/GameCards/GameCardSearch';
+
 export default {
+  components: {
+    GameCardSearch,
+  },
+
   data() {
     return {
       searchText: '',
+      searchResults: [],
     };
   },
 
   methods: {
-    search(text) {
-      console.log(text);
-      this.$store.dispatch('CUSTOM_SEARCH', text);
+    openGame(gameId) {
+      this.$store.commit('SET_GAME_MODAL_DATA', { gameId });
+      this.$bvModal.show('game-modal');
+    },
+
+    async search(searchText) {
+      if (!searchText) {
+        this.searchResults = [];
+
+        return;
+      }
+
+      this.searchResults = await this.$store.dispatch('CUSTOM_SEARCH', { searchText });
     },
   },
 };

src/store/actions.js

@@ -438,9 +438,18 @@ export default {
     });
   },
 
-  CUSTOM_SEARCH({ commit, state }, { platforms, sortQuery }) {
+  CUSTOM_SEARCH({ commit, state }, { platforms = '', sortQuery = '', searchText = '' }) {
     return new Promise((resolve, reject) => {
-      axios.get(`${API_BASE}/customSearch?platforms=${platforms}&sortQuery=${sortQuery}&token=${state.twitchToken.access_token}`)
+      const params = {
+        token: state.twitchToken.access_token,
+        platforms,
+        sortQuery,
+        searchText,
+      };
+
+      const query = new URLSearchParams(params).toString();
+
+      axios.get(`${API_BASE}/customSearch?${query}`)
         .then(({ data }) => {
           commit('CACHE_GAME_DATA', data);
           resolve(data);