CW-instatnt-reorder-feedItems-and-inbox

.husky/pre-commit

@@ -1,4 +1,4 @@
-# #!/bin/sh
-# . "$(dirname "$0")/_/husky.sh"
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
 
-# npx lint-staged
+npx lint-staged

src/pages/OldCommon/components/CommonDetailContainer/MembersComponent/CommonMemberComponent.tsx

@@ -45,7 +45,7 @@ const CommonMember: FC<CommonMemberProps> = ({
   const { isShowing, onClose, onOpen } = useModal(false);
   const contextMenuRef = useRef<ContextMenuRef>(null);
   const recentAssignedCircle: Circle | undefined = useSelector(
-    selectRecentAssignedCircle(member.userId),
+    selectRecentAssignedCircle(commonId, member.userId),
   );
 
   const handleContextMenu: MouseEventHandler<HTMLLIElement> = (event) => {

src/pages/common/BaseCommon.tsx

@@ -79,12 +79,17 @@ const BaseCommon: FC<CommonProps> = (props) => {
   }, [userId]);
 
   useEffect(() => {
-    dispatch(setCommonMember(commonMember || null));
+    dispatch(setCommonMember({ commonId, member: commonMember || null }));
     onCommonMemberChange?.(commonMember || null);
   }, [dispatch, commonMember]);
 
   useEffect(() => {
-    dispatch(setCommonGovernance(commonData?.governance || null));
+    dispatch(
+      setCommonGovernance({
+        commonId,
+        governance: commonData?.governance || null,
+      }),
+    );
   }, [dispatch, commonData?.governance]);
 
   useEffect(() => {

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

@@ -54,6 +54,7 @@ import {
   removeTextEditorEmptyEndLinesValues,
   countTextEditorEmojiElements,
 } from "@/shared/ui-kit";
+import { BaseTextEditorHandles } from "@/shared/ui-kit/TextEditor/BaseTextEditor";
 import { checkUncheckedItemsInTextEditorValue } from "@/shared/ui-kit/TextEditor/utils";
 import { InternalLinkData, notEmpty } from "@/shared/utils";
 import { getUserName, hasPermission, isMobile } from "@/shared/utils";
@@ -70,6 +71,7 @@ import {
   selectInstantDiscussionMessagesOrder,
 } from "@/store/states";
 import { ChatContentContext, ChatContentData } from "../CommonContent/context";
+import { useFeedItemContext } from "../FeedItem";
 import {
   ChatContent,
   ChatContentRef,
@@ -87,8 +89,6 @@ import {
   uploadFilesAndImages,
 } from "./utils";
 import styles from "./ChatComponent.module.scss";
-import { BaseTextEditorHandles } from "@/shared/ui-kit/TextEditor/BaseTextEditor";
-import { useFeedItemContext } from "../FeedItem";
 
 const BASE_CHAT_INPUT_HEIGHT = 48;
 const BASE_ORDER_INTERVAL = 1000;
@@ -259,19 +259,16 @@ export default function ChatComponent({
     parseStringToTextEditorValue(),
   );
 
-  const {
-    setIsInputFocused
-  } = useFeedItemContext();
+  const { setIsInputFocused } = useFeedItemContext();
 
   useEffect(() => {
     const isEmpty = checkIsTextEditorValueEmpty(message);
-    if(!isEmpty || message.length > 1) {
+    if (!isEmpty || message.length > 1) {
       setIsInputFocused?.(true);
     } else {
       setIsInputFocused?.(false);
     }
-
-  },[message, setIsInputFocused])
+  }, [message, setIsInputFocused]);
 
   const emojiCount = useMemo(
     () => countTextEditorEmojiElements(message),
@@ -294,9 +291,12 @@ export default function ChatComponent({
   const optimisticDiscussionMessages = useSelector(
     selectOptimisticDiscussionMessages,
   );
-  const instantDiscussionMessagesOrder = useSelector(selectInstantDiscussionMessagesOrder);
+  const instantDiscussionMessagesOrder = useSelector(
+    selectInstantDiscussionMessagesOrder,
+  );
 
-  const currentChatOrder = instantDiscussionMessagesOrder.get(discussionId)?.order || 1;
+  const currentChatOrder =
+    instantDiscussionMessagesOrder.get(discussionId)?.order || 1;
 
   const isOptimisticChat = optimisticFeedItems.has(discussionId);
 
@@ -604,7 +604,11 @@ export default function ChatComponent({
 
             return [...prev, ...filePreviewPayload, payload];
           });
-          dispatch(optimisticActions.setInstantDiscussionMessagesOrder({discussionId}));
+          dispatch(
+            optimisticActions.setInstantDiscussionMessagesOrder({
+              discussionId,
+            }),
+          );
         }
 
         if (isChatChannel) {
@@ -638,10 +642,15 @@ export default function ChatComponent({
             userName: getUserName(user),
             ownerType: DiscussionMessageOwnerType.User,
             content: JSON.stringify(message),
-          }
+          },
         };
 
-        dispatch(commonActions.setFeedItemUpdatedAt(payloadUpdateFeedItem));
+        dispatch(
+          commonActions.setFeedItemUpdatedAt({
+            ...payloadUpdateFeedItem,
+            commonId,
+          }),
+        );
         dispatch(inboxActions.setInboxItemUpdatedAt(payloadUpdateFeedItem));
         document
           .getElementById("feedLayoutWrapper")
@@ -765,7 +774,7 @@ export default function ChatComponent({
   useLayoutEffect(() => {
     textInputRef?.current?.clear?.();
     textInputRef?.current?.focus?.();
-  },[discussionId]);
+  }, [discussionId]);
 
   useEffect(() => {
     if (isFetchedDiscussionMessages) {

src/pages/common/components/CommonContent/CommonContent.tsx

@@ -1,5 +1,5 @@
 import React, { FC, useEffect, useMemo, useState } from "react";
-import { useDispatch, useSelector } from "react-redux";
+import { useSelector } from "react-redux";
 import { useHistory } from "react-router-dom";
 import { CommonPageSettings } from "@/pages/common/types";
 import { useRoutesContext } from "@/shared/contexts";
@@ -16,7 +16,7 @@ import {
 } from "@/shared/models";
 import { Container } from "@/shared/ui-kit";
 import { getInboxPagePath } from "@/shared/utils";
-import { commonActions, selectIsNewProjectCreated } from "@/store/states";
+import { selectIsNewProjectCreated } from "@/store/states";
 import { CommonDataProvider } from "../../providers";
 import { CommonHeader } from "../CommonHeader";
 import { CommonManagement } from "../CommonManagement";
@@ -67,7 +67,6 @@ const CommonContent: FC<CommonContentProps> = (props) => {
     setIsJoinPending,
   } = props;
   const isTabletView = useIsTabletView();
-  const dispatch = useDispatch();
   const history = useHistory();
   const { canGoBack, goBack } = useGoBack();
   const { getCommonPagePath } = useRoutesContext();
@@ -86,7 +85,9 @@ const CommonContent: FC<CommonContentProps> = (props) => {
       allowedTabs,
     }),
   );
-  const isNewProjectCreated = useSelector(selectIsNewProjectCreated);
+
+  const commonId = common.id;
+  const isNewProjectCreated = useSelector(selectIsNewProjectCreated(commonId));
   const parentCommonId = common.directParent?.commonId;
   const isSubCommon = common.directParent !== null;
 
@@ -108,12 +109,6 @@ const CommonContent: FC<CommonContentProps> = (props) => {
     }
   }, [isCommonMember, common.listVisibility, history.push, goBack, canGoBack]);
 
-  useEffect(() => {
-    return () => {
-      dispatch(commonActions.resetCommon());
-    };
-  }, []);
-
   return (
     <CommonDataProvider
       settings={settings}
@@ -136,7 +131,7 @@ const CommonContent: FC<CommonContentProps> = (props) => {
         commonMember={commonMember}
         circles={governance.circles}
         isSubCommon={isSubCommon}
-        commonId={common.id}
+        commonId={commonId}
       />
       <CommonSidenavLayoutPageContent
         className={settings?.pageContentClassName}
@@ -145,7 +140,7 @@ const CommonContent: FC<CommonContentProps> = (props) => {
             settings.renderHeaderContent()
           ) : !isTabletView ? (
             <HeaderContent
-              backButtonPath={getCommonPagePath(common.id)}
+              backButtonPath={getCommonPagePath(commonId)}
               withoutBackButton={!commonMember}
             />
           ) : null
@@ -168,7 +163,7 @@ const CommonContent: FC<CommonContentProps> = (props) => {
             {!isTabletView && (
               <Container>
                 <CommonManagement
-                  commonId={common.id}
+                  commonId={commonId}
                   activeTab={tab}
                   allowedTabs={allowedTabs}
                   isSubCommon={isSubCommon}
@@ -197,7 +192,10 @@ const CommonContent: FC<CommonContentProps> = (props) => {
         </div>
       </CommonSidenavLayoutPageContent>
       {isGlobalDataFetched && isNewProjectCreated && parentCommonId && (
-        <SuccessfulProjectCreationModal parentCommonId={parentCommonId} />
+        <SuccessfulProjectCreationModal
+          commonId={commonId}
+          parentCommonId={parentCommonId}
+        />
       )}
     </CommonDataProvider>
   );

src/pages/common/components/CommonContent/components/SuccessfulProjectCreationModal/SuccessfulProjectCreationModal.tsx

@@ -9,22 +9,27 @@ import styles from "./SuccessfulProjectCreationModal.module.scss";
 
 interface SuccessfulProjectCreationModalProps {
   parentCommonId: string;
+  commonId: string;
 }
 
 const SuccessfulProjectCreationModal: FC<
   SuccessfulProjectCreationModalProps
 > = (props) => {
-  const { parentCommonId } = props;
+  const { parentCommonId, commonId } = props;
   const dispatch = useDispatch();
   const history = useHistory();
 
   const handleClose = () => {
-    dispatch(commonActions.setIsNewProjectCreated(false));
+    dispatch(
+      commonActions.setIsNewProjectCreated({ isCreated: false, commonId }),
+    );
     history.push(getCommonPageAboutTabPath(parentCommonId));
   };
 
   const handleJumpToProject = () => {
-    dispatch(commonActions.setIsNewProjectCreated(false));
+    dispatch(
+      commonActions.setIsNewProjectCreated({ isCreated: false, commonId }),
+    );
   };
 
   return (

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

@@ -179,14 +179,10 @@ export const FeedTab: FC<FeedTabProps> = (props) => {
 
   useEffect(() => {
     return () => {
-      dispatch(
-        commonActions.getFeedItems.cancel(
-          "Cancel feed items fetch on feed umount",
-        ),
-      );
-      dispatch(commonActions.resetFeedItems());
+      dispatch(commonActions.getFeedItems.cancel({ commonId: common.id }));
+      dispatch(commonActions.resetFeedItems({ commonId: common.id }));
     };
-  }, []);
+  }, [common.id]);
 
   const contextValue = useMemo(
     () => ({

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

@@ -2,6 +2,7 @@ import React, { FC, useCallback, useEffect, useMemo } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { v4 as uuidv4 } from "uuid";
 import { selectUser } from "@/pages/Auth/store/selectors";
+import { DiscussionMessageOwnerType } from "@/shared/constants";
 import {
   NewDiscussionCreationFormValues,
   UploadFile,
@@ -18,15 +19,18 @@ import {
   TextEditorValue,
   parseStringToTextEditorValue,
 } from "@/shared/ui-kit/TextEditor";
-import { generateFirstMessage, generateOptimisticFeedItem, getUserName } from "@/shared/utils";
+import {
+  generateFirstMessage,
+  generateOptimisticFeedItem,
+  getUserName,
+} from "@/shared/utils";
 import {
   optimisticActions,
   selectDiscussionCreationData,
   selectIsDiscussionCreationLoading,
 } from "@/store/states";
 import { commonActions } from "@/store/states";
 import { DiscussionCreationCard, DiscussionCreationModal } from "./components";
-import { DiscussionMessageOwnerType } from "@/shared/constants";
 
 interface NewDiscussionCreationProps {
   common: Common;
@@ -60,8 +64,12 @@ const NewDiscussionCreation: FC<NewDiscussionCreationProps> = (props) => {
     onDiscussionIdChange,
   } = props;
   const dispatch = useDispatch();
-  const discussionCreationData = useSelector(selectDiscussionCreationData);
-  const isLoading = useSelector(selectIsDiscussionCreationLoading);
+
+  const commonId = common.id;
+  const discussionCreationData = useSelector(
+    selectDiscussionCreationData(commonId),
+  );
+  const isLoading = useSelector(selectIsDiscussionCreationLoading(commonId));
   const user = useSelector(selectUser());
   const userId = user?.uid;
   const userCircleIds = useMemo(
@@ -71,7 +79,7 @@ const NewDiscussionCreation: FC<NewDiscussionCreationProps> = (props) => {
 
   const handleCancel = () => {
     dispatch(commonActions.setCommonAction(null));
-    dispatch(commonActions.setDiscussionCreationData(null));
+    dispatch(commonActions.setDiscussionCreationData({ data: null, commonId }));
   };
 
   const initialValues: NewDiscussionCreationFormValues = useMemo(() => {
@@ -118,6 +126,7 @@ const NewDiscussionCreation: FC<NewDiscussionCreationProps> = (props) => {
               message: JSON.stringify(values.content),
               images: values.images,
             },
+            commonId,
           }),
         );
       } else {
@@ -136,13 +145,15 @@ const NewDiscussionCreation: FC<NewDiscussionCreationProps> = (props) => {
             ownerId: userId,
             userName,
             ownerType: DiscussionMessageOwnerType.System,
-            content: generateFirstMessage({userName, userId}),
-          }
+            content: generateFirstMessage({ userName, userId }),
+          },
         });
-        dispatch(optimisticActions.setOptimisticFeedItem({
-          data: optimisticFeedItem, 
-          common
-        }));
+        dispatch(
+          optimisticActions.setOptimisticFeedItem({
+            data: optimisticFeedItem,
+            common,
+          }),
+        );
         dispatch(commonActions.setRecentStreamId(optimisticFeedItem.data.id));
         dispatch(
           commonActions.createDiscussion.request({
@@ -155,13 +166,14 @@ const NewDiscussionCreation: FC<NewDiscussionCreationProps> = (props) => {
               images: values.images,
               circleVisibility,
             },
+            commonId,
           }),
         );
       }
 
       handleCancel();
     },
-    [governanceCircles, userCircleIds, userId, common.id, edit],
+    [governanceCircles, userCircleIds, userId, commonId, edit],
   );
 
   useEffect(() => {
@@ -185,6 +197,7 @@ const NewDiscussionCreation: FC<NewDiscussionCreationProps> = (props) => {
         isLoading={isLoading}
         commonImage={commonImage}
         commonName={commonName}
+        commonId={commonId}
         edit={edit}
       />
     );
@@ -199,6 +212,7 @@ const NewDiscussionCreation: FC<NewDiscussionCreationProps> = (props) => {
       onCancel={handleCancel}
       isLoading={isLoading}
       edit={edit}
+      commonId={commonId}
     />
   );
 };