Merge branch 'dev' into cw-2267-support-darkmode

craco.config.js

@@ -25,10 +25,9 @@ module.exports = {
     {
       plugin: {
         overrideWebpackConfig: ({ webpackConfig }) => {
-          webpackConfig.devtool =
-            process.env.REACT_APP_ENV === "dev"
-              ? "source-map"
-              : "eval-cheap-module-source-map";
+          if (process.env.REACT_APP_ENV === "production") {
+            delete webpackConfig.devtool;
+          }
 
           return webpackConfig;
         },

package.json

@@ -64,6 +64,7 @@
     "react-virtualized": "^9.22.3",
     "react-zoom-pan-pinch": "^3.2.0",
     "redux": "^4.0.4",
+    "redux-persist": "^6.0.0",
     "redux-saga": "^1.1.3",
     "reselect": "^4.0.0",
     "slate": "^0.94.1",

src/pages/App/AppWrapper.tsx

@@ -1,11 +1,14 @@
 import React, { FC } from "react";
 import { Provider } from "react-redux";
-import { store } from "@/shared/appConfig";
+import { PersistGate } from "redux-persist/integration/react";
+import { store, persistor } from "@/shared/appConfig";
 import { NotificationProvider } from "./providers";
 
 const AppWrapper: FC = ({ children }) => (
   <Provider store={store}>
-    <NotificationProvider>{children}</NotificationProvider>
+    <PersistGate loading={null} persistor={persistor}>
+      <NotificationProvider>{children}</NotificationProvider>
+    </PersistGate>
   </Provider>
 );
 

src/pages/Auth/store/saga.tsx

@@ -15,7 +15,9 @@ import { getProvider } from "@/shared/utils/authProvider";
 import { getFundingRequestNotification } from "@/shared/utils/notifications";
 import {
   cacheActions,
+  commonActions,
   commonLayoutActions,
+  inboxActions,
   multipleSpacesLayoutActions,
 } from "@/store/states";
 import {
@@ -301,6 +303,16 @@ const updateUserData = async (user: User): Promise<User> => {
   });
 };
 
+const resetGlobalData = (fullReset: boolean) => {
+  if (fullReset) {
+    store.dispatch(multipleSpacesLayoutActions.resetMultipleSpacesLayout());
+    store.dispatch(commonLayoutActions.clearData());
+  }
+  store.dispatch(inboxActions.resetInbox());
+  store.dispatch(cacheActions.resetFeedStates());
+  store.dispatch(commonActions.resetCommon());
+};
+
 function* socialLoginSaga({
   payload,
 }: ReturnType<typeof actions.socialLogin.request>) {
@@ -465,8 +477,6 @@ function* logOut() {
     window.ReactNativeWebView.postMessage(WebviewActions.logout);
   }
 
-  yield put(multipleSpacesLayoutActions.resetMultipleSpacesLayout());
-  yield put(commonLayoutActions.clearData());
   history.push(ROUTE_PATHS.HOME);
   yield true;
 }
@@ -567,6 +577,12 @@ function* authSagas() {
 
   firebase.auth().onAuthStateChanged(async (res) => {
     try {
+      const { user: userInStore } = store.getState().auth;
+
+      if (userInStore?.uid !== res?.uid) {
+        resetGlobalData(!res);
+      }
+
       store.dispatch(
         actions.setAuthProvider(
           getAuthProviderFromProviderData(res?.providerData),

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

@@ -12,9 +12,9 @@ import { DeletePrompt, GlobalOverlay, ReportModal } from "@/shared/components";
 import { EntityTypes } from "@/shared/constants";
 import { useModal, useNotification } from "@/shared/hooks";
 import {
+  FeedItemFollowState,
   useCommon,
   useDiscussionById,
-  useFeedItemFollow,
   useFeedItemUserMetadata,
   useUserById,
 } from "@/shared/hooks/useCases";
@@ -63,6 +63,7 @@ interface DiscussionFeedCardProps {
   getNonAllowedItems?: GetNonAllowedItemsOptions;
   onActiveItemDataChange?: (data: FeedLayoutItemChangeData) => void;
   directParent?: DirectParent | null;
+  feedItemFollow: FeedItemFollowState;
   onUserSelect?: (userId: string, commonId?: string) => void;
 }
 
@@ -89,6 +90,7 @@ const DiscussionFeedCard = forwardRef<FeedItemRef, DiscussionFeedCardProps>(
       getNonAllowedItems,
       onActiveItemDataChange,
       directParent,
+      feedItemFollow,
       onUserSelect,
     } = props;
     const {
@@ -124,10 +126,6 @@ const DiscussionFeedCard = forwardRef<FeedItemRef, DiscussionFeedCardProps>(
       fetchFeedItemUserMetadata,
     } = useFeedItemUserMetadata();
     const { data: common } = useCommon(isHome ? commonId : "");
-    const feedItemFollow = useFeedItemFollow(
-      { feedItemId: item.id, commonId },
-      { withSubscription: true },
-    );
     const menuItems = useMenuItems(
       {
         commonId,

src/pages/common/components/FeedItem/FeedItem.tsx

@@ -1,4 +1,5 @@
-import React, { forwardRef, memo } from "react";
+import React, { forwardRef, memo, useEffect } from "react";
+import { useFeedItemFollow } from "@/shared/hooks/useCases";
 import { FeedLayoutItemChangeData } from "@/shared/interfaces";
 import {
   Circles,
@@ -64,10 +65,31 @@ const FeedItem = forwardRef<FeedItemRef, FeedItemProps>((props, ref) => {
     onActiveItemDataChange,
     directParent,
   } = props;
-  const { onFeedItemUpdate, getLastMessage, getNonAllowedItems, onUserSelect } =
-    useFeedItemContext();
+  const {
+    onFeedItemUpdate,
+    onFeedItemUnfollowed,
+    getLastMessage,
+    getNonAllowedItems,
+    onUserSelect,
+  } = useFeedItemContext();
+  const feedItemFollow = useFeedItemFollow(
+    { feedItemId: item.id, commonId },
+    { withSubscription: true },
+  );
   useFeedItemSubscription(item.id, commonId, onFeedItemUpdate);
 
+  useEffect(() => {
+    if (
+      feedItemFollow.isUserFeedItemFollowDataFetched &&
+      !feedItemFollow.userFeedItemFollowData
+    ) {
+      onFeedItemUnfollowed?.(item.id);
+    }
+  }, [
+    feedItemFollow.isUserFeedItemFollowDataFetched,
+    feedItemFollow.userFeedItemFollowData,
+  ]);
+
   if (
     shouldCheckItemVisibility &&
     !checkIsItemVisibleForUser(
@@ -103,6 +125,7 @@ const FeedItem = forwardRef<FeedItemRef, FeedItemProps>((props, ref) => {
     isMobileVersion,
     onActiveItemDataChange: handleActiveItemDataChange,
     directParent,
+    feedItemFollow,
     onUserSelect,
   };
 

src/pages/common/components/FeedItem/context.ts

@@ -66,6 +66,7 @@ export interface FeedItemContextValue {
   setExpandedFeedItemId?: (feedItemId: string | null) => void;
   renderFeedItemBaseContent?: (props: FeedItemBaseContentProps) => ReactNode;
   onFeedItemUpdate?: (item: CommonFeed, isRemoved: boolean) => void;
+  onFeedItemUnfollowed?: (itemId: string) => void;
   feedCardSettings?: FeedCardSettings;
   getLastMessage: (options: GetLastMessageOptions) => TextEditorValue;
   getNonAllowedItems?: GetNonAllowedItemsOptions;

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

@@ -13,8 +13,8 @@ import { DeletePrompt, GlobalOverlay } from "@/shared/components";
 import { useRoutesContext } from "@/shared/contexts";
 import { useForceUpdate, useModal, useNotification } from "@/shared/hooks";
 import {
+  FeedItemFollowState,
   useDiscussionById,
-  useFeedItemFollow,
   useFeedItemUserMetadata,
   useProposalById,
   useUserById,
@@ -80,6 +80,7 @@ interface ProposalFeedCardProps {
   getLastMessage: (options: GetLastMessageOptions) => TextEditorValue;
   getNonAllowedItems?: GetNonAllowedItemsOptions;
   isMobileVersion?: boolean;
+  feedItemFollow: FeedItemFollowState;
   onActiveItemDataChange?: (data: FeedLayoutItemChangeData) => void;
   onUserSelect?: (userId: string, commonId?: string) => void;
 }
@@ -101,6 +102,7 @@ const ProposalFeedCard = forwardRef<FeedItemRef, ProposalFeedCardProps>(
       getLastMessage,
       getNonAllowedItems,
       isMobileVersion,
+      feedItemFollow,
       onActiveItemDataChange,
       onUserSelect,
     } = props;
@@ -175,10 +177,6 @@ const ProposalFeedCard = forwardRef<FeedItemRef, ProposalFeedCardProps>(
       onOpen: onShareModalOpen,
       onClose: onShareModalClose,
     } = useModal(false);
-    const feedItemFollow = useFeedItemFollow(
-      { feedItemId: item.id, commonId },
-      { withSubscription: true },
-    );
     const menuItems = useMenuItems(
       {
         commonId,

src/pages/commonFeed/CommonFeed.module.scss

@@ -16,8 +16,6 @@
   width: 1.5rem;
   height: 1.5rem;
   margin-right: 0.625rem;
-  transform: rotate(180deg);
-  color: $c-neutrals-600;
 }
 
 .feedLayout {

src/pages/commonFeed/CommonFeed.tsx

@@ -29,7 +29,7 @@ import { useRoutesContext } from "@/shared/contexts";
 import { useAuthorizedModal, useQueryParams } from "@/shared/hooks";
 import { useCommonFeedItems, useUserCommonIds } from "@/shared/hooks/useCases";
 import { useCommonPinnedFeedItems } from "@/shared/hooks/useCases/useCommonPinnedFeedItems";
-import { RightArrowThinIcon } from "@/shared/icons";
+import { SidebarIcon } from "@/shared/icons";
 import {
   checkIsFeedItemFollowLayoutItem,
   FeedLayoutItem,
@@ -45,6 +45,7 @@ import {
   getCommonPageAboutTabPath,
 } from "@/shared/utils";
 import {
+  cacheActions,
   commonActions,
   commonLayoutActions,
   selectCommonAction,
@@ -162,7 +163,11 @@ const CommonFeedComponent: FC<CommonFeedProps> = (props) => {
     hasMore: hasMoreCommonFeedItems,
     fetch: fetchCommonFeedItems,
     batchNumber,
-  } = useCommonFeedItems(commonId, commonFeedItemIdsForNotListening);
+  } = useCommonFeedItems(
+    commonId,
+    commonFeedItemIdsForNotListening,
+    sharedFeedItemId,
+  );
 
   const {
     isModalOpen: isCommonJoinModalOpen,
@@ -330,7 +335,13 @@ const CommonFeedComponent: FC<CommonFeedProps> = (props) => {
   useEffect(() => {
     fetchData();
 
+    const interval = setInterval(() => {
+      dispatch(cacheActions.copyFeedStateByCommonId(commonId));
+    }, 5000);
+
     return () => {
+      clearInterval(interval);
+      dispatch(cacheActions.copyFeedStateByCommonId(commonId));
       dispatch(commonActions.resetCommon());
     };
   }, [commonId]);
@@ -405,6 +416,7 @@ const CommonFeedComponent: FC<CommonFeedProps> = (props) => {
   useEffect(() => {
     return () => {
       const common = stateRef.current?.data?.common;
+      const rootCommon = stateRef.current?.data?.rootCommon;
 
       dispatch(
         commonLayoutActions.setLastCommonFromFeed({
@@ -415,6 +427,19 @@ const CommonFeedComponent: FC<CommonFeedProps> = (props) => {
                 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,
         }),
@@ -428,7 +453,7 @@ const CommonFeedComponent: FC<CommonFeedProps> = (props) => {
     ) : (
       <PureCommonTopNavigation
         className={styles.pureCommonTopNavigation}
-        iconEl={<RightArrowThinIcon className={styles.openSidenavIcon} />}
+        iconEl={<SidebarIcon className={styles.openSidenavIcon} />}
       />
     );
 
@@ -448,7 +473,7 @@ const CommonFeedComponent: FC<CommonFeedProps> = (props) => {
       <>
         <PureCommonTopNavigation
           className={styles.pureCommonTopNavigation}
-          iconEl={<RightArrowThinIcon className={styles.openSidenavIcon} />}
+          iconEl={<SidebarIcon className={styles.openSidenavIcon} />}
         />
         <div className={styles.centerWrapper}>
           <NotFound />

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

@@ -119,6 +119,7 @@ interface FeedLayoutProps {
   renderFeedItemBaseContent: (props: FeedItemBaseContentProps) => ReactNode;
   renderChatChannelItem?: (props: ChatChannelFeedLayoutItemProps) => ReactNode;
   onFeedItemUpdate?: (item: CommonFeed, isRemoved: boolean) => void;
+  onFeedItemUnfollowed?: (itemId: string) => void;
   getLastMessage: (options: GetLastMessageOptions) => TextEditorValue;
   sharedFeedItemId?: string | null;
   emptyText?: string;
@@ -159,6 +160,7 @@ const FeedLayout: ForwardRefRenderFunction<FeedLayoutRef, FeedLayoutProps> = (
     renderFeedItemBaseContent,
     renderChatChannelItem,
     onFeedItemUpdate,
+    onFeedItemUnfollowed,
     getLastMessage,
     sharedFeedItemId,
     emptyText,
@@ -326,13 +328,15 @@ const FeedLayout: ForwardRefRenderFunction<FeedLayoutRef, FeedLayoutProps> = (
       setExpandedFeedItemId,
       renderFeedItemBaseContent,
       onFeedItemUpdate,
+      onFeedItemUnfollowed,
       getLastMessage,
       getNonAllowedItems,
       onUserSelect: handleUserWithCommonClick,
     }),
     [
       renderFeedItemBaseContent,
       onFeedItemUpdate,
+      onFeedItemUnfollowed,
       getLastMessage,
       getNonAllowedItems,
       handleUserWithCommonClick,
@@ -615,6 +619,12 @@ const FeedLayout: ForwardRefRenderFunction<FeedLayoutRef, FeedLayoutProps> = (
     }
   }, [batchNumber]);
 
+  useEffect(() => {
+    if (sharedFeedItemId && isTabletView && allFeedItems) {
+      setActiveChatItem({ feedItemId: sharedFeedItemId });
+    }
+  }, [sharedFeedItemId, isTabletView, allFeedItems]);
+
   useImperativeHandle(
     ref,
     () => ({

src/pages/commonFeed/components/HeaderContent/components/HeaderCommonContent/HeaderCommonContent.module.scss

@@ -18,14 +18,13 @@
   width: 1.5rem;
   height: 1.5rem;
   margin-right: 0.625rem;
-  transform: rotate(180deg);
-  color: $c-neutrals-600;
 }
 
 .commonLink {
   padding: 0 1.5rem 0 1.375rem;
   display: flex;
   align-items: center;
+  color: inherit;
   text-decoration: none;
   overflow: hidden;
   box-sizing: border-box;
@@ -40,6 +39,13 @@
   @include tablet {
     padding-left: 0;
     padding-right: 0.5rem;
+
+    &:hover {
+      .commonName {
+        color: inherit;
+        text-decoration: none;
+      }
+    }
   }
 }