update it

webui/src/components/Base/Logout.js

@@ -74,48 +74,40 @@ const NoButton = Button.extend`
   }
 `;
 
+const propTypes = {
+  visible: PropTypes.bool, 
+  onHide: PropTypes.func, 
+  onLogout: PropTypes.func,
+};
 
-class Logout extends Component {
+const Logout = ({ visible, onHide, onLogout }) => (
+  <Modal 
+    visible={visible} 
+    onHide={onHide} 
+    width="300px"
+    transitionEnter={`${transitions.slideDown} .5s ease-in-out`}
+    transitionLeave={`${transitions.slideUp} .5s ease-in-out`}
+    transitionEnterTimeout="500"
+    transitionLeaveTimeout="500">
+    <TitleWrapper>
+      Logout
+    </TitleWrapper>
+    <ContentWrapper>
+      Are you sure you want to logout?
+    </ContentWrapper>
+    <ButtonWrapper>
+      <YesButton
+        onClick={onLogout}>
+        Yes
+      </YesButton>
+      <NoButton 
+        onClick={onHide}>
+        No
+      </NoButton>
+    </ButtonWrapper>
+  </Modal>
+)
 
-  static propTypes = { 
-    visible: PropTypes.bool, 
-    onHide: PropTypes.func, 
-    onLogout: PropTypes.func,
-  }
-
-  render() {
-    const { 
-      visible,
-      onHide,
-      onLogout,
-    } = this.props;
-
-    return (
-      <Modal 
-        visible={visible} 
-        onHide={onHide} 
-        width="300px"
-        transitionEnter={`${transitions.slideDown} .5s ease-in-out`}
-        transitionLeave={`${transitions.slideUp} .5s ease-in-out`}>
-        <TitleWrapper>
-          Logout
-        </TitleWrapper>
-        <ContentWrapper>
-          Are you sure you want to logout?
-        </ContentWrapper>
-        <ButtonWrapper>
-          <YesButton
-            onClick={onLogout}>
-            Yes
-          </YesButton>
-          <NoButton 
-            onClick={onHide}>
-            No
-          </NoButton>
-        </ButtonWrapper>
-      </Modal>
-    );
-  }
-}
+Logout.PropTypes = propTypes;
 
 export default Logout;

webui/src/components/Shared/Modal.js

