Session partner status indicator

src/store/modules/user.js

@@ -15,7 +15,8 @@ export default {
     latestSession: {},
     volunteerStats: {},
     isFirstDashboardVisit: false,
-    isSessionConnectionAlive: false
+    isSessionConnectionAlive: false,
+    isSessionPartnerConnectionAlive: false
   },
   mutations: {
     setUser: (state, user = {}) => (state.user = user),
@@ -60,6 +61,13 @@ export default {
 
     setIsSessionConnectionAlive: (state, isSessionConnectionAlive) => {
       state.isSessionConnectionAlive = isSessionConnectionAlive;
+    },
+
+    setIsSessionPartnerConnectionAlive: (
+      state,
+      isSessionPartnerConnectionAlive
+    ) => {
+      state.isSessionPartnerConnectionAlive = isSessionPartnerConnectionAlive;
     }
   },
   actions: {
@@ -129,6 +137,16 @@ export default {
       commit("setSession", sessionData);
     },
 
+    updateSessionPartnerStatus: (
+      { commit },
+      isSessionPartnerConnectionAlive
+    ) => {
+      commit(
+        "setIsSessionPartnerConnectionAlive",
+        isSessionPartnerConnectionAlive
+      );
+    },
+
     updateAvailability: ({ commit }, availability, date = Date.now()) => {
       commit("setAvailability", availability, date);
     },

src/views/SessionView/SessionHeader.vue

@@ -11,7 +11,18 @@
             <loading-message message="Contacting coaches" />
           </template>
           <template v-else-if="isSessionInProgress">
-            <span class="volunteer-name">{{ sessionPartner.firstname }}</span>
+            <span class="volunteer-name">{{ sessionPartner.firstname }}</span
+            ><br />
+            <template v-if="isSessionConnectionAlive">
+              <span class="partner-status">
+                <template v-if="isSessionPartnerConnectionAlive">
+                  Online
+                </template>
+                <template v-else>
+                  Offline
+                </template>
+              </span>
+            </template>
           </template>
           <template v-else-if="isSessionOver">
             <template v-if="sessionPartner.firstname">
@@ -89,7 +100,10 @@ export default {
   computed: {
     ...mapState({
       user: state => state.user.user,
-      session: state => state.user.session
+      session: state => state.user.session,
+      isSessionConnectionAlive: state => state.user.isSessionConnectionAlive,
+      isSessionPartnerConnectionAlive: state =>
+        state.user.isSessionPartnerConnectionAlive
     }),
     ...mapGetters({
       sessionPartner: "user/sessionPartner",
@@ -280,6 +294,11 @@ h1 {
   font-size: 18px;
 }
 
+.partner-status {
+  font-weight: 400;
+  font-size: 14px;
+}
+
 .button-container {
   display: flex;
   align-items: center;

src/views/SessionView/index.vue

@@ -205,6 +205,12 @@ export default {
       } else if (this.$route.params.sessionId) {
         this.joinSession(this.$route.params.sessionId);
       }
+    },
+    "partner-status"(data) {
+      this.$store.dispatch(
+        "user/updateSessionPartnerStatus",
+        data.isSessionPartnerConnectionAlive
+      );
     }
   },
   methods: {