Merge branch 'staging'

src/pages/Auth/store/saga.tsx

@@ -300,6 +300,7 @@ const resetGlobalData = (fullReset: boolean) => {
   }
   store.dispatch(inboxActions.resetInbox());
   store.dispatch(cacheActions.resetFeedStates());
+  store.dispatch(cacheActions.resetDiscussionMessagesStates());
   store.dispatch(commonActions.resetCommon());
 };
 

src/pages/OldCommon/hooks/useCommonMembers.ts

@@ -1,12 +1,14 @@
-import { useCallback } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
+import { CommonService, Logger, UserService } from "@/services";
+import { store } from "@/shared/appConfig";
 import { LoadingState } from "@/shared/interfaces";
-import { CommonMemberWithUserInfo } from "@/shared/models";
+import { CommonMember, CommonMemberWithUserInfo, User } from "@/shared/models";
 import {
   cacheActions,
   selectCommonMembersStateByCommonId,
+  selectUserStates,
 } from "@/store/states";
-import { getCommonMembers } from "../store/actions";
 
 interface Options {
   commonId?: string;
@@ -16,7 +18,7 @@ type State = LoadingState<CommonMemberWithUserInfo[]>;
 
 interface Return extends State {
   fetchCommonMembers: (circleVisibility?: string[]) => void;
-  setCommonMembers: (commonMembers: CommonMemberWithUserInfo[]) => void;
+  setCommonMembers: (commonMembers: CommonMember[]) => void;
 }
 
 const DEFAULT_STATE: State = {
@@ -27,47 +29,170 @@ const DEFAULT_STATE: State = {
 
 export const useCommonMembers = ({ commonId }: Options): Return => {
   const dispatch = useDispatch();
-
-  const state =
+  const commonMembersState =
     useSelector(selectCommonMembersStateByCommonId(commonId)) || DEFAULT_STATE;
+  const [state, setState] = useState<State>({
+    loading: false,
+    fetched: false,
+    data: [],
+  });
+  const stateRef = useRef(state);
+  stateRef.current = state;
 
   const fetchCommonMembers = useCallback(
-    (circleVisibility: string[] = []) => {
+    async (circleVisibility: string[] = []) => {
       if (!commonId) {
         return;
       }
 
-      dispatch(
-        getCommonMembers.request({
-          payload: { commonId, circleVisibility },
-          callback: (error, commonMembers) => {
-            if (!error) {
-              dispatch(
-                cacheActions.updateCommonMembersByCommonId({
-                  commonId,
-                  commonMembers: commonMembers ?? [],
-                }),
-              );
-            }
-          },
-        }),
-      );
+      await new Promise((resolve) => setTimeout(resolve, 0));
+
+      if (stateRef.current.data.length === 0) {
+        setState({
+          loading: true,
+          fetched: false,
+          data: [],
+        });
+      }
+
+      try {
+        const commonMembers = await CommonService.getCommonMembers(
+          commonId,
+          circleVisibility,
+        );
+        dispatch(
+          cacheActions.updateCommonMembersByCommonId({
+            commonId,
+            commonMembers,
+          }),
+        );
+      } catch (err) {
+        Logger.error(err);
+
+        if (stateRef.current.data.length === 0) {
+          setState({
+            loading: false,
+            fetched: true,
+            data: [],
+          });
+        }
+      }
     },
-    [dispatch, commonId],
+    [dispatch, commonId, stateRef],
   );
 
   const setCommonMembers = useCallback(
-    (commonMembers: CommonMemberWithUserInfo[]) => {
+    (commonMembers: CommonMember[] = []) => {
       dispatch(
         cacheActions.updateCommonMembersByCommonId({
           commonId,
-          commonMembers: commonMembers ?? [],
+          commonMembers,
         }),
       );
     },
-    [commonId],
+    [dispatch, commonId],
   );
 
+  useEffect(() => {
+    const commonMembers = commonMembersState.data;
+
+    if (!commonMembers) {
+      return;
+    }
+    if (commonMembers.length === 0) {
+      setState({
+        loading: false,
+        fetched: true,
+        data: [],
+      });
+      return;
+    }
+
+    (async () => {
+      try {
+        const cachedUserStates = selectUserStates()(store.getState());
+        const hasUsersFromCache = commonMembers.some(
+          ({ userId }) => cachedUserStates[userId]?.data,
+        );
+        let userIdsToFetch = commonMembers.reduce<string[]>(
+          (acc, { userId }) =>
+            cachedUserStates[userId]?.data ? acc : [...acc, userId],
+          [],
+        );
+
+        if (hasUsersFromCache) {
+          setState((prevState) => {
+            const finalCommonMembers = commonMembers.reduce<
+              CommonMemberWithUserInfo[]
+            >((acc, commonMember) => {
+              const existingCommonMember = prevState.data.find(
+                ({ id }) => id === commonMember.id,
+              );
+
+              if (existingCommonMember) {
+                return [...acc, existingCommonMember];
+              }
+
+              const user = cachedUserStates[commonMember.userId]?.data;
+
+              return user ? [...acc, { ...commonMember, user }] : acc;
+            }, []);
+
+            return {
+              loading: false,
+              fetched: true,
+              data: finalCommonMembers,
+            };
+          });
+        } else {
+          userIdsToFetch = commonMembers.map(({ userId }) => userId);
+        }
+
+        if (userIdsToFetch.length === 0) {
+          return;
+        }
+
+        const fetchedUsers = (
+          await UserService.getUsersByIds(userIdsToFetch)
+        ).filter((user): user is User => Boolean(user));
+
+        setState((prevState) => {
+          const finalCommonMembers = commonMembers.reduce<
+            CommonMemberWithUserInfo[]
+          >((acc, commonMember) => {
+            const existingCommonMember = prevState.data.find(
+              ({ id }) => id === commonMember.id,
+            );
+
+            if (existingCommonMember) {
+              return [...acc, existingCommonMember];
+            }
+
+            const user = fetchedUsers.find(
+              ({ uid }) => uid === commonMember.userId,
+            );
+
+            return user ? [...acc, { ...commonMember, user }] : acc;
+          }, []);
+
+          return {
+            loading: false,
+            fetched: true,
+            data: finalCommonMembers,
+          };
+        });
+        dispatch(cacheActions.updateUserStates(fetchedUsers));
+      } catch (err) {
+        Logger.error(err);
+        setState((prevState) => ({
+          loading: false,
+          fetched: true,
+          data: prevState.data,
+        }));
+      }
+    })();
+  }, [commonMembersState.data]);
+
   return {
     ...state,
     data: state.data || DEFAULT_STATE.data,

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

@@ -19,7 +19,7 @@ import {
   QueryParamKey,
   LOADER_APPEARANCE_DELAY,
 } from "@/shared/constants";
-import { useQueryParams } from "@/shared/hooks";
+import { useMemoizedFunction, useQueryParams } from "@/shared/hooks";
 import { useIsTabletView } from "@/shared/hooks/viewport";
 import { ModalTransition } from "@/shared/interfaces";
 import {
@@ -181,21 +181,25 @@ const ChatContent: ForwardRefRenderFunction<
     }
   }, [shouldScrollToElementId, discussionMessages]);
 
-  async function scrollToRepliedMessage(messageId: string, endDate: Date) {
-    await fetchReplied(messageId, endDate);
-    setShouldScrollToElementId(messageId);
-  }
+  const scrollToRepliedMessage = useMemoizedFunction(
+    async (messageId: string, endDate: Date) => {
+      await fetchReplied(messageId, endDate);
+      setShouldScrollToElementId(messageId);
+    },
+  );
 
-  function scrollToRepliedMessageDMChat(messageId: string) {
-    scroller.scrollTo(messageId, {
-      containerId: chatWrapperId,
-      delay: 0,
-      duration: 300,
-      offset: -100,
-      smooth: true,
-    });
-    setHighlightedMessageId(messageId);
-  }
+  const scrollToRepliedMessageDMChat = useMemoizedFunction(
+    (messageId: string) => {
+      scroller.scrollTo(messageId, {
+        containerId: chatWrapperId,
+        delay: 0,
+        duration: 300,
+        offset: -100,
+        smooth: true,
+      });
+      setHighlightedMessageId(messageId);
+    },
+  );
 
   useEffect(() => {
     if (typeof messageIdParam === "string") {

src/pages/common/components/ChatComponent/components/ChatFilePreview/ChatFilePreview.module.scss

@@ -8,15 +8,14 @@
 }
 
 .wrapper {
-  overflow-x: scroll;
+  overflow-x: auto;
   display: flex;
   width: 100%;
 }
 
 .filePreviewWrapper {
   position: relative;
   margin: 1rem 0.5rem 0;
-  height: 6.25rem;
 }
 
 .filePreview {

src/pages/common/components/CommonTabPanels/components/FeedTab/components/NewDiscussionCreation/NewDiscussionCreation.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useCallback, useMemo } from "react";
+import React, { FC, useCallback, useEffect, useMemo } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { selectUser } from "@/pages/Auth/store/selectors";
 import {
@@ -33,6 +33,7 @@ interface NewDiscussionCreationProps {
   isModalVariant?: boolean;
   edit?: boolean;
   defaultVisibility?: string;
+  onDiscussionIdChange?: () => void;
 }
 
 interface InitialValues {
@@ -52,6 +53,7 @@ const NewDiscussionCreation: FC<NewDiscussionCreationProps> = (props) => {
     isModalVariant = false,
     edit,
     defaultVisibility,
+    onDiscussionIdChange,
   } = props;
   const dispatch = useDispatch();
   const discussionCreationData = useSelector(selectDiscussionCreationData);
@@ -132,6 +134,12 @@ const NewDiscussionCreation: FC<NewDiscussionCreationProps> = (props) => {
     [governanceCircles, userCircleIds, userId, common.id, edit],
   );
 
+  useEffect(() => {
+    if (discussionCreationData?.id) {
+      onDiscussionIdChange?.();
+    }
+  }, [discussionCreationData?.id]);
+
   if (
     isModalVariant &&
     typeof commonImage === "string" &&

src/pages/common/components/DiscussionFeedCard/DiscussionFeedCard.tsx

@@ -222,7 +222,7 @@ const DiscussionFeedCard = forwardRef<FeedItemRef, DiscussionFeedCardProps>(
     const commonNotion = outerCommonNotion ?? common?.notion;
 
     const handleOpenChat = useCallback(() => {
-      if (discussion) {
+      if (discussion && !isPreviewMode) {
         setChatItem({
           feedItemId: item.id,
           discussion,
@@ -254,6 +254,7 @@ const DiscussionFeedCard = forwardRef<FeedItemRef, DiscussionFeedCardProps>(
       feedItemUserMetadata?.seen,
       feedItemUserMetadata?.hasUnseenMention,
       nestedItemData,
+      isPreviewMode,
     ]);
 
     const onDiscussionDelete = useCallback(async () => {

src/pages/common/components/ProposalFeedCard/ProposalFeedCard.tsx

@@ -312,7 +312,7 @@ const ProposalFeedCard = forwardRef<FeedItemRef, ProposalFeedCardProps>(
     }, [isActive, cardTitle]);
 
     const handleOpenChat = useCallback(() => {
-      if (discussion && proposal) {
+      if (discussion && proposal && !isPreviewMode) {
         setChatItem({
           feedItemId: item.id,
           discussion,
@@ -345,6 +345,7 @@ const ProposalFeedCard = forwardRef<FeedItemRef, ProposalFeedCardProps>(
       feedItemUserMetadata?.seen,
       feedItemUserMetadata?.hasUnseenMention,
       nestedItemData,
+      isPreviewMode,
     ]);
 
     useEffect(() => {