From 0f41a04e49c3a4323308b8b5d99cf3a77d781f97 Mon Sep 17 00:00:00 2001 From: Tom Moor Date: Wed, 12 Aug 2020 10:49:15 -0700 Subject: [PATCH] refactor: Remove centralized Modal management (#1444) * refactor: Finally remove centralized Modals component * chore: Cleanup related unused methods in UiStore --- app/components/Layout.js | 2 - app/components/Modals.js | 58 --------------- app/components/Sidebar/Main.js | 27 +++++-- app/components/Toasts/components/Toast.js | 2 +- app/menus/CollectionMenu.js | 90 +++++++++++++++++------ app/menus/DocumentMenu.js | 22 +++++- app/scenes/CollectionDelete.js | 2 +- app/stores/UiStore.js | 16 +--- 8 files changed, 111 insertions(+), 108 deletions(-) delete mode 100644 app/components/Modals.js diff --git a/app/components/Layout.js b/app/components/Layout.js index ff2e3c040..882f3f9de 100644 --- a/app/components/Layout.js +++ b/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 { /> - { - handleClose = () => { - this.props.ui.clearActiveModal(); - }; - - render() { - const { activeModalName, activeModalProps } = this.props.ui; - - const Modal = ({ name, children, ...rest }) => { - return ( - - {React.cloneElement(children, activeModalProps)} - - ); - }; - - return ( - - - - - - - - - - - - - - - - - - ); - } -} - -export default Modals; diff --git a/app/components/Sidebar/Main.js b/app/components/Sidebar/Main.js index b90b0ad83..75b7eae0a 100644 --- a/app/components/Sidebar/Main.js +++ b/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 { - @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 { />
- +
{ > + + + ); } @@ -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); diff --git a/app/components/Toasts/components/Toast.js b/app/components/Toasts/components/Toast.js index 3605dcab5..b3d9c98b7 100644 --- a/app/components/Toasts/components/Toast.js +++ b/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, diff --git a/app/menus/CollectionMenu.js b/app/menus/CollectionMenu.js index f872e5d9f..8a149811c 100644 --- a/app/menus/CollectionMenu.js +++ b/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 { 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 { } }; - 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 { @@ -130,24 +144,58 @@ class CollectionMenu extends React.Component { )} {can.update &&
} {can.update && ( - Edit… + + Edit… + )} {can.update && ( - + Permissions… )} {can.export && ( - + Export… )} )} {can.delete && ( - Delete… + + Delete… + )} + + + + + + + + + ); } diff --git a/app/menus/DocumentMenu.js b/app/menus/DocumentMenu.js index fdab4a431..0d99e948b 100644 --- a/app/menus/DocumentMenu.js +++ b/app/menus/DocumentMenu.js @@ -10,6 +10,7 @@ import PoliciesStore from "stores/PoliciesStore"; import UiStore from "stores/UiStore"; import Document from "models/Document"; import DocumentDelete from "scenes/DocumentDelete"; +import DocumentShare from "scenes/DocumentShare"; import DocumentTemplatize from "scenes/DocumentTemplatize"; import { DropdownMenu, DropdownMenuItem } from "components/DropdownMenu"; import Modal from "components/Modal"; @@ -40,8 +41,9 @@ type Props = { @observer class DocumentMenu extends React.Component { @observable redirectTo: ?string; - @observable showDeleteModal: boolean = false; - @observable showTemplateModal: boolean = false; + @observable showDeleteModal = false; + @observable showTemplateModal = false; + @observable showShareModal = false; componentDidUpdate() { this.redirectTo = undefined; @@ -129,7 +131,11 @@ class DocumentMenu extends React.Component { handleShareLink = async (ev: SyntheticEvent<>) => { const { document } = this.props; await document.share(); - this.props.ui.setActiveModal("document-share", { document }); + this.showShareModal = true; + }; + + handleCloseShareModal = () => { + this.showShareModal = false; }; render() { @@ -282,6 +288,16 @@ class DocumentMenu extends React.Component { onSubmit={this.handleCloseTemplateModal} /> + + + ); } diff --git a/app/scenes/CollectionDelete.js b/app/scenes/CollectionDelete.js index 62e9bb4c0..098a4ab34 100644 --- a/app/scenes/CollectionDelete.js +++ b/app/scenes/CollectionDelete.js @@ -49,7 +49,7 @@ class CollectionDelete extends React.Component { {collection.name} collection is permanent and will also delete all of the documents within it, so be extra careful. - diff --git a/app/stores/UiStore.js b/app/stores/UiStore.js index f8545292c..700980c54 100644 --- a/app/stores/UiStore.js +++ b/app/stores/UiStore.js @@ -4,7 +4,7 @@ import { observable, action, autorun, computed } from "mobx"; import { v4 } from "uuid"; import Collection from "models/Collection"; import Document from "models/Document"; -import type { Toast } from "../types"; +import type { Toast } from "types"; const UI_STORE = "UI_STORE"; @@ -14,8 +14,6 @@ class UiStore { // systemTheme represents the system UI theme (Settings -> General in macOS) @observable systemTheme: "light" | "dark"; - @observable activeModalName: ?string; - @observable activeModalProps: ?Object; @observable activeDocumentId: ?string; @observable activeCollectionId: ?string; @observable progressBarVisible: boolean = false; @@ -68,18 +66,6 @@ class UiStore { } }; - @action - setActiveModal = (name: string, props: ?Object): void => { - this.activeModalName = name; - this.activeModalProps = props; - }; - - @action - clearActiveModal = (): void => { - this.activeModalName = undefined; - this.activeModalProps = undefined; - }; - @action setActiveDocument = (document: Document): void => { this.activeDocumentId = document.id;