IWB-7: allow using the "loading" property in DialogComponent

app/content/team/index.js

@@ -82,6 +82,7 @@ function Index() {
 
   const [resetDialogVisible, setResetDialogVisible] = useState(false);
   const hideResetDialog = () => setResetDialogVisible(false);
+  const [resetLoading, setResetLoading] = useState(false);
 
   const [newName, setNewName] = useState("");
 
@@ -222,18 +223,23 @@ function Index() {
         content="Resetting the season will wipe all leaderboards"
         visible={resetDialogVisible}
         onHide={hideResetDialog}
-        buttons={["Cancel", "Reset Season"]}
-        buttonsFunctions={[
-          hideResetDialog,
-          async () => {
-            try {
-              await resetLeaderboards(currentTeamId);
-              await invalidateMultipleKeys(queryClient, [["best_attempts"]]);
-              hideResetDialog();
-            } catch (e) {
-              console.log("Error resetting season:", e);
-              showDialog("Error", getErrorString(e));
-            }
+        buttons={[
+          { children: "Cancel", pressHandler: hideResetDialog },
+          {
+            children: "Reset Season",
+            pressHandler: async () => {
+              setResetLoading(true);
+              try {
+                await resetLeaderboards(currentTeamId);
+                await invalidateMultipleKeys(queryClient, [["best_attempts"]]);
+                hideResetDialog();
+              } catch (e) {
+                console.log("Error resetting season:", e);
+                showDialog("Error", getErrorString(e));
+              }
+              setResetLoading(false);
+            },
+            loading: resetLoading,
           },
         ]}
       />

app/content/team/users/[user]/index.js

@@ -65,9 +65,11 @@ function Index() {
 
   const [removeDialogVisible, setRemoveDialogVisible] = useState(false);
   const hideRemoveDialog = () => setRemoveDialogVisible(false);
+  const [removeLoading, setRemoveLoading] = useState(false);
 
   const [banDialogVisible, setBanDialogVisible] = useState(false);
   const hideBanDialog = () => setBanDialogVisible(false);
+  const [banLoading, setBanLoading] = useState(false);
 
   const { showDialog, showSnackBar } = useAlertContext();
 
@@ -307,32 +309,40 @@ function Index() {
         content="All data will be lost when this user is removed."
         visible={removeDialogVisible}
         onHide={hideRemoveDialog}
-        buttons={["Cancel", "Remove User"]}
-        buttonsFunctions={[
-          hideRemoveDialog,
-          async () => {
-            try {
-              await removeUser(currentTeamId, userId);
-              await queryClient.removeQueries(["userInfo", userId]);
-              await invalidateMultipleKeys(queryClient, [
-                ["userInfo"],
-                ["best_attempts"],
-              ]);
-              navigation.goBack();
-            } catch (e) {
-              if (e.code === "storage/object-not-found") {
-                //success kinda weird rn
+        buttons={[
+          {
+            children: "Cancel",
+            pressHandler: hideRemoveDialog,
+          },
+          {
+            children: "Remove User",
+            pressHandler: async () => {
+              setRemoveLoading(true);
+              try {
+                await removeUser(currentTeamId, userId);
+                await queryClient.removeQueries(["userInfo", userId]);
                 await invalidateMultipleKeys(queryClient, [
                   ["userInfo"],
                   ["best_attempts"],
                 ]);
                 navigation.goBack();
-              } else {
-                console.log("Error removing user:", e);
-                hideRemoveDialog();
-                showDialog("Error", getErrorString(e));
+              } catch (e) {
+                if (e.code === "storage/object-not-found") {
+                  //success kinda weird rn
+                  await invalidateMultipleKeys(queryClient, [
+                    ["userInfo"],
+                    ["best_attempts"],
+                  ]);
+                  navigation.goBack();
+                } else {
+                  console.log("Error removing user:", e);
+                  hideRemoveDialog();
+                  showDialog("Error", getErrorString(e));
+                  setRemoveLoading(false);
+                }
               }
-            }
+            },
+            loading: removeLoading,
           },
         ]}
       />
@@ -342,23 +352,28 @@ function Index() {
         content="Banning this user will delete all their data and prevent them from joining the team again."
         visible={banDialogVisible}
         onHide={hideBanDialog}
-        buttons={["Cancel", "Ban User"]}
-        buttonsFunctions={[
-          hideBanDialog,
-          async () => {
-            try {
-              await blacklistUser(currentTeamId, userId, userInfo, userEmail);
-              await queryClient.removeQueries(["userInfo", userId]);
-              await invalidateMultipleKeys(queryClient, [
-                ["userInfo"],
-                ["best_attempts"],
-              ]); //invalidate cache
-              navigation.goBack();
-            } catch (e) {
-              console.log("Error banning user:", e);
-              hideBanDialog();
-              showDialog("Error", getErrorString(e));
-            }
+        buttons={[
+          { children: "Cancel", pressHandler: hideBanDialog },
+          {
+            children: "Ban User",
+            pressHandler: async () => {
+              setBanLoading(true);
+              try {
+                await blacklistUser(currentTeamId, userId, userInfo, userEmail);
+                await queryClient.removeQueries(["userInfo", userId]);
+                await invalidateMultipleKeys(queryClient, [
+                  ["userInfo"],
+                  ["best_attempts"],
+                ]); //invalidate cache
+                navigation.goBack();
+              } catch (e) {
+                console.log("Error banning user:", e);
+                hideBanDialog();
+                showDialog("Error", getErrorString(e));
+                setBanLoading(false);
+              }
+            },
+            loading: banLoading,
           },
         ]}
       />

components/dialog.js

@@ -16,10 +16,9 @@ export default function DialogComponent({
   content,
   visible,
   onHide,
-  buttons = ["Ok"],
-  buttonsFunctions = [() => onHide()],
+  buttons = [{ children: "Ok", pressHandler: () => onHide(), loading: false }], //should I also include style in here?
 }) {
-  const Buttons = buttons.map((item, index) => {
+  const Buttons = buttons.map((button, index) => {
     let style;
     let labelStyle;
     if (index === 0) {
@@ -33,11 +32,12 @@ export default function DialogComponent({
     return (
       <Button
         key={index}
-        onPress={buttonsFunctions[index]}
-        style={[style, { padding: 0, margin: 0 }]}
+        onPress={button["pressHandler"]}
+        style={style}
         labelStyle={labelStyle}
+        loading={!!button["loading"]}
       >
-        {item}
+        {button["children"]}
       </Button>
     );
   });