Merge branch 'dev' into cw-2331-dark-mode-updates-round-2

src/pages/common/components/ChatComponent/ChatComponent.tsx

@@ -174,6 +174,8 @@ export default function ChatComponent({
       singleEmojiText: styles.singleEmojiText,
       multipleEmojiText: styles.multipleEmojiText,
     },
+    onFeedItemClick,
+    onUserClick,
   });
   const {
     chatMessagesData,

src/pages/common/components/ChatComponent/hooks/useDiscussionChatAdapter.ts

@@ -6,8 +6,8 @@ import {
   useDiscussionMessagesById,
   useMarkFeedItemAsSeen,
 } from "@/shared/hooks/useCases";
-import { DirectParent, User } from "@/shared/models";
 import { TextStyles } from "@/shared/hooks/useCases/useDiscussionMessagesById";
+import { DirectParent, User } from "@/shared/models";
 
 interface Options {
   hasPermissionToHide: boolean;
@@ -28,8 +28,13 @@ interface Return {
 }
 
 export const useDiscussionChatAdapter = (options: Options): Return => {
-  const { hasPermissionToHide, textStyles, discussionId } = options;
-
+  const {
+    hasPermissionToHide,
+    textStyles,
+    discussionId,
+    onFeedItemClick,
+    onUserClick,
+  } = options;
   const user = useSelector(selectUser());
   const userId = user?.uid;
   const { data: commonMembers, fetchCommonMembers } = useCommonMembers();
@@ -44,7 +49,9 @@ export const useDiscussionChatAdapter = (options: Options): Return => {
     discussionId,
     hasPermissionToHide,
     users,
-    textStyles
+    textStyles,
+    onFeedItemClick,
+    onUserClick,
   });
   const { markFeedItemAsSeen } = useMarkFeedItemAsSeen();
 

src/pages/commonFeed/CommonFeed.tsx

@@ -27,7 +27,11 @@ import {
 } from "@/shared/constants";
 import { useRoutesContext } from "@/shared/contexts";
 import { useAuthorizedModal, useQueryParams } from "@/shared/hooks";
-import { useCommonFeedItems, useUserCommonIds } from "@/shared/hooks/useCases";
+import {
+  useCommonFeedItems,
+  useLastVisitedCommon,
+  useUserCommonIds,
+} from "@/shared/hooks/useCases";
 import { useCommonPinnedFeedItems } from "@/shared/hooks/useCases/useCommonPinnedFeedItems";
 import { SidebarIcon } from "@/shared/icons";
 import {
@@ -47,7 +51,6 @@ import {
 import {
   cacheActions,
   commonActions,
-  commonLayoutActions,
   selectCommonAction,
   selectRecentStreamId,
   selectSharedFeedItem,
@@ -114,6 +117,7 @@ const CommonFeedComponent: FC<CommonFeedProps> = (props) => {
     fetched: isCommonDataFetched,
     fetchCommonData,
   } = useCommonData(userId);
+  const { updateLastVisitedCommon } = useLastVisitedCommon(userId);
   const parentCommonId = commonData?.common.directParent?.commonId;
   const anotherCommonId =
     userCommonIds[0] === commonId ? userCommonIds[1] : userCommonIds[0];
@@ -414,38 +418,28 @@ const CommonFeedComponent: FC<CommonFeedProps> = (props) => {
   }, [rootCommonMember?.id]);
 
   useEffect(() => {
-    return () => {
+    const updateLastVisited = () => {
       const common = stateRef.current?.data?.common;
-      const rootCommon = stateRef.current?.data?.rootCommon;
 
-      dispatch(
-        commonLayoutActions.setLastCommonFromFeed({
-          id: commonId,
-          data: common
-            ? {
-                name: common.name,
-                image: common.image,
-                isProject: checkIsProject(common),
-                memberCount: common.memberCount,
-                rootCommon: common.rootCommonId
-                  ? {
-                      id: common.rootCommonId,
-                      data: rootCommon
-                        ? {
-                            name: rootCommon.name,
-                            image: rootCommon.image,
-                            isProject: false,
-                            memberCount: rootCommon.memberCount,
-                          }
-                        : null,
-                    }
-                  : null,
-              }
-            : null,
-        }),
-      );
+      updateLastVisitedCommon({
+        id: commonId,
+        data: common
+          ? {
+              name: common.name,
+              image: common.image,
+              isProject: checkIsProject(common),
+              memberCount: common.memberCount,
+            }
+          : null,
+      });
     };
-  }, [commonId]);
+
+    updateLastVisited();
+
+    return () => {
+      updateLastVisited();
+    };
+  }, [updateLastVisitedCommon, commonId]);
 
   if (!isDataFetched) {
     const headerEl = renderLoadingHeader ? (

src/pages/commonFeed/CommonFeedPage.tsx

@@ -1,12 +1,13 @@
 import React, { FC, useEffect, useMemo } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { useParams } from "react-router-dom";
+import { selectUser } from "@/pages/Auth/store/selectors";
 import { InboxItemType } from "@/shared/constants";
 import { MainRoutesProvider } from "@/shared/contexts";
+import { useLastVisitedCommon } from "@/shared/hooks/useCases";
 import { MultipleSpacesLayoutPageContent } from "@/shared/layouts";
 import {
   multipleSpacesLayoutActions,
-  selectCommonLayoutLastCommonFromFeed,
   selectMultipleSpacesLayoutMainWidth,
 } from "@/store/states";
 import BaseCommonFeedPage, {
@@ -59,7 +60,9 @@ const CommonFeedPage: FC = () => {
   const { id: commonId } = useParams<CommonFeedPageRouterParams>();
   const dispatch = useDispatch();
   const layoutMainWidth = useSelector(selectMultipleSpacesLayoutMainWidth);
-  const lastCommonFromFeed = useSelector(selectCommonLayoutLastCommonFromFeed);
+  const user = useSelector(selectUser());
+  const userId = user?.uid;
+  const { lastVisitedCommon } = useLastVisitedCommon(userId);
   const onActiveItemDataChange = useActiveItemDataChange();
   const feedLayoutSettings = useMemo<FeedLayoutSettings>(
     () => ({
@@ -68,13 +71,13 @@ const CommonFeedPage: FC = () => {
     }),
     [layoutMainWidth],
   );
-  const lastCommonFromFeedData = lastCommonFromFeed?.data;
+  const lastCommonFromFeedData = lastVisitedCommon?.data;
 
   const renderLoadingHeader = lastCommonFromFeedData
     ? () => (
         <HeaderContentWrapper className={styles.headerContentWrapper}>
           <HeaderCommonContent
-            commonId={lastCommonFromFeed.id}
+            commonId={lastVisitedCommon.id}
             commonName={lastCommonFromFeedData.name}
             commonImage={lastCommonFromFeedData.image}
             isProject={lastCommonFromFeedData.isProject}
@@ -95,7 +98,7 @@ const CommonFeedPage: FC = () => {
 
   useEffect(() => {
     return () => {
-      dispatch(multipleSpacesLayoutActions.moveBreadcrumbsToPrevious());
+      dispatch(multipleSpacesLayoutActions.clearBreadcrumbs());
     };
   }, []);
 

src/pages/commonFeed/components/FeedLayout/FeedLayout.tsx

@@ -620,7 +620,13 @@ const FeedLayout: ForwardRefRenderFunction<FeedLayoutRef, FeedLayoutProps> = (
   }, [batchNumber]);
 
   useEffect(() => {
-    if (sharedFeedItemId && isTabletView && allFeedItems) {
+    if (
+      isTabletView &&
+      sharedFeedItemId &&
+      allFeedItems.length > 0 &&
+      allFeedItems.some((item) => item.itemId === sharedFeedItemId)
+    ) {
+      deleteQueryParam(QueryParamKey.Item, true);
       setActiveChatItem({ feedItemId: sharedFeedItemId });
     }
   }, [sharedFeedItemId, isTabletView, allFeedItems]);

src/services/User.ts

@@ -15,7 +15,6 @@ import {
   convertObjectDatesToFirestoreTimestamps,
   convertToTimestamp,
   firestoreDataConverter,
-  transformFirebaseDataList,
 } from "@/shared/utils";
 import firebase from "@/shared/utils/firebase";
 import * as cacheActions from "@/store/states/cache/actions";
@@ -51,31 +50,56 @@ class UserService {
     };
   };
 
-  public getUserById = async (userId: string): Promise<User | null> => {
-    const userSnapshot = await this.getUsersCollection()
+  public getUserById = async (
+    userId: string,
+    cached = false,
+  ): Promise<User | null> => {
+    const snapshot = await this.getUsersCollection()
       .where("uid", "==", userId)
-      .get();
+      .get({ source: cached ? "cache" : "default" });
+    const users = snapshot.docs.map((doc) => doc.data());
+    const user = users[0] || null;
+
+    if (cached && !user) {
+      return this.getUserById(userId);
+    }
 
-    return transformFirebaseDataList<User>(userSnapshot)[0] || null;
+    return user;
   };
 
   public getCachedUserById = async (userId: string): Promise<User | null> => {
-    const userState = store.getState().cache.userStates[userId];
+    try {
+      const userState = store.getState().cache.userStates[userId];
 
-    if (userState?.fetched) {
-      return userState.data;
-    }
-    if (userState?.loading) {
-      return await waitForUserToBeLoaded(userId);
-    }
+      if (userState?.fetched) {
+        return userState.data;
+      }
+      if (userState?.loading) {
+        return await waitForUserToBeLoaded(userId);
+      }
 
-    store.dispatch(
-      cacheActions.getUserStateById.request({
-        payload: { userId },
-      }),
-    );
+      store.dispatch(
+        cacheActions.getUserStateById.request({
+          payload: { userId },
+        }),
+      );
+
+      return await waitForUserToBeLoaded(userId);
+    } catch (err) {
+      const user = await this.getUserById(userId, true);
+      store.dispatch(
+        cacheActions.updateUserStateById({
+          userId,
+          state: {
+            loading: false,
+            fetched: true,
+            data: user,
+          },
+        }),
+      );
 
-    return await waitForUserToBeLoaded(userId);
+      return user;
+    }
   };
 
   public getCachedUsersById = async (userIds: string[]): Promise<User[]> =>

src/services/UserActivity.ts

@@ -0,0 +1,59 @@
+import { UnsubscribeFunction } from "@/shared/interfaces";
+import { Collection, UserActivity } from "@/shared/models";
+import { firestoreDataConverter } from "@/shared/utils";
+import firebase, { isFirestoreCacheError } from "@/shared/utils/firebase";
+
+const userActivityConverter = firestoreDataConverter<UserActivity>();
+
+class UserActivityService {
+  private getUsersActivityCollection = () =>
+    firebase
+      .firestore()
+      .collection(Collection.UsersActivity)
+      .withConverter(userActivityConverter);
+
+  public getUserActivity = async (
+    userId: string,
+    cached = false,
+  ): Promise<UserActivity | null> => {
+    try {
+      const snapshot = await this.getUsersActivityCollection()
+        .doc(userId)
+        .get({ source: cached ? "cache" : "default" });
+
+      return snapshot?.data() || null;
+    } catch (error) {
+      if (cached && isFirestoreCacheError(error)) {
+        return this.getUserActivity(userId);
+      } else {
+        throw error;
+      }
+    }
+  };
+
+  public updateUserActivity = async (
+    userId: string,
+    data: Partial<UserActivity>,
+  ): Promise<void> => {
+    await this.getUsersActivityCollection()
+      .doc(userId)
+      .set(data, { merge: true });
+  };
+
+  public subscribeToUserActivity = (
+    userId: string,
+    callback: (userActivity: UserActivity) => void,
+  ): UnsubscribeFunction => {
+    const query = this.getUsersActivityCollection().doc(userId);
+
+    return query.onSnapshot((snapshot) => {
+      const userActivity = snapshot.data();
+
+      if (userActivity) {
+        callback(userActivity);
+      }
+    });
+  };
+}
+
+export default new UserActivityService();

src/services/index.ts

@@ -18,5 +18,6 @@ export { default as PayMeService } from "./PayMeService";
 export { default as ProjectService } from "./Project";
 export { default as ProposalService } from "./Proposal";
 export { default as UserService } from "./User";
+export { default as UserActivityService } from "./UserActivity";
 export { default as DiscussionMessageService } from "./DiscussionMessage";
 export { default as NotionService } from "./Notion";

src/shared/components/Chat/ChatMessage/ChatMessage.tsx

@@ -8,11 +8,7 @@ import React, {
 import classNames from "classnames";
 import { useLongPress } from "use-long-press";
 import { DiscussionMessageService } from "@/services";
-import {
-  ElementDropdown,
-  UserAvatar,
-  UserInfoPopup,
-} from "@/shared/components";
+import { ElementDropdown, UserAvatar } from "@/shared/components";
 import {
   Orientation,
   ChatType,
@@ -145,17 +141,9 @@ export default function ChatMessage({
     (discussionMessage.editedAt?.seconds ?? 0) * 1000,
   );
 
-  const {
-    isShowing: isShowingUserProfile,
-    onClose: onCloseUserProfile,
-    onOpen: onOpenUserProfile,
-  } = useModal(false);
-
   const handleUserClick = () => {
     if (onUserClick && discussionMessageUserId) {
       onUserClick(discussionMessageUserId);
-    } else {
-      onOpenUserProfile();
     }
   };
 
@@ -410,16 +398,6 @@ export default function ChatMessage({
           </>
         )}
       </div>
-      {isShowingUserProfile && isUserDiscussionMessage && (
-        <UserInfoPopup
-          commonId={discussionMessage.commonId}
-          userId={discussionMessage.ownerId}
-          avatar={discussionMessage.ownerAvatar}
-          isShowing={isShowingUserProfile}
-          onClose={onCloseUserProfile}
-          directParent={directParent}
-        />
-      )}
     </li>
   );
 }