From e196197a7cd79db332df58fe55824491acf13fba Mon Sep 17 00:00:00 2001
From: vincent <vincent@ducamps.win>
Date: Mon, 29 Apr 2019 14:46:10 +0200
Subject: [PATCH] implement vueex

---
 README.md                          |  2 -
 client/package-lock.json           |  5 +++
 client/package.json                |  3 +-
 client/src/api/index.js            | 20 ++++++++++
 client/src/components/chainetv.vue | 45 ++++-----------------
 client/src/main.js                 |  2 +
 client/src/store/index.js          | 64 ++++++++++++++++++++++++++++++
 7 files changed, 101 insertions(+), 40 deletions(-)
 delete mode 100644 README.md
 create mode 100644 client/src/api/index.js
 create mode 100644 client/src/store/index.js

diff --git a/README.md b/README.md
deleted file mode 100644
index 6787402..0000000
--- a/README.md
+++ /dev/null
@@ -1,2 +0,0 @@
-# chainetv_web
-
diff --git a/client/package-lock.json b/client/package-lock.json
index c0af77b..e3e8eae 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -11773,6 +11773,11 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "vuex": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.1.0.tgz",
+      "integrity": "sha512-mdHeHT/7u4BncpUZMlxNaIdcN/HIt1GsGG5LKByArvYG/v6DvHcOxvDCts+7SRdCoIRGllK8IMZvQtQXLppDYg=="
+    },
     "watchpack": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz",
diff --git a/client/package.json b/client/package.json
index cd64562..5dd9825 100644
--- a/client/package.json
+++ b/client/package.json
@@ -14,7 +14,8 @@
     "axios": "^0.18.0",
     "bulma": "^0.7.4",
     "vue": "^2.5.2",
