diff --git a/app/content/team/index.js b/app/content/team/index.js index 5c41c6b7..f29d6529 100644 --- a/app/content/team/index.js +++ b/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, }, ]} /> diff --git a/app/content/team/users/[user]/index.js b/app/content/team/users/[user]/index.js index a5c0ba64..4d934265 100644 --- a/app/content/team/users/[user]/index.js +++ b/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, }, ]} /> diff --git a/components/dialog.js b/components/dialog.js index 415ae42a..c78de339 100644 --- a/components/dialog.js +++ b/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 ( ); });