refactor: Remove centralized Modal management (#1444)

* refactor: Finally remove centralized Modals component

* chore: Cleanup related unused methods in UiStore

app/menus/CollectionMenu.js

@@ -7,8 +7,10 @@ import DocumentsStore from "stores/DocumentsStore";
 import PoliciesStore from "stores/PoliciesStore";
 import UiStore from "stores/UiStore";
 import Collection from "models/Collection";
+import CollectionDelete from "scenes/CollectionDelete";
+import CollectionEdit from "scenes/CollectionEdit";
+import CollectionExport from "scenes/CollectionExport";
 import CollectionMembers from "scenes/CollectionMembers";
-
 import { DropdownMenu, DropdownMenuItem } from "components/DropdownMenu";
 import Modal from "components/Modal";
 import VisuallyHidden from "components/VisuallyHidden";
@@ -30,7 +32,10 @@ type Props = {
 @observer
 class CollectionMenu extends React.Component<Props> {
   file: ?HTMLInputElement;
-  @observable membersModalOpen: boolean = false;
+  @observable showCollectionMembers = false;
+  @observable showCollectionEdit = false;
+  @observable showCollectionDelete = false;
+  @observable showCollectionExport = false;
 
   onNewDocument = (ev: SyntheticEvent<>) => {
     ev.preventDefault();
@@ -61,31 +66,40 @@ class CollectionMenu extends React.Component<Props> {
     }
   };
 
-  onEdit = (ev: SyntheticEvent<>) => {
+  handleEditCollectionOpen = (ev: SyntheticEvent<>) => {
     ev.preventDefault();
-    const { collection } = this.props;
-    this.props.ui.setActiveModal("collection-edit", { collection });
+    this.showCollectionEdit = true;
   };
 
-  onDelete = (ev: SyntheticEvent<>) => {
-    ev.preventDefault();
-    const { collection } = this.props;
-    this.props.ui.setActiveModal("collection-delete", { collection });
+  handleEditCollectionClose = () => {
+    this.showCollectionEdit = false;
   };
 
-  onExport = (ev: SyntheticEvent<>) => {
+  handleDeleteCollectionOpen = (ev: SyntheticEvent<>) => {
     ev.preventDefault();
-    const { collection } = this.props;
-    this.props.ui.setActiveModal("collection-export", { collection });
+    this.showCollectionDelete = true;
   };
 
-  onPermissions = (ev: SyntheticEvent<>) => {
+  handleDeleteCollectionClose = () => {
+    this.showCollectionDelete = false;
+  };
+
+  handleExportCollectionOpen = (ev: SyntheticEvent<>) => {
     ev.preventDefault();
-    this.membersModalOpen = true;
+    this.showCollectionExport = true;
+  };
+
+  handleExportCollectionClose = () => {
+    this.showCollectionExport = false;
+  };
+
+  handleMembersModalOpen = (ev: SyntheticEvent<>) => {
+    ev.preventDefault();
+    this.showCollectionMembers = true;
   };
 
   handleMembersModalClose = () => {
-    this.membersModalOpen = false;
+    this.showCollectionMembers = false;
   };
 
   render() {
@@ -107,12 +121,12 @@ class CollectionMenu extends React.Component<Props> {
         <Modal
           title="Collection permissions"
           onRequestClose={this.handleMembersModalClose}
-          isOpen={this.membersModalOpen}
+          isOpen={this.showCollectionMembers}
         >
           <CollectionMembers
             collection={collection}
             onSubmit={this.handleMembersModalClose}
-            onEdit={this.onEdit}
+            handleEditCollectionOpen={this.handleEditCollectionOpen}
           />
         </Modal>
         <DropdownMenu onOpen={onOpen} onClose={onClose} position={position}>
@@ -130,24 +144,58 @@ class CollectionMenu extends React.Component<Props> {
               )}
               {can.update && <hr />}
               {can.update && (
-                <DropdownMenuItem onClick={this.onEdit}>Edit…</DropdownMenuItem>
+                <DropdownMenuItem onClick={this.handleEditCollectionOpen}>
+                  Edit…
+                </DropdownMenuItem>
               )}
               {can.update && (
-                <DropdownMenuItem onClick={this.onPermissions}>
+                <DropdownMenuItem onClick={this.handleMembersModalOpen}>
                   Permissions…
                 </DropdownMenuItem>
               )}
               {can.export && (
-                <DropdownMenuItem onClick={this.onExport}>
+                <DropdownMenuItem onClick={this.handleExportCollectionOpen}>
                   Export…
                 </DropdownMenuItem>
               )}
             </>
           )}
           {can.delete && (
-            <DropdownMenuItem onClick={this.onDelete}>Delete…</DropdownMenuItem>
+            <DropdownMenuItem onClick={this.handleDeleteCollectionOpen}>
+              Delete…
+            </DropdownMenuItem>
           )}
         </DropdownMenu>
+        <Modal
+          title="Edit collection"
+          isOpen={this.showCollectionEdit}
+          onRequestClose={this.handleEditCollectionClose}
+        >
+          <CollectionEdit
+            onSubmit={this.handleEditCollectionClose}
+            collection={collection}
+          />
+        </Modal>
+        <Modal
+          title="Delete collection"
+          isOpen={this.showCollectionDelete}
+          onRequestClose={this.handleDeleteCollectionClose}
+        >
+          <CollectionDelete
+            onSubmit={this.handleDeleteCollectionClose}
+            collection={collection}
+          />
+        </Modal>
+        <Modal
+          title="Export collection"
+          isOpen={this.showCollectionExport}
+          onRequestClose={this.handleExportCollectionClose}
+        >
+          <CollectionExport
+            onSubmit={this.handleExportCollectionClose}
+            collection={collection}
+          />
+        </Modal>
       </>
     );
   }