CollectionNew scene

frontend/components/Layout/Layout.js

@@ -13,11 +13,12 @@ import DropdownMenu, { MenuItem } from 'components/DropdownMenu';
 import { LoadingIndicatorBar } from 'components/LoadingIndicator';
 import Scrollable from 'components/Scrollable';
 import Avatar from 'components/Avatar';
+import Modal from 'components/Modal';
+import CollectionNew from 'scenes/CollectionNew';
 
 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';
@@ -39,6 +40,8 @@ type Props = {
 
 @observer class Layout extends React.Component {
   props: Props;
+  state: { createCollectionModalOpen: boolean };
+  state = { createCollectionModalOpen: false };
 
   static defaultProps = {
     search: true,
@@ -60,8 +63,12 @@ type Props = {
     this.props.auth.logout(() => this.props.history.push('/'));
   };
 
-  createNewCollection = () => {
-    this.props.ui.openModal('NewCollection');
+  handleCreateCollection = () => {
+    this.setState({ createCollectionModalOpen: true });
+  };
+
+  handleCloseModal = () => {
+    this.setState({ createCollectionModalOpen: false });
   };
 
   render() {
@@ -78,12 +85,6 @@ 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 />}
 
@@ -122,7 +123,7 @@ type Props = {
                     <SidebarLink to="/dashboard">Home</SidebarLink>
                     <SidebarLink to="/starred">Starred</SidebarLink>
                   </LinkSection>
-                  <a onClick={this.createNewCollection}>
+                  <a onClick={this.handleCreateCollection}>
                     Create new collection
                   </a>
                   <LinkSection>
@@ -142,6 +143,12 @@ type Props = {
             {this.props.children}
           </Content>
         </Flex>
+        <Modal
+          isOpen={this.state.createCollectionModalOpen}
+          onRequestClose={this.handleCloseModal}
+        >
+          <CollectionNew />
+        </Modal>
       </Container>
     );
   }

frontend/components/Layout/components/Modals.js

@@ -1,24 +0,0 @@
-// @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/Modal/Modal.js

@@ -0,0 +1,36 @@
+// @flow
+import React, { Component } from 'react';
+import styled from 'styled-components';
+import ReactModal from 'react-modal';
+
+class Modal extends Component {
+  render() {
+    const {
+      children,
+      title = 'Untitled Modal',
+      onRequestClose,
+      ...rest
+    } = this.props;
+
+    return (
+      <ReactModal
+        contentLabel={title}
+        onRequestClose={onRequestClose}
+        {...rest}
+      >
+        <Header>
+          <button onClick={onRequestClose}>Close</button>
+          {title}
+        </Header>
+        {children}
+      </ReactModal>
+    );
+  }
+}
+
+const Header = styled.div`
+  text-align: center;
+  font-weight: semibold;
+`;
+
+export default Modal;

frontend/components/Modal/index.js

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

frontend/components/modals.js

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