add notifiation

webui/package.json

@@ -37,7 +37,7 @@
     "react-icons": "^2.2.5",
     "react-immutable-proptypes": "^2.1.0",
     "react-jsonschema-form": "^0.49.0",
-    "react-notification": "^6.7.1",
+    "react-notification-system": "^0.2.14",
     "react-onclickoutside": "^5.11.1",
     "react-redux": "^5.0.5",
     "react-transition-group": "^1.1.3",

webui/src/containers/App.js

@@ -9,6 +9,8 @@ import withWidth, { SMALL } from 'helpers/with-width';
 import { Layout } from 'components';
 import * as Subscriber from 'containers/Subscriber';
 
+import Notifications from './notifications';
+
 class App extends Component {
   static propTypes = {
     session: PropTypes.object.isRequired,
@@ -27,9 +29,14 @@ class App extends Component {
     }
   }
 
+  componentWillReceiveProps(nextProps) {
+    console.log(nextProps);
+  }
+
   render() {
     const {
-      view
+      view,
+      notification
     } = this.props;
 
     if (view === "subscriber") {
@@ -55,6 +62,7 @@ class App extends Component {
         <Layout.Container visible={view === "test3"}>
           <Layout.Content>{view}</Layout.Content>
         </Layout.Container>
+        <Notifications notifications={notification} />
       </Layout>
     )
   }
@@ -64,7 +72,8 @@ const enhance = compose(
   withWidth(),
   connect(
     (state) => ({
-      view: state.ui.sidebar.view
+      view: state.ui.sidebar.view,
+      notification: state.notification
     }),
     (dispatch) => ({
       UIActions: bindActionCreators(uiActions, dispatch)

webui/src/containers/Auth.js

@@ -70,11 +70,19 @@ class Auth extends Component {
     const session = new Session()
     session.signin(username, password)
       .then(() => {
+        NProgress.configure({ 
+          parent: 'body',
+          trickleSpeed: 5
+        });
         NProgress.done();
 
         Router.push('/');
       })
       .catch(err => {
+        NProgress.configure({ 
+          parent: 'body',
+          trickleSpeed: 5
+        });
         NProgress.done();
 
         this.setState({

webui/src/containers/Subscriber/Document.js

@@ -14,6 +14,20 @@ import {
 import { clearActionStatus } from 'modules/crud/actions';
 import { select, selectActionStatus } from 'modules/crud/selectors';
 
+const notificationOpts = {
+  // uid: 'once-please', // you can specify your own uid if required
+  title: 'Hey, it\'s good to see you!',
+  message: 'Now you can see how easy it is to use notifications in React!',
+  position: 'bc',
+  autoDismiss: 2,
+  action: {
+    label: 'Click me!!',
+    callback: () => alert('clicked!')
+  }
+};
+
+import * as Notifications from 'modules/notification/actions'
+
 import { Subscriber } from 'components';
 
 const formData = {
@@ -81,8 +95,13 @@ class Document extends Component {
     }
 
     if (status.response) {
-      NProgress.done();
+      NProgress.configure({ 
+        parent: 'body',
+        trickleSpeed: 5
+      });
+      NProgress.done(true);
 
+      dispatch(Notifications.success(notificationOpts))
       dispatch(clearActionStatus(MODEL, action));
       onHide();
     }

webui/src/containers/notifications.js

@@ -0,0 +1,78 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import * as actions from 'modules/notification/actions';
+import reducer from 'modules/notification/reducer';
+
+import NotifySystem from 'react-notification-system';
+
+class Notifications extends React.Component {
+
+  system() {
+    return this.refs.notify;
+  }
+
+  componentWillReceiveProps(nextProps) {
+    const {notifications} = nextProps;
+    const notificationIds = notifications.map(notification => notification.uid);
+    const systemNotifications = this.system().state.notifications || [];
+
+    console.log(nextProps);
+
+    if (notifications.length > 0) {
+      // Get all active notifications from react-notification-system
+      /// and remove all where uid is not found in the reducer
+      (systemNotifications).forEach(notification => {
+        if (notificationIds.indexOf(notification.uid) < 0) {
+          this.system().removeNotification(notification.uid);
+        }
+      });
+
+      notifications.forEach(notification => {
+        console.log("addnotification")
+        this.system().addNotification({
+          ...notification,
+          onRemove: () => {
+            this.context.store.dispatch(actions.hide(notification.uid));
+            notification.onRemove && notification.onRemove();
+          }
+        });
+      });
+    }
+
+    if ((this.props.notifications !== notifications) && notifications.length === 0) {
+      this.system().clearNotifications();
+    }
+  }
+
+  shouldComponentUpdate(nextProps) {
+    return this.props !== nextProps;
+  }
+
+  render() {
+    const {notifications, ...rest} = this.props;
+
+    console.log("render");
+
+    return (
+      <NotifySystem ref='notify' { ...rest } />
+    );
+  }
+}
+
+Notifications.propTypes = {
+  notifications: PropTypes.array
+};
+
+Notifications.contextTypes = {
+  store: PropTypes.object
+};
+
+// Tie actions to Notifications component instance
+Object.keys(actions).forEach(key => {
+  Notifications[key] = actions[key];
+});
+
+Notifications.reducer = reducer;
+
+module.exports = Notifications;

webui/src/modules/notification/actions.js

@@ -0,0 +1,51 @@
+import {RNS_SHOW_NOTIFICATION, RNS_HIDE_NOTIFICATION, RNS_REMOVE_ALL_NOTIFICATIONS} from './const';
+
+//Example opts
+// {
+//   title: 'Hey, it\'s good to see you!',
+//   message: 'Now you can see how easy it is to use notifications in React!',
+//   position: 'tr',
+//   autoDismiss: 0,
+//   action: {
+//     label: 'Awesome!',
+//     callback: function() {
+//       console.log('Clicked');
+//     }
+//   }
+// }
+
+export function show(opts = {}, level = 'success') {
+  return {
+    type: RNS_SHOW_NOTIFICATION,
+    ...opts,
+    uid: opts.uid || Date.now(),
+    level
+  };
+}
+
+export function success(opts) {
+  return show(opts, 'success');
+}
+
+export function error(opts) {
+  return show(opts, 'error');
+}
+
+export function warning(opts) {
+  return show(opts, 'warning');
+}
+
+export function info(opts) {
+  return show(opts, 'info');
+}
+
+export function hide(uid) {
+  return {
+    type: RNS_HIDE_NOTIFICATION,
+    uid
+  };
+}
+
+export function removeAll() {
+  return { type: RNS_REMOVE_ALL_NOTIFICATIONS };
+}

webui/src/modules/notification/const.js

@@ -0,0 +1,3 @@
+export const RNS_SHOW_NOTIFICATION = 'RNS_SHOW_NOTIFICATION';
+export const RNS_HIDE_NOTIFICATION = 'RNS_HIDE_NOTIFICATION';
+export const RNS_REMOVE_ALL_NOTIFICATIONS = 'RNS_REMOVE_ALL_NOTIFICATIONS';

webui/src/modules/notification/reducer.js

@@ -0,0 +1,19 @@
+import {RNS_SHOW_NOTIFICATION, RNS_HIDE_NOTIFICATION, RNS_REMOVE_ALL_NOTIFICATIONS} from './const';
+
+export default function Notifications(state = [], action = {}) {
+  switch(action.type) {
+    case RNS_SHOW_NOTIFICATION:
+      const { type, ...rest } = action;
+      return [
+        ...state,
+        { ...rest, uid: action.uid}
+      ];
+    case RNS_HIDE_NOTIFICATION:
+      return state.filter(notification => {
+        return notification.uid !== action.uid;
+      });
+    case RNS_REMOVE_ALL_NOTIFICATIONS:
+      return [];
+  }
+  return state;
+}

webui/src/modules/reducers.js

@@ -3,9 +3,11 @@ import { combineReducers } from 'redux';
 import auth from './auth/reducers';
 import crud from './crud/reducers';
 import ui from './ui';
+import notification from './notification/reducer';
 
 export default combineReducers({
   auth,
   crud,
-  ui
+  ui,
+  notification
 });

webui/yarn.lock

@@ -1391,7 +1391,7 @@ create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
-create-react-class@^15.5.3, create-react-class@^15.5.x, create-react-class@^15.6.0:
+create-react-class@^15.5.1, create-react-class@^15.5.3, create-react-class@^15.5.x, create-react-class@^15.6.0:
   version "15.6.0"
   resolved "https://registry.yarnpkg.com/create-react-class/-/create-react-class-15.6.0.tgz#ab448497c26566e1e29413e883207d57cfe7bed4"
   dependencies:
@@ -3471,11 +3471,13 @@ react-jsonschema-form@^0.49.0:
     prop-types "^15.5.8"
     setimmediate "^1.0.5"
 
-react-notification@^6.7.1:
-  version "6.7.1"
-  resolved "https://registry.yarnpkg.com/react-notification/-/react-notification-6.7.1.tgz#fec45cc6d369f4bbf7b4072fe58ddb3bc262c898"
+react-notification-system@^0.2.14:
+  version "0.2.14"
+  resolved "https://registry.yarnpkg.com/react-notification-system/-/react-notification-system-0.2.14.tgz#21f917f39feee145516864350875041433c4d5c0"
   dependencies:
-    prop-types "^15.5.10"
+    create-react-class "^15.5.1"
+    object-assign "^4.0.1"
+    prop-types "^15.5.6"
 
 react-onclickoutside@^5.11.1:
   version "5.11.1"