Fix to focus on the current space in the sidebar #2335

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

@@ -1,6 +1,7 @@
 import React from "react";
 import { NavLink } from "react-router-dom";
 import { CommonService, UserService } from "@/services";
+import { store } from "@/shared/appConfig";
 import { SystemDiscussionMessageType } from "@/shared/constants";
 import {
   Common,
@@ -16,6 +17,7 @@ import {
   getCommonPagePath,
   getUserName,
 } from "@/shared/utils";
+import { commonLayoutActions } from "@/store/states";
 import { UserMention } from "../components";
 import { Text, TextData } from "../types";
 import { getFeedItemDisplayingData } from "./getFeedItemDisplayingData";
@@ -31,6 +33,14 @@ const getCommon = async (commonId: string): Promise<Common | null> =>
 const getCommonTypeText = (commonType: SystemMessageCommonType): string =>
   commonType === SystemMessageCommonType.Common ? "common" : "space";
 
+const handleCommonClick = (commonId: string, rootCommonId?: string) => {
+  store.dispatch(
+    commonLayoutActions.resetCurrentCommonIdAndProjects(
+      rootCommonId || commonId,
+    ),
+  );
+};
+
 const renderUserMention = (
   user: User | null,
   data: TextData,
@@ -48,8 +58,8 @@ const renderUserMention = (
     defaultName
   );
 
-const renderLink = (to: string, name: string): Text => (
-  <NavLink className={styles.systemMessageCommonLink} to={to}>
+const renderLink = (to: string, name: string, onClick?: () => void): Text => (
+  <NavLink className={styles.systemMessageCommonLink} to={to} onClick={onClick}>
     {name}
   </NavLink>
 );
@@ -82,6 +92,7 @@ const getCommonCreatedSystemMessageText = async (
       {renderLink(
         (data.getCommonPagePath || getCommonPagePath)(common.id),
         common.name,
+        () => handleCommonClick(common.id, common.rootCommonId),
       )}
     </>
   ) : (
@@ -95,7 +106,10 @@ const getCommonEditedSystemMessageText = async (
   systemMessageData: CommonEditedSystemMessage["systemMessageData"],
   data: TextData,
 ): Promise<Text[]> => {
-  const user = await getUser(systemMessageData.userId, data.users);
+  const [user, common] = await Promise.all([
+    getUser(systemMessageData.userId, data.users),
+    getCommon(systemMessageData.commonId),
+  ]);
   const userEl = renderUserMention(user, data);
 
   return [
@@ -105,6 +119,7 @@ const getCommonEditedSystemMessageText = async (
         systemMessageData.commonId,
       ),
       "info",
+      () => handleCommonClick(systemMessageData.commonId, common?.rootCommonId),
     ),
     " was edited by ",
     userEl,

src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/FeedItemBreadcrumbs/FeedItemBreadcrumbs.tsx

@@ -1,13 +1,12 @@
 import React, { FC, useEffect } from "react";
-import { useDispatch, useSelector } from "react-redux";
+import { useDispatch } from "react-redux";
 import { CommonEvent, CommonEventEmitter } from "@/events";
 import { CommonService } from "@/services";
 import { useIsTabletView } from "@/shared/hooks/viewport";
 import {
   commonLayoutActions,
   MultipleSpacesLayoutFeedItemBreadcrumbs,
   ProjectsStateItem,
-  selectCommonLayoutCommonId,
 } from "@/store/states";
 import { useGoToCreateCommon } from "../../../../../../hooks";
 import { Separator } from "../Separator";
@@ -23,21 +22,17 @@ interface FeedItemBreadcrumbsProps {
 const FeedItemBreadcrumbs: FC<FeedItemBreadcrumbsProps> = (props) => {
   const { breadcrumbs, itemsWithMenus, truncate } = props;
   const dispatch = useDispatch();
-  const currentLayoutCommonId = useSelector(selectCommonLayoutCommonId);
   const goToCreateCommon = useGoToCreateCommon();
   const isMobileView = useIsTabletView();
   const breadcrumbsItems = truncate
     ? [breadcrumbs.items[0], breadcrumbs.items[breadcrumbs.items.length - 1]]
     : breadcrumbs.items;
 
   const handleItemClick = (item: ProjectsStateItem) => {
-    if (
-      currentLayoutCommonId &&
-      item.rootCommonId &&
-      item.rootCommonId !== currentLayoutCommonId
-    ) {
-      dispatch(commonLayoutActions.setCurrentCommonId(item.rootCommonId));
-      dispatch(commonLayoutActions.clearProjects());
+    if (item.rootCommonId) {
+      dispatch(
+        commonLayoutActions.resetCurrentCommonIdAndProjects(item.rootCommonId),
+      );
     }
   };
 

src/shared/layouts/SidenavLayout/components/SidenavContent/components/ProjectsTree/components/TreeItem/TreeItem.tsx

@@ -30,7 +30,7 @@ const TreeItem: FC<TreeItemProps> = (props) => {
   const hasNestedContent = Boolean(children);
 
   useEffect(() => {
-    if (isActive && hasNestedContent) {
+    if ((isActive || hasActiveChild) && hasNestedContent) {
       setIsOpen(true);
       return;
     }

src/store/states/commonLayout/actions.ts

@@ -33,6 +33,10 @@ export const setCurrentCommonId = createStandardAction(
   CommonLayoutActionType.SET_CURRENT_COMMON_ID,
 )<string>();
 
+export const resetCurrentCommonIdAndProjects = createStandardAction(
+  CommonLayoutActionType.RESET_CURRENT_COMMON_ID_AND_PROJECTS,
+)<string>();
+
 export const setLastCommonFromFeed = createStandardAction(
   CommonLayoutActionType.SET_LAST_COMMON_FROM_FEED,
 )<CommonLayoutState["lastCommonFromFeed"]>();

src/store/states/commonLayout/constants.ts

@@ -13,6 +13,8 @@ export enum CommonLayoutActionType {
 
   SET_CURRENT_COMMON_ID = "@COMMON_LAYOUT/SET_CURRENT_COMMON_ID",
 
+  RESET_CURRENT_COMMON_ID_AND_PROJECTS = "@COMMON_LAYOUT/RESET_CURRENT_COMMON_ID_AND_PROJECTS",
+
   SET_LAST_COMMON_FROM_FEED = "@COMMON_LAYOUT/SET_LAST_COMMON_FROM_FEED",
 
   CLEAR_DATA = "@COMMON_LAYOUT/CLEAR_DATA",

src/store/states/commonLayout/saga/index.ts

@@ -2,8 +2,13 @@ import { takeLatest } from "redux-saga/effects";
 import * as actions from "../actions";
 import { getCommons } from "./getCommons";
 import { getProjects } from "./getProjects";
+import { resetCurrentCommonIdAndProjects } from "./resetCurrentCommonIdAndProjects";
 
 export function* mainSaga() {
   yield takeLatest(actions.getCommons.request, getCommons);
   yield takeLatest(actions.getProjects.request, getProjects);
+  yield takeLatest(
+    actions.resetCurrentCommonIdAndProjects,
+    resetCurrentCommonIdAndProjects,
+  );
 }

src/store/states/commonLayout/saga/resetCurrentCommonIdAndProjects.ts

@@ -0,0 +1,17 @@
+import { put, select } from "redux-saga/effects";
+import { selectCommonLayoutCommonId } from "@/store/states";
+import * as actions from "../actions";
+
+export function* resetCurrentCommonIdAndProjects(
+  action: ReturnType<typeof actions.resetCurrentCommonIdAndProjects>,
+) {
+  const { payload: commonId } = action;
+  const currentCommonId = (yield select(selectCommonLayoutCommonId)) as
+    | string
+    | null;
+
+  if (currentCommonId && commonId && commonId !== currentCommonId) {
+    yield put(actions.setCurrentCommonId(commonId));
+    yield put(actions.clearProjects());
+  }
+}