Add indication in the url for the active item #1910

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

@@ -10,6 +10,7 @@ import React, {
   useState,
 } from "react";
 import { useSelector } from "react-redux";
+import { useHistory } from "react-router-dom";
 import { useWindowSize } from "react-use";
 import classNames from "classnames";
 import { selectUser } from "@/pages/Auth/store/selectors";
@@ -27,7 +28,8 @@ import {
   ChatItem,
 } from "@/pages/common/components/ChatComponent";
 import { ChatContext } from "@/pages/common/components/ChatComponent/context";
-import { InboxItemType } from "@/shared/constants";
+import { InboxItemType, QueryParamKey } from "@/shared/constants";
+import { useQueryParams } from "@/shared/hooks";
 import { useGovernanceByCommonId } from "@/shared/hooks/useCases";
 import { useIsTabletView } from "@/shared/hooks/viewport";
 import {
@@ -48,6 +50,7 @@ import {
   Governance,
 } from "@/shared/models";
 import { InfiniteScroll, TextEditorValue } from "@/shared/ui-kit";
+import { addQueryParam, deleteQueryParam } from "@/shared/utils";
 import { selectRecentStreamId } from "@/store/states";
 import { MIN_CHAT_WIDTH } from "../../constants";
 import {
@@ -139,6 +142,8 @@ const FeedLayout: ForwardRefRenderFunction<FeedLayoutRef, FeedLayoutProps> = (
     settings,
   } = props;
   const { width: windowWidth } = useWindowSize();
+  const history = useHistory();
+  const queryParams = useQueryParams();
   const isTabletView = useIsTabletView();
   const user = useSelector(selectUser());
   const recentStreamId = useSelector(selectRecentStreamId);
@@ -182,6 +187,9 @@ const FeedLayout: ForwardRefRenderFunction<FeedLayoutRef, FeedLayoutProps> = (
   }, [topFeedItems, feedItems]);
   const isContentEmpty =
     !loading && (!allFeedItems || allFeedItems.length === 0) && emptyText;
+  const chatItemQueryParam = queryParams[QueryParamKey.ChatItem];
+  const chatItemIdFromQueryParam =
+    (typeof chatItemQueryParam === "string" && chatItemQueryParam) || null;
 
   const feedItemIdForAutoChatOpen = useMemo(() => {
     if (recentStreamId) {
@@ -318,6 +326,15 @@ const FeedLayout: ForwardRefRenderFunction<FeedLayoutRef, FeedLayoutProps> = (
     });
   };
 
+  const handleMobileChatClose = (shouldChangeHistory = true) => {
+    setChatItem(null);
+    setShouldShowSeeMore(true);
+
+    if (isTabletView && chatItemIdFromQueryParam && shouldChangeHistory) {
+      history.goBack();
+    }
+  };
+
   useEffect(() => {
     if (!outerGovernance && selectedItemCommonData?.id) {
       fetchGovernance(selectedItemCommonData.id);
@@ -340,6 +357,20 @@ const FeedLayout: ForwardRefRenderFunction<FeedLayoutRef, FeedLayoutProps> = (
     onActiveItemChange?.(activeFeedItemId);
   }, [activeFeedItemId]);
 
+  useEffect(() => {
+    if (isTabletView && chatItem?.feedItemId) {
+      addQueryParam(QueryParamKey.ChatItem, chatItem.feedItemId);
+    }
+  }, [isTabletView, chatItem?.feedItemId]);
+
+  useEffect(() => {
+    if (!chatItemIdFromQueryParam && chatItem?.feedItemId) {
+      handleMobileChatClose(false);
+    } else if (chatItemIdFromQueryParam && !chatItem?.feedItemId) {
+      deleteQueryParam(QueryParamKey.ChatItem, true);
+    }
+  }, [chatItemIdFromQueryParam]);
+
   useImperativeHandle(
     ref,
     () => ({
@@ -469,6 +500,7 @@ const FeedLayout: ForwardRefRenderFunction<FeedLayoutRef, FeedLayoutProps> = (
                 rightHeaderContent={followFeedItemEl}
                 onMessagesAmountChange={handleMessagesAmountChange}
                 directParent={outerCommon?.directParent}
+                onClose={handleMobileChatClose}
               >
                 {selectedItemCommonData &&
                   checkIsFeedItemFollowLayoutItem(selectedFeedItem) && (

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

@@ -31,6 +31,7 @@ interface ChatProps {
   rightHeaderContent?: ReactNode;
   onMessagesAmountChange?: (newMessagesAmount: number) => void;
   directParent?: DirectParent | null;
+  onClose: () => void;
 }
 
 const MobileChat: FC<ChatProps> = (props) => {
@@ -46,9 +47,9 @@ const MobileChat: FC<ChatProps> = (props) => {
     rightHeaderContent,
     onMessagesAmountChange,
     directParent,
+    onClose,
   } = props;
-  const { setChatItem, setIsShowFeedItemDetailsModal, setShouldShowSeeMore } =
-    useChatContext();
+  const { setIsShowFeedItemDetailsModal } = useChatContext();
   const {
     fetchUser: fetchDMUser,
     setUser: setDMUser,
@@ -70,11 +71,6 @@ const MobileChat: FC<ChatProps> = (props) => {
     [chatItem, userCircleIds],
   );
 
-  const handleClose = () => {
-    setChatItem(null);
-    setShouldShowSeeMore && setShouldShowSeeMore(true);
-  };
-
   const handleOpenFeedItemDetails = () => {
     setIsShowFeedItemDetailsModal && setIsShowFeedItemDetailsModal(true);
   };
@@ -93,7 +89,7 @@ const MobileChat: FC<ChatProps> = (props) => {
       <ChatMobileModal
         isShowing={Boolean(chatItem)}
         hasBackButton
-        onClose={handleClose}
+        onClose={onClose}
         commonName={commonName}
         commonImage={commonImage}
         header={
@@ -102,7 +98,7 @@ const MobileChat: FC<ChatProps> = (props) => {
             title={title}
             userAvatar={dmUser?.photoURL}
             userName={title}
-            onBackClick={handleClose}
+            onBackClick={onClose}
             onTitleWrapperClick={
               shouldShowSeeMore ? handleOpenFeedItemDetails : undefined
             }

src/shared/constants/queryParamKey.ts

@@ -5,5 +5,6 @@ export enum QueryParamKey {
   Language = "language",
   Tab = "tab",
   Item = "item",
+  ChatItem = "chatItem",
   Message = "message",
 }

src/shared/utils/index.tsx

@@ -13,6 +13,7 @@ export * from "./isError";
 export * from "./matchRoute";
 export * from "./parseLinksForSubmission";
 export * from "./proposals";
+export * from "./queryParams";
 export { default as request } from "./request";
 export * from "./convertDatesToFirestoreTimestamps";
 export * from "./convertLinkToUploadFile";

src/shared/utils/queryParams.ts

@@ -0,0 +1,25 @@
+import queryString from "query-string";
+import { history } from "@/shared/appConfig";
+
+export const addQueryParam = (key: string, value: string) => {
+  const params = queryString.parse(window.location.search);
+  const search = queryString.stringify({
+    ...params,
+    [key]: value,
+  });
+  history.push({ search });
+};
+
+export const deleteQueryParam = (key: string, shouldReplace = false) => {
+  const params = queryString.parse(window.location.search);
+
+  if (!params[key]) {
+    return;
+  }
+
+  delete params[key];
+  const callback = shouldReplace ? history.replace : history.push;
+  callback({
+    search: queryString.stringify(params),
+  });
+};

src/shared/utils/sidenav.ts

@@ -1,29 +1,13 @@
-import queryString, { parse } from "query-string";
-import { history } from "@/shared/appConfig";
+import { parse } from "query-string";
 import { SIDENAV_KEY, SIDENAV_OPEN } from "@/shared/constants";
+import { addQueryParam, deleteQueryParam } from "./queryParams";
 
 export const openSidenav = () => {
-  const params = queryString.parse(window.location.search);
-
-  const search = queryString.stringify({
-    ...params,
-    [SIDENAV_KEY]: SIDENAV_OPEN,
-  });
-  history.push({
-    pathname: window.location.pathname,
-    search,
-  });
+  addQueryParam(SIDENAV_KEY, SIDENAV_OPEN);
 };
 
 export const closeSidenav = () => {
-  const params = queryString.parse(window.location.search);
-
-  if (params[SIDENAV_KEY]) {
-    delete params[SIDENAV_KEY];
-    history.push({
-      search: queryString.stringify(params),
-    });
-  }
+  deleteQueryParam(SIDENAV_KEY);
 };
 
 export const checkIsSidenavOpen = (queryParams: ReturnType<typeof parse>) =>