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,23 +309,31 @@ 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) {
- console.log("Error removing user:", e);
- hideRemoveDialog();
- showDialog("Error", getErrorString(e));
- }
+ 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();
+ } catch (e) {
+ console.log("Error removing user:", e);
+ hideRemoveDialog();
+ showDialog("Error", getErrorString(e));
+ setRemoveLoading(false);
+ }
+ },
+ loading: removeLoading,
  },
  ]}
  />
@@ -333,23 +343,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>
  );
  });