From 6f5629358a62c1784bdd2681ef90588c70f48ab3 Mon Sep 17 00:00:00 2001
From: ramfox <kasey@qri.io>
Date: Wed, 17 Jul 2019 18:00:33 -0400
Subject: [PATCH] fix(Modal): don't allow user to dismiss modal when waiting
 for async request

---
 app/components/modals/Modal.tsx | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/app/components/modals/Modal.tsx b/app/components/modals/Modal.tsx
index 1323699f..bf1ed1d2 100644
--- a/app/components/modals/Modal.tsx
+++ b/app/components/modals/Modal.tsx
@@ -101,6 +101,7 @@ export interface ModalProps {
  */
 const Modal: React.FunctionComponent<ModalProps> = ({ title, dismissable, onDismissed, id, type, onSubmit, className, disabled, loading, children }) => {
   const [modalElement, setModalElement] = React.useState<HTMLElement | null>(null)
+  const [isDismissable, setIsDismissable] = React.useState(!!dismissable)
 
   React.useEffect(() => {
     if (modalElement) {
@@ -108,17 +109,13 @@ const Modal: React.FunctionComponent<ModalProps> = ({ title, dismissable, onDism
     }
   }, [modalElement]) // eslint-disable-line
 
-  const isDismissable = () => {
-    return dismissable === undefined || dismissable
-  }
-
   const onDialogCancel = (e: Event) => {
     e.preventDefault()
     onDismiss()
   }
 
   const onModalClick = (e: React.MouseEvent<HTMLElement>) => {
-    if (isDismissable() === false) {
+    if (isDismissable === false) {
       return
     }
 
@@ -178,7 +175,7 @@ const Modal: React.FunctionComponent<ModalProps> = ({ title, dismissable, onDism
   }
 
   const onDismiss = () => {
-    if (isDismissable()) {
+    if (isDismissable) {
       if (onDismissed) {
         onDismissed()
       }
@@ -189,7 +186,11 @@ const Modal: React.FunctionComponent<ModalProps> = ({ title, dismissable, onDism
     e.preventDefault()
 
     if (onSubmit) {
-      onSubmit()
+      setIsDismissable(false)
+      new Promise((resolve) => {
+        onSubmit()
+        resolve()
+      }).then(() => setIsDismissable(!!dismissable))
     } else {
       onDismiss()
     }
@@ -203,7 +204,7 @@ const Modal: React.FunctionComponent<ModalProps> = ({ title, dismissable, onDism
     return (
       <ModalHeader
         title={title}
-        dismissable={isDismissable()}
+        dismissable={isDismissable}
         onDismissed={onDismiss}
         loading={loading}
       />