MR Diffs Refactor Part 07: Modulize notes._mr-refactor-part-7

9 files changed, 85 insertions, 10 deletions

diff --git a/app/assets/javascripts/mr_notes/index.js b/app/assets/javascripts/mr_notes/index.js
index 096c4ef5f31..d690e9ccd50 100644
--- a/app/assets/javascripts/mr_notes/index.js
+++ b/app/assets/javascripts/mr_notes/index.js
@@ -1,30 +1,66 @@
 import Vue from 'vue';
+import Vuex, { mapActions, mapGetters } from 'vuex';
 import notesApp from '../notes/components/notes_app.vue';
+import diffsApp from '../diffs/components/app.vue';
 import discussionCounter from '../notes/components/discussion_counter.vue';
-import store from '../notes/stores';
+import notesStoreConfig from '../notes/stores';
+import diffsStoreConfig from '../diffs/store';
+import mrPageStoreConfig from './stores';
+import MergeRequest from '../merge_request';
+
+Vue.use(Vuex);
+
+const store = new Vuex.Store({
+  modules: {
+    page: mrPageStoreConfig,
+    notes: notesStoreConfig,
+  },
+});
 
 export default function initMrNotes() {
+  const mrShowNode = document.querySelector('.merge-request');
+  window.mergeRequest = new MergeRequest({
+    action: mrShowNode.dataset.mrAction,
+  });
+
   // eslint-disable-next-line no-new
   new Vue({
     el: '#js-vue-mr-discussions',
+    name: 'MergeRequestDiscussions',
     components: {
       notesApp,
     },
+    store,
     data() {
       const notesDataset = document.getElementById('js-vue-mr-discussions')
         .dataset;
+
       return {
         noteableData: JSON.parse(notesDataset.noteableData),
         currentUserData: JSON.parse(notesDataset.currentUserData),
         notesData: JSON.parse(notesDataset.notesData),
       };
     },
+    computed: {
+      ...mapGetters(['activeTab']),
+    },
+    mounted() {
+      this.setActiveTab(window.mrTabs.getCurrentAction());
+
+      window.mrTabs.eventHub.$on('MergeRequestTabChange', tab => {
+        this.setActiveTab(tab);
+      });
+    },
+    methods: {
+      ...mapActions(['setActiveTab']),
+    },
     render(createElement) {
       return createElement('notes-app', {
         props: {
           noteableData: this.noteableData,
           notesData: this.notesData,
           userData: this.currentUserData,
+          shouldShow: this.activeTab === 'show',
         },
       });
     },
@@ -33,6 +69,7 @@ export default function initMrNotes() {
   // eslint-disable-next-line no-new
   new Vue({
     el: '#js-vue-discussion-counter',
+    name: 'DiscussionCounter',
     components: {
       discussionCounter,
     },
diff --git a/app/assets/javascripts/mr_notes/stores/actions.js b/app/assets/javascripts/mr_notes/stores/actions.js
new file mode 100644
index 00000000000..426c6a00d5e
--- /dev/null
+++ b/app/assets/javascripts/mr_notes/stores/actions.js
@@ -0,0 +1,7 @@
+import types from './mutation_types';
+
+export default {
+  setActiveTab({ commit }, tab) {
+    commit(types.SET_ACTIVE_TAB, tab);
+  },
+};
diff --git a/app/assets/javascripts/mr_notes/stores/getters.js b/app/assets/javascripts/mr_notes/stores/getters.js
new file mode 100644
index 00000000000..c68a84ce7af
--- /dev/null
+++ b/app/assets/javascripts/mr_notes/stores/getters.js
@@ -0,0 +1,5 @@
+export default {
+  activeTab(state) {
+    return state.activeTab;
+  },
+};
diff --git a/app/assets/javascripts/mr_notes/stores/index.js b/app/assets/javascripts/mr_notes/stores/index.js
new file mode 100644
index 00000000000..3284bc08c70
--- /dev/null
+++ b/app/assets/javascripts/mr_notes/stores/index.js
@@ -0,0 +1,12 @@
+import actions from './actions';
+import getters from './getters';
+import mutations from './mutations';
+
+export default {
+  state: {
+    activeTab: null,
+  },
+  actions,
+  getters,
+  mutations,
+};
diff --git a/app/assets/javascripts/mr_notes/stores/mutation_types.js b/app/assets/javascripts/mr_notes/stores/mutation_types.js
new file mode 100644
index 00000000000..105104361cf
--- /dev/null
+++ b/app/assets/javascripts/mr_notes/stores/mutation_types.js
@@ -0,0 +1,3 @@
+export default {
+  SET_ACTIVE_TAB: 'SET_ACTIVE_TAB',
+};
diff --git a/app/assets/javascripts/mr_notes/stores/mutations.js b/app/assets/javascripts/mr_notes/stores/mutations.js
new file mode 100644
index 00000000000..8175aa9488f
--- /dev/null
+++ b/app/assets/javascripts/mr_notes/stores/mutations.js
@@ -0,0 +1,7 @@
+import types from './mutation_types';
+
+export default {
+  [types.SET_ACTIVE_TAB](state, tab) {
+    Object.assign(state, { activeTab: tab });
+  },
+};
diff --git a/app/assets/javascripts/notes/components/notes_app.vue b/app/assets/javascripts/notes/components/notes_app.vue
index a90c6d6381d..ee2c6e99ed9 100644
--- a/app/assets/javascripts/notes/components/notes_app.vue
+++ b/app/assets/javascripts/notes/components/notes_app.vue
@@ -3,7 +3,6 @@ import $ from 'jquery';
 import { mapGetters, mapActions } from 'vuex';
 import { getLocationHash } from '../../lib/utils/url_utility';
 import Flash from '../../flash';
-import store from '../stores/';
 import * as constants from '../constants';
 import noteableNote from './noteable_note.vue';
 import noteableDiscussion from './noteable_discussion.vue';
@@ -40,7 +39,6 @@ export default {
       default: () => ({}),
     },
   },
-  store,
   data() {
     return {
       isLoading: true,
diff --git a/app/assets/javascripts/notes/index.js b/app/assets/javascripts/notes/index.js
index f90775d0157..66897e6a0db 100644
--- a/app/assets/javascripts/notes/index.js
+++ b/app/assets/javascripts/notes/index.js
@@ -1,5 +1,15 @@
 import Vue from 'vue';
+import Vuex from 'vuex';
 import notesApp from './components/notes_app.vue';
+import storeConfig from './stores';
+
+Vue.use(Vuex);
+
+const store = new Vuex.Store({
+  modules: {
+    notes: storeConfig,
+  },
+});
 
 document.addEventListener(
   'DOMContentLoaded',
@@ -9,11 +19,11 @@ document.addEventListener(
       components: {
         notesApp,
       },
+      store,
       data() {
         const notesDataset = document.getElementById('js-vue-notes').dataset;
         const parsedUserData = JSON.parse(notesDataset.currentUserData);
         let currentUserData = {};
-
         if (parsedUserData) {
           currentUserData = {
             id: parsedUserData.id,
diff --git a/app/assets/javascripts/notes/stores/index.js b/app/assets/javascripts/notes/stores/index.js
index 9ed19bf171e..f9805bc4d1e 100644
--- a/app/assets/javascripts/notes/stores/index.js
+++ b/app/assets/javascripts/notes/stores/index.js
@@ -1,12 +1,8 @@
-import Vue from 'vue';
-import Vuex from 'vuex';
 import * as actions from './actions';
 import * as getters from './getters';
 import mutations from './mutations';
 
-Vue.use(Vuex);
-
-export default new Vuex.Store({
+export default {
   state: {
     notes: [],
     targetNoteHash: null,
@@ -23,4 +19,4 @@ export default new Vuex.Store({
   actions,
   getters,
   mutations,
-});
+};