Refactor label.js

app/server/static/js/label.js

@@ -1,51 +1,50 @@
-axios.defaults.xsrfCookieName = 'csrftoken';
-axios.defaults.xsrfHeaderName = 'X-CSRFToken';
-var base_url = window.location.href.split('/').slice(3, 5).join('/');
-const HTTP = axios.create({
-    baseURL: `/api/${base_url}/`,
-})
+import Vue from 'vue';
+import HTTP from './http';
 
-var vm = new Vue({
-    el: '#mail-app',
-    delimiters: ['[[', ']]'],
-    data: {
-        labels: [],
-        labelText: '',
-        selectedShortkey: '',
-        backgroundColor: '#209cee',
-        textColor: '#ffffff',
+
+const vm = new Vue({
+  el: '#mail-app',
+  delimiters: ['[[', ']]'],
+  data: {
+    labels: [],
+    labelText: '',
+    selectedShortkey: '',
+    backgroundColor: '#209cee',
+    textColor: '#ffffff',
+  },
+
+  methods: {
+    addLabel() {
+      const payload = {
+        text: this.labelText,
+        shortcut: this.selectedShortkey,
+        background_color: this.backgroundColor,
+        text_color: this.textColor,
+      };
+      HTTP.post('labels/', payload).then((response) => {
+        this.reset();
+        this.labels.push(response.data);
+      });
+    },
+
+    removeLabel(label) {
+      const labelId = label.id;
+      HTTP.delete(`labels/${labelId}`).then((response) => {
+        const index = this.labels.indexOf(label);
+        this.labels.splice(index, 1);
+      });
     },
 
-    methods: {
-        addLabel: function () {
-            var payload = {
-                text: this.labelText,
-                shortcut: this.selectedShortkey,
-                background_color: this.backgroundColor,
-                text_color: this.textColor
-            };
-            HTTP.post('labels/', payload).then(response => {
-                this.reset();
-                this.labels.push(response.data);
-            })
-        },
-        removeLabel: function (label) {
-            var label_id = label.id;
-            HTTP.delete(`labels/${label_id}`).then(response => {
-                var index = this.labels.indexOf(label)
-                this.labels.splice(index, 1)
-            })
-        },
-        reset: function () {
-            this.labelText = '';
-            this.selectedShortkey = '';
-            this.backgroundColor = '#209cee';
-            this.textColor = '#ffffff';
-        }
+    reset() {
+      this.labelText = '';
+      this.selectedShortkey = '';
+      this.backgroundColor = '#209cee';
+      this.textColor = '#ffffff';
     },
-    created: function () {
-        HTTP.get('labels').then(response => {
-            this.labels = response.data
-        })
-    }
-})
+  },
+  created() {
+    HTTP.get('labels').then((response) => {
+      this.labels = response.data;
+    });
+  },
+});

app/server/templates/admin/label.html

@@ -87,5 +87,5 @@
   </div>
 </div>
 {% endblock %} {% block footer %}
-<script type="text/javascript" src="{% static 'js/label.js' %}"></script>
+<script type="text/javascript" src="{% static 'bundle/label.js' %}"></script>
 {% endblock %}

app/server/webpack.config.js

@@ -7,7 +7,8 @@ module.exports = {
         'document_classification': './static/js/document_classification.js',
         'seq2seq': './static/js/seq2seq.js',
         'projects': './static/js/projects.js',
-        'stats': './static/js/stats.js'
+        'stats': './static/js/stats.js',
+        'label': './static/js/label.js'
     },
     output: {
         path: __dirname + '/static/bundle',