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

resources/scripts/components/elements/ConfirmationModal.tsx

@@ -1,7 +1,8 @@
-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;
@@ -9,26 +10,31 @@ type Props = {
     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);