Modals architecture

frontend/components/Layout/Layout.js

@@ -17,6 +17,7 @@ import Avatar from 'components/Avatar';
 import SidebarCollection from './components/SidebarCollection';
 import SidebarCollectionList from './components/SidebarCollectionList';
 import SidebarLink from './components/SidebarLink';
+import Modals from './components/Modals';
 
 import UserStore from 'stores/UserStore';
 import AuthStore from 'stores/AuthStore';
@@ -59,6 +60,10 @@ type Props = {
     this.props.auth.logout(() => this.props.history.push('/'));
   };
 
+  createNewCollection = () => {
+    this.props.ui.openModal('NewCollection');
+  };
+
   render() {
     const { user, auth, ui } = this.props;
 
@@ -73,6 +78,12 @@ type Props = {
             },
           ]}
         />
+        <Modals
+          name={this.props.ui.modalName}
+          component={this.props.ui.modalComponent}
+          onRequestClose={this.props.ui.closeModal}
+          {...this.props.ui.modalProps}
+        />
 
         {this.props.ui.progressBarVisible && <LoadingIndicatorBar />}
 
@@ -111,6 +122,9 @@ type Props = {
                     <SidebarLink to="/dashboard">Home</SidebarLink>
                     <SidebarLink to="/starred">Starred</SidebarLink>
                   </LinkSection>
+                  <a onClick={this.createNewCollection}>
+                    Create new collection
+                  </a>
                   <LinkSection>
                     {ui.activeCollection
                       ? <SidebarCollection

frontend/components/Layout/components/Modals.js

@@ -0,0 +1,24 @@
+// @flow
+import React, { Component } from 'react';
+import Modal from 'react-modal';
+
+class Modals extends Component {
+  render() {
+    const { name, component, onRequestClose, ...rest } = this.props;
+    const isOpen = !!component;
+    const ModalComponent = component;
+
+    return (
+      <Modal
+        isOpen={isOpen}
+        contentLabel={name}
+        onRequestClose={onRequestClose}
+      >
+        <button onClick={onRequestClose}>Close</button>
+        {isOpen && <ModalComponent {...rest} />}
+      </Modal>
+    );
+  }
+}
+
+export default Modals;

frontend/components/NewCollection/NewCollection.js

@@ -0,0 +1,6 @@
+// @flow
+import React from 'react';
+
+const NewCollection = () => <span>NEW COLLECTION</span>;
+
+export default NewCollection;

frontend/components/NewCollection/index.js

@@ -0,0 +1,3 @@
+// @flow
+import NewCollection from './NewCollection';
+export default NewCollection;

frontend/components/modals.js

@@ -0,0 +1,5 @@
+// @flow
+// All components wishing to be used as modals must be defined below
+import NewCollection from './NewCollection';
+
+export default { NewCollection };