IWB-1: added useBlacklist hook (#289)

* added blacklist hook

* removed transaction and hope that it works

* fixed useBlackList.js hook firestore error, and made blacklist check functional

* added refresh spinner for chooseTeam.js

* kinda works lmao

* minor comment change

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

* fixed "invalid-argument"

* removed redundant remove user fix

* pretty

* added missing state from merge

* simple fix

---------

Co-authored-by: Jake Gehrke <91503842+Gehrkej@users.noreply.github.com>
Co-authored-by: Jake Gehrke <gehrkej@oregonstate.edu>

app/segments/(team)/chooseTeam.js

@@ -5,16 +5,18 @@ import {
   sendEmailVerification,
   signOut as signoutFireBase,
 } from "firebase/auth";
-import { doc, getDoc, setDoc } from "firebase/firestore";
+import { doc, setDoc } from "firebase/firestore";
 import { useCallback, useEffect, 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";
 import { TESTING, themeColors } from "~/Constants";
 import { getErrorString } from "~/Utility";
 import ErrorComponent from "~/components/errorComponent";
+import Loading from "~/components/loading";
 import { useAlertContext } from "~/context/Alert";
 import { useAuthContext } from "~/context/Auth";
+import { useBlackList } from "~/dbOperations/hooks/useBlackList";
 import { invalidateMultipleKeys } from "~/dbOperations/invalidateMultipleKeys";
 import { auth, db } from "~/firebaseConfig";
 
@@ -25,12 +27,17 @@ function ChooseTeam() {
 
   const { showDialog, showSnackBar } = useAlertContext();
 
-  const [blacklist, setBlacklist] = useState(false);
+  const {
+    data: blacklist,
+    error: blacklistError,
+    isLoading: blacklistIsLoading,
+  } = useBlackList();
 
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState(null);
+  const invalidateKeys = [["blacklist"]];
 
   const [verified, setVerified] = useState(false);
+  const [refreshing, setRefreshing] = useState(false); //for Refresh Control
+  const [loading, setLoading] = useState(false); //for resend email button
 
   async function handleSignOut() {
     try {
@@ -42,27 +49,6 @@ function ChooseTeam() {
     }
   }
 
-  // TODO: make an actual hook for this? Shouldn't be related tho, as is coach pov?
-  useEffect(() => {
-    const fetchBlacklistDoc = async () => {
-      try {
-        const docRef = doc(db, "teams", "1", "blacklist", currentUserId);
-        const docSnap = await getDoc(docRef);
-
-        //See if the user is on blacklist
-        setBlacklist(docSnap.exists());
-      } catch (e) {
-        setError(e);
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    if (currentUserId) {
-      fetchBlacklistDoc();
-    }
-  }, [currentUserId]);
-
   useEffect(() => {
     if (TESTING) {
       setVerified(true);
@@ -95,23 +81,26 @@ function ChooseTeam() {
     };
   }, []);
 
-  const [refreshing, setRefreshing] = useState(false);
-
   const onRefresh = useCallback(async () => {
     setRefreshing(true);
     await auth.currentUser.reload();
+    await invalidateMultipleKeys(queryClient, invalidateKeys);
     setRefreshing(false);
   }, []);
 
-  if (error) {
-    return <ErrorComponent errorList={[error]} />;
+  if (blacklistIsLoading) {
+    return <Loading />;
+  }
+
+  if (blacklistError) {
+    return <ErrorComponent errorList={[blacklistError]} />;
   }
 
   return (
     <SafeAreaView
       style={{
-        flex: 1,
         justifyContent: "center",
+        flex: 1,
       }}
     >
       <ScrollView
@@ -126,7 +115,7 @@ function ChooseTeam() {
             alignItems: "center",
           }}
         >
-          {blacklist ? (
+          {blacklist[currentUserId] ? (
             <Text
               style={{
                 fontSize: 16,

context/Auth.js

@@ -67,7 +67,7 @@ export const AuthProvider = ({ children }) => {
         }
       }
     });
-  }, [currentUserVerified]);
+  }, []);
   return (
     <AuthContext.Provider
       value={{

dbOperations/hooks/useBlackList.js

@@ -0,0 +1,31 @@
+import { useQuery } from "@tanstack/react-query";
+import { collection, getDocs } from "firebase/firestore";
+import { useAuthContext } from "~/context/Auth";
+import { db } from "~/firebaseConfig";
+
+export const useBlackList = ({ enabled = true } = {}) => {
+  const { currentTeamId } = useAuthContext();
+
+  const { data, error, isLoading } = useQuery({
+    queryKey: ["blacklist"],
+    queryFn: async () => {
+      console.log("fetching blacklist");
+      const newBlacklist = {};
+      // Fetch blacklist
+      const querySnapshot = await getDocs(
+        collection(db, "teams", currentTeamId, "blacklist"),
+      );
+      querySnapshot.forEach((doc) => {
+        newBlacklist[doc.id] = doc.data();
+      });
+      return newBlacklist;
+    },
+    enabled,
+  });
+
+  return {
+    data,
+    error,
+    isLoading,
+  };
+};