From c535092b573a14d16c407abbb7de90a16c88bd5f Mon Sep 17 00:00:00 2001 From: Andrey Mikhadyuk Date: Tue, 1 Aug 2023 14:49:06 +0400 Subject: [PATCH 1/5] create utils to update query params --- src/shared/utils/index.tsx | 1 + src/shared/utils/queryParams.ts | 22 ++++++++++++++++++++++ 2 files changed, 23 insertions(+) create mode 100644 src/shared/utils/queryParams.ts diff --git a/src/shared/utils/index.tsx b/src/shared/utils/index.tsx index d635e1ed82..fd2386e8a3 100755 --- a/src/shared/utils/index.tsx +++ b/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"; diff --git a/src/shared/utils/queryParams.ts b/src/shared/utils/queryParams.ts new file mode 100644 index 0000000000..c5e68285e1 --- /dev/null +++ b/src/shared/utils/queryParams.ts @@ -0,0 +1,22 @@ +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) => { + const params = queryString.parse(window.location.search); + + if (params[key]) { + delete params[key]; + history.push({ + search: queryString.stringify(params), + }); + } +}; From 864f1e6f9dc093ba6081edb5dbf1e1f4e77f1116 Mon Sep 17 00:00:00 2001 From: Andrey Mikhadyuk Date: Tue, 1 Aug 2023 15:37:48 +0400 Subject: [PATCH 2/5] move mobile chat close function to feed layout --- .../components/FeedLayout/FeedLayout.tsx | 6 ++++++ .../components/MobileChat/MobileChat.tsx | 14 +++++--------- 2 files changed, 11 insertions(+), 9 deletions(-) diff --git a/src/pages/commonFeed/components/FeedLayout/FeedLayout.tsx b/src/pages/commonFeed/components/FeedLayout/FeedLayout.tsx index 92030e9ece..5bb9484b33 100644 --- a/src/pages/commonFeed/components/FeedLayout/FeedLayout.tsx +++ b/src/pages/commonFeed/components/FeedLayout/FeedLayout.tsx @@ -318,6 +318,11 @@ const FeedLayout: ForwardRefRenderFunction = ( }); }; + const handleMobileChatClose = () => { + setChatItem(null); + setShouldShowSeeMore(true); + }; + useEffect(() => { if (!outerGovernance && selectedItemCommonData?.id) { fetchGovernance(selectedItemCommonData.id); @@ -469,6 +474,7 @@ const FeedLayout: ForwardRefRenderFunction = ( rightHeaderContent={followFeedItemEl} onMessagesAmountChange={handleMessagesAmountChange} directParent={outerCommon?.directParent} + onClose={handleMobileChatClose} > {selectedItemCommonData && checkIsFeedItemFollowLayoutItem(selectedFeedItem) && ( diff --git a/src/pages/commonFeed/components/FeedLayout/components/MobileChat/MobileChat.tsx b/src/pages/commonFeed/components/FeedLayout/components/MobileChat/MobileChat.tsx index ae8b289dc5..5ed2972e73 100644 --- a/src/pages/commonFeed/components/FeedLayout/components/MobileChat/MobileChat.tsx +++ b/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 = (props) => { @@ -46,9 +47,9 @@ const MobileChat: FC = (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 = (props) => { [chatItem, userCircleIds], ); - const handleClose = () => { - setChatItem(null); - setShouldShowSeeMore && setShouldShowSeeMore(true); - }; - const handleOpenFeedItemDetails = () => { setIsShowFeedItemDetailsModal && setIsShowFeedItemDetailsModal(true); }; @@ -93,7 +89,7 @@ const MobileChat: FC = (props) => { = (props) => { title={title} userAvatar={dmUser?.photoURL} userName={title} - onBackClick={handleClose} + onBackClick={onClose} onTitleWrapperClick={ shouldShowSeeMore ? handleOpenFeedItemDetails : undefined } From 1bb83ba4eb2c664d5157c36a2aae5338d920f77b Mon Sep 17 00:00:00 2001 From: Andrey Mikhadyuk Date: Tue, 1 Aug 2023 15:39:32 +0400 Subject: [PATCH 3/5] use query params utils in sidenav closing/opening --- src/shared/utils/sidenav.ts | 24 ++++-------------------- 1 file changed, 4 insertions(+), 20 deletions(-) diff --git a/src/shared/utils/sidenav.ts b/src/shared/utils/sidenav.ts index 6883d20806..bd3130f35e 100644 --- a/src/shared/utils/sidenav.ts +++ b/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) => From 684b11a60b6c979fe307b06b200fe22ed188dadc Mon Sep 17 00:00:00 2001 From: Andrey Mikhadyuk Date: Tue, 1 Aug 2023 17:02:28 +0400 Subject: [PATCH 4/5] add chat item id to the url to have prop back button functionality --- .../components/FeedLayout/FeedLayout.tsx | 34 +++++++++++++++++-- src/shared/constants/queryParamKey.ts | 1 + 2 files changed, 33 insertions(+), 2 deletions(-) diff --git a/src/pages/commonFeed/components/FeedLayout/FeedLayout.tsx b/src/pages/commonFeed/components/FeedLayout/FeedLayout.tsx index 5bb9484b33..464587cf74 100644 --- a/src/pages/commonFeed/components/FeedLayout/FeedLayout.tsx +++ b/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 = ( 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 = ( }, [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,11 +326,21 @@ const FeedLayout: ForwardRefRenderFunction = ( }); }; - const handleMobileChatClose = () => { + const handleMobileChatClose = (shouldChangeHistory = true) => { setChatItem(null); setShouldShowSeeMore(true); + + if (isTabletView && chatItemIdFromQueryParam && shouldChangeHistory) { + history.goBack(); + } }; + useEffect(() => { + if (chatItemIdFromQueryParam) { + deleteQueryParam(QueryParamKey.ChatItem); + } + }, []); + useEffect(() => { if (!outerGovernance && selectedItemCommonData?.id) { fetchGovernance(selectedItemCommonData.id); @@ -345,6 +363,18 @@ const FeedLayout: ForwardRefRenderFunction = ( onActiveItemChange?.(activeFeedItemId); }, [activeFeedItemId]); + useEffect(() => { + if (isTabletView && chatItem?.feedItemId) { + addQueryParam(QueryParamKey.ChatItem, chatItem.feedItemId); + } + }, [isTabletView, chatItem?.feedItemId]); + + useEffect(() => { + if (!chatItemIdFromQueryParam && chatItem?.feedItemId) { + handleMobileChatClose(false); + } + }, [chatItemIdFromQueryParam]); + useImperativeHandle( ref, () => ({ diff --git a/src/shared/constants/queryParamKey.ts b/src/shared/constants/queryParamKey.ts index 67e6616bce..4307b741cb 100644 --- a/src/shared/constants/queryParamKey.ts +++ b/src/shared/constants/queryParamKey.ts @@ -5,5 +5,6 @@ export enum QueryParamKey { Language = "language", Tab = "tab", Item = "item", + ChatItem = "chatItem", Message = "message", } From fab57e56f4fb72d249c4e787cd78ea43821ca3fd Mon Sep 17 00:00:00 2001 From: Andrey Mikhadyuk Date: Tue, 1 Aug 2023 17:13:12 +0400 Subject: [PATCH 5/5] clear chat item id query param if no item is selected --- .../components/FeedLayout/FeedLayout.tsx | 8 ++------ src/shared/utils/queryParams.ts | 15 +++++++++------ 2 files changed, 11 insertions(+), 12 deletions(-) diff --git a/src/pages/commonFeed/components/FeedLayout/FeedLayout.tsx b/src/pages/commonFeed/components/FeedLayout/FeedLayout.tsx index 464587cf74..e81dd747aa 100644 --- a/src/pages/commonFeed/components/FeedLayout/FeedLayout.tsx +++ b/src/pages/commonFeed/components/FeedLayout/FeedLayout.tsx @@ -335,12 +335,6 @@ const FeedLayout: ForwardRefRenderFunction = ( } }; - useEffect(() => { - if (chatItemIdFromQueryParam) { - deleteQueryParam(QueryParamKey.ChatItem); - } - }, []); - useEffect(() => { if (!outerGovernance && selectedItemCommonData?.id) { fetchGovernance(selectedItemCommonData.id); @@ -372,6 +366,8 @@ const FeedLayout: ForwardRefRenderFunction = ( useEffect(() => { if (!chatItemIdFromQueryParam && chatItem?.feedItemId) { handleMobileChatClose(false); + } else if (chatItemIdFromQueryParam && !chatItem?.feedItemId) { + deleteQueryParam(QueryParamKey.ChatItem, true); } }, [chatItemIdFromQueryParam]); diff --git a/src/shared/utils/queryParams.ts b/src/shared/utils/queryParams.ts index c5e68285e1..74587c9b7b 100644 --- a/src/shared/utils/queryParams.ts +++ b/src/shared/utils/queryParams.ts @@ -10,13 +10,16 @@ export const addQueryParam = (key: string, value: string) => { history.push({ search }); }; -export const deleteQueryParam = (key: string) => { +export const deleteQueryParam = (key: string, shouldReplace = false) => { const params = queryString.parse(window.location.search); - if (params[key]) { - delete params[key]; - history.push({ - search: queryString.stringify(params), - }); + if (!params[key]) { + return; } + + delete params[key]; + const callback = shouldReplace ? history.replace : history.push; + callback({ + search: queryString.stringify(params), + }); };