IWB-3: added waitlist functionality (#311)

* 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 * added waitlistError to ErrorComponent * minor comment change Co-authored-by: Jake Gehrke <[email protected]> * changed console log wording in removeBlacklist Co-authored-by: Jake Gehrke <[email protected]> * removed copied over comment * updated tiny comment Co-authored-by: Jake Gehrke <[email protected]> * removed redundant log Co-authored-by: Jake Gehrke <[email protected]> * fix - added email to blacklist record * fix - added assertion if pfp exists when removing a user * fixed "invalid-argument" * added key * removed redundant remove user fix * pretty * pretty * added missing state from merge * simple fix --------- Co-authored-by: Jake Gehrke <[email protected]> Co-authored-by: Jake Gehrke <[email protected]>
Golf-Drill-Challenge-App · Aug 15, 2024 · ad07383 · ad07383
1 parent 2589d27
commit ad07383
Show file tree

Hide file tree

Showing 10 changed files with 334 additions and 86 deletions.
diff --git a/Utility.js b/Utility.js
@@ -113,6 +113,9 @@ export function getIconByKey(key) {
 }
 
 export function getInitials(fullName) {
+  if (!fullName) {
+    return "?";
+  }
   const nameParts = fullName.trim().split(/\s+/);
   return nameParts.map((part) => part.charAt(0).toUpperCase()).join("");
 }

diff --git a/app/(auth)/signup.js b/app/(auth)/signup.js
@@ -59,16 +59,6 @@ export default function SignUp() {
       await setDoc(doc(db, "users", userCredential.user.uid), {
         email: email,
       });
-      await setDoc(doc(db, "teams", "1", "users", userCredential.user.uid), {
-        name: name,
-        // hardcoded pfp string for now, add pfp upload to profile settings in future PR
-        pfp: "",
-        // hardcoded "player" role for now, add role selection to profile settings in future PR
-        role: "player",
-        uid: userCredential.user.uid,
-        assigned_data: [],
-        uniqueDrills: [],
-      });
 
       try {
         await sendEmailVerification(auth.currentUser);
@@ -80,7 +70,7 @@ export default function SignUp() {
       }
 
       setCurrentUserId(userCredential.user.uid);
-      setCurrentUserInfo(userCredential.user);
+      setCurrentUserInfo({ ...userCredential.user, displayName: name });
 
       // console.log(userCredential.user);
     } catch (e) {

diff --git a/app/content/team/index.js b/app/content/team/index.js
@@ -109,9 +109,12 @@ function Index() {
       />
     );
   const foundUsers = Object.values(userInfo)
-    .filter((user) =>
-      user.name.toLowerCase().includes(searchQuery.toLowerCase()),
-    )
+    .filter((user) => {
+      if (!user.name) {
+        return true;
+      }
+      return user.name.toLowerCase().includes(searchQuery.toLowerCase());
+    })
     .sort((user1, user2) => {
       // Assign priorities based on conditions
       const getPriority = (user) => {
@@ -136,6 +139,11 @@ function Index() {
         return priority1 - priority2;
       }
 
+      //doesn't softlock in case displayName is null for some reason
+      if (!user1.name) {
+        return -1;
+      }
+
       // If priorities are the same, then sort alphabetically by name
       return user1.name.localeCompare(user2.name);
     });

diff --git a/app/segments/(team)/chooseTeam.js b/app/segments/(team)/chooseTeam.js
@@ -5,8 +5,7 @@ import {
   sendEmailVerification,
   signOut as signoutFireBase,
 } from "firebase/auth";
-import { doc, setDoc } from "firebase/firestore";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { RefreshControl, ScrollView, Text, View } from "react-native";
 import { Button } from "react-native-paper";
 import { SafeAreaView } from "react-native-safe-area-context";
@@ -16,13 +15,21 @@ import ErrorComponent from "~/components/errorComponent";
 import Loading from "~/components/loading";
 import { useAlertContext } from "~/context/Alert";
 import { useAuthContext } from "~/context/Auth";
+import { addToTeam } from "~/dbOperations/addToTeam";
+import { addToWaitlist } from "~/dbOperations/addToWaitlist";
 import { useBlackList } from "~/dbOperations/hooks/useBlackList";
+import { useWaitlist } from "~/dbOperations/hooks/useWaitlist";
 import { invalidateMultipleKeys } from "~/dbOperations/invalidateMultipleKeys";
-import { auth, db } from "~/firebaseConfig";
+import { auth } from "~/firebaseConfig";
 
 function ChooseTeam() {
-  const { signOut, currentUserId, currentUserInfo, setCurrentUserId } =
-    useAuthContext();
+  const {
+    signOut,
+    currentUserId,
+    currentUserInfo,
+    setCurrentUserId,
+    currentTeamId,
+  } = useAuthContext();
   const queryClient = useQueryClient();
 
   const { showDialog, showSnackBar } = useAlertContext();
@@ -33,12 +40,32 @@ function ChooseTeam() {
     isLoading: blacklistIsLoading,
   } = useBlackList();
 
-  const invalidateKeys = [["blacklist"]];
+  const {
+    data: waitlist,
+    error: waitlistError,
+    isLoading: waitlistIsLoading,
+  } = useWaitlist();
+
+  const state = useMemo(() => {
+    if (blacklist && blacklist[currentUserId]) {
+      return "blacklist";
+    }
+    if (waitlist && waitlist[currentUserId]) {
+      return "waitlist";
+    }
+    return "neutral";
+  }, [blacklist, currentUserId, waitlist]); //blacklist, waitlist, invited, neutral
 
   const [verified, setVerified] = useState(false);
   const [refreshing, setRefreshing] = useState(false); //for Refresh Control
   const [loading, setLoading] = useState(false); //for resend email button
 
+  const invalidateKeys = [
+    ["blacklist"],
+    ["waitlist"],
+    ["userInfo", { userId: currentUserId }],
+  ];
+
   async function handleSignOut() {
     try {
       await signoutFireBase(auth);
@@ -88,12 +115,12 @@ function ChooseTeam() {
     setRefreshing(false);
   }, []);
 
-  if (blacklistIsLoading) {
+  if (blacklistIsLoading || waitlistIsLoading) {
     return <Loading />;
   }
 
-  if (blacklistError) {
-    return <ErrorComponent errorList={[blacklistError]} />;
+  if (blacklistError || waitlistError) {
+    return <ErrorComponent errorList={[blacklistError, waitlistError]} />;
   }
 
   return (
@@ -109,39 +136,79 @@ function ChooseTeam() {
         }
         contentContainerStyle={{ flex: 1, justifyContent: "center" }}
       >
-        <View
-          style={{
-            justifyContent: "center",
-            alignItems: "center",
-          }}
-        >
-          {blacklist[currentUserId] ? (
-            <Text
+        {!verified ? (
+          <View
+            style={{
+              alignItems: "center",
+              justifyContent: "center",
+            }}
+          >
+            <Text>Waiting for email verification...</Text>
+            <Button
               style={{
-                fontSize: 16,
-                textAlign: "center",
-                color: "gray",
+                backgroundColor: themeColors.accent,
+                borderRadius: 12,
+                marginTop: 20,
+              }}
+              onPress={async () => {
+                setLoading(true);
+                try {
+                  await sendEmailVerification(auth.currentUser);
+                  console.log("Verification Email Sent!");
+                  showSnackBar("Verification Email Sent!");
+                } catch (e) {
+                  console.log("Error sending verification email: ", e);
+                  showDialog("Error", getErrorString(e));
+                }
+                setLoading(false);
               }}
+              loading={loading}
+              textColor="white"
             >
-              You've been banned from this team.
-            </Text>
-          ) : verified ? (
+              <Text
+                style={{
+                  color: themeColors.highlight,
+                  fontSize: 18,
+                  textAlign: "center",
+                }}
+              >
+                Resend Verification Email
+              </Text>
+            </Button>
+          </View>
+        ) : state === "blacklist" ? (
+          <Text
+            style={{
+              fontSize: 16,
+              textAlign: "center",
+              color: "gray",
+            }}
+          >
+            You've been banned from this team.
+          </Text>
+        ) : state === "waitlist" ? (
+          <Text
+            style={{
+              fontSize: 16,
+              textAlign: "center",
+              color: "gray",
+            }}
+          >
+            Your request to join the team has been received
+          </Text>
+        ) : state === "invited" ? (
+          <View
+            style={{
+              alignItems: "center",
+              justifyContent: "center",
+            }}
+          >
             <Button
               onPress={async () => {
-                // Update Firestore document
-                await setDoc(doc(db, "teams", "1", "users", currentUserId), {
-                  name: currentUserInfo["displayName"],
-                  pfp: "",
-                  role: "player",
-                  uid: currentUserId,
-                  assigned_data: [],
-                  uniqueDrills: [],
-                });
+                //temporary, should be replaced with multiple team functionality
+                await addToTeam(currentTeamId, currentUserId, currentUserInfo);
                 setCurrentUserId(currentUserId);
-                await invalidateMultipleKeys(queryClient, [
-                  ["userInfo", { userId: currentUserId }],
-                ]);
-                // Navigate to the next page
+                await invalidateMultipleKeys(queryClient, invalidateKeys);
                 router.replace("/");
               }}
               style={{
@@ -160,47 +227,47 @@ function ChooseTeam() {
                 Join Team
               </Text>
             </Button>
-          ) : (
-            <View
+          </View>
+        ) : (
+          <View
+            style={{
+              alignItems: "center",
+              justifyContent: "center",
+            }}
+          >
+            <Button
+              onPress={async () => {
+                await addToWaitlist(
+                  currentTeamId,
+                  currentUserId,
+                  currentUserInfo,
+                );
+                await invalidateMultipleKeys(queryClient, invalidateKeys);
+              }}
               style={{
-                alignItems: "center",
-                justifyContent: "center",
+                backgroundColor: themeColors.accent,
+                borderRadius: 12,
+                marginTop: 20,
               }}
             >
-              <Text>Waiting for email verification...</Text>
-              <Button
+              <Text
                 style={{
-                  backgroundColor: themeColors.accent,
-                  borderRadius: 12,
-                  marginTop: 20,
-                }}
-                onPress={async () => {
-                  setLoading(true);
-                  try {
-                    await sendEmailVerification(auth.currentUser);
-                    console.log("Verification Email Sent!");
-                    showSnackBar("Verification Email Sent!");
-                  } catch (e) {
-                    console.log("Error sending verification email: ", e);
-                    showDialog("Error", getErrorString(e));
-                  }
-                  setLoading(false);
+                  color: themeColors.highlight,
+                  fontSize: 18,
+                  textAlign: "center",
                 }}
-                loading={loading}
-                textColor="white"
               >
-                <Text
-                  style={{
-                    color: themeColors.highlight,
-                    fontSize: 18,
-                    textAlign: "center",
-                  }}
-                >
-                  Resend Verification Email
-                </Text>
-              </Button>
-            </View>
-          )}
+                Request to Join Team
+              </Text>
+            </Button>
+          </View>
+        )}
+        <View
+          style={{
+            alignItems: "center",
+            justifyContent: "center",
+          }}
+        >
           <Button
             onPress={handleSignOut}
             style={{

diff --git a/app/segments/(team)/manageForeignRequests.js b/app/segments/(team)/manageForeignRequests.js
@@ -4,6 +4,7 @@ import { Appbar, SegmentedButtons } from "react-native-paper";
 import { SafeAreaView } from "react-native-safe-area-context";
 import { themeColors } from "~/Constants";
 import Blacklist from "~/app/segments/(team)/blacklist";
+import Waitlist from "~/app/segments/(team)/waitlist";
 import Header from "~/components/header";
 
 function ManageForeignRequests() {
@@ -38,7 +39,7 @@ function ManageForeignRequests() {
   const tabComponent = useMemo(
     () => ({
       invites: <></>,
-      waitlist: <></>,
+      waitlist: <Waitlist />,
       blacklist: <Blacklist />,
     }),
     [],