refactor: Remove centralized Modal management (#1444)

* refactor: Finally remove centralized Modals component

* chore: Cleanup related unused methods in UiStore

app/components/Layout.js

@@ -19,7 +19,6 @@ import Flex from "components/Flex";
 
 import { LoadingIndicatorBar } from "components/LoadingIndicator";
 import Modal from "components/Modal";
-import Modals from "components/Modals";
 import Sidebar from "components/Sidebar";
 import SettingsSidebar from "components/Sidebar/Settings";
 import {
@@ -127,7 +126,6 @@ class Layout extends React.Component<Props> {
             />
           </Switch>
         </Container>
-        <Modals ui={ui} />
         <Modal
           isOpen={this.keyboardShortcutsOpen}
           onRequestClose={this.handleCloseKeyboardShortcuts}

app/components/Modals.js

@@ -1,58 +0,0 @@
-// @flow
-import { observer } from "mobx-react";
-import * as React from "react";
-import UiStore from "stores/UiStore";
-import CollectionDelete from "scenes/CollectionDelete";
-import CollectionEdit from "scenes/CollectionEdit";
-import CollectionExport from "scenes/CollectionExport";
-import CollectionNew from "scenes/CollectionNew";
-import DocumentShare from "scenes/DocumentShare";
-import BaseModal from "components/Modal";
-
-type Props = {
-  ui: UiStore,
-};
-@observer
-class Modals extends React.Component<Props> {
-  handleClose = () => {
-    this.props.ui.clearActiveModal();
-  };
-
-  render() {
-    const { activeModalName, activeModalProps } = this.props.ui;
-
-    const Modal = ({ name, children, ...rest }) => {
-      return (
-        <BaseModal
-          isOpen={activeModalName === name}
-          onRequestClose={this.handleClose}
-          {...rest}
-        >
-          {React.cloneElement(children, activeModalProps)}
-        </BaseModal>
-      );
-    };
-
-    return (
-      <span>
-        <Modal name="collection-new" title="Create a collection">
-          <CollectionNew onSubmit={this.handleClose} />
-        </Modal>
-        <Modal name="collection-edit" title="Edit collection">
-          <CollectionEdit onSubmit={this.handleClose} />
-        </Modal>
-        <Modal name="collection-delete" title="Delete collection">
-          <CollectionDelete onSubmit={this.handleClose} />
-        </Modal>
-        <Modal name="collection-export" title="Export collection">
-          <CollectionExport onSubmit={this.handleClose} />
-        </Modal>
-        <Modal name="document-share" title="Share document">
-          <DocumentShare onSubmit={this.handleClose} />
-        </Modal>
-      </span>
-    );
-  }
-}
-
-export default Modals;

app/components/Sidebar/Main.js

@@ -17,7 +17,7 @@ import styled from "styled-components";
 import AuthStore from "stores/AuthStore";
 import DocumentsStore from "stores/DocumentsStore";
 import PoliciesStore from "stores/PoliciesStore";
-import UiStore from "stores/UiStore";
+import CollectionNew from "scenes/CollectionNew";
 import Invite from "scenes/Invite";
 import Flex from "components/Flex";
 import Modal from "components/Modal";
@@ -34,21 +34,25 @@ type Props = {
   auth: AuthStore,
   documents: DocumentsStore,
   policies: PoliciesStore,
-  ui: UiStore,
 };
 
 @observer
 class MainSidebar extends React.Component<Props> {
-  @observable inviteModalOpen: boolean = false;
+  @observable inviteModalOpen = false;
+  @observable createCollectionModalOpen = false;
 
   componentDidMount() {
     this.props.documents.fetchDrafts();
     this.props.documents.fetchTemplates();
   }
 
-  handleCreateCollection = (ev: SyntheticEvent<>) => {
+  handleCreateCollectionModalOpen = (ev: SyntheticEvent<>) => {
     ev.preventDefault();
-    this.props.ui.setActiveModal("collection-new");
+    this.createCollectionModalOpen = true;
+  };
+
+  handleCreateCollectionModalClose = (ev: SyntheticEvent<>) => {
+    this.createCollectionModalOpen = false;
   };
 
   handleInviteModalOpen = (ev: SyntheticEvent<>) => {
@@ -134,7 +138,9 @@ class MainSidebar extends React.Component<Props> {
               />
             </Section>
             <Section>
-              <Collections onCreateCollection={this.handleCreateCollection} />
+              <Collections
+                onCreateCollection={this.handleCreateCollectionModalOpen}
+              />
             </Section>
             <Section>
               <SidebarLink
@@ -175,6 +181,13 @@ class MainSidebar extends React.Component<Props> {
         >
           <Invite onSubmit={this.handleInviteModalClose} />
         </Modal>
+        <Modal
+          title="Create a collection"
+          onRequestClose={this.handleCreateCollectionModalClose}
+          isOpen={this.createCollectionModalOpen}
+        >
+          <CollectionNew onSubmit={this.handleCreateCollectionModalClose} />
+        </Modal>
       </Sidebar>
     );
   }
@@ -184,4 +197,4 @@ const Drafts = styled(Flex)`
   height: 24px;
 `;
 
-export default inject("documents", "policies", "auth", "ui")(MainSidebar);
+export default inject("documents", "policies", "auth")(MainSidebar);

app/components/Toasts/components/Toast.js

@@ -3,7 +3,7 @@ import { darken } from "polished";
 import * as React from "react";
 import styled from "styled-components";
 import { fadeAndScaleIn } from "shared/styles/animations";
-import type { Toast as TToast } from "../../../types";
+import type { Toast as TToast } from "types";
 
 type Props = {
   onRequestClose: () => void,