Render MR Notes with Vue with behind a cookie

1 files changed, 41 insertions, 0 deletions

diff --git a/app/assets/javascripts/mr_notes/index.js b/app/assets/javascripts/mr_notes/index.js
new file mode 100644
index 00000000000..f4cba998fa7
--- /dev/null
+++ b/app/assets/javascripts/mr_notes/index.js
@@ -0,0 +1,41 @@
+import Vue from 'vue';
+import notesApp from '../notes/components/notes_app.vue';
+import discussionCounter from '../notes/components/discussion_counter.vue';
+import store from '../notes/stores';
+
+document.addEventListener('DOMContentLoaded', () => {
+  new Vue({ // eslint-disable-line
+    el: '#js-vue-mr-discussions',
+    components: {
+      notesApp,
+    },
+    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),
+      };
+    },
+    render(createElement) {
+      return createElement('notes-app', {
+        props: {
+          noteableData: this.noteableData,
+          notesData: this.notesData,
+          userData: this.currentUserData,
+        },
+      });
+    },
+  });
+
+  new Vue({ // eslint-disable-line
+    el: '#js-vue-discussion-counter',
+    components: {
+      discussionCounter,
+    },
+    store,
+    render(createElement) {
+      return createElement('discussion-counter');
+    },
+  });
+});