Makes close/reopen issue request to inside the vue app

4 files changed, 46 insertions, 0 deletions

diff --git a/app/assets/javascripts/notes/stores/actions.js b/app/assets/javascripts/notes/stores/actions.js
index 085b18642ba..1877d5bf959 100644
--- a/app/assets/javascripts/notes/stores/actions.js
+++ b/app/assets/javascripts/notes/stores/actions.js
@@ -61,6 +61,39 @@ export const createNewNote = ({ commit }, { endpoint, data }) => service
 export const removePlaceholderNotes = ({ commit }) =>
   commit(types.REMOVE_PLACEHOLDER_NOTES);
 
+export const closeIssue = ({ commit, dispatch, state }) => service
+  .toggleIssueState(state.notesData.closeIssuePath)
+  .then(res => res.json())
+  .then((data) => {
+    commit(types.CLOSE_ISSUE);
+    dispatch('emitStateChangedEvent', data);
+  });
+
+export const reopenIssue = ({ commit, dispatch, state }) => service
+  .toggleIssueState(state.notesData.reopenIssuePath)
+  .then(res => res.json())
+  .then((data) => {
+    commit(types.REOPEN_ISSUE);
+    dispatch('emitStateChangedEvent', data);
+  });
+
+export const emitStateChangedEvent = ({ commit }, data) => {
+  const event = new CustomEvent('issuable_vue_app:change', { detail: {
+    data,
+    isClosed: data.state === constants.CLOSED,
+  } });
+
+  document.dispatchEvent(event);
+};
+
+export const toggleIssueLocalState = ({ commit }, newState) => {
+  if (newState === constants.CLOSED) {
+    commit(types.CLOSE_ISSUE);
+  } else if (newState === constants.REOPENED) {
+    commit(types.REOPEN_ISSUE);
+  }
+};
+
 export const saveNote = ({ commit, dispatch }, noteData) => {
   const { note } = noteData.data.note;
   let placeholderText = note;
diff --git a/app/assets/javascripts/notes/stores/getters.js b/app/assets/javascripts/notes/stores/getters.js
index e18b277119e..38b48c3bbe4 100644
--- a/app/assets/javascripts/notes/stores/getters.js
+++ b/app/assets/javascripts/notes/stores/getters.js
@@ -8,6 +8,7 @@ export const getNotesDataByProp = state => prop => state.notesData[prop];
 
 export const getNoteableData = state => state.noteableData;
 export const getNoteableDataByProp = state => prop => state.noteableData[prop];
+export const getIssueState = state => state.noteableData.state;
 
 export const getUserData = state => state.userData || {};
 export const getUserDataByProp = state => prop => state.userData && state.userData[prop];
diff --git a/app/assets/javascripts/notes/stores/mutation_types.js b/app/assets/javascripts/notes/stores/mutation_types.js
index d520c197407..6d7c3bbae0f 100644
--- a/app/assets/javascripts/notes/stores/mutation_types.js
+++ b/app/assets/javascripts/notes/stores/mutation_types.js
@@ -12,3 +12,7 @@ export const SHOW_PLACEHOLDER_NOTE = 'SHOW_PLACEHOLDER_NOTE';
 export const TOGGLE_AWARD = 'TOGGLE_AWARD';
 export const TOGGLE_DISCUSSION = 'TOGGLE_DISCUSSION';
 export const UPDATE_NOTE = 'UPDATE_NOTE';
+
+// Issue
+export const CLOSE_ISSUE = 'CLOSE_ISSUE';
+export const REOPEN_ISSUE = 'REOPEN_ISSUE';
diff --git a/app/assets/javascripts/notes/stores/mutations.js b/app/assets/javascripts/notes/stores/mutations.js
index 20f81a430c2..b3f66578c9a 100644
--- a/app/assets/javascripts/notes/stores/mutations.js
+++ b/app/assets/javascripts/notes/stores/mutations.js
@@ -152,4 +152,12 @@ export default {
       noteObj.notes.splice(noteObj.notes.indexOf(comment), 1, note);
     }
   },
+
+  [types.CLOSE_ISSUE](state) {
+    Object.assign(state.noteableData, { state: constants.CLOSED });
+  },
+
+  [types.REOPEN_ISSUE](state) {
+    Object.assign(state.noteableData, { state: constants.REOPENED });
+  },
 };