webpack hot reload support

ui/components/autocomplete/DomainSelectAutoComplete.js

@@ -16,7 +16,7 @@ function renderItem(domain) {
   return tpl`
     <div class="media">
       <div class="media__left medium">
-        <img class="small domain-profile-avatar" src="${domain.gravatar_url}" width="30" height="30">
+        <img class="small domain-profile-avatar" src="${domain.gravatar}" width="30" height="30">
       </div>
       <div class="media__body medium">
         <div class="domain-select__name">${domain.name}</div>

ui/components/autocomplete/UserSelectAutoComplete.js

@@ -16,7 +16,7 @@ function renderItem(user) {
   return tpl`
     <div class="media">
       <div class="media__left medium">
-        <img class="small user-profile-avatar" src="${user.gravatar_url}" width="30" height="30">
+        <img class="small user-profile-avatar" src="${user.gravatar}" width="30" height="30">
       </div>
       <div class="media__body medium">
         <div class="user-select__uname">${user.uname}</div>

ui/components/notification/index.js

@@ -22,7 +22,7 @@ export default class Notification {
       .appendTo('body');
     this.$n.width(); // force reflow
     this.$n.removeClass('hide');
-    this.autoHideTimer = setTimeout(this.hide.bind(this), duration);
+    if (duration) this.autoHideTimer = setTimeout(this.hide.bind(this), duration);
   }
 
   handleClick() {

ui/components/scratchpad/index.js

@@ -64,6 +64,7 @@ export default class ScratchpadContainer extends React.PureComponent {
   handleChangeSize(uiElement, size) {
     this.props.changeUiSize(uiElement, size);
     $('#scratchpad').trigger('vjScratchpadRelayout');
+    this.props.ui.pretest.visible = !!this.props.ui.pretest.visible;
     this.forceUpdate();
   }
 

ui/components/socket/index.js

@@ -1,19 +1,23 @@
 import SockJS from 'sockjs-client';
-import Notification from 'vj/components/notification';
+import Notification from 'vj/components/notification/index';
 import i18n from 'vj/utils/i18n';
 
 export default class Sock {
   constructor(url) {
     this.url = url;
-    this.reconnect = false;
+    this.isreconnect = false;
     this.init();
+    this.notification = null;
   }
 
   init() {
     this.sock = new SockJS(this.url);
     this.sock.onopen = () => {
-      if (this.reconnect) Notification.info(i18n('Reconnected to the server.'));
-      if (this.onopen) this.onopen(this.reconnect);
+      if (this.isreconnect) {
+        this.notification.hide();
+        Notification.info(i18n('Reconnected to the server.'));
+      }
+      if (this.onopen) this.onopen(this.isreconnect);
     };
     this.sock.onclose = (code, reason) => {
       console.warn('Connection closed, ', code, reason);
@@ -21,12 +25,29 @@ export default class Sock {
         if (this.onclose) this.onclose(code, reason);
         return;
       }
-      Notification.warn(i18n('Disconnected from the server. Reconnecting...'));
-      this.reconnect = setTimeout(() => { this.init(); }, 3000);
+      if (!this.closed) {
+        if (!this.notification) {
+          this.notification = new Notification({
+            message: i18n('Disconnected from the server. Reconnecting...'),
+            type: 'warn',
+            duration: 0,
+            action: this.init.bind(this),
+          });
+          console.log(this.notification);
+        }
+        this.isreconnect = setTimeout(() => { this.init(); }, 3000);
+      } else {
+        if (this.notification) this.notification.hide();
+        Notification.warn(i18n('Disconnected from the server.'));
+      }
       if (this.onclose) this.onclose(code, reason);
     };
     this.sock.onmessage = (message) => {
       if (process.env.NODE_ENV !== 'production') console.log('Sock.onmessage: ', message);
+      const msg = JSON.parse(message);
+      if (msg.error === 'PermissionError' || msg.error === 'PrivilegeError') {
+        this.closed = true;
+      }
       if (this.onmessage) this.onmessage(message);
     };
   }