From 919e46aea80bdf1266edf1efa90eba4becae8e4d Mon Sep 17 00:00:00 2001
From: Abdullah Atta <abdullahatta@streetwriters.co>
Date: Wed, 28 Dec 2022 10:39:40 +0500
Subject: [PATCH] web: migrate loading dialog to typescript

---
 apps/web/src/common/dialog-controller.tsx     | 27 ++++++++++---------
 .../{loading-dialog.js => loading-dialog.tsx} | 27 +++++++++++--------
 2 files changed, 31 insertions(+), 23 deletions(-)
 rename apps/web/src/components/dialogs/{loading-dialog.js => loading-dialog.tsx} (71%)

diff --git a/apps/web/src/common/dialog-controller.tsx b/apps/web/src/common/dialog-controller.tsx
index 7d32e695e..f3947c0ef 100644
--- a/apps/web/src/common/dialog-controller.tsx
+++ b/apps/web/src/common/dialog-controller.tsx
@@ -305,23 +305,26 @@ export function showMigrationDialog() {
   ));
 }
 
-type LoadingDialogProps = {
+type LoadingDialogProps<T> = {
   title: string;
   message?: string;
   subtitle: string;
-  action: () => void;
+  action: () => T | Promise<T>;
 };
-export function showLoadingDialog(dialogData: LoadingDialogProps) {
+export function showLoadingDialog<T>(dialogData: LoadingDialogProps<T>) {
   const { title, message, subtitle, action } = dialogData;
-  return showDialog("LoadingDialog", (Dialog, perform) => (
-    <Dialog
-      title={title}
-      subtitle={subtitle}
-      message={message}
-      action={action}
-      onDone={(e: boolean) => perform(e)}
-    />
-  ));
+  return showDialog<"LoadingDialog", T | boolean>(
+    "LoadingDialog",
+    (Dialog, perform) => (
+      <Dialog
+        title={title}
+        description={subtitle}
+        message={message}
+        action={action}
+        onClose={(e) => perform(e as T | boolean)}
+      />
+    )
+  );
 }
 
 type ProgressDialogProps = {
diff --git a/apps/web/src/components/dialogs/loading-dialog.js b/apps/web/src/components/dialogs/loading-dialog.tsx
similarity index 71%
rename from apps/web/src/components/dialogs/loading-dialog.js
rename to apps/web/src/components/dialogs/loading-dialog.tsx
index 1d5dfa0da..5bed667f4 100644
--- a/apps/web/src/components/dialogs/loading-dialog.js
+++ b/apps/web/src/components/dialogs/loading-dialog.tsx
@@ -22,27 +22,32 @@ import { Box, Text } from "@theme-ui/components";
 import Dialog from "./dialog";
 import * as Icon from "../icons";
 
-function LoadingDialog(props) {
+type LoadingDialogProps<T> = {
+  onClose: (result: T | boolean) => void;
+  action: () => T | Promise<T>;
+  title: string;
+  description: string;
+  message?: string;
+};
+
+function LoadingDialog<T>(props: LoadingDialogProps<T>) {
+  const { onClose, action, description, message, title } = props;
   useEffect(() => {
     (async function () {
       try {
-        props.onDone(await props.action());
+        onClose(await action());
       } catch (e) {
-        props.onDone(e);
+        onClose(false);
+        throw e;
       }
     })();
-  }, [props]);
+  }, [onClose, action]);
 
   return (
-    <Dialog
-      isOpen={true}
-      title={props.title}
-      description={props.subtitle}
-      onClose={() => {}}
-    >
+    <Dialog isOpen={true} title={title} description={description}>
       <Box>
         <Text as="span" variant="body">
-          {props.message}
+          {message}
         </Text>
         <Icon.Loading rotate sx={{ my: 2 }} color="primary" />
       </Box>