Merge branch 'igdb-v4-migration'

README.md

@@ -1,3 +1,12 @@
+# Large header
+# Tech stack
+# Build Process
+- instructions for yarn translate
+# Add table of content
+# Features
+# Feedback
+# Contributors
+
 <p align="center">
     <img width="200" src="https://user-images.githubusercontent.com/60666270/93530966-567d1200-f8f3-11ea-8fd3-131976105d06.png" alt="Gamebrary logo">
     <h2 align="center">Gamebrary</h2>

functions/index.js

@@ -1,4 +1,14 @@
 const functions = require('firebase-functions');
+const admin = require('firebase-admin');
+admin.initializeApp({
+  apiKey: 'AIzaSyA6MsmnLtqT4b11r-j15wwreRypO3AodcA',
+  authDomain: 'gamebrary.com',
+  databaseURL: 'https://gamebrary-8c736.firebaseio.com',
+  projectId: 'gamebrary-8c736',
+  storageBucket: 'gamebrary-8c736.appspot.com',
+  messagingSenderId: '324529217902',
+});
+
 const axios = require('axios');
 
 // firebase emulators:start --only functions
@@ -6,10 +16,20 @@ const axios = require('axios');
 
 exports.search = functions.https.onRequest((req, res) => {
   res.set('Access-Control-Allow-Origin', "*")
-  // TODO: whitelist domains/localhost
 
-  const { search, platform } = req.query;
-  // TODO: throw bad request if these are missing ^
+  const { search, platform, token } = req.query;
+
+  if (!search) {
+    return res.status(400).send('missing param search');
+  }
+
+  if (!platform) {
+    return res.status(400).send('missing param games');
+  }
+
+  if (!token) {
+    return res.status(400).send('missing param games');
+  }
 
   const data = `
   search "${search}";
@@ -18,11 +38,12 @@ exports.search = functions.https.onRequest((req, res) => {
   where platforms = (${platform});`
 
   axios({
-    url: 'https://api-v3.igdb.com/games',
+    url: 'https://api.igdb.com/v4/games',
     method: 'POST',
     headers: {
       'Accept': 'application/json',
-      'user-key': functions.config().igdbv3.key,
+      'Client-ID': '0oo6dw5f0y8frai8l31koyq8egcu17',
+      'Authorization': `Bearer ${token}`,
     },
     data,
   })
@@ -30,36 +51,78 @@ exports.search = functions.https.onRequest((req, res) => {
     .catch((error) => { res.send(error) });
 });
 
+// TODO: update to run once a month instead of once a week
+exports.refreshToken = functions.pubsub.schedule('0 0 * * 0')
+  .onRun((context) => {
+    const id = functions.config().twitch.clientid;
+    const secret = functions.config().twitch.clientsecret;
+    const url = `https://id.twitch.tv/oauth2/token?client_id=${id}&client_secret=${secret}&grant_type=client_credentials`;
+
+    axios({
+      url,
+      method: 'POST',
+      headers: {
+        'Accept': 'application/json',
+      },
+    })
+      .then(({ data }) => {
+        const db = admin.firestore();
+
+        return db.collection('app').doc('twitch').set(data, { merge: true })
+          .then((res) => {
+            console.log('token refreshed');
+            return res.status(200).send(res);
+          })
+          .catch((e) => {
+            return res.status(200).send(res);
+          });
+      })
+      .catch(() => {});
+  });
+
 exports.platforms = functions.https.onRequest((req, res) => {
   res.set('Access-Control-Allow-Origin', "*")
 
-  // TODO: hand pick fields
-  // TODO: extend necessary fields field.*
+  const { token } = req.query;
+
+  console.log(token);
+
+  if (!token) {
+    return res.status(400).send('missing param games');
+  }
+
   const data = `
     fields category,generation,name,alternative_name,slug;
     limit 200;
   `
 
   axios({
-    url: 'https://api-v3.igdb.com/platforms',
+    url: 'https://api.igdb.com/v4/platforms',
     method: 'POST',
     headers: {
       'Accept': 'application/json',
-      'user-key': functions.config().igdbv3.key,
+      'Client-ID': '0oo6dw5f0y8frai8l31koyq8egcu17',
+      'Authorization': `Bearer ${token}`,
     },
     data,
   })
-    .then(({ data }) => { res.status(200).send(data) })
+    .then(({ data }) => {
+      res.status(200).send(data)
+    })
     .catch((error) => { res.send(error) });
 });
 
 exports.games = functions.https.onRequest((req, res) => {
   res.set('Access-Control-Allow-Origin', "*")
 
-  const { games } = req.query;
+  const { games, token } = req.query;
+
+  if (!token) {
+    return res.status(400).send('missing token');
+  }
 
   if (!games) {
-    res.status(400).send('missing param games');
+    return res.status(400).send('missing param games');
   }
 
   const data = `fields
@@ -75,11 +138,12 @@ exports.games = functions.https.onRequest((req, res) => {
   limit 500;`;
 
   axios({
-    url: 'https://api-v3.igdb.com/games',
+    url: 'https://api.igdb.com/v4/games',
     method: 'POST',
     headers: {
       'Accept': 'application/json',
-      'user-key': functions.config().igdbv3.key,
+      'Client-ID': '0oo6dw5f0y8frai8l31koyq8egcu17',
+      'Authorization': `Bearer ${token}`,
     },
     data,
   })
@@ -87,10 +151,15 @@ exports.games = functions.https.onRequest((req, res) => {
     .catch((error) => { res.send(error) });
 });
 
+// TODO: fix game
 exports.game = functions.https.onRequest((req, res) => {
   res.set('Access-Control-Allow-Origin', "*")
 
-  const { gameId } = req.query;
+  const { gameId, token } = req.query;
+
+  if (!token) {
+    return res.status(400).send('missing token');
+  }
 
   if (!gameId) {
     res.status(400).send('missing param gameId');
@@ -120,12 +189,15 @@ exports.game = functions.https.onRequest((req, res) => {
 
   where id = ${ gameId };`;
 
+  console.log(data);
+
   axios({
-    url: 'https://api-v3.igdb.com/games',
+    url: 'https://api.igdb.com/v4/games',
     method: 'POST',
     headers: {
       'Accept': 'application/json',
-      'user-key': functions.config().igdbv3.key,
+      'Client-ID': '0oo6dw5f0y8frai8l31koyq8egcu17',
+      'Authorization': `Bearer ${token}`,
     },
     data,
   })

src/components/Board/BoardPlaceholder.vue

@@ -5,7 +5,11 @@
       :class="`list ${list.settings.view || 'single'}`"
       :key="list.name"
     >
-    <b-card no-body>
+    <b-card
+      no-body
+      :bg-variant="nightMode ? 'dark' : null"
+      :text-variant="nightMode ? 'white' : null"
+    >
       <b-card-header class="pt-2 pb-1 px-2">
         <b-skeleton />
       </b-card-header>
@@ -18,6 +22,8 @@
           <b-card
             no-body
             img-top
+            :bg-variant="nightMode ? 'dark' : null"
+            :text-variant="nightMode ? 'white' : null"
             v-if="list.settings.view === 'grid'"
           >
             <b-skeleton-img
@@ -33,6 +39,8 @@
           <b-card
             v-else-if="!list.settings.view || list.settings.view === 'single'"
             no-body
+            :bg-variant="nightMode ? 'dark' : null"
+            :text-variant="nightMode ? 'white' : null"
             img-left
           >
             <b-skeleton-img
@@ -47,6 +55,8 @@
           </b-card>
 
           <b-card
+            :bg-variant="nightMode ? 'dark' : null"
+            :text-variant="nightMode ? 'white' : null"
             v-else-if="list.settings.view === 'compact'"
             no-body
             img-left
@@ -64,6 +74,8 @@
 
           <b-card
             v-else-if="list.settings.view === 'text'"
+            :bg-variant="nightMode ? 'dark' : null"
+            :text-variant="nightMode ? 'white' : null"
             no-body
             img-left
           >
@@ -89,7 +101,7 @@
 </template>
 
 <script>
-import { mapState } from 'vuex';
+import { mapState, mapGetters } from 'vuex';
 
 export default {
   data() {
@@ -100,6 +112,7 @@ export default {
 
   computed: {
     ...mapState(['boards', 'board']),
+    ...mapGetters(['nightMode']),
   },
 
   mounted() {

src/components/Game/GameModal.vue

@@ -287,7 +287,8 @@ export default {
       const { gameId } = this.gameModalData;
 
       const game = await this.$store.dispatch('LOAD_GAME', gameId)
-        .catch(() => {
+        .catch((e) => {
+          console.log(e);
           this.loading = false;
           this.$bvToast.toast('Error loading game', { title: 'Error', variant: 'error' });
         });

src/components/Lists/AddGameModal.vue

@@ -1,5 +1,8 @@
 <template lang="html">
-  <b-dropdown-item-button @click="$bvModal.show(`game-modal-${list.name}`)">
+  <b-dropdown-item-button
+    :variant="nightMode ? 'light' : null"
+    @click="$bvModal.show(`game-modal-${list.name}`)"
+  >
     <icon name="plus" />
     {{ $t('board.addGame.title') }}
 

src/components/Lists/ChangeListView.vue

@@ -1,5 +1,8 @@
 <template lang="html">
-  <b-dropdown-item-button v-b-modal="modalId">
+  <b-dropdown-item-button
+    v-b-modal="modalId"
+    :variant="nightMode ? 'light' : null"
+  >
     <icon name="versions" />
     {{ $t('board.list.view') }}
 

src/components/Lists/ListPreferences.vue

@@ -1,5 +1,8 @@
 <template lang="html">
-  <b-dropdown-item-button v-b-modal="modalId">
+  <b-dropdown-item-button
+    v-b-modal="modalId"
+    :variant="nightMode ? 'light' : null"
+  >
     <icon name="tools" />
     {{ $t('board.list.settings') }}
 
@@ -93,6 +96,8 @@
 </template>
 
 <script>
+import { mapGetters } from 'vuex';
+
 export default {
   props: {
     listIndex: Number,
@@ -112,6 +117,8 @@ export default {
   },
 
   computed: {
+    ...mapGetters(['nightMode']),
+
     modalId() {
       return `list-tweaks-${this.listIndex}`;
     },

src/components/Lists/ListSettings.vue

@@ -3,8 +3,8 @@
     size="sm"
     class="m-1"
     right
-    variant="transparent"
-    :menu-class="nightMode ? 'bg-dark' : ''"
+    :variant="nightMode ? 'dark' : 'transparent'"
+    :menu-class="nightMode ? 'bg-dark text-white' : ''"
     no-caret
   >
     <template v-slot:button-content>
@@ -26,7 +26,7 @@
             v-b-tooltip.hover
             :title="$t('board.list.moveLeft')"
             :disabled="isFirst"
-            variant="light"
+            :variant="nightMode ? 'dark' : 'light'"
             @click="moveList(listIndex, listIndex - 1)"
           >
             <icon name="triangle-left" />

src/components/Lists/RenameList.vue

@@ -1,5 +1,8 @@
 <template lang="html">
-  <b-dropdown-item-button v-b-modal="modalId">
+  <b-dropdown-item-button
+    v-b-modal="modalId"
+    :variant="nightMode ? 'light' : null"
+  >
     <icon name="pencil" />
     {{ $t('board.list.renameList') }}
 

src/components/Lists/SortList.vue

@@ -1,5 +1,8 @@
 <template lang="html">
-  <b-dropdown-item-button v-b-modal="modalId">
+  <b-dropdown-item-button
+    v-b-modal="modalId"
+    :variant="nightMode ? 'light' : null"
+  >
     <icon name="list-ordered" />
     {{ $t('board.list.sortList') }}
 

src/store/actions.js

@@ -3,18 +3,15 @@ import firebase from 'firebase/app';
 import 'firebase/storage';
 import 'firebase/firestore';
 
-const API_BASE = 'https://us-central1-gamebrary-8c736.cloudfunctions.net';
-// const API_BASE = 'http://localhost:5001/gamebrary-8c736/us-central1';
+// const API_BASE = 'https://us-central1-gamebrary-8c736.cloudfunctions.net';
+const API_BASE = 'http://localhost:5000/gamebrary-8c736/us-central1';
 
 export default {
-  //
-  // NEW STUFF
-  //
-
-  LOAD_IGDB_PLATFORMS({ commit }) {
+  LOAD_IGDB_PLATFORMS({ state, commit }) {
     return new Promise((resolve, reject) => {
-      axios.get(`${API_BASE}/platforms`)
+      axios.get(`${API_BASE}/platforms?token=${state.twitchToken.access_token}`)
         .then(({ data }) => {
+          console.log(data);
           commit('SET_PLATFORMS', data);
           resolve(data);
         }).catch(reject);
@@ -246,9 +243,9 @@ export default {
     });
   },
 
-  LOAD_BOARD_GAMES({ commit }, gameList) {
+  LOAD_BOARD_GAMES({ state, commit }, gameList) {
     return new Promise((resolve, reject) => {
-      axios.get(`${API_BASE}/games?games=${gameList}`)
+      axios.get(`${API_BASE}/games?games=${gameList}&token=${state.twitchToken.access_token}`)
         .then(({ data }) => {
           commit('CACHE_GAME_DATA', data);
           resolve();
@@ -260,7 +257,7 @@ export default {
     const platforms = state.board.platforms.join(',');
 
     return new Promise((resolve, reject) => {
-      axios.get(`${API_BASE}/search?search=${searchText}&platform=${platforms}`)
+      axios.get(`${API_BASE}/search?search=${searchText}&platform=${platforms}&token=${state.twitchToken.access_token}`)
         .then(({ data }) => {
           commit('SET_SEARCH_RESULTS', data);
           commit('CACHE_GAME_DATA', data);
@@ -279,7 +276,7 @@ export default {
     });
   },
 
-  GET_TWITCH_TOKEN({ state, commit }, data) {
+  GET_TWITCH_TOKEN({ state, commit }) {
     const db = firebase.firestore();
 
     return new Promise((resolve, reject) => {
@@ -398,14 +395,20 @@ export default {
     });
   },
 
-  LOAD_GAME(context, gameId) {
+  LOAD_GAME({ state }, gameId) {
     return new Promise((resolve, reject) => {
-      axios.get(`${API_BASE}/game?gameId=${gameId}`)
+      axios.get(`${API_BASE}/game?gameId=${gameId}&token=${state.twitchToken.access_token}`)
         .then(({ data }) => {
-          const [game] = data;
+          console.log(data);
+          // const [game] = data;
 
-          resolve(game);
-        }).catch(reject);
+          // console.log(game);
+
+          // resolve(game);
+        }).catch((e) => {
+          console.log(e);
+          reject();
+        });
     });
   },
 };

src/styles/_theme.scss

@@ -749,7 +749,7 @@ $font-family-base:            $font-family-sans-serif !default;
 // // Dropdown menu container and contents.
 //
 // $dropdown-min-width:                10rem !default;
-// $dropdown-padding-y:                .5rem !default;
+$dropdown-padding-y:                0 !default;
 // $dropdown-spacer:                   .125rem !default;
 // $dropdown-font-size:                $font-size-base !default;
 // $dropdown-color:                    $body-color !default;