From 181ac9a24d40ced3109ab76b6d73ab19f22f0e10 Mon Sep 17 00:00:00 2001 From: Frankreed Date: Wed, 7 Aug 2024 13:47:57 +0700 Subject: [PATCH] changed dialog component's signature to contain loading --- app/content/team/index.js | 31 +++++---- app/content/team/users/[user]/index.js | 87 +++++++++++++++----------- components/dialog.js | 12 ++-- 3 files changed, 77 insertions(+), 53 deletions(-) diff --git a/app/content/team/index.js b/app/content/team/index.js index f90d4f88..f29d6529 100644 --- a/app/content/team/index.js +++ b/app/content/team/index.js @@ -5,6 +5,7 @@ import { BottomSheetTextInput, } from "@gorhom/bottom-sheet"; import { useQueryClient } from "@tanstack/react-query"; +import { router } from "expo-router"; import { doc, updateDoc } from "firebase/firestore"; import { useEffect, useRef, useState } from "react"; import { @@ -81,6 +82,7 @@ function Index() { const [resetDialogVisible, setResetDialogVisible] = useState(false); const hideResetDialog = () => setResetDialogVisible(false); + const [resetLoading, setResetLoading] = useState(false); const [newName, setNewName] = useState(""); @@ -221,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 2eb2a825..e9204e2c 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,31 +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); - 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, }, ]} /> @@ -341,22 +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); - 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 ( ); });