Fix/chat blowup (#3024)

* Replace old useUser with newer useLiveUser hook (and similar useUser)

* Replace offending private message hooks

* Remove braces

src/components/admin/UserProfileModal/components/header/ProfileModalAvatar.tsx

@@ -11,7 +11,7 @@ import { ContainerClassName } from "types/utility";
 
 import { WithId } from "utils/id";
 
-import { useLiveUser } from "hooks/user/useLiveUser";
+import { useUserId } from "hooks/user/useUserId";
 import { useUploadProfilePictureHandler } from "hooks/useUploadProfilePictureHandler";
 
 import { UserAvatar } from "components/atoms/UserAvatar";
@@ -36,7 +36,7 @@ export const ProfileModalAvatar: React.FC<ProfileModalAvatarProps> = ({
   const uploadRef = useRef<HTMLInputElement>(null);
   const [error, setError] = useState("");
 
-  const { userId } = useLiveUser();
+  const { userId } = useUserId();
   const uploadProfilePictureHandler = useUploadProfilePictureHandler(
     setError,
     userId

src/components/atoms/UserAvatar/UserAvatar.tsx

@@ -49,7 +49,7 @@ const AVATAR_SIZE_MAP: { [key in UserAvatarSize]: number | null } = {
 };
 
 // @debt the UserProfilePicture component serves a very similar purpose to this, we should unify them as much as possible
-export const _UserAvatar: React.FC<UserAvatarProps> = ({
+const _UserAvatar: React.FC<UserAvatarProps> = ({
   user,
   containerClassName, // @debt remove injected classes in favor of variance props
   imageClassName, // @debt remove injected classes in favor of variance props

src/components/attendee/BasicInfo/ProfileModalAvatar/ProfileModalAvatar.tsx

@@ -10,7 +10,7 @@ import { User } from "types/User";
 
 import { WithId } from "utils/id";
 
-import { useLiveUser } from "hooks/user/useLiveUser";
+import { useUserId } from "hooks/user/useUserId";
 import { useUploadProfilePictureHandler } from "hooks/useUploadProfilePictureHandler";
 
 import { UserAvatar } from "components/atoms/UserAvatar";
@@ -37,7 +37,7 @@ export const ProfileModalAvatar: React.FC<ProfileModalAvatarProps> = ({
   const uploadRef = useRef<HTMLInputElement>(null);
   const [error, setError] = useState("");
 
-  const { userId } = useLiveUser();
+  const { userId } = useUserId();
   const uploadProfilePictureHandler = useUploadProfilePictureHandler(
     setError,
     userId

src/components/attendee/ChatContainer.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import classNames from "classnames";
 
 import { ChatTypes } from "types/chat";
@@ -57,7 +58,7 @@ export const ChatContainer: React.FC<ChatContainerProps> = ({ isRelative }) => {
           >
             Messages
             {numberOfUnreadMessages > 0 && (
-              <div className={styles.messageNotification}></div>
+              <div className={styles.messageNotification} />
             )}
           </span>
           <span onClick={toggleSidebar} className={styles.toggler}>

src/components/molecules/ChatPoll/ChatPoll.tsx

@@ -9,7 +9,7 @@ import { PollMessage, PollQuestion } from "types/chat";
 import { WithId } from "utils/id";
 
 import { useIsCurrentUser } from "hooks/useIsCurrentUser";
-import { useLiveUser } from "hooks/user/useLiveUser";
+import { useUserId } from "hooks/user/useUserId";
 import { useVenuePoll } from "hooks/useVenuePoll";
 
 import { RenderMarkdown } from "components/organisms/RenderMarkdown";
@@ -30,7 +30,7 @@ export const ChatPoll: React.FC<ChatPollProps> = ({
   pollMessage,
   voteInPoll,
 }) => {
-  const { userId } = useLiveUser();
+  const { userId } = useUserId();
   const { id, poll, votes } = pollMessage;
   const { questions, topic } = poll;
   const isMine = useIsCurrentUser(pollMessage.fromUser.id);

src/components/molecules/ScheduleItem/ScheduleItem.tsx

@@ -22,7 +22,7 @@ import { getFirebaseStorageResizedImage } from "utils/image";
 import { formatDateRelativeToNow, formatTimeLocalised } from "utils/time";
 import { enterSpace, generateAttendeeInsideUrl } from "utils/url";
 
-import { useLiveUser } from "hooks/user/useLiveUser";
+import { useUserId } from "hooks/user/useUserId";
 import { useRelatedVenues } from "hooks/useRelatedVenues";
 import { useShowHide } from "hooks/useShowHide";
 import { useWorldParams } from "hooks/worlds/useWorldParams";
@@ -102,7 +102,7 @@ export const ScheduleItem: React.FC<ScheduleItemProps> = ({
     "ScheduleItem__time--live": isCurrentEventLive,
   });
 
-  const { userId } = useLiveUser();
+  const { userId } = useUserId();
 
   const bookmarkEvent: MouseEventHandler<HTMLDivElement> = useCallback(
     (e) => {

src/components/organisms/ChatSidebar/ChatSidebar.tsx

@@ -1,16 +1,22 @@
 import React from "react";
 import { isEqual } from "lodash";
 
+import { CHAT_TAB_PRIVATE_ID, CHAT_TAB_SPACE_ID } from "settings";
+
 import { ChatTypes } from "types/chat";
 
+import { captureError, SparkleAssertError } from "utils/error";
+
 import { useChatSidebarControls } from "hooks/chats/util/useChatSidebarControls";
+import { useUserId } from "hooks/user/useUserId";
 
 import { PrivateChats, VenueChat } from "./components";
 
 import styles from "./ChatSidebar.module.scss";
 
-export const _ChatSidebar: React.FC = () => {
+const _ChatSidebar: React.FC = () => {
   const { chatSettings } = useChatSidebarControls();
+  const { userId, isLoading } = useUserId();
 
   const isVenueChat = chatSettings.openedChatType === ChatTypes.VENUE_CHAT;
   const isPrivateChat = chatSettings.openedChatType === ChatTypes.PRIVATE_CHAT;
@@ -19,17 +25,33 @@ export const _ChatSidebar: React.FC = () => {
       ? chatSettings.recipient
       : undefined;
 
-  const venueTabId = "chat-sidebar-tab-venue";
-  const privateTabId = "chat-sidebar-tab-private";
+  if (isLoading) {
+    // No need to show anything in this case
+    // loading should be quick and from cache
+    return null;
+  } else if (!userId) {
+    // But in this case, chat has been used in a in a place with no user logged in
+    captureError(
+      new SparkleAssertError({
+        message:
+          "ChatSidebar, as a descendant of LoginRestricted, should have userId",
+        where: "ChatSidebar",
+        args: { isLoading, userId, chatSettings },
+      })
+    );
+    return null;
+  }
 
   return (
     <div
       role="dialog"
-      aria-labelledby={isVenueChat ? venueTabId : privateTabId}
+      aria-labelledby={isVenueChat ? CHAT_TAB_SPACE_ID : CHAT_TAB_PRIVATE_ID}
       className={styles.chatSidebar}
     >
       {isVenueChat && <VenueChat />}
-      {isPrivateChat && <PrivateChats recipient={recipient} />}
+      {isPrivateChat && userId && (
+        <PrivateChats userId={userId} recipient={recipient} />
+      )}
     </div>
   );
 };

src/components/organisms/ChatSidebar/components/PrivateChats/PrivateChats.tsx

@@ -1,12 +1,12 @@
 import React, { useMemo } from "react";
 
+import { UserId } from "types/id";
 import { DisplayUser } from "types/User";
 
 import { WithId } from "utils/id";
 
 import { usePrivateChatPreviews } from "hooks/chats/private/usePrivateChatPreviews";
 import { useChatSidebarControls } from "hooks/chats/util/useChatSidebarControls";
-import { useLiveUser } from "hooks/user/useLiveUser";
 import { useRelatedVenues } from "hooks/useRelatedVenues";
 
 import { OnlineUser, PrivateChatPreview, RecipientChat } from "..";
@@ -15,13 +15,14 @@ import styles from "./PrivateChats.module.scss";
 
 export interface PrivateChatsProps {
   recipient: WithId<DisplayUser> | undefined;
+  userId: UserId;
 }
 
-export const PrivateChats: React.FC<PrivateChatsProps> = ({ recipient }) => {
+export const PrivateChats: React.FC<PrivateChatsProps> = ({
+  recipient,
+  userId,
+}) => {
   const { sovereignVenue } = useRelatedVenues();
-
-  const { userId } = useLiveUser();
-
   const { privateChatPreviews } = usePrivateChatPreviews();
   const { selectRecipientChat } = useChatSidebarControls();
 

src/components/organisms/TimingEventModal/TimingEventModal.tsx

@@ -23,7 +23,7 @@ import { MaybeWithId, WithId } from "utils/id";
 import { eventEditSchema } from "forms/eventEditSchema";
 
 import { useOwnedVenues } from "hooks/useOwnedVenues";
-import { useLiveUser } from "hooks/user/useLiveUser";
+import { useUserId } from "hooks/user/useUserId";
 
 import { LoadingPage } from "components/molecules/LoadingPage";
 import { Modal } from "components/molecules/Modal";
@@ -82,7 +82,7 @@ export const TimingEventModal: React.FC<TimingEventModalProps> = ({
     }
   }, [event, reset, eventSpaceId]);
 
-  const { userId } = useLiveUser();
+  const { userId } = useUserId();
   const { ownedVenues, isLoading: isSpacesLoading } = useOwnedVenues({
     worldId,
     userId: userId ?? "",

src/hooks/chats/common/useChatMessages.ts

@@ -1,10 +1,10 @@
 import { useMemo } from "react";
-import { useFirestoreCollectionData } from "reactfire";
 import { orderBy, Query, query } from "firebase/firestore";
 
-import { ALWAYS_EMPTY_ARRAY } from "settings";
+import { ALWAYS_EMPTY_ARRAY, DEFERRED } from "settings";
 
 import { BaseChatMessage, ChatMessage, MessageToDisplay } from "types/chat";
+import { DeferredAction } from "types/id";
 
 import {
   filterNewSchemaMessages,
@@ -14,8 +14,11 @@ import {
 } from "utils/chat";
 import { withIdConverter } from "utils/converters";
 import { WithId } from "utils/id";
+import { isDeferred } from "utils/query";
 import { isTruthy } from "utils/types";
 
+import { useFireQuery } from "hooks/fire/useFireQuery";
+
 export const useChatMessagesForDisplay = <T extends ChatMessage>(
   messagesRef: Query<T>,
   filter: (msg: T) => boolean = () => true
@@ -69,18 +72,16 @@ export const useChatMessages = <T extends ChatMessage>(
 };
 
 export const useChatMessagesRaw = <T extends BaseChatMessage>(
-  messagesRef: Query<T>
+  messagesRef: Query<T> | DeferredAction
 ): [WithId<T>[], boolean] => {
-  const {
-    data: rawMessages = ALWAYS_EMPTY_ARRAY,
-    status,
-  } = useFirestoreCollectionData(
-    query(messagesRef, orderBy("timestamp", "desc")).withConverter<WithId<T>>(
-      withIdConverter()
-    ),
-    {
-      idField: "id",
-    }
+  const { data: rawMessages = ALWAYS_EMPTY_ARRAY, isLoaded } = useFireQuery(
+    useMemo(() => {
+      if (isDeferred(messagesRef)) return DEFERRED;
+
+      return query(messagesRef, orderBy("timestamp", "desc")).withConverter<
+        WithId<T>
+      >(withIdConverter());
+    }, [messagesRef])
   );
 
   const chatMessages = useMemo(
@@ -90,5 +91,5 @@ export const useChatMessagesRaw = <T extends BaseChatMessage>(
     [rawMessages]
   );
 
-  return [chatMessages, status !== "loading"];
+  return [chatMessages, isLoaded];
 };

src/hooks/chats/private/usePrivateChatPreviews.ts

@@ -1,32 +1,32 @@
 import { useMemo } from "react";
-import { useFirestore } from "reactfire";
-import { collection, query } from "firebase/firestore";
+import { collection, getFirestore, query } from "firebase/firestore";
+
+import { COLLECTION_PRIVATE_CHATS, DEFERRED } from "settings";
 
 import { PreviewChatMessageMap, PrivateChatMessage } from "types/chat";
 
 import { getPreviewChatMessage } from "utils/chat";
 import { withIdConverter } from "utils/converters";
-import { convertToFirestoreKey } from "utils/id";
 
 import { useChatMessagesRaw } from "hooks/chats/common/useChatMessages";
-import { useLiveUser } from "hooks/user/useLiveUser";
+import { useUserId } from "hooks/user/useUserId";
 
 export const usePrivateChatPreviews = () => {
-  const { userId } = useLiveUser();
-  const firestore = useFirestore();
+  const { userId } = useUserId();
+
+  const [privateChatMessages, isUserPrivateChatsLoaded] = useChatMessagesRaw(
+    useMemo(() => {
+      if (!userId) return DEFERRED;
 
-  const [
-    privateChatMessages,
-    isUserPrivateChatsLoaded,
-  ] = useChatMessagesRaw<PrivateChatMessage>(
-    query<PrivateChatMessage>(
-      collection(
-        firestore,
-        "privatechats",
-        convertToFirestoreKey(userId),
-        "chats"
-      ).withConverter<PrivateChatMessage>(withIdConverter())
-    )
+      return query<PrivateChatMessage>(
+        collection(
+          getFirestore(),
+          COLLECTION_PRIVATE_CHATS,
+          userId,
+          "chats"
+        ).withConverter<PrivateChatMessage>(withIdConverter())
+      );
+    }, [userId])
   );
 
   const privateChatPreviewsMap: PreviewChatMessageMap = useMemo(

src/hooks/chats/private/useRecipientChat.ts

@@ -7,10 +7,10 @@ import { DisplayUser } from "types/User";
 import { convertToFirestoreKey, WithId } from "utils/id";
 
 import { useChatMessagesForDisplay } from "hooks/chats/common/useChatMessages";
-import { useLiveUser } from "hooks/user/useLiveUser";
+import { useUserId } from "hooks/user/useUserId";
 
 export const useRecipientChatMessages = (recipient: WithId<DisplayUser>) => {
-  const { userId } = useLiveUser();
+  const { userId } = useUserId();
   const firestore = useFirestore();
 
   const messagesRef = collection(

src/hooks/chats/private/useRecipientChatActions.ts

@@ -16,12 +16,12 @@ import {
   useSendChatMessage,
   useSendThreadMessage,
 } from "hooks/chats/common/useSendMessage";
-import { useLiveUser } from "hooks/user/useLiveUser";
+import { useUserId } from "hooks/user/useUserId";
 
 export const useRecipientChatActions = (
   recipient: WithId<DisplayUser>
 ): PrivateChatActions => {
-  const { userId } = useLiveUser();
+  const { userId } = useUserId();
 
   const refs = useMemo(() => {
     if (!userId) return [];

src/hooks/chats/util/useChatSidebarInfo.ts

@@ -1,7 +1,7 @@
 import { useMemo } from "react";
 
 import { usePrivateChatPreviews } from "hooks/chats/private/usePrivateChatPreviews";
-import { useLiveUser } from "hooks/user/useLiveUser";
+import { useUserId } from "hooks/user/useUserId";
 
 export const useChatSidebarInfo = () => {
   const numberOfUnreadChats = useNumberOfUnreadChats();
@@ -14,7 +14,7 @@ export const useChatSidebarInfo = () => {
 };
 
 export const useNumberOfUnreadChats = () => {
-  const { userId } = useLiveUser();
+  const { userId } = useUserId();
   const { privateChatPreviews } = usePrivateChatPreviews();
 
   return useMemo(

src/hooks/chats/venue/useCanDeleteVenueChatMessages.tsx

@@ -2,7 +2,7 @@ import { World } from "api/world";
 
 import { SpaceWithId } from "types/id";
 
-import { useLiveUser } from "hooks/user/useLiveUser";
+import { useUserId } from "hooks/user/useUserId";
 
 type UseCanDeleteVenueChatMessagesOptions = {
   space: SpaceWithId;
@@ -13,7 +13,7 @@ export const useCanDeleteVenueChatMessages = (
   options: UseCanDeleteVenueChatMessagesOptions
 ) => {
   const { world, space } = options;
-  const { userId } = useLiveUser();
+  const { userId } = useUserId();
 
   if (!userId) return false;