Split modals, document delete

frontend/components/Layout/Layout.js

@@ -75,11 +75,11 @@ type Props = {
   }
 
   handleCreateCollection = () => {
-    this.props.ui.setActiveModal('create-collection');
+    this.props.ui.setActiveModal('collection-new');
   };
 
   handleEditCollection = () => {
-    this.props.ui.setActiveModal('edit-collection');
+    this.props.ui.setActiveModal('collection-edit');
   };
 
   render() {

frontend/components/Layout/components/Modals.js

@@ -5,6 +5,8 @@ import Modal from 'components/Modal';
 import UiStore from 'stores/UiStore';
 import CollectionNew from 'scenes/CollectionNew';
 import CollectionEdit from 'scenes/CollectionEdit';
+import CollectionDelete from 'scenes/CollectionDelete';
+import DocumentDelete from 'scenes/DocumentDelete';
 import KeyboardShortcuts from 'scenes/KeyboardShortcuts';
 import Settings from 'scenes/Settings';
 
@@ -23,19 +25,33 @@ import Settings from 'scenes/Settings';
     return (
       <span>
         <Modal
-          isOpen={activeModalName === 'create-collection'}
+          isOpen={activeModalName === 'collection-new'}
           onRequestClose={this.handleClose}
           title="Create a collection"
         >
           <CollectionNew onSubmit={this.handleClose} {...activeModalProps} />
         </Modal>
         <Modal
-          isOpen={activeModalName === 'edit-collection'}
+          isOpen={activeModalName === 'collection-edit'}
           onRequestClose={this.handleClose}
           title="Edit collection"
         >
           <CollectionEdit onSubmit={this.handleClose} {...activeModalProps} />
         </Modal>
+        <Modal
+          isOpen={activeModalName === 'collection-delete'}
+          onRequestClose={this.handleClose}
+          title="Delete collection"
+        >
+          <CollectionDelete onSubmit={this.handleClose} {...activeModalProps} />
+        </Modal>
+        <Modal
+          isOpen={activeModalName === 'document-delete'}
+          onRequestClose={this.handleClose}
+          title="Delete document"
+        >
+          <DocumentDelete onSubmit={this.handleClose} {...activeModalProps} />
+        </Modal>
         <Modal
           isOpen={activeModalName === 'keyboard-shortcuts'}
           onRequestClose={this.handleClose}

frontend/menus/CollectionMenu.js

@@ -17,12 +17,12 @@ import { DropdownMenu, DropdownMenuItem } from 'components/DropdownMenu';
 
   onEdit = () => {
     const { collection } = this.props;
-    this.props.ui.setActiveModal('edit-collection', { collection });
+    this.props.ui.setActiveModal('collection-edit', { collection });
   };
 
   onDelete = () => {
     const { collection } = this.props;
-    this.props.ui.setActiveModal('delete-collection', { collection });
+    this.props.ui.setActiveModal('collection-delete', { collection });
   };
 
   render() {

frontend/menus/DocumentMenu.js

@@ -25,7 +25,7 @@ import { DropdownMenu, DropdownMenuItem } from 'components/DropdownMenu';
 
   onDelete = () => {
     const { document } = this.props;
-    this.props.ui.setActiveModal('delete-document', { document });
+    this.props.ui.setActiveModal('document-delete', { document });
   };
 
   onExport = () => {

frontend/scenes/CollectionDelete/CollectionDelete.js

@@ -0,0 +1,60 @@
+// @flow
+import React, { Component } from 'react';
+import { observable } from 'mobx';
+import { observer } from 'mobx-react';
+import { homeUrl } from 'utils/routeHelpers';
+import Button from 'components/Button';
+import Flex from 'components/Flex';
+import HelpText from 'components/HelpText';
+import Collection from 'models/Collection';
+import CollectionsStore from 'stores/CollectionsStore';
+
+type Props = {
+  history: Object,
+  collection: Collection,
+  collections: CollectionsStore,
+  onSubmit: () => void,
+};
+
+@observer class CollectionDelete extends Component {
+  props: Props;
+  @observable isDeleting: boolean;
+
+  handleSubmit = async (ev: SyntheticEvent) => {
+    ev.preventDefault();
+    this.isDeleting = true;
+    const success = await this.props.collection.delete();
+
+    if (success) {
+      this.props.collections.remove(this.props.collection.id);
+      this.props.history.push(homeUrl());
+      this.props.onSubmit();
+    }
+
+    this.isDeleting = false;
+  };
+
+  render() {
+    const { collection } = this.props;
+
+    return (
+      <Flex column>
+        <form onSubmit={this.handleSubmit}>
+          <HelpText>
+            Are you sure? Deleting the
+            {' '}
+            <strong>{collection.name}</strong>
+            {' '}
+            collection is permanant and will also delete all of the documents within
+            it, so be careful with that.
+          </HelpText>
+          <Button type="submit" danger>
+            {this.isDeleting ? 'Deleting…' : 'Delete'}
+          </Button>
+        </form>
+      </Flex>
+    );
+  }
+}
+
+export default CollectionDelete;

frontend/scenes/CollectionDelete/index.js

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

frontend/scenes/CollectionEdit/CollectionEdit.js

@@ -2,7 +2,6 @@
 import React, { Component } from 'react';
 import { observable } from 'mobx';
 import { observer } from 'mobx-react';
-import { homeUrl } from 'utils/routeHelpers';
 import Button from 'components/Button';
 import Input from 'components/Input';
 import Flex from 'components/Flex';
@@ -20,8 +19,6 @@ type Props = {
 @observer class CollectionEdit extends Component {
   props: Props;
   @observable name: string;
-  @observable isConfirming: boolean;
-  @observable isDeleting: boolean;
   @observable isSaving: boolean;
 
   componentWillMount() {
@@ -46,34 +43,12 @@ type Props = {
     this.name = ev.target.value;
   };
 
-  confirmDelete = () => {
-    this.isConfirming = true;
-  };
-
-  cancelDelete = () => {
-    this.isConfirming = false;
-  };
-
-  confirmedDelete = async (ev: SyntheticEvent) => {
-    ev.preventDefault();
-    this.isDeleting = true;
-    const success = await this.props.collection.delete();
-
-    if (success) {
-      this.props.collections.remove(this.props.collection.id);
-      this.props.history.push(homeUrl());
-      this.props.onSubmit();
-    }
-
-    this.isDeleting = false;
-  };
-
   render() {
     return (
       <Flex column>
         <form onSubmit={this.handleSubmit}>
           <HelpText>
-            You can edit a collection name at any time, but doing so might
+            You can edit a collections name at any time, however doing so might
             confuse your team mates.
           </HelpText>
           <Input
@@ -91,26 +66,6 @@ type Props = {
             {this.isSaving ? 'Saving…' : 'Save'}
           </Button>
         </form>
-        <hr />
-        <form>
-          <HelpText>
-            Deleting a collection will also delete all of the documents within
-            it, so be careful with that.
-          </HelpText>
-          {!this.isConfirming &&
-            <Button type="submit" onClick={this.confirmDelete} neutral>
-              Delete…
-            </Button>}
-          {this.isConfirming &&
-            <span>
-              <Button type="submit" onClick={this.cancelDelete} neutral>
-                Cancel
-              </Button>
-              <Button type="submit" onClick={this.confirmedDelete} danger>
-                {this.isDeleting ? 'Deleting…' : 'Confirm Delete'}
-              </Button>
-            </span>}
-        </form>
       </Flex>
     );
   }

frontend/scenes/DocumentDelete/DocumentDelete.js

@@ -0,0 +1,59 @@
+// @flow
+import React, { Component } from 'react';
+import { observable } from 'mobx';
+import { observer } from 'mobx-react';
+import { homeUrl } from 'utils/routeHelpers';
+import Button from 'components/Button';
+import Flex from 'components/Flex';
+import HelpText from 'components/HelpText';
+import Document from 'models/Document';
+import DocumentsStore from 'stores/DocumentsStore';
+
+type Props = {
+  history: Object,
+  document: Document,
+  documents: DocumentsStore,
+  onSubmit: () => void,
+};
+
+@observer class DocumentDelete extends Component {
+  props: Props;
+  @observable isDeleting: boolean;
+
+  handleSubmit = async (ev: SyntheticEvent) => {
+    ev.preventDefault();
+    this.isDeleting = true;
+    const success = await this.props.document.delete();
+
+    if (success) {
+      this.props.documents.remove(this.props.document.id);
+      this.props.history.push(homeUrl());
+      this.props.onSubmit();
+    }
+
+    this.isDeleting = false;
+  };
+
+  render() {
+    const { document } = this.props;
+
+    return (
+      <Flex column>
+        <form onSubmit={this.handleSubmit}>
+          <HelpText>
+            Are you sure? Deleting the
+            {' '}
+            <strong>{document.title}</strong>
+            {' '}
+            document is permanant and will also delete all of its history.
+          </HelpText>
+          <Button type="submit" danger>
+            {this.isDeleting ? 'Deleting…' : 'Delete'}
+          </Button>
+        </form>
+      </Flex>
+    );
+  }
+}
+
+export default DocumentDelete;

frontend/scenes/DocumentDelete/index.js

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