Merge pull request #468 from smiclea/improve-notifications

Improve notification popups

src/components/organisms/Notifications/Notifications.jsx

@@ -31,10 +31,13 @@ injectGlobal`
 
 const Wrapper = styled.div``
 
+const MAX_NOTIFICATIONS = 3
+
 @observer
 class Notifications extends React.Component<{}> {
   notificationSystem: NotificationSystem
   notificationsCount = 0
+  activeNotifications: any[] = []
 
   componentDidMount() {
     observe(notificationStore.alerts, change => {
@@ -55,6 +58,15 @@ class Notifications extends React.Component<{}> {
       position: 'br',
       autoDismiss: lastNotification.message.length < 150 ? 10 : 30,
       action: lastNotification.options ? lastNotification.options.action : null,
+      onAdd: notification => {
+        this.activeNotifications.push(notification)
+        for (let i = 0; i < this.activeNotifications.length - MAX_NOTIFICATIONS; i += 1) {
+          this.notificationSystem.removeNotification(this.activeNotifications[i].uid)
+        }
+      },
+      onRemove: notification => {
+        this.activeNotifications = this.activeNotifications.filter(n => n.uid !== notification.uid)
+      },
     })
 
     this.notificationsCount = alerts.length

src/stores/NotificationStore.js

@@ -27,13 +27,15 @@ class NotificationStore {
   visibleErrors: string[] = []
 
   @action alert(message: string, level?: $PropertyType<AlertInfo, 'level'>, options?: $PropertyType<AlertInfo, 'options'>) {
-    if (!this.visibleErrors.find(e => e === message)) {
-      this.alerts.push({ message, level, options })
+    if (this.visibleErrors.find(e => e === message)) {
+      return
+    }
+
+    this.alerts.push({ message, level, options })
 
-      if (level === 'error') {
-        this.visibleErrors.push(message)
-        setTimeout(() => { this.visibleErrors = this.visibleErrors.filter(e => e !== message) }, 10000)
-      }
+    if (level === 'error') {
+      this.visibleErrors.push(message)
+      setTimeout(() => { this.visibleErrors = this.visibleErrors.filter(e => e !== message) }, 10000)
     }
   }
 

src/utils/ApiCaller.js

@@ -67,6 +67,16 @@ const redirect = (statusCode: number) => {
   window.location.href = `/login${currentPath}`
 }
 
+const truncateUrl = (url: string): string => {
+  const MAX_LENGTH = 100
+  let relativePath = url.replace(/http(s)?:\/\/.*?\//, '/')
+  relativePath += relativePath
+  if (relativePath.length > MAX_LENGTH) {
+    relativePath = `${relativePath.substr(0, MAX_LENGTH)}...`
+  }
+  return relativePath
+}
+
 class ApiCaller {
   constructor() {
     axios.defaults.headers.common['Content-Type'] = 'application/json'
@@ -142,7 +152,7 @@ class ApiCaller {
             !options.quietError) {
             let data = error.response.data
             let message = (data && data.error && data.error.message) || (data && data.description)
-            message = message || `${error.response.statusText || error.response.status} ${options.url}`
+            message = message || `${error.response.statusText || error.response.status} ${truncateUrl(options.url)}`
             if (message) {
               notificationStore.alert(message, 'error')
             }
@@ -164,7 +174,8 @@ class ApiCaller {
           // The request was made but no response was received
           // `error.request` is an instance of XMLHttpRequest
           if (!isOnLoginPage() && !options.quietError) {
-            notificationStore.alert(`Request failed, there might be a problem with the connection to the server. ${options.url}`, 'error')
+            notificationStore.alert(`Request failed, there might be a problem with the connection to the server.
+              ${truncateUrl(options.url)}`, 'error')
           }
           logger.log({
             url: axiosOptions.url,
@@ -196,7 +207,8 @@ class ApiCaller {
             description: 'Something happened in setting up the request',
             requestStatus: 500,
           })
-          notificationStore.alert(`Request failed, there might be a problem with the connection to the server. ${options.url}`, 'error')
+          notificationStore.alert(`Request failed, there might be a problem with the connection to the server.
+            ${options.url}`, 'error')
         }
       })
     })