IWB-6: Added more loading spinners (#304)

* added blacklist hook * black list feature works * some unused stuff removal * waitlist seems to work * simplified removeBlacklist.js * pretty * removed transaction and hope that it works * fixed useBlackList.js hook firestore error, and made blacklist check functional * added refresh spinner for chooseTeam.js * updated invalidateKeys and fixed some styling * updated faulty invalidateKeys lists * kinda works lmao * updated the invalidateKeys again * navigation off chooseTeam works. Tech debt +1 * half finished progress * invite works * added waitlistError to ErrorComponent * pretty * text input moves above keyboard now * minor comment change Co-authored-by: Jake Gehrke <91503842+Gehrkej@users.noreply.github.com> * changed console log wording in removeBlacklist Co-authored-by: Jake Gehrke <91503842+Gehrkej@users.noreply.github.com> * removed copied over comment * updated tiny comment Co-authored-by: Jake Gehrke <91503842+Gehrkej@users.noreply.github.com> * removed redundant log Co-authored-by: Jake Gehrke <91503842+Gehrkej@users.noreply.github.com> * fix - added email to blacklist record * fix - added assertion if pfp exists when removing a user * added loading spinner to all buttons * can't invite already invited email * accepting invite will remove the invite * workin on remove user * added invitelist bug fix * migrating to react native paper Button's loading property for loading spinner * redundant comment Co-authored-by: Jake Gehrke <91503842+Gehrkej@users.noreply.github.com> * :/ Co-authored-by: Jake Gehrke <91503842+Gehrkej@users.noreply.github.com> * prevent double navigation to chooseTeam screen * remove half baked loading spinner on dialog component (will be its own pr) * changed dialog component's signature to contain loading * fixed "invalid-argument" * added key * last usage of Activity Indicator in a simple button replaced temp * Fixed Android keyboard avoiding for invitelist * removed redundant remove user fix * pretty * pretty * pretty * pretty * pretty * pretty * IWB-7: allow using the "loading" property in DialogComponent (#313) * added missing state from merge * simple fix * better align invite input with above elements * changed more "white" to use themecolors, and added spinner color to some buttons --------- Co-authored-by: Jake Gehrke <91503842+Gehrkej@users.noreply.github.com> Co-authored-by: Jake Gehrke <gehrkej@oregonstate.edu>
Golf-Drill-Challenge-App · Aug 15, 2024 · 4ce5a04 · 4ce5a04
1 parent b2e5a6a
commit 4ce5a04
Show file tree

Hide file tree

Showing 12 changed files with 202 additions and 127 deletions.
diff --git a/app/(auth)/signin.js b/app/(auth)/signin.js
@@ -33,6 +33,7 @@ export default function SignIn() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [forgotLoading, setForgotLoading] = useState(false);
+ const [loginLoading, setLoginLoading] = useState(false);
  const { setCurrentUserId } = useAuthContext();
 
  const { height } = useWindowDimensions();
@@ -62,6 +63,7 @@ export default function SignIn() {
  }, [timeIntervalPassword]);
 
  async function handleSignIn() {
+ setLoginLoading(true);
  if (process.env.EXPO_PUBLIC_TEST_UID) {
  // Only allow login as test user while using `yarn test` to reduce errors
  setCurrentUserId(process.env.EXPO_PUBLIC_TEST_UID);
@@ -74,6 +76,7 @@ export default function SignIn() {
  showDialog("Error", getErrorString(e));
  }
  }
+ setLoginLoading(false);
  }
 
  async function handleForgotPassword() {
@@ -204,6 +207,7 @@ export default function SignIn() {
  onPress={handleSignIn}
  buttonColor={themeColors.accent}
  labelStyle={styles.buttonText}
+ loading={loginLoading}
  >
  Login
  </Button>
@@ -216,7 +220,7 @@ export default function SignIn() {
  style={styles.button}
  labelStyle={styles.buttonText}
  >
- Sign Up
+ Sign up
  </Button>
  </Link>
  </View>

diff --git a/app/(auth)/signup.js b/app/(auth)/signup.js
@@ -36,11 +36,14 @@ export default function SignUp() {
  const [password, setPassword] = useState("");
  const [passwordCheck, setPasswordCheck] = useState("");
 
+ const [signUpLoading, setSignUpLoading] = useState(false);
+
  const { showDialog, showSnackBar } = useAlertContext();
 
  const { height } = useWindowDimensions();
 
  async function handleSubmit() {
+ setSignUpLoading(true);
  try {
  if (password !== passwordCheck) {
  throw "Passwords don't match";
@@ -77,6 +80,7 @@ export default function SignUp() {
  console.log(e);
  showDialog("Error", getErrorString(e));
  }
+ setSignUpLoading(false);
  }
 
  const styles = StyleSheet.create({
@@ -186,6 +190,7 @@ export default function SignUp() {
  onPress={handleSubmit}
  buttonColor={themeColors.accent}
  labelStyle={styles.buttonText}
+ loading={signUpLoading}
  >
  Submit
  </Button>

diff --git a/app/content/assignments/players.js b/app/content/assignments/players.js
@@ -3,14 +3,7 @@ import { router, useLocalSearchParams, useNavigation } from "expo-router";
 import { doc, getDoc, runTransaction, updateDoc } from "firebase/firestore";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { ScrollView, View } from "react-native";
-import {
- ActivityIndicator,
- Appbar,
- Button,
- Icon,
- List,
- Text,
-} from "react-native-paper";
+import { Appbar, Button, Icon, List, Text } from "react-native-paper";
 import { SafeAreaView } from "react-native-safe-area-context";
 import { once } from "underscore";
 import { themeColors } from "~/Constants";
@@ -409,7 +402,7 @@ function Index() {
  }}
  mode="contained"
  buttonColor={themeColors.accent}
- textColor="white"
+ textColor={themeColors.highlight}
  disabled={
  !assignmentList.some((assignment) => assignment.markedForDelete)
  }
@@ -420,12 +413,9 @@ function Index() {
  },
  }}
  onPress={handleDelete}
+ loading={loadingDelete}
  >
- {loadingDelete ? (
- <ActivityIndicator size={20} color={"#FFF"} />
- ) : (
- "Delete"
- )}
+ Delete
  </Button>
  </View>
  )}

diff --git a/app/content/profile/index.js b/app/content/profile/index.js
@@ -20,7 +20,7 @@ import {
  TouchableOpacity,
  View,
 } from "react-native";
-import { ActivityIndicator, Appbar, Switch } from "react-native-paper";
+import { ActivityIndicator, Appbar, Button, Switch } from "react-native-paper";
 import { SafeAreaView } from "react-native-safe-area-context";
 import { debounce } from "underscore";
 import { themeColors } from "~/Constants";
@@ -267,11 +267,8 @@ function Index() {
  },
  saveChangesButton: {
  backgroundColor: themeColors.accent,
- paddingHorizontal: 20,
- paddingVertical: 10,
- borderRadius: 20,
+ width: 100,
  marginBottom: 20,
- width: 100, // Increase the width of the button
  alignSelf: "center",
  },
  saveChangesButtonText: {
@@ -451,16 +448,17 @@ function Index() {
  )}
 
  {/* Save Button */}
- <TouchableOpacity
+ <Button
  style={styles.saveChangesButton}
  onPress={handleUpdate}
+ textColor={themeColors.highlight}
+ labelStyle={{
+ fontWeight: "bold",
+ }}
+ loading={updateLoading}
  >
- {updateLoading ? (
- <ActivityIndicator animating={true} size={16} color={"#FFF"} />
- ) : (
- <Text style={styles.saveChangesButtonText}>Update</Text>
- )}
- </TouchableOpacity>
+ Update
+ </Button>
 
  {/* Sign Out Button */}
  <Pressable onPress={handleSignOut}>

diff --git 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
@@ -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/app/segments/(team)/blacklist.js b/app/segments/(team)/blacklist.js
@@ -1,4 +1,5 @@
 import { useQueryClient } from "@tanstack/react-query";
+import { useState } from "react";
 import { ScrollView, View } from "react-native";
 import { Button, List } from "react-native-paper";
 import { themeColors } from "~/Constants";
@@ -21,6 +22,8 @@ function Blacklist() {
 
  const queryClient = useQueryClient(); // also called here for updating name
 
+ const [unbanLoading, setUnbanLoading] = useState({});
+
  const invalidateKeys = [["blacklist"]];
 
  if (blacklistIsLoading) return <Loading />;
@@ -52,10 +55,13 @@ function Blacklist() {
  >
  <Button
  onPress={async () => {
+ setUnbanLoading({ ...unbanLoading, [userId]: true });
  await removeBlacklist(currentTeamId, userId);
  await invalidateMultipleKeys(queryClient, invalidateKeys);
+ setUnbanLoading({ ...unbanLoading, [userId]: false });
  }}
  textColor={themeColors.accent}
+ loading={unbanLoading[userId]}
  >
  Unban
  </Button>