From c44a3acc790349ccc61d351fbe0ed36e2a79b446 Mon Sep 17 00:00:00 2001
From: Soleone <soleone@gmail.com>
Date: Tue, 22 Sep 2020 18:35:36 -0400
Subject: [PATCH] Implement global alert for system messages.

---
 README.md                        |  2 +-
 ROADMAP.md                       |  6 ++++++
 src/App.vue                      | 15 +++++++++++++--
 src/components/ChallengeList.vue |  2 +-
 src/store/index.js               | 26 ++++++++++++--------------
 src/views/Player.vue             |  2 +-
 6 files changed, 34 insertions(+), 19 deletions(-)

diff --git a/README.md b/README.md
index 8a36a77..67b1902 100644
--- a/README.md
+++ b/README.md
@@ -9,7 +9,7 @@ A single page web app that helps Gods Unchained players share their challenge co
 - View [roadmap](https://github.com/Soleone/gunchained/blob/master/ROADMAP.md) for potential future changes.
 - Built using Vue, Vuetify, Vuex, DayJS.
 - Backed by Firebase for authentication and storage
-- Hosted for free using
+- Hosted for free using Github pages
 - Might be extended eventually to have more than the Arena features for challenge codes.
 
 ## Contributing
diff --git a/ROADMAP.md b/ROADMAP.md
index ebce166..938416f 100644
--- a/ROADMAP.md
+++ b/ROADMAP.md
@@ -54,6 +54,8 @@ None of this is guaranteed to be worked on by anyone.
 
 ## Ideas
 
+### User facing
+
 - Users can send comments to available challenges' players to ask for status updates
   - Requires inbox for players to receive these comments
 - Player profile fields:
@@ -68,3 +70,7 @@ None of this is guaranteed to be worked on by anyone.
 - Announcement post? Voice?
 - Mark challenge as connected to help other players to try to queue with you anymore
 - Quick copy button
+
+### Implementation details
+
+- Add test suite
diff --git a/src/App.vue b/src/App.vue
index 295154a..9ccb85e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -54,6 +54,15 @@
     </v-app-bar>
 
     <v-main>
+      <v-alert
+        v-if="appStatus.visible"
+        :color="appStatus.color"
+        :type="appStatus.type"
+        dismissible
+        class="ma-3"
+      >
+        {{ appStatus.message }}
+      </v-alert>
       <router-view></router-view>
 
       <v-snackbar
@@ -105,7 +114,8 @@ export default {
     ...mapGetters({
       userName: 'userName',
       isAvailableEnabled: 'isAvailableEnabled',
-      player: 'playerObject'
+      player: 'playerObject',
+      appStatus: 'appStatus'
     })
   },
   created() {
@@ -153,7 +163,8 @@ export default {
       handler() {
         if (!this.user) return
 
-        console.log('[Player] User was set. Trying to bind Player ref')
+        console.log('[Player] User was set. Trying to bind App and Player ref')
+        this.$store.dispatch('bindAppRef')
         this.$store.dispatch('bindPlayerRef')
       }
     }
diff --git a/src/components/ChallengeList.vue b/src/components/ChallengeList.vue
index 6b1f8ee..cfad762 100644
--- a/src/components/ChallengeList.vue
+++ b/src/components/ChallengeList.vue
@@ -3,7 +3,7 @@
     <v-row>
       <v-spacer></v-spacer>
       <v-col cols="12" :lg="columnSizeLg">
-        <v-alert v-if="!user" type="info">
+        <v-alert v-if="!user" type="info" text>
           Sign in on the top right
           <span class="d-none d-sm-inline">
             to share your challenge code.
diff --git a/src/store/index.js b/src/store/index.js
index e98d463..41ddaf0 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -17,7 +17,8 @@ export default new Vuex.Store({
       message: null,
       color: 'success'
     },
-    reloadKey: 0
+    reloadKey: 0,
+    app: {}
   },
   mutations: {
     ...vuexfireMutations,
@@ -48,7 +49,6 @@ export default new Vuex.Store({
       // create a copy that excludes id
       const newPlayer = { ...player }
       newPlayer.challenge = player.challenge.toFire()
-      console.log('new player: ', newPlayer)
       return store
         .collection('players')
         .doc(state.user.uid)
@@ -67,7 +67,6 @@ export default new Vuex.Store({
     },
     updateAvailability({ dispatch, state }, player) {
       const newPlayer = { challenge: player.challenge.toFire() }
-      console.log('new player: ', newPlayer)
       return store
         .collection('players')
         .doc(state.user.uid)
@@ -105,6 +104,12 @@ export default new Vuex.Store({
           reset: false
         }
       )
+    }),
+    bindAppRef: firestoreAction(({ bindFirestoreRef }) => {
+      console.log('[Vuex] Binding app instance from Firestore')
+      return bindFirestoreRef('app', store.collection('app').doc('instance'), {
+        reset: false
+      })
     })
   },
   getters: {
@@ -128,17 +133,10 @@ export default new Vuex.Store({
         })
     },
     isAvailableEnabled(state) {
-      if (!state.player) {
-        return false
-      } else if (!state.player.challenge) {
-        return false
-      } else if (!state.player.challenge.code) {
-        return false
-      } else if (state.player.challenge.code === '') {
-        return false
-      } else {
-        return true
-      }
+      return !!state.player.challenge?.code
+    },
+    appStatus(state) {
+      return state.app.status || {}
     }
   },
   modules: {}
diff --git a/src/views/Player.vue b/src/views/Player.vue
index 9f324c4..68785b1 100644
--- a/src/views/Player.vue
+++ b/src/views/Player.vue
@@ -4,7 +4,7 @@
       <v-row>
         <v-spacer></v-spacer>
         <v-col cols="12" :lg="columnSizeLg * 2">
-          <v-alert v-if="!isAvailableEnabled" type="info">
+          <v-alert v-if="!isAvailableEnabled" type="info" text>
             Once you entered a challenge code you can set yourself to available
             using the switch in the top menu bar.
           </v-alert>