@@ -37,14 +37,18 @@ class Modal extends Component {
     width: PropTypes.string,
     zindex: PropTypes.string,
     transitionEnter: PropTypes.string,
-    transitionLeave: PropTypes.string
+    transitionLeave: PropTypes.string,
+    transitionEnterTimeout: PropTypes.string,
+    transitionLeaveTimeout: PropTypes.string
   }
 
   static defaultProps = {
     width: '400px',
     zindex: '10',
-    transitionEnter: `${transitions.stretchOut} .3s ease-in`,
-    transitionLeave: `${transitions.shrinkIn} .3s ease-in`
+    transitionEnter: `${transitions.stretchOut} .25s ease-in`,
+    transitionLeave: `${transitions.shrinkIn} .25s ease-in`,
+    transitionEnterTimeout: '300',
+    transitionLeaveTimeout: '150'
   }
 
   handleClickOutside = (e) => {
@@ -79,7 +83,9 @@ class Modal extends Component {
       width, 
       zindex,
       transitionEnter,
-      transitionLeave 
+      transitionLeave,
+      transitionEnterTimeout,
+      transitionLeaveTimeout
     } = this.props;
 
     return (
@@ -90,8 +96,8 @@ class Modal extends Component {
         transitionLeave={transitionLeave}>
         <CSSTransitionGroup
           transitionName="modal"
-          transitionEnterTimeout={500}
-          transitionLeaveTimeout={500}>
+          transitionEnterTimeout={transitionEnterTimeout}
+          transitionLeaveTimeout={transitionLeaveTimeout}>
           {
             visible && (<div>{children}</div>)
           }

webui/src/components/Subscriber/Form.js

@@ -5,11 +5,10 @@ import styled from 'styled-components';
 import oc from 'open-color';
 import { media } from 'helpers/style-utils';
 
-import EditIcon from 'react-icons/lib/md/edit';
-import DeleteIcon from 'react-icons/lib/md/delete';
-
 import SchemaForm from 'react-jsonschema-form';
 
+import { Modal } from 'components';
+
 const schema = {
   title: "Todo",
   type: "object",
@@ -31,13 +30,24 @@ const Wrapper = styled.div`
   background: white;
 `
 
-const Editor = () => (
-  <Wrapper>
+const propTypes = {
+  visible: PropTypes.bool, 
+  onHide: PropTypes.func, 
+  onSubmit: PropTypes.func,
+};
+
+const Form = ({ visible, onHide, onSubmit }) => (
+  <Modal 
+    visible={visible} 
+    onHide={onHide} 
+    width="300px">
     <SchemaForm schema={schema}
         onChange={log("changed")}
         onSubmit={log("submitted")}
         onError={log("errors")} />
-  </Wrapper>
+  </Modal>
 )
 
-export default Editor;
+Form.PropTypes = propTypes;
+
+export default Form;

webui/src/components/Subscriber/index.js

@@ -1,10 +1,9 @@
 import List from './List';
 import Search from './Search';
-import Editor from './Editor';
+import Form from './Form';
 
 export {
   List,
   Search,
-  Editor
-
+  Form
 };

webui/src/containers/HeaderContainer.js

@@ -12,16 +12,16 @@ import { Header, Logout, Dimmed } from 'components';
 
 class HeaderContainer extends Component {
   state = {
-    modal: {
+    logout: {
       visible: false,
       dimmed: false
     }
-  }
+  };
 
-  modalHandler = {
+  logoutHandler = {
     show: () => {
       this.setState({
-        modal: {
+        logout: {
           visible: true,
           dimmed: true
         }
@@ -29,7 +29,7 @@ class HeaderContainer extends Component {
     },
     hide: () => {
       this.setState({
-        modal: {
+        logout: {
           visible: false,
           dimmed: false
         }
@@ -37,7 +37,7 @@ class HeaderContainer extends Component {
     },
     logout: async () => {
       this.setState({
-        modal: {
+        logout: {
           visible: false,
         }
       })
@@ -48,7 +48,7 @@ class HeaderContainer extends Component {
       // @FIXME next/router not working reliably  so using window.location
       window.location = '/'
     }
-  }
+  };
 
   handleSidebarToggle = () => {
     const { UIActions } = this.props;
@@ -58,24 +58,24 @@ class HeaderContainer extends Component {
   render() {
     const {
       handleSidebarToggle,
-      modalHandler
+      logoutHandler
     } = this;
 
     const {
-      modal
+      logout
     } = this.state;
 
     return (
       <div>
         <Header 
           onSidebarToggle={handleSidebarToggle}
-          onLogoutRequest={modalHandler.show}
+          onLogoutRequest={logoutHandler.show}
         />
         <Logout 
-          visible={modal.visible}
-          onHide={modalHandler.hide}
-          onLogout={modalHandler.logout} />
-        <Dimmed visible={modal.dimmed} />
+          visible={logout.visible}
+          onHide={logoutHandler.hide}
+          onLogout={logoutHandler.logout} />
+        <Dimmed visible={logout.dimmed} />
       </div>
     )
   }

webui/src/containers/SubscriberContainer.js

@@ -9,11 +9,22 @@ import styled from 'styled-components';
 import oc from 'open-color';
 import { media } from 'helpers/style-utils';
 
-import { Layout, Subscriber, Spinner, FloatingButton, Blank } from 'components';
+import { 
+  Layout, 
+  Subscriber, 
+  Spinner, 
+  FloatingButton, 
+  Blank,
+  Dimmed
+} from 'components';
 
 class SubscriberContainer extends Component {
   state = {
-    search: ''
+    search: '',
+    form: {
+      visible: false,
+      dimmed: false
+    }
   };
 
   componentWillMount() {
@@ -44,7 +55,30 @@ class SubscriberContainer extends Component {
     });
   }
 
-  handleAdd = (e) => {
+  formHandler = {
+    show: () => {
+      this.setState({
+        form: {
+          visible: true,
+          dimmed: true
+        }
+      })
+    },
+    hide: () => {
+      this.setState({
+        form: {
+          visible: false,
+          dimmed: false
+        }
+      })
+    },
+    submit: async () => {
+      this.setState({
+        form: {
+          visible: false,
+        }
+      })
+    }
   }
 
   handleShow = (imsi) => {
@@ -60,14 +94,15 @@ class SubscriberContainer extends Component {
     const {
       handleSearchChange,
       handleSearchClear,
-      handleAdd,
+      formHandler,
       handleShow,
       handleEdit,
       handleDelete
     } = this;
 
     const { 
-      search
+      search,
+      form
     } = this.state;
 
     const { 
@@ -101,9 +136,15 @@ class SubscriberContainer extends Component {
           visible={!isLoading && !length}
           title="ADD A SUBSCRIBER"
           body="You have no subscribers... yet!"
-          onTitle={handleAdd}
+          onTitle={formHandler.show}
           />
-        <FloatingButton onClick={handleAdd}/>
+        <FloatingButton onClick={formHandler.show}/>
+        <Subscriber.Form 
+          visible={form.visible} 
+          width="400px"
+          onHide={formHandler.hide}
+          onSubmit={formHandler.submit} />
+        <Dimmed visible={form.dimmed} />
       </Layout.Content>
     )
   }