From d6316fc3284efeb987f89eecc7463372ad37f32e Mon Sep 17 00:00:00 2001
From: Ramon Wenger <donramonloco+github@gmail.com>
Date: Tue, 11 Sep 2018 15:09:55 +0200
Subject: [PATCH] Update module query after mutation

---
 client/src/components/ContentBlock.vue        |  1 -
 .../src/components/NewContentBlockWizard.vue  | 85 ++++++++++++-------
 client/src/pages/module.vue                   | 41 ++++++---
 client/src/store/index.js                     | 34 +++-----
 4 files changed, 92 insertions(+), 69 deletions(-)

diff --git a/client/src/components/ContentBlock.vue b/client/src/components/ContentBlock.vue
index 82b520de..7e495072 100644
--- a/client/src/components/ContentBlock.vue
+++ b/client/src/components/ContentBlock.vue
@@ -7,7 +7,6 @@
         <eye-icon class="content-block__visibility-icon"></eye-icon>
       </div>
 
-
       <h4 class="content-block__title">{{contentBlock.title}}</h4>
       <h4>{{contentBlock.id}}</h4>
 
diff --git a/client/src/components/NewContentBlockWizard.vue b/client/src/components/NewContentBlockWizard.vue
index 8ae12283..260d169c 100644
--- a/client/src/components/NewContentBlockWizard.vue
+++ b/client/src/components/NewContentBlockWizard.vue
@@ -43,6 +43,8 @@
   import TextForm from '@/components/content-forms/TextForm';
   import TrashIcon from '@/components/icons/TrashIcon';
 
+  import NEW_CONTENT_BLOCK_MUTATION from '@/graphql/gql/mutations/addContentBlock.gql';
+
   export default {
     components: {
       Modal,
@@ -120,9 +122,26 @@
         this.$store.dispatch('hideModal');
       },
       saveContentBlock() {
-        this.$store.dispatch('saveContentBlock', {
-          title: this.title,
-          contents: this.elements
+        this.$apollo.mutate({
+          mutation: NEW_CONTENT_BLOCK_MUTATION,
+          variables: {
+            input: {
+              contentBlock: {
+                title: this.title,
+                contents: [
+                  {
+                    type: 'text_block',
+                    text: 'Oh hai'
+                  }
+                ]
+              },
+              after: 'Q29udGVudEJsb2NrTm9kZToxOQ=='
+            }
+          },
+          update: () => {
+            this.$store.dispatch('updateContentBlocks');
+            this.$store.dispatch('hideModal');
+          }
         });
       }
     },
@@ -131,36 +150,36 @@
       return {
         title: '',
         elements: [
-          {
-            type: 'image'
-          },
-          {
-            type: 'video',
-            url: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ'
-          },
-          {
-            type: 'video',
-            url: 'https://vimeo.com/267384185'
-          },
-          {
-            type: 'link'
-          },
-          {
-            type: 'text'
-          },
-          {
-            type: 'video'
-          },
-          {
-            type: 'document'
-          },
-          {
-            type: 'exercise'
-          },
-          {
-            type: 'image'
-          },
-          {}
+          // {
+          //   type: 'image'
+          // },
+          // {
+          //   type: 'video',
+          //   url: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ'
+          // },
+          // {
+          //   type: 'video',
+          //   url: 'https://vimeo.com/267384185'
+          // },
+          // {
+          //   type: 'link'
+          // },
+          // {
+          //   type: 'text'
+          // },
+          // {
+          //   type: 'video'
+          // },
+          // {
+          //   type: 'document'
+          // },
+          // {
+          //   type: 'exercise'
+          // },
+          // {
+          //   type: 'image'
+          // },
+          // {}
         ]
       }
     }
diff --git a/client/src/pages/module.vue b/client/src/pages/module.vue
index e3615d11..f08df367 100644
--- a/client/src/pages/module.vue
+++ b/client/src/pages/module.vue
@@ -6,6 +6,8 @@
 </template>
 
 <script>
+  import store from '@/store/index';
+
   import MODULE_DETAILS_QUERY from '@/graphql/gql/moduleDetailsQuery.gql';
 
   import Module from '@/components/modules/Module.vue';
@@ -18,22 +20,39 @@
     },
 
     apollo: {
-      moduleQuery: {
-        query: MODULE_DETAILS_QUERY,
-        variables: {
-          slug: 'mein-neues-umfeld'
-        },
-        fetchPolicy: 'network-only',
-        manual: true,
-        result({data, loading, networkStatus}) {
-          if (!loading) {
-            const cleanedData = this.$getRidOfEdges(data)
-            this.module = cleanedData.modules[0] || {};
+      moduleQuery() {
+        return {
+          query: MODULE_DETAILS_QUERY,
+          variables: {
+            slug: store.state.moduleSlug
+          },
+          fetchPolicy: 'network-only',
+          manual: true,
+          result({data, loading, networkStatus}) {
+            if (!loading) {
+              const cleanedData = this.$getRidOfEdges(data)
+              this.module = cleanedData.modules[0] || {};
+            }
           }
         }
       }
     },
 
+    created() {
+      this.$store.subscribe((mutation, state) => {
+        if (mutation.type === 'updateContentBlocks' && state.updateContentBlocks) {
+          this.updateQuery();
+        }
+      })
+    },
+
+    methods: {
+      updateQuery() {
+        this.$apollo.queries.moduleQuery.refetch();
+        this.$store.commit('resetUpdateContentBlocksFlag');
+      }
+    },
+
     // TODO: can we do better by defining a type for module?
     data() {
       return {
diff --git a/client/src/store/index.js b/client/src/store/index.js
index 9d0e66a3..8f3b4ff8 100644
--- a/client/src/store/index.js
+++ b/client/src/store/index.js
@@ -1,8 +1,5 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
-import apolloClient from '@/graphql/client'
-
-import NEW_CONTENT_BLOCK_MUTATION from '@/graphql/gql/mutations/addContentBlock.gql';
 
 Vue.use(Vuex)
 
@@ -14,7 +11,8 @@ export default new Vuex.Store({
     showFilter: true,
     showModal: false,
     scrollPosition: 0,
-    newContentBlock: {}
+    moduleSlug: 'mein-neues-umfeld',
+    updateContentBlocks: false
   },
 
   getters: {},
@@ -37,26 +35,11 @@ export default new Vuex.Store({
       document.body.classList.add('no-scroll'); // won't get at the body any other way
       commit('setModal', true);
     },
-    saveContentBlock({commit, dispatch}, payload) {
-      commit('setNewContentBlock', payload);
-      apolloClient.mutate({
-        mutation: NEW_CONTENT_BLOCK_MUTATION,
-        variables: {
-          input: {
-            contentBlock: {
-              title: payload.title,
-              contents: [
-                {
-                  type: 'text_block',
-                  text: 'Oh hai'
-                }
-              ]
-            },
-            after: 'Q29udGVudEJsb2NrTm9kZToxOQ=='
-          }
-        }
-      });
-      dispatch('hideModal');
+    updateContentBlocks({commit, dispatch}) {
+      commit('updateContentBlocks', true);
+    },
+    resetUpdateContentBlocksFlag({commit}) {
+      commit('updateContentBlocks', false);
     }
   },
 
@@ -75,6 +58,9 @@ export default new Vuex.Store({
     },
     setNewContentBlock(state, payload) {
       state.newContentBlock = payload;
+    },
+    updateContentBlocks(state, payload) {
+      state.updateContentBlocks = payload;
     }
   }
 })