-    "vue-router": "^3.0.1"
+    "vue-router": "^3.0.1",
+    "vuex": "^3.1.0"
   },
   "devDependencies": {
     "autoprefixer": "^7.1.2",
diff --git a/client/src/api/index.js b/client/src/api/index.js
new file mode 100644
index 0000000..1793707
--- /dev/null
+++ b/client/src/api/index.js
@@ -0,0 +1,20 @@
+import axios from "axios";
+
+const API_PATH=`${process.env.ROOT_API}/api/v1`;
+
+export function  fetchchaine(num){
+
+    return axios.get(`${API_PATH}/chaine/${num}`)
+}
+
+export function fetchemission(num){
+
+    return  axios.get(`${API_PATH}/chaine/${num}/emission`)
+
+}
+
+export function putparsechaine(){
+    
+    return axios.put(`${API_PATH}/chaine/`);
+
+}
\ No newline at end of file
diff --git a/client/src/components/chainetv.vue b/client/src/components/chainetv.vue
index 37ded3e..72c2b57 100644
--- a/client/src/components/chainetv.vue
+++ b/client/src/components/chainetv.vue
@@ -29,8 +29,8 @@
       </div>
       <div class="section">
         <div class="container">
-          <ul class v-if="arrayresultchaines">
-            <li class="box" v-for="result in arrayresultchaines" v-bind:key="result.chaine">
+          <ul class v-if="this.$store.state.arrayresultchaines">
+            <li class="box" v-for="result in this.$store.state.arrayresultchaines" v-bind:key="result.chaine">
               <h3 class="title is-5">{{result.chaine}} : {{result.name}}</h3>
               <ul v-if="(result.emission!='can\'t find channel' && result.emission)">
                 <li>
@@ -74,63 +74,34 @@
 </template>
 
 <script>
-import axios from "axios";
+import {putparsechaine} from "../api";
 
 export default {
   name: "chainetv",
   data() {
     return {
-      arrayresultchaines: [],
       chaine: ""
     };
   },
   methods: {
-    getchaine(num) {
-      let path = process.env.ROOT_API + "/api/v1/chaine/";
-      axios
-        .get(path + num)
-        .then(res => {
-          if (res.status === 200) {
-            axios
-              .get(path + num + "/emission")
-              .then(res_emission => {
-                this.arrayresultchaines.push({
-                  chaine: num,
-                  name: res.data,
-                  emission: res_emission.data
-                });
-                console.log(this.arrayresultchaines);
-              })
-              .catch(error => {
-                this.arrayresultchaines.push({ chaine: num, name: res.data });
-              });
-          } else if (res.status === 204) {
-            this.arrayresultchaines.push({ chaine: num, name: "inconnue" });
-          }
-        })
-        .catch(error => {
-          // eslint-disable-next-line
-          console.error(error);
-        });
-    },
+
     checkchaine() {
       if (this.chaine === "") {
         alert("rentrer un numéro");
         return;
       }
-      this.arrayresultchaines = [];
+      this.$store.state.arrayresultchaines = [];
       const arraychaine = [...new Set(this.chaine.split(" "))];
 
       arraychaine.forEach(element => {
         if (element != "") {
-          this.getchaine(element);
+          this.$store.dispatch('getchaine',{num:element});
         }
       });
     },
     parsechaine() {
-      const path = process.env.ROOT_API + "/api/v1/chaine/";
-      axios
-        .put(path)
+    
+      return putparsechaine()
         .then(res => {
           if (res.data == "OK") {
             alert("update database OK");
diff --git a/client/src/main.js b/client/src/main.js
index d08884c..a3c43f4 100644
--- a/client/src/main.js
+++ b/client/src/main.js
@@ -3,6 +3,7 @@
 import Vue from 'vue';
 import App from './App';
 import router from './router';
+import store from './store'
 import './../node_modules/bulma/css/bulma.css'
 Vue.config.productionTip = false;
 
@@ -10,6 +11,7 @@ Vue.config.productionTip = false;
 new Vue({
   el: '#app',
   router,
+  store,
   components: { App },
   template: '<App/>',
 });
diff --git a/client/src/store/index.js b/client/src/store/index.js
new file mode 100644
index 0000000..91c76a9
--- /dev/null
+++ b/client/src/store/index.js
@@ -0,0 +1,64 @@
+// src/store/index.js
+
+import Vue from 'vue'  
+import Vuex from 'vuex'
+import axios from "axios";
+import { fetchchaine, fetchemission } from '../api';
+Vue.use(Vuex)
+const state = {  
+  // single source of data
+  arrayresultchaines: [],
+}
+const API_PATH=`${process.env.ROOT_API}/api/v1`;
+const actions = {  
+  // asynchronous operations
+  getchaine(context,{num}) {
+    
+    return fetchchaine(num)
+      .then( res => {
+        if (res.status === 200){
+          context.dispatch('getemission',{chaine:num,name:res.data})
+        }else{
+          context.commit('push_chaine',{chaine:num,name:res.data})
+        }
+     })
+      .catch(error => {
+        // eslint-disable-next-line
+        console.error(error);
+      });
+    },
+  getemission(context,{chaine,name}){
+    return fetchemission (chaine)
+      .then(res_emission => {
+        context.commit('push_chaine',{chaine:chaine,name:name,emission:res_emission.data})
+      })
+      .catch(error => {
+        console.error(error);
+      });
+  },
+
+}
+
+const mutations = {  
+  // isolated data mutations
+  push_chaine(state,payload){
+    if(!payload.name){
+      state.arrayresultchaines.push({ chaine: payload.chaine, name: "inconnue" });
+    }else{
+      state.arrayresultchaines.push({chaine: payload.chaine,name: payload.name,emission: payload.emission});
+    }
+  }
+}
+
+const getters = {  
+  // reusable data accessors
+}
+
+const store = new Vuex.Store({  
+  state,
+  actions,
+  mutations,
+  getters
+})
+
+export default store  
\ No newline at end of file