1 files changed, 43 insertions, 0 deletions
diff --git a/app/assets/javascripts/emoji/awards_app/index.js b/app/assets/javascripts/emoji/awards_app/index.js
new file mode 100644
index 00000000000..16268910f49
--- /dev/null
+++ b/app/assets/javascripts/emoji/awards_app/index.js
@@ -0,0 +1,43 @@
+import Vue from 'vue';
+import { mapActions, mapState } from 'vuex';
+import { parseBoolean } from '~/lib/utils/common_utils';
+import AwardsList from '~/vue_shared/components/awards_list.vue';
+import createstore from './store';
+
+export default (el) => {
+  const {
+    dataset: { path },
+  } = el;
+  const canAwardEmoji = parseBoolean(el.dataset.canAwardEmoji);
+
+  return new Vue({
+    el,
+    store: createstore(),
+    computed: {
+      ...mapState(['currentUserId', 'canAwardEmoji', 'awards']),
+    },
+    created() {
+      this.setInitialData({ path, currentUserId: window.gon.current_user_id, canAwardEmoji });
+    },
+    mounted() {
+      this.fetchAwards();
+    },
+    methods: {
+      ...mapActions(['setInitialData', 'fetchAwards', 'toggleAward']),
+    },
+    render(createElement) {
+      return createElement(AwardsList, {
+        props: {
+          awards: this.awards,
+          canAwardEmoji: this.canAwardEmoji,
+          currentUserId: this.currentUserId,
+          defaultAwards: ['thumbsup', 'thumbsdown'],
+          selectedClass: 'gl-bg-blue-50! is-active',
+        },
+        on: {
+          award: this.toggleAward,
+        },
+      });
+    },
+  });
+};