From 82c50450c79e8ab3ef3e21540afd2bbae88bcf4f Mon Sep 17 00:00:00 2001 From: Roie Natan Date: Wed, 27 Sep 2023 15:01:55 +0300 Subject: [PATCH 01/11] fixing - discussion messages appear only after touching the screen in mobile --- .../components/ChatContent/ChatContent.tsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/pages/common/components/ChatComponent/components/ChatContent/ChatContent.tsx b/src/pages/common/components/ChatComponent/components/ChatContent/ChatContent.tsx index 141992de99..9112cbee87 100644 --- a/src/pages/common/components/ChatComponent/components/ChatContent/ChatContent.tsx +++ b/src/pages/common/components/ChatComponent/components/ChatContent/ChatContent.tsx @@ -185,13 +185,13 @@ const ChatContent: ForwardRefRenderFunction< } }, [messageIdParam]); - useImperativeHandle( - chatContentRef, - () => ({ - scrollToContainerBottom, - }), - [scrollToContainerBottom], - ); + // useImperativeHandle( + // chatContentRef, + // () => ({ + // scrollToContainerBottom, + // }), + // [scrollToContainerBottom], + // ); if (!hasAccess || isHidden) { return ( From a3efc6d9e682e74230bca85ab70f7049c46e4dff Mon Sep 17 00:00:00 2001 From: Roie Natan Date: Wed, 27 Sep 2023 15:47:23 +0300 Subject: [PATCH 02/11] try #2 --- .../components/ChatContent/ChatContent.tsx | 14 +++++++------- .../ChatMobileModal/ChatMobileModal.module.scss | 2 +- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/pages/common/components/ChatComponent/components/ChatContent/ChatContent.tsx b/src/pages/common/components/ChatComponent/components/ChatContent/ChatContent.tsx index 9112cbee87..141992de99 100644 --- a/src/pages/common/components/ChatComponent/components/ChatContent/ChatContent.tsx +++ b/src/pages/common/components/ChatComponent/components/ChatContent/ChatContent.tsx @@ -185,13 +185,13 @@ const ChatContent: ForwardRefRenderFunction< } }, [messageIdParam]); - // useImperativeHandle( - // chatContentRef, - // () => ({ - // scrollToContainerBottom, - // }), - // [scrollToContainerBottom], - // ); + useImperativeHandle( + chatContentRef, + () => ({ + scrollToContainerBottom, + }), + [scrollToContainerBottom], + ); if (!hasAccess || isHidden) { return ( diff --git a/src/pages/common/components/ChatMobileModal/ChatMobileModal.module.scss b/src/pages/common/components/ChatMobileModal/ChatMobileModal.module.scss index 3f1e08039e..a56780552d 100644 --- a/src/pages/common/components/ChatMobileModal/ChatMobileModal.module.scss +++ b/src/pages/common/components/ChatMobileModal/ChatMobileModal.module.scss @@ -43,7 +43,7 @@ flex-direction: column; align-items: center; text-align: center; - height: calc(100vh - #{$container-mobile-header-height}); + //height: calc(100vh - #{$container-mobile-header-height}); } .commonName { From 56aff1d6c573ecd22d93a1893d7d37007ff5cae1 Mon Sep 17 00:00:00 2001 From: Roie Natan Date: Thu, 28 Sep 2023 15:35:29 +0300 Subject: [PATCH 03/11] . --- .../components/ChatContent/ChatContent.tsx | 25 ++++++++++--------- 1 file changed, 13 insertions(+), 12 deletions(-) diff --git a/src/pages/common/components/ChatComponent/components/ChatContent/ChatContent.tsx b/src/pages/common/components/ChatComponent/components/ChatContent/ChatContent.tsx index 141992de99..fe64c56a85 100644 --- a/src/pages/common/components/ChatComponent/components/ChatContent/ChatContent.tsx +++ b/src/pages/common/components/ChatComponent/components/ChatContent/ChatContent.tsx @@ -143,11 +143,12 @@ const ChatContent: ForwardRefRenderFunction< const dateListReverse = useMemo(() => [...dateList].reverse(), [dateList]); - useEffect(() => { - if (!highlightedMessageId) { - scrollToContainerBottom(); - } - }, [highlightedMessageId, scrollToContainerBottom, discussionId]); + // useEffect(() => { + // if (!highlightedMessageId) { + // console.log("scroll down 148") + // scrollToContainerBottom(); + // } + // }, [highlightedMessageId, scrollToContainerBottom, discussionId]); useEffect(() => { if (!highlightedMessageId || dateList.length === 0 || scrolledToMessage) @@ -185,13 +186,13 @@ const ChatContent: ForwardRefRenderFunction< } }, [messageIdParam]); - useImperativeHandle( - chatContentRef, - () => ({ - scrollToContainerBottom, - }), - [scrollToContainerBottom], - ); + // useImperativeHandle( + // chatContentRef, + // () => {console.log("scroll down useImperativeHandle"); return {scrollToContainerBottom}} + + // , + // [scrollToContainerBottom], + // ); if (!hasAccess || isHidden) { return ( From 91156e0c5956e8b3aa1a6410ca8cf259bcb0de7c Mon Sep 17 00:00:00 2001 From: Roie Natan Date: Thu, 28 Sep 2023 15:51:41 +0300 Subject: [PATCH 04/11] . --- .../components/ChatContent/ChatContent.tsx | 25 +++++++++---------- .../ChatMobileModal.module.scss | 2 +- 2 files changed, 13 insertions(+), 14 deletions(-) diff --git a/src/pages/common/components/ChatComponent/components/ChatContent/ChatContent.tsx b/src/pages/common/components/ChatComponent/components/ChatContent/ChatContent.tsx index fe64c56a85..141992de99 100644 --- a/src/pages/common/components/ChatComponent/components/ChatContent/ChatContent.tsx +++ b/src/pages/common/components/ChatComponent/components/ChatContent/ChatContent.tsx @@ -143,12 +143,11 @@ const ChatContent: ForwardRefRenderFunction< const dateListReverse = useMemo(() => [...dateList].reverse(), [dateList]); - // useEffect(() => { - // if (!highlightedMessageId) { - // console.log("scroll down 148") - // scrollToContainerBottom(); - // } - // }, [highlightedMessageId, scrollToContainerBottom, discussionId]); + useEffect(() => { + if (!highlightedMessageId) { + scrollToContainerBottom(); + } + }, [highlightedMessageId, scrollToContainerBottom, discussionId]); useEffect(() => { if (!highlightedMessageId || dateList.length === 0 || scrolledToMessage) @@ -186,13 +185,13 @@ const ChatContent: ForwardRefRenderFunction< } }, [messageIdParam]); - // useImperativeHandle( - // chatContentRef, - // () => {console.log("scroll down useImperativeHandle"); return {scrollToContainerBottom}} - - // , - // [scrollToContainerBottom], - // ); + useImperativeHandle( + chatContentRef, + () => ({ + scrollToContainerBottom, + }), + [scrollToContainerBottom], + ); if (!hasAccess || isHidden) { return ( diff --git a/src/pages/common/components/ChatMobileModal/ChatMobileModal.module.scss b/src/pages/common/components/ChatMobileModal/ChatMobileModal.module.scss index a56780552d..825c239d06 100644 --- a/src/pages/common/components/ChatMobileModal/ChatMobileModal.module.scss +++ b/src/pages/common/components/ChatMobileModal/ChatMobileModal.module.scss @@ -43,7 +43,7 @@ flex-direction: column; align-items: center; text-align: center; - //height: calc(100vh - #{$container-mobile-header-height}); + height: 100%; //calc(100vh - #{$container-mobile-header-height}); } .commonName { From aaed82eda37236370d27beb16520cc74eb5f3925 Mon Sep 17 00:00:00 2001 From: Roie Natan Date: Thu, 28 Sep 2023 18:49:00 +0300 Subject: [PATCH 05/11] try 2 --- .../ChatMobileModal.module.scss | 15 ---- .../ChatMobileModal/ChatMobileModal.tsx | 70 +++++++++---------- 2 files changed, 34 insertions(+), 51 deletions(-) diff --git a/src/pages/common/components/ChatMobileModal/ChatMobileModal.module.scss b/src/pages/common/components/ChatMobileModal/ChatMobileModal.module.scss index 825c239d06..11a4a1489e 100644 --- a/src/pages/common/components/ChatMobileModal/ChatMobileModal.module.scss +++ b/src/pages/common/components/ChatMobileModal/ChatMobileModal.module.scss @@ -10,13 +10,6 @@ padding: 0 !important; } -.modalChildren { - height: 100%; - width: 100%; - padding-top: 0.5rem; - box-sizing: border-box; -} - .header { display: flex; flex-direction: row; @@ -38,14 +31,6 @@ margin-right: 0.25rem; } -.content { - display: flex; - flex-direction: column; - align-items: center; - text-align: center; - height: 100%; //calc(100vh - #{$container-mobile-header-height}); -} - .commonName { margin: 0; } diff --git a/src/pages/common/components/ChatMobileModal/ChatMobileModal.tsx b/src/pages/common/components/ChatMobileModal/ChatMobileModal.tsx index 5d285b4034..ae06c3ee11 100644 --- a/src/pages/common/components/ChatMobileModal/ChatMobileModal.tsx +++ b/src/pages/common/components/ChatMobileModal/ChatMobileModal.tsx @@ -56,44 +56,42 @@ const ChatMobileModal: FC = (props) => { isHeaderSticky={Boolean(header)} mobileFullScreen > -
- {!header && ( -
-
- {hasBackButton && ( - - - - )} - {`${commonName}'s -

{commonName}

-
- {hasCloseIcon && ( - + {!header && ( +
+
+ {hasBackButton && ( + + + )} + {`${commonName}'s +

{commonName}

- )} - {title && ( -

- {title} -

- )} -
{children}
-
+ {hasCloseIcon && ( + + )} +
+ )} + {title && ( +

+ {title} +

+ )} + {children} ); }; From 11c098bfe65d071bd032689a4049e453d35730d8 Mon Sep 17 00:00:00 2001 From: Roie Natan Date: Tue, 3 Oct 2023 18:03:25 +0300 Subject: [PATCH 06/11] . --- .../common/components/ChatComponent/ChatComponent.module.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/common/components/ChatComponent/ChatComponent.module.scss b/src/pages/common/components/ChatComponent/ChatComponent.module.scss index 116687b69a..aa9fded6f9 100644 --- a/src/pages/common/components/ChatComponent/ChatComponent.module.scss +++ b/src/pages/common/components/ChatComponent/ChatComponent.module.scss @@ -20,7 +20,7 @@ .messages { height: 100%; overflow: auto; - overscroll-behavior: contain; + //overscroll-behavior: contain; display: flex; flex-direction: column-reverse; padding: 0.5rem 2rem 0; From 7acf4fd1c5843fe1e9f576035a05ad90e97ad1c8 Mon Sep 17 00:00:00 2001 From: Roie Natan Date: Tue, 3 Oct 2023 18:07:50 +0300 Subject: [PATCH 07/11] .. --- .../common/components/ChatComponent/ChatComponent.module.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/common/components/ChatComponent/ChatComponent.module.scss b/src/pages/common/components/ChatComponent/ChatComponent.module.scss index aa9fded6f9..6fb4c20399 100644 --- a/src/pages/common/components/ChatComponent/ChatComponent.module.scss +++ b/src/pages/common/components/ChatComponent/ChatComponent.module.scss @@ -24,7 +24,7 @@ display: flex; flex-direction: column-reverse; padding: 0.5rem 2rem 0; - padding-bottom: calc(var(--chat-input-wrapper-height) + 7rem); + //padding-bottom: calc(var(--chat-input-wrapper-height) + 7rem); } .emptyChat { From f5146936196866dfb74cdf45e6bf9fd0571d5b87 Mon Sep 17 00:00:00 2001 From: Roie Natan Date: Wed, 4 Oct 2023 16:31:23 +0300 Subject: [PATCH 08/11] . --- .../components/ChatMobileModal/ChatMobileModal.module.scss | 7 +++++++ src/pages/commonFeed/components/FeedLayout/FeedLayout.tsx | 4 ++-- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/src/pages/common/components/ChatMobileModal/ChatMobileModal.module.scss b/src/pages/common/components/ChatMobileModal/ChatMobileModal.module.scss index 11a4a1489e..401eba5dab 100644 --- a/src/pages/common/components/ChatMobileModal/ChatMobileModal.module.scss +++ b/src/pages/common/components/ChatMobileModal/ChatMobileModal.module.scss @@ -10,6 +10,13 @@ padding: 0 !important; } +.modalChildren { + height: 100%; + width: 100%; + padding-top: 0.5rem; + box-sizing: border-box; +} + .header { display: flex; flex-direction: row; diff --git a/src/pages/commonFeed/components/FeedLayout/FeedLayout.tsx b/src/pages/commonFeed/components/FeedLayout/FeedLayout.tsx index b320084497..7659be87c5 100644 --- a/src/pages/commonFeed/components/FeedLayout/FeedLayout.tsx +++ b/src/pages/commonFeed/components/FeedLayout/FeedLayout.tsx @@ -644,7 +644,7 @@ const FeedLayout: ForwardRefRenderFunction = ( isLoading={loading} loaderDelay={LOADER_APPEARANCE_DELAY} > - {allFeedItems?.map((item) => { + {allFeedItems?.map((item, index) => { const isActive = item.itemId === activeFeedItemId; if (checkIsFeedItemFollowLayoutItem(item)) { @@ -662,7 +662,7 @@ const FeedLayout: ForwardRefRenderFunction = ( ref={(ref) => { refsByItemId.current[item.itemId] = ref; }} - key={item.feedItem.id} + key={item.feedItem.id + index} commonMember={commonMember} commonId={commonData?.id} commonName={commonData?.name || ""} From 8e8385bea5a45de28e5c0fc08e55a0acc355c1ab Mon Sep 17 00:00:00 2001 From: Roie Natan Date: Tue, 17 Oct 2023 14:29:59 +0100 Subject: [PATCH 09/11] . --- .../components/ChatContent/ChatContent.tsx | 15 ++++++++++++++- .../components/FeedLayout/FeedLayout.tsx | 4 ++-- 2 files changed, 16 insertions(+), 3 deletions(-) diff --git a/src/pages/common/components/ChatComponent/components/ChatContent/ChatContent.tsx b/src/pages/common/components/ChatComponent/components/ChatContent/ChatContent.tsx index f8775030d4..3cce86ea79 100644 --- a/src/pages/common/components/ChatComponent/components/ChatContent/ChatContent.tsx +++ b/src/pages/common/components/ChatComponent/components/ChatContent/ChatContent.tsx @@ -17,7 +17,7 @@ import { LOADER_APPEARANCE_DELAY, QueryParamKey, } from "@/shared/constants"; -import { useQueryParams } from "@/shared/hooks"; +import { useForceUpdate, useQueryParams } from "@/shared/hooks"; import { checkIsUserDiscussionMessage, CommonFeedObjectUserUnique, @@ -97,6 +97,19 @@ const ChatContent: ForwardRefRenderFunction< const userId = user?.uid; const queryParams = useQueryParams(); const messageIdParam = queryParams[QueryParamKey.Message]; + const forceUpdate = useForceUpdate(); + + useEffect(() => { + if (messages) { + console.log(messages); + forceUpdate(); + } + + if (dateList) { + console.log(dateList); + forceUpdate(); + } + }, [messages, dateList]); const [highlightedMessageId, setHighlightedMessageId] = useState( () => (typeof messageIdParam === "string" && messageIdParam) || null, diff --git a/src/pages/commonFeed/components/FeedLayout/FeedLayout.tsx b/src/pages/commonFeed/components/FeedLayout/FeedLayout.tsx index 7659be87c5..b320084497 100644 --- a/src/pages/commonFeed/components/FeedLayout/FeedLayout.tsx +++ b/src/pages/commonFeed/components/FeedLayout/FeedLayout.tsx @@ -644,7 +644,7 @@ const FeedLayout: ForwardRefRenderFunction = ( isLoading={loading} loaderDelay={LOADER_APPEARANCE_DELAY} > - {allFeedItems?.map((item, index) => { + {allFeedItems?.map((item) => { const isActive = item.itemId === activeFeedItemId; if (checkIsFeedItemFollowLayoutItem(item)) { @@ -662,7 +662,7 @@ const FeedLayout: ForwardRefRenderFunction = ( ref={(ref) => { refsByItemId.current[item.itemId] = ref; }} - key={item.feedItem.id + index} + key={item.feedItem.id} commonMember={commonMember} commonId={commonData?.id} commonName={commonData?.name || ""} From f99962960733d4a70cd843ec0b98a35950e26a84 Mon Sep 17 00:00:00 2001 From: Roie Natan Date: Tue, 17 Oct 2023 14:35:40 +0100 Subject: [PATCH 10/11] . --- .../ChatComponent/components/ChatContent/ChatContent.tsx | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/src/pages/common/components/ChatComponent/components/ChatContent/ChatContent.tsx b/src/pages/common/components/ChatComponent/components/ChatContent/ChatContent.tsx index 3cce86ea79..17c3d6c60a 100644 --- a/src/pages/common/components/ChatComponent/components/ChatContent/ChatContent.tsx +++ b/src/pages/common/components/ChatComponent/components/ChatContent/ChatContent.tsx @@ -101,15 +101,9 @@ const ChatContent: ForwardRefRenderFunction< useEffect(() => { if (messages) { - console.log(messages); forceUpdate(); } - - if (dateList) { - console.log(dateList); - forceUpdate(); - } - }, [messages, dateList]); + }, [messages]); const [highlightedMessageId, setHighlightedMessageId] = useState( () => (typeof messageIdParam === "string" && messageIdParam) || null, From 14b3118243e1f28f7615ce325e7aa21c191e7447 Mon Sep 17 00:00:00 2001 From: Roie Natan Date: Tue, 17 Oct 2023 15:00:46 +0100 Subject: [PATCH 11/11] change 'What do you think?' chat placeholder to 'Message' --- src/pages/common/components/ChatComponent/ChatComponent.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/common/components/ChatComponent/ChatComponent.tsx b/src/pages/common/components/ChatComponent/ChatComponent.tsx index 8bcb77ad89..918b8a7651 100644 --- a/src/pages/common/components/ChatComponent/ChatComponent.tsx +++ b/src/pages/common/components/ChatComponent/ChatComponent.tsx @@ -645,7 +645,7 @@ export default function ChatComponent({ }} value={message} onChange={setMessage} - placeholder="What do you think?" + placeholder="Message" onKeyDown={onEnterKeyDown} users={users} shouldReinitializeEditor={shouldReinitializeEditor}