From 02b9503007b9d22d03041311ad1d004f22999a06 Mon Sep 17 00:00:00 2001
From: Paul-Louis NECH <pln@algolia.com>
Date: Sun, 19 Apr 2020 16:13:00 +0200
Subject: [PATCH] client: Begin store implem, display last 20 messages

---
 client/src/App.vue                   | 36 +++++++++++-------------------------
 client/src/Sockets.vue               | 21 +++++++++++++--------
 client/src/components/HelloWorld.vue | 11 +++++++++--
 3 files changed, 33 insertions(+), 35 deletions(-)

diff --git a/client/src/App.vue b/client/src/App.vue
index 68a66b3..b58dd72 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -1,6 +1,6 @@
 <template>
     <div id="app">
-        <HelloWorld msg="Salut Menteur !"/>
+        <HelloWorld />
         <Sockets/>
         <div id="game">
             <label for="messages"> Choose a message:</label>
@@ -18,35 +18,15 @@
 <script>
 
     import Vue from 'vue'
-    import Vuex from 'vuex'
     import 'es6-promise/auto' // Needed for Promise polyfill
     import VueSocketIO from 'vue-socket.io'
+    import Vuex, {mapGetters, mapMutations} from 'vuex';
     import HelloWorld from "./components/HelloWorld";
     import Sockets from "./Sockets";
+    import {store} from './vuex-store'
 
     Vue.use(Vuex);
 
-    const store = new Vuex.Store({
-        state: {
-            count: 0
-        },
-        mutations: {
-            increment(state) {
-                state.count++
-            },
-            decrement(state) {
-                state.count++
-            }
-        }
-        // TODO: Use actions for VueX-SocketIO integration?
-        // actions: {
-        //     "<ACTION_PREFIX><EVENT_NAME>"() {
-        //         // do something
-        //     }
-        // }
-    });
-
-
     Vue.use(new VueSocketIO({
         debug: true,
         connection: 'http://localhost:9042',
@@ -61,6 +41,7 @@
 
     export default {
         name: "App",
+        store: store,
         components: {
             HelloWorld,
             Sockets
@@ -70,11 +51,16 @@
                 message: "WAITING"
             }
         },
+        computed: {
+            ...mapGetters(['isConnected', 'name', 'socketMessage'])
+        },
         methods: {
-            sendMessage: function(message) {
+            sendMessage: function (message) {
                 console.log("User wants to send", message);
                 this.$socket.emit("message", message);
-            }
+            },
+            ...mapMutations(['setName']),
+            // ...mapActions(['setNumberToRemoteValue']),
         }
     };
 
diff --git a/client/src/Sockets.vue b/client/src/Sockets.vue
index 676fbf3..54bb9fc 100644
--- a/client/src/Sockets.vue
+++ b/client/src/Sockets.vue
@@ -2,9 +2,16 @@
     <div>
         <p v-if="isConnected">We're connected to the server!</p>
         <p v-if="!isConnected">We're not connected yet...</p>
-        <div v-if="socketMessage != null">
-            <p>Message from server: "{{socketMessage}}"</p>
+
+        <div v-if="socketMessages.length >= 1">
+            <p>Messages from server"</p>
+            <ul id="messages">
+                <li v-for="message in socketMessages.slice(-20)" :key="message">
+                    {{ message }}
+                </li>
+            </ul>
         </div>
+
         <button @click="pingServer()">Ping Server</button>
         <button @click="logOn()">LogOn</button>
         <button @click="logOff()">LogOff</button>
@@ -16,7 +23,7 @@
         data() {
             return {
                 isConnected: false,
-                socketMessage: null
+                socketMessages: []
             }
         },
 
@@ -29,13 +36,11 @@
             disconnect() {
                 this.isConnected = false;
                 console.log("logoff");
-            },
-            customEmit: function (data) {
-                console.log('this method was fired by the socket server. Data:', data);
+                this.socketMessages = [];
             },
             // Fired when the server sends something on the "messageChannel" channel.
             messageChannel(data) {
-                this.socketMessage = data;
+                this.socketMessages.push(data);
                 console.log("Message received:", data, "!");
             }
         },
@@ -58,7 +63,7 @@
             },
             logOff() {
                 this.$socket.ondisconnect();
-                this.socketMessage = null;
+                this.socketMessage = [];
             }
         }
     }
diff --git a/client/src/components/HelloWorld.vue b/client/src/components/HelloWorld.vue
index 6860020..5800f27 100644
--- a/client/src/components/HelloWorld.vue
+++ b/client/src/components/HelloWorld.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="hello">
-        <h1>{{ msg }}</h1>
+        <h1>Salut {{ this.printName() }} !</h1>
     </div>
 </template>
 
@@ -8,7 +8,14 @@
     export default {
         name: "HelloWorld",
         props: {
-            msg: String
+            name: String
+        },
+        methods: {
+            printName() {
+                let name = this.$store.name;
+                console.log("Saying hello to ", name);
+                return name
+            }
         }
     };
 </script>
--
libgit2 0.27.0