[skip ci] code review

app/assets/javascripts/sidebar/components/assignees/assignees.js

@@ -90,7 +90,7 @@ export default {
             class="avatar avatar-inline s24"
             :alt="assigneeAlt(user)"
             :src="user.avatar_url"
-          >
+          />
           <span class="author">{{user.name}}</span>
         </button>
         <button
@@ -128,7 +128,7 @@ export default {
               class="avatar avatar-inline s32"
               :alt="assigneeAlt(users[0])"
               :src="users[0].avatar_url"
-            >
+            />
             <span class="author">{{users[0].name}}</span>
             <span class="username">@{{users[0].username}}</span>
           </a>

app/assets/javascripts/sidebar/components/assignees/sidebar_assignees.js

 import AssigneeTitle from './assignee_title';
 import Assignees from './assignees';
 
-import store from '../../stores/sidebar_store';
-import mediator from '../../sidebar_mediator';
+import Store from '../../stores/sidebar_store';
+import Mediator from '../../sidebar_mediator';
 
 import eventHub from '../../event_hub';
 
@@ -10,7 +10,8 @@ export default {
   name: 'SidebarAssignees',
   data() {
     return {
-      store,
+      mediator: new Mediator(),
+      store: new Store(),
       loading: false,
       field: '',
     };
@@ -29,12 +30,12 @@ export default {
       // Notify gl dropdown that we are now assigning to current user
       this.$el.parentElement.dispatchEvent(new Event('assignYourself'));
 
-      mediator.assignYourself();
+      this.mediator.assignYourself();
       this.saveUsers();
     },
     saveUsers() {
       this.loading = true;
-      mediator.saveSelectedUsers(this.field).then(() => this.loading = false);
+      this.mediator.saveSelectedUsers(this.field).then(() => this.loading = false);
     }
   },
   created() {

app/assets/javascripts/sidebar/components/time_tracking/sidebar_time_tracking.js

@@ -3,13 +3,14 @@ import '~/smart_interval';
 import timeTracker from './time_tracker';
 import eventHub from '../../event_hub';
 
-import store from '../../stores/sidebar_store';
-import mediator from '../../sidebar_mediator';
+import Store from '../../stores/sidebar_store';
+import Mediator from '../../sidebar_mediator';
 
 export default {
   data() {
     return {
-      store,
+      mediator: new Mediator(),
+      store: new Store(),
     };
   },
   components: {
@@ -23,7 +24,7 @@ export default {
           ? Object.keys(data.commands_changes)
           : [];
         if (changedCommands && _.intersection(subscribedCommands, changedCommands).length) {
-          mediator.fetch();
+          this.mediator.fetch();
         }
       });
     },

app/assets/javascripts/sidebar/sidebar_bundle.js

@@ -2,10 +2,10 @@ import Vue from 'vue';
 import sidebarTimeTracking from './components/time_tracking/sidebar_time_tracking';
 import sidebarAssignees from './components/assignees/sidebar_assignees';
 
-import mediator from './sidebar_mediator';
+import Mediator from './sidebar_mediator';
 
 document.addEventListener('DOMContentLoaded', () => {
-  mediator.init(gl.sidebarOptions);
+  const mediator = new Mediator(gl.sidebarOptions);
   mediator.fetch();
 
   new Vue(sidebarAssignees).$mount('#js-vue-sidebar-assignees');

app/assets/javascripts/sidebar/sidebar_mediator.js

 import Service from './services/sidebar_service';
-import store from './stores/sidebar_store';
+import Store from './stores/sidebar_store';
+
+export default class SidebarMediator {
+  constructor(options) {
+    if (!SidebarMediator.singleton) {
+      this.store = new Store(options);
+      this.service = new Service(options.endpoint);
+      SidebarMediator.singleton = this;
+    }
+
+    return SidebarMediator.singleton;
+  }
 
-export default {
-  init(options) {
-    store.init(options);
-    this.service = new Service(options.endpoint);
-  },
   assignYourself(field) {
-    store.addUserId(store.currentUserId);
-  },
+    this.store.addUserId(store.currentUserId);
+  }
+
   saveSelectedUsers(field) {
     return new Promise((resolve, reject) => {
-      const selected = store.selectedUserIds;
+      const selected = this.store.selectedUserIds;
 
       // If there are no ids, that means we have to unassign (which is id = 0)
       // And it only accepts an array, hence [0]
       this.service.update(field, selected.length === 0 ? [0] : selected)
         .then((response) => {
-          store.processUserData(response.data);
+          const data = response.json();
+          this.store.processUserData(data);
           resolve();
         })
         .catch(() => {
@@ -25,14 +33,15 @@ export default {
           return new Flash('Error occurred when saving users');
         });
     });
-  },
+  }
+
   fetch() {
     return new Promise((resolve, reject) => {
       this.service.get()
         .then((response) => {
-          this.fetching = false;
-          store.processUserData(response.data);
-          store.processTimeTrackingData(response.data);
+          const data = response.json();
+          this.store.processUserData(data);
+          this.store.processTimeTrackingData(data);
           return resolve();
         })
         .catch(() => {
@@ -40,5 +49,5 @@ export default {
           return new Flash('Error occured when fetching sidebar data');
         });
     });
-  },
+  }
 }

app/assets/javascripts/sidebar/stores/sidebar_store.js

-export default {
-  timeEstimate: 0,
-  totalTimeSpent: 0,
-  humanTimeEstimate: '',
-  humanTimeSpent: '',
-  selectedUserIds: [],
-  renderedUsers: [],
-
-  init(store) {
-    const { currentUserId, rootPath, editable } = store;
-    this.currentUserId = currentUserId;
-    this.rootPath = rootPath;
-    this.editable = editable;
-  },
+export default class SidebarStore {
+  constructor(store) {
+    if (!SidebarStore.singleton) {
+      const { currentUserId, rootPath, editable } = store;
+      this.currentUserId = currentUserId;
+      this.rootPath = rootPath;
+      this.editable = editable;
+      this.timeEstimate = 0;
+      this.totalTimeSpent = 0;
+      this.humanTimeEstimate = '';
+      this.humanTimeSpent = '';
+      this.selectedUserIds = [];
+      this.renderedUsers = [];
+
+      SidebarStore.singleton = this;
+    }
+
+    return SidebarStore.singleton;
+  }
 
   processUserData(data) {
     this.renderedUsers = data.assignees;
 
     this.removeAllUserIds();
     this.renderedUsers.map(u => this.addUserId(u.id));
-  },
+  }
+
   processTimeTrackingData(data) {
     this.timeEstimate = data.time_estimate;
     this.totalTimeSpent = data.total_time_spent;
     this.humanTimeEstimate = data.human_time_estimate;
     this.humanTimeSpent = data.human_time_spent;
-  },
+  }
 
   addUserId(id) {
     // Prevent duplicate user id's from being added
     if (this.selectedUserIds.indexOf(id) === -1) {
       this.selectedUserIds.push(id);
     }
-  },
+  }
+
   removeUserId(id) {
     this.selectedUserIds = this.selectedUserIds.filter(uid => uid !== id);
-  },
+  }
+
   removeAllUserIds() {
     this.selectedUserIds = [];
   }

app/assets/javascripts/users_select.js

@@ -2,7 +2,6 @@
 /* global Issuable */
 /* global ListUser */
 
-import Vue from 'vue';
 import eventHub from './sidebar/event_hub';
 
 (function() {