[USERS SUB-PR] Changes profile loading logic

src/hooks/useUser.ts

@@ -6,6 +6,7 @@ import { WithId } from "utils/id";
 import { authSelector, profileSelector } from "utils/selectors";
 
 import { useSelector } from "hooks/useSelector";
+import { useFirestoreConnect } from "hooks/useFirestoreConnect";
 
 type UseUserResult = {
   user: FirebaseReducer.AuthState | undefined;
@@ -17,9 +18,19 @@ export const useUser = (): UseUserResult => {
   const auth = useSelector(authSelector);
   const profile = useSelector(profileSelector);
 
+  useFirestoreConnect(
+    auth.uid
+      ? {
+          collection: "users",
+          doc: auth.uid,
+          storeAs: "profile",
+        }
+      : undefined
+  );
+
   return {
     user: !auth.isEmpty ? auth : undefined,
-    profile: !profile.isEmpty ? profile : undefined,
+    profile: profile && !profile.isEmpty ? profile : undefined,
     userWithId: auth && profile ? { ...profile, id: auth.uid } : undefined,
   };
 };

src/hooks/users.ts

@@ -5,50 +5,35 @@ import { WithId } from "utils/id";
 
 import { useSelector } from "./useSelector";
 import { useUserLastSeenThreshold } from "./useUserLastSeenThreshold";
-import { useConnectCurrentVenueNG } from "./useConnectCurrentVenueNG";
-import { useVenueId } from "./useVenueId";
 import { useFirestoreConnect, isLoaded } from "./useFirestoreConnect";
 
 import { User } from "types/User";
-
-export const useConnectWorldUsers = () => {
-  const venueId = useVenueId();
-
-  const { isCurrentVenueLoaded, currentVenue } = useConnectCurrentVenueNG(
-    venueId!
-  );
-
-  // useFirestoreConnect(() => {
-  //   if (!isCurrentVenueLoaded || !currentVenue) return [];
-
-  //   console.log(currentVenue.parentId, currentVenue.id);
-
-  //   return [
-  //     {
-  //       collection: "users",
-  //       where: ["enteredVenueIds", "array-contains", venueId],
-  //       storeAs: "worldUsers",
-  //     },
-  //   ];
-  // });
-
-  useFirestoreConnect(
-    isCurrentVenueLoaded && currentVenue
-      ? {
-          collection: "users",
-          where: ["enteredVenueIds", "array-contains", venueId],
-          storeAs: "worldUsers",
-        }
-      : undefined
-  );
+import { Venue } from "types/Venue";
+
+export const useConnectWorldUsers = (venue?: WithId<Venue>) => {
+  useFirestoreConnect(() => {
+    const venueId = venue?.id;
+
+    if (!venueId) return [];
+
+    return [
+      {
+        collection: "users",
+        where: [
+          "enteredVenueIds",
+          "array-contains",
+          venue?.parentId || venueId,
+        ],
+        storeAs: "worldUsers",
+      },
+    ];
+  });
 };
 
 export const useWorldUsers = (): {
   worldUsers: readonly WithId<User>[];
   isWorldUsersLoaded: boolean;
 } => {
-  // useConnectWorldUsers();
-
   const selectedUniverseUsers = useSelector(worldUsersSelector);
 
   console.log("users", selectedUniverseUsers);
@@ -82,8 +67,6 @@ export const useRecentWorldUsers = (): {
 };
 
 export const useWorldUsersById = () => {
-  // useConnectWorldUsers();
-
   const worldUsersById = useSelector(usersByIdSelector);
 
   return useMemo(() => worldUsersById, [worldUsersById]);

src/index.tsx

@@ -79,8 +79,8 @@ if (LOGROCKET_APP_ID) {
 const stripePromise = loadStripe(STRIPE_PUBLISHABLE_KEY ?? "");
 
 const rrfConfig = {
-  userProfile: "users",
-  useFirestoreForProfile: true,
+  // userProfile: "user",
+  // useFirestoreForProfile: true,
   oneListenerPerPath: true,
   allowMultipleListeners: false,
 };

src/pages/VenuePage/VenuePage.tsx

@@ -27,6 +27,12 @@ import {
   useLocationUpdateEffect,
 } from "utils/useLocationUpdateEffect";
 import { venueEntranceUrl } from "utils/url";
+import { isCompleteProfile, updateProfileEnteredVenueIds } from "utils/profile";
+import { isTruthy } from "utils/types";
+import { showZendeskWidget } from "utils/zendesk";
+
+import { updateTheme } from "./helpers";
+import { updateUserProfile } from "pages/Account/helpers";
 
 import { useConnectCurrentEvent } from "hooks/useConnectCurrentEvent";
 import { useConnectUserPurchaseHistory } from "hooks/useConnectUserPurchaseHistory";
@@ -36,21 +42,32 @@ import { useSelector } from "hooks/useSelector";
 import { useUser } from "hooks/useUser";
 import { useVenueId } from "hooks/useVenueId";
 import { useFirestoreConnect } from "hooks/useFirestoreConnect";
+import { useConnectWorldUsers, useWorldUsers } from "hooks/users";
+import { useConnectCurrentVenueNG } from "hooks/useConnectCurrentVenueNG";
+import useConnectCurrentVenue from "hooks/useConnectCurrentVenue";
 
-import { updateUserProfile } from "pages/Account/helpers";
+import Login from "pages/Account/Login";
 
 import { CountDown } from "components/molecules/CountDown";
 import { LoadingPage } from "components/molecules/LoadingPage/LoadingPage";
 import TemplateWrapper from "./TemplateWrapper";
 
-import { updateTheme } from "./helpers";
-
 import "./VenuePage.scss";
-import useConnectCurrentVenue from "hooks/useConnectCurrentVenue";
-import { isCompleteProfile, updateProfileEnteredVenueIds } from "utils/profile";
-import { isTruthy } from "utils/types";
-import Login from "pages/Account/Login";
-import { showZendeskWidget } from "utils/zendesk";
+
+const VenueDataWrapper = () => {
+  const venueId = useVenueId();
+  const { currentVenue, isCurrentVenueLoaded } = useConnectCurrentVenueNG(
+    venueId!
+  );
+  useConnectWorldUsers(currentVenue);
+
+  const { isWorldUsersLoaded } = useWorldUsers();
+
+  if (!isCurrentVenueLoaded || !currentVenue || !isWorldUsersLoaded)
+    return <LoadingPage />;
+
+  return <VenuePage />;
+};
 
 const hasPaidEvents = (template: VenueTemplate) => {
   return template === VenueTemplate.jazzbar;
@@ -296,4 +313,4 @@ const VenuePage: React.FC = () => {
   return <TemplateWrapper venue={venue} />;
 };
 
-export default VenuePage;
+export default VenueDataWrapper;

src/types/Firestore.ts

@@ -1,3 +1,5 @@
+import { FirebaseReducer } from "react-redux-firebase";
+
 import { AdminRole } from "hooks/roles";
 
 import { PrivateChatMessage, RestrictedChatMessage } from "store/actions/Chat";
@@ -77,6 +79,7 @@ export interface FirestoreData {
   venueChats?: Record<string, RestrictedChatMessage>;
   venueEvents?: Record<string, VenueEvent>;
   venues?: Record<string, AnyVenue>;
+  profile: FirebaseReducer.Profile<User>;
 }
 
 // note: these entries should be sorted alphabetically

src/utils/selectors.ts

@@ -33,7 +33,7 @@ export const authSelector: SparkleSelector<FirebaseReducer.AuthState> = (
  */
 export const profileSelector: SparkleSelector<FirebaseReducer.Profile<User>> = (
   state
-) => state.firebase.profile;
+) => state.firestore.data.profile;
 
 /**
  * Selector to retrieve currentVenue?.[0] from the Redux Firestore.