Make modals programatically controllable via a HOC

This allows entire components to be unmounted when the modal is hidden without affecting the fade in/out of the modal itself.

This also makes it easier to programatically dismiss a modal without having to copy the visibility all over the place, and makes working with props much simpler in those modal components

Author: DaneEveritt

resources/scripts/components/dashboard/AccountApiContainer.tsx

@@ -61,21 +61,19 @@ export default () => {
                 </ContentBox>
                 <ContentBox title={'API Keys'} css={tw`ml-10 flex-1`}>
                     <SpinnerOverlay visible={loading}/>
-                    {deleteIdentifier &&
                     <ConfirmationModal
-                        visible
+                        visible={!!deleteIdentifier}
                         title={'Confirm key deletion'}
                         buttonText={'Yes, delete key'}
                         onConfirmed={() => {
                             doDeletion(deleteIdentifier);
                             setDeleteIdentifier('');
                         }}
-                        onDismissed={() => setDeleteIdentifier('')}
+                        onModalDismissed={() => setDeleteIdentifier('')}
                     >
                         Are you sure you wish to delete this API key? All requests using it will immediately be
                         invalidated and will fail.
                     </ConfirmationModal>
-                    }
                     {
                         keys.length === 0 ?
                             <p css={tw`text-center text-sm`}>

resources/scripts/components/dashboard/ApiKeyModal.tsx

@@ -0,0 +1,38 @@
+import React, { useContext } from 'react';
+import tw from 'twin.macro';
+import Button from '@/components/elements/Button';
+import asModal from '@/hoc/asModal';
+import ModalContext from '@/context/ModalContext';
+
+interface Props {
+    apiKey: string;
+}
+
+const ApiKeyModal = ({ apiKey }: Props) => {
+    const { dismiss } = useContext(ModalContext);
+
+    return (
+        <>
+            <h3 css={tw`mb-6`}>Your API Key</h3>
+            <p css={tw`text-sm mb-6`}>
+                The API key you have requested is shown below. Please store this in a safe location, it will not be
+                shown again.
+            </p>
+            <pre css={tw`text-sm bg-neutral-900 rounded py-2 px-4 font-mono`}>
+                <code css={tw`font-mono`}>{apiKey}</code>
+            </pre>
+            <div css={tw`flex justify-end mt-6`}>
+                <Button type={'button'} onClick={() => dismiss()}>
+                    Close
+                </Button>
+            </div>
+        </>
+    );
+};
+
+ApiKeyModal.displayName = 'ApiKeyModal';
+
+export default asModal({
+    closeOnEscape: false,
+    closeOnBackground: false,
+})(ApiKeyModal);

resources/scripts/components/dashboard/forms/CreateApiKeyForm.tsx

@@ -2,7 +2,6 @@ import React, { useState } from 'react';
 import { Field, Form, Formik, FormikHelpers } from 'formik';
 import { object, string } from 'yup';
 import FormikFieldWrapper from '@/components/elements/FormikFieldWrapper';
-import Modal from '@/components/elements/Modal';
 import createApiKey from '@/api/account/createApiKey';
 import { Actions, useStoreActions } from 'easy-peasy';
 import { ApplicationStore } from '@/state';
@@ -13,6 +12,7 @@ import tw from 'twin.macro';
 import Button from '@/components/elements/Button';
 import Input, { Textarea } from '@/components/elements/Input';
 import styled from 'styled-components/macro';
+import ApiKeyModal from '@/components/dashboard/ApiKeyModal';
 
 interface Values {
     description: string;
@@ -44,29 +44,11 @@ export default ({ onKeyCreated }: { onKeyCreated: (key: ApiKey) => void }) => {
 
     return (
         <>
-            <Modal
+            <ApiKeyModal
                 visible={apiKey.length > 0}
-                onDismissed={() => setApiKey('')}
-                closeOnEscape={false}
-                closeOnBackground={false}
-            >
-                <h3 css={tw`mb-6`}>Your API Key</h3>
-                <p css={tw`text-sm mb-6`}>
-                    The API key you have requested is shown below. Please store this in a safe location, it will not be
-                    shown again.
-                </p>
-                <pre css={tw`text-sm bg-neutral-900 rounded py-2 px-4 font-mono`}>
-                    <code css={tw`font-mono`}>{apiKey}</code>
-                </pre>
-                <div css={tw`flex justify-end mt-6`}>
-                    <Button
-                        type={'button'}
-                        onClick={() => setApiKey('')}
-                    >
-                        Close
-                    </Button>
-                </div>
-            </Modal>
+                onModalDismissed={() => setApiKey('')}
+                apiKey={apiKey}
+            />
             <Formik
                 onSubmit={submit}
                 initialValues={{ description: '', allowedIps: '' }}

resources/scripts/components/elements/ConfirmationModal.tsx

@@ -1,34 +1,40 @@
-import React from 'react';
-import Modal, { RequiredModalProps } from '@/components/elements/Modal';
+import React, { useContext, useEffect } from 'react';
 import tw from 'twin.macro';
 import Button from '@/components/elements/Button';
+import asModal from '@/hoc/asModal';
+import ModalContext from '@/context/ModalContext';
 
 type Props = {
     title: string;
     buttonText: string;
     children: string;
     onConfirmed: () => void;
     showSpinnerOverlay?: boolean;
-} & RequiredModalProps;
+};
 
-const ConfirmationModal = ({ title, appear, children, visible, buttonText, onConfirmed, showSpinnerOverlay, onDismissed }: Props) => (
-    <Modal
-        appear={appear || true}
-        visible={visible}
-        showSpinnerOverlay={showSpinnerOverlay}
-        onDismissed={() => onDismissed()}
-    >
-        <h2 css={tw`text-2xl mb-6`}>{title}</h2>
-        <p css={tw`text-sm`}>{children}</p>
-        <div css={tw`flex items-center justify-end mt-8`}>
-            <Button isSecondary onClick={() => onDismissed()}>
-                Cancel
-            </Button>
-            <Button color={'red'} css={tw`ml-4`} onClick={() => onConfirmed()}>
-                {buttonText}
-            </Button>
-        </div>
-    </Modal>
-);
+const ConfirmationModal = ({ title, children, buttonText, onConfirmed, showSpinnerOverlay }: Props) => {
+    const { dismiss, toggleSpinner } = useContext(ModalContext);
 
-export default ConfirmationModal;
+    useEffect(() => {
+        toggleSpinner(showSpinnerOverlay);
+    }, [ showSpinnerOverlay ]);
+
+    return (
+        <>
+            <h2 css={tw`text-2xl mb-6`}>{title}</h2>
+            <p css={tw`text-sm`}>{children}</p>
+            <div css={tw`flex items-center justify-end mt-8`}>
+                <Button isSecondary onClick={() => dismiss()}>
+                    Cancel
+                </Button>
+                <Button color={'red'} css={tw`ml-4`} onClick={() => onConfirmed()}>
+                    {buttonText}
+                </Button>
+            </div>
+        </>
+    );
+};
+
+ConfirmationModal.displayName = 'ConfirmationModal';
+
+export default asModal()(ConfirmationModal);

resources/scripts/components/elements/Fade.tsx

@@ -8,14 +8,14 @@ interface Props extends Omit<CSSTransitionProps, 'timeout' | 'classNames'> {
 }
 
 const Container = styled.div<{ timeout: number }>`
-    .fade-enter, .fade-exit {
+    .fade-enter, .fade-exit, .fade-appear {
         will-change: opacity;
     }
     
-    .fade-enter {
+    .fade-enter, .fade-appear {
         ${tw`opacity-0`};
         
-        &.fade-enter-active {
+        &.fade-enter-active, &.fade-appear-active {
             ${tw`opacity-100 transition-opacity ease-in`};
             transition-duration: ${props => props.timeout}ms;
         }

resources/scripts/components/elements/Modal.tsx

@@ -13,7 +13,7 @@ export interface RequiredModalProps {
     top?: boolean;
 }
 
-interface Props extends RequiredModalProps {
+export interface ModalProps extends RequiredModalProps {
     dismissable?: boolean;
     closeOnEscape?: boolean;
     closeOnBackground?: boolean;
@@ -40,7 +40,7 @@ const ModalContainer = styled.div<{ alignTop?: boolean }>`
     }
 `;
 
-const Modal: React.FC<Props> = ({ visible, appear, dismissable, showSpinnerOverlay, top = true, closeOnBackground = true, closeOnEscape = true, onDismissed, children }) => {
+const Modal: React.FC<ModalProps> = ({ visible, appear, dismissable, showSpinnerOverlay, top = true, closeOnBackground = true, closeOnEscape = true, onDismissed, children }) => {
     const [ render, setRender ] = useState(visible);
 
     const isDismissable = useMemo(() => {
@@ -62,7 +62,13 @@ const Modal: React.FC<Props> = ({ visible, appear, dismissable, showSpinnerOverl
     }, [ render ]);
 
     return (
-        <Fade timeout={150} appear={appear} in={render} unmountOnExit onExited={onDismissed}>
+        <Fade
+            in={render}
+            timeout={150}
+            appear={appear || true}
+            unmountOnExit
+            onExited={() => onDismissed()}
+        >
             <ModalMask
                 onClick={e => {
                     if (isDismissable && closeOnBackground) {

resources/scripts/components/server/backups/BackupContextMenu.tsx

@@ -65,18 +65,16 @@ export default ({ backup }: Props) => {
                 checksum={backup.sha256Hash}
             />
             }
-            {deleteVisible &&
             <ConfirmationModal
+                visible={deleteVisible}
                 title={'Delete this backup?'}
                 buttonText={'Yes, delete backup'}
                 onConfirmed={() => doDeletion()}
-                visible={deleteVisible}
-                onDismissed={() => setDeleteVisible(false)}
+                onModalDismissed={() => setDeleteVisible(false)}
             >
                 Are you sure you wish to delete this backup? This is a permanent operation and the backup cannot
                 be recovered once deleted.
             </ConfirmationModal>
-            }
             <SpinnerOverlay visible={loading} fixed/>
             <DropdownMenu
                 renderToggle={onClick => (

resources/scripts/components/server/files/MassActionsBar.tsx

@@ -72,7 +72,7 @@ const MassActionsBar = () => {
                     title={'Delete these files?'}
                     buttonText={'Yes, Delete Files'}
                     onConfirmed={onClickConfirmDeletion}
-                    onDismissed={() => setShowConfirm(false)}
+                    onModalDismissed={() => setShowConfirm(false)}
                 >
                     Deleting files is a permanent operation, you cannot undo this action.
                 </ConfirmationModal>

resources/scripts/components/server/schedules/DeleteScheduleButton.tsx

@@ -39,12 +39,12 @@ export default ({ scheduleId, onDeleted }: Props) => {
     return (
         <>
             <ConfirmationModal
-                showSpinnerOverlay={isLoading}
+                visible={visible}
                 title={'Delete schedule?'}
                 buttonText={'Yes, delete schedule'}
                 onConfirmed={onDelete}
-                visible={visible}
-                onDismissed={() => setVisible(false)}
+                showSpinnerOverlay={isLoading}
+                onModalDismissed={() => setVisible(false)}
             >
                 Are you sure you want to delete this schedule? All tasks will be removed and any running processes
                 will be terminated.

resources/scripts/components/server/schedules/ScheduleTaskRow.tsx

@@ -69,7 +69,7 @@ export default ({ schedule, task }: Props) => {
                 buttonText={'Delete Task'}
                 onConfirmed={onConfirmDeletion}
                 visible={visible}
-                onDismissed={() => setVisible(false)}
+                onModalDismissed={() => setVisible(false)}
             >
                 Are you sure you want to delete this task? This action cannot be undone.
             </ConfirmationModal>