[skip ci] use vuex to manage state instead of internal propscomment-image-diff

8 files changed, 43 insertions, 45 deletions

diff --git a/app/assets/javascripts/image_diff/components/image_diff_app.vue b/app/assets/javascripts/image_diff/components/image_diff_app.vue
index b1a33954e45..23ba4e88bef 100644
--- a/app/assets/javascripts/image_diff/components/image_diff_app.vue
+++ b/app/assets/javascripts/image_diff/components/image_diff_app.vue
@@ -1,14 +1,18 @@
 <script>
   import { mapGetters, mapActions } from 'vuex';
   import store from '../stores/';
-  import imageDiffProps from './../mixins/image_diff_props';
   import imageReplaced from './image_replaced.vue';
   import imageFrame from './image_frame.vue';
 
   export default {
     name: 'imageDiffApp',
     props: {
-      coordinates: {
+      initialImages: {
+        type: Object,
+        required: true,
+        validator: value => value.added || value.deleted,
+      },
+      initialCoordinates: {
         type: Array,
         required: true,
       },
@@ -18,12 +22,21 @@
       },
     },
     store,
-    mixins: [imageDiffProps],
     components: {
       imageReplaced,
       imageFrame,
     },
     computed: {
+      ...mapGetters([
+        'getCoordinates',
+        'getImages',
+      ]),
+      images() {
+        return this.getImages(this.uid);
+      },
+      coordinates() {
+        return this.getCoordinates(this.uid);
+      },
       isImageReplaced() {
         return this.images.added && this.images.deleted;
       },
@@ -38,9 +51,6 @@
       },
     },
     methods: {
-      // ...mapGetters({
-      //   getImages: 'images',
-      // }),
       ...mapActions({
         addImageDiff: 'addImageDiff',
         actionAddCoordinate: 'addCoordinate',
@@ -50,29 +60,26 @@
         const x = event.offsetX ? (event.offsetX) : event.pageX - container.offsetLeft;
         const y = event.offsetY ? (event.offsetY) : event.pageY - container.offsetTop;
 
+        // TODO: Disable add coordinate when user is not logged in
+
         // TODO: Include cursor image offset into x, y calculation
-        // debugger
+
         // TODO: Do not allow multiple copies of the same coordinate
-        // this.actionAddCoordinate({
-        //   x,
-        //   y,
-        // });
 
         this.actionAddCoordinate({
           imageDiffId: this.uid,
-          x,
-          y,
-        })
+          coordinate: {
+            x,
+            y,
+          },
+        });
       },
     },
     created() {
-      // this.setImages(this.images);
-      // this.setCoordinates(this.coordinates);
-
       this.addImageDiff({
         id: this.uid,
-        images: this.images,
-        coordinates: this.coordinates,
+        images: this.initialImages,
+        coordinates: this.initialCoordinates,
       });
     },
   };
diff --git a/app/assets/javascripts/image_diff/components/image_frame.vue b/app/assets/javascripts/image_diff/components/image_frame.vue
index 83b2e87fbb0..2549cae8c89 100644
--- a/app/assets/javascripts/image_diff/components/image_frame.vue
+++ b/app/assets/javascripts/image_diff/components/image_frame.vue
@@ -49,8 +49,8 @@
       @load="load"
       :src="src"
       :alt="alt"
+      draggable="false"
     />
-    <!-- <slot v-if="imageLoaded" /> -->
     <button
       v-for="(coordinate, index) in coordinates"
       :key="index"
diff --git a/app/assets/javascripts/image_diff/index.js b/app/assets/javascripts/image_diff/index.js
index e0c8b8e3a6b..f250ae47882 100644
--- a/app/assets/javascripts/image_diff/index.js
+++ b/app/assets/javascripts/image_diff/index.js
@@ -11,18 +11,18 @@ document.querySelectorAll('.js-vue-image-diff').forEach(
       const dataset = el.dataset;
 
       return {
-        images: {
+        initialImages: {
           added: dataset.added ? JSON.parse(dataset.added) : null,
           deleted: dataset.deleted ? JSON.parse(dataset.deleted) : null,
         },
-        coordinates: JSON.parse(dataset.coordinates),
+        initialCoordinates: JSON.parse(dataset.coordinates),
       };
     },
     render(createElement) {
       return createElement('image-diff-app', {
         props: {
-          images: this.images,
-          coordinates: this.coordinates,
+          initialImages: this.initialImages,
+          initialCoordinates: this.initialCoordinates,
           uid: index,
         },
       });
diff --git a/app/assets/javascripts/image_diff/stores/actions.js b/app/assets/javascripts/image_diff/stores/actions.js
index 2e7dfdd531d..5a166b41d93 100644
--- a/app/assets/javascripts/image_diff/stores/actions.js
+++ b/app/assets/javascripts/image_diff/stores/actions.js
@@ -1,6 +1,4 @@
 import * as types from './mutation_types';
 
-// export const setImages = ({ commit }, data) => commit(types.SET_IMAGES, data);
-// export const setCoordinates = ({ commit }, data) => commit(types.SET_COORDINATES, data);
 export const addImageDiff = ({ commit }, data) => commit(types.ADD_IMAGE_DIFF, data);
 export const addCoordinate = ({ commit }, data) => commit(types.ADD_COORDINATE, data);
diff --git a/app/assets/javascripts/image_diff/stores/getters.js b/app/assets/javascripts/image_diff/stores/getters.js
index 3571f6779fd..5f28a72a61d 100644
--- a/app/assets/javascripts/image_diff/stores/getters.js
+++ b/app/assets/javascripts/image_diff/stores/getters.js
@@ -1,2 +1,5 @@
-// export const images = state => state.images;
-// export const coordinates = state => state.coordinates;
+export const getCoordinates = state =>
+  imageDiffId => state.imageDiffs[imageDiffId] && state.imageDiffs[imageDiffId].coordinates;
+
+export const getImages = state =>
+  imageDiffId => state.imageDiffs[imageDiffId] && state.imageDiffs[imageDiffId].images;
diff --git a/app/assets/javascripts/image_diff/stores/index.js b/app/assets/javascripts/image_diff/stores/index.js
index 2a127a6dabd..0bb64e0b9e1 100644
--- a/app/assets/javascripts/image_diff/stores/index.js
+++ b/app/assets/javascripts/image_diff/stores/index.js
@@ -8,7 +8,7 @@ Vue.use(Vuex);
 
 export default new Vuex.Store({
   state: {
-    imageDiffs: {},
+    imageDiffs: [],
   },
   actions,
   getters,
diff --git a/app/assets/javascripts/image_diff/stores/mutation_types.js b/app/assets/javascripts/image_diff/stores/mutation_types.js
index a9503c941ee..44acae6d771 100644
--- a/app/assets/javascripts/image_diff/stores/mutation_types.js
+++ b/app/assets/javascripts/image_diff/stores/mutation_types.js
@@ -1 +1,2 @@
 export const ADD_IMAGE_DIFF = 'ADD_IMAGE_DIFF';
+export const ADD_COORDINATE = 'ADD_COORDINATE';
diff --git a/app/assets/javascripts/image_diff/stores/mutations.js b/app/assets/javascripts/image_diff/stores/mutations.js
index 48d1c889e22..aaff4dba1b3 100644
--- a/app/assets/javascripts/image_diff/stores/mutations.js
+++ b/app/assets/javascripts/image_diff/stores/mutations.js
@@ -1,18 +1,7 @@
+import Vue from 'vue';
 import * as types from './mutation_types';
 
 export default {
-  // [types.SET_IMAGES](state, images) {
-  //   Object.assign(state, {
-  //     images,
-  //   });
-  // },
-
-  // [types.SET_COORDINATES](state, coordinates) {
-  //   Object.assign(state, {
-  //     coordinates,
-  //   });
-  // },
-
   [types.ADD_COORDINATE](state, data) {
     const { imageDiffId, coordinate } = data;
 
@@ -22,9 +11,9 @@ export default {
   [types.ADD_IMAGE_DIFF](state, imageDiff) {
     const { id, images, coordinates } = imageDiff;
 
-    state.imageDiffs[id] = {
-      images,
-      coordinates,
-    };
+    Vue.set(state.imageDiffs, id, {
+      images: Object.assign({}, images),
+      coordinates: coordinates.slice(),
+    });
   },
 };