From f26214e6e7c1343c979b0c69f808b47cb5fbefe4 Mon Sep 17 00:00:00 2001 From: Roie Natan Date: Mon, 30 Oct 2023 12:26:23 -0400 Subject: [PATCH 01/12] inbox items avatar clickable --- .../common/components/FeedItem/context.ts | 1 + .../components/FeedLayout/FeedLayout.tsx | 1 - .../ChatChannelItem/ChatChannelItem.tsx | 1 + .../FeedItemBaseContent.tsx | 32 +++++++++++++------ 4 files changed, 25 insertions(+), 10 deletions(-) diff --git a/src/pages/common/components/FeedItem/context.ts b/src/pages/common/components/FeedItem/context.ts index 67cf765193..f7f7c2f35d 100644 --- a/src/pages/common/components/FeedItem/context.ts +++ b/src/pages/common/components/FeedItem/context.ts @@ -42,6 +42,7 @@ export interface FeedItemBaseContentProps { hasImages?: boolean; isLoading?: boolean; shouldHideBottomContent?: boolean; + dmUserId?: string; } export interface GetLastMessageOptions { diff --git a/src/pages/commonFeed/components/FeedLayout/FeedLayout.tsx b/src/pages/commonFeed/components/FeedLayout/FeedLayout.tsx index 1ad096f4b4..93441ebc08 100644 --- a/src/pages/commonFeed/components/FeedLayout/FeedLayout.tsx +++ b/src/pages/commonFeed/components/FeedLayout/FeedLayout.tsx @@ -63,7 +63,6 @@ import { import { InfiniteScroll, TextEditorValue } from "@/shared/ui-kit"; import { addQueryParam, - checkIsProject, deleteQueryParam, getParamsFromOneOfRoutes, getUserName, diff --git a/src/pages/inbox/components/ChatChannelItem/ChatChannelItem.tsx b/src/pages/inbox/components/ChatChannelItem/ChatChannelItem.tsx index 86b964072f..9d9880c345 100644 --- a/src/pages/inbox/components/ChatChannelItem/ChatChannelItem.tsx +++ b/src/pages/inbox/components/ChatChannelItem/ChatChannelItem.tsx @@ -129,6 +129,7 @@ export const ChatChannelItem: FC = (props) => { ownerId={userId} renderImage={renderImage} isImageRounded + dmUserId={dmUserId} /> ); }; diff --git a/src/pages/inbox/components/FeedItemBaseContent/FeedItemBaseContent.tsx b/src/pages/inbox/components/FeedItemBaseContent/FeedItemBaseContent.tsx index 04238c3472..438a80d52f 100644 --- a/src/pages/inbox/components/FeedItemBaseContent/FeedItemBaseContent.tsx +++ b/src/pages/inbox/components/FeedItemBaseContent/FeedItemBaseContent.tsx @@ -1,7 +1,11 @@ import React, { FC, MouseEventHandler, useRef, useState } from "react"; import classNames from "classnames"; import { useLongPress } from "use-long-press"; -import { FeedCardTags, FeedItemBaseContentProps } from "@/pages/common"; +import { + FeedCardTags, + FeedItemBaseContentProps, + useFeedItemContext, +} from "@/pages/common"; import { PredefinedTypes } from "@/shared/models"; import { ContextMenu, @@ -36,10 +40,12 @@ export const FeedItemBaseContent: FC = (props) => { isImageRounded, isProject, discussionPredefinedType, + dmUserId, } = props; const contextMenuRef = useRef(null); const [isLongPressing, setIsLongPressing] = useState(false); const [isLongPressed, setIsLongPressed] = useState(false); + const { onUserSelect } = useFeedItemContext(); const isContextMenuEnabled = Boolean(menuItems && menuItems.length > 0); const finalTitle = discussionPredefinedType === PredefinedTypes.General && commonName @@ -97,6 +103,12 @@ export const FeedItemBaseContent: FC = (props) => { } }; + const handleAvatarClick = () => { + if (onUserSelect && dmUserId) { + onUserSelect(dmUserId); + } + }; + return (
= (props) => { onContextMenu={handleContextMenu} {...getLongPressProps()} > - {renderImage?.(imageClassName) || ( - - )} +
+ {renderImage?.(imageClassName) || ( + + )} +

Date: Mon, 30 Oct 2023 12:45:11 -0400 Subject: [PATCH 02/12] inbox feed item common/space avatar click now redirects to the common/space --- .../components/DiscussionFeedCard/DiscussionFeedCard.tsx | 1 + src/pages/common/components/FeedCard/FeedCard.tsx | 3 +++ src/pages/common/components/FeedItem/context.ts | 1 + .../components/ProposalFeedCard/ProposalFeedCard.tsx | 1 + .../components/FeedItemBaseContent/FeedItemBaseContent.tsx | 7 +++++++ 5 files changed, 13 insertions(+) diff --git a/src/pages/common/components/DiscussionFeedCard/DiscussionFeedCard.tsx b/src/pages/common/components/DiscussionFeedCard/DiscussionFeedCard.tsx index 4e2641abd4..721c6102c3 100644 --- a/src/pages/common/components/DiscussionFeedCard/DiscussionFeedCard.tsx +++ b/src/pages/common/components/DiscussionFeedCard/DiscussionFeedCard.tsx @@ -321,6 +321,7 @@ const DiscussionFeedCard = forwardRef( isPreviewMode={isPreviewMode} isPinned={isPinned} commonName={commonName} + commonId={commonId} image={commonImage} imageAlt={`${commonName}'s image`} isProject={isProject} diff --git a/src/pages/common/components/FeedCard/FeedCard.tsx b/src/pages/common/components/FeedCard/FeedCard.tsx index 84011cb894..b2d428e9a0 100644 --- a/src/pages/common/components/FeedCard/FeedCard.tsx +++ b/src/pages/common/components/FeedCard/FeedCard.tsx @@ -31,6 +31,7 @@ type FeedCardProps = PropsWithChildren<{ lastMessage?: TextEditorValue; isPreviewMode?: boolean; commonName?: string; + commonId?: string; image?: string; imageAlt?: string; isProject?: boolean; @@ -69,6 +70,7 @@ export const FeedCard = forwardRef((props, ref) => { lastMessage, isPreviewMode = true, commonName, + commonId, image, imageAlt, isProject, @@ -192,6 +194,7 @@ export const FeedCard = forwardRef((props, ref) => { lastMessage: !isLoading ? lastMessage : undefined, menuItems, commonName, + commonId, image, imageAlt, isProject, diff --git a/src/pages/common/components/FeedItem/context.ts b/src/pages/common/components/FeedItem/context.ts index f7f7c2f35d..db388eb6fb 100644 --- a/src/pages/common/components/FeedItem/context.ts +++ b/src/pages/common/components/FeedItem/context.ts @@ -29,6 +29,7 @@ export interface FeedItemBaseContentProps { seen?: boolean; ownerId?: string; commonName?: string; + commonId?: string; renderImage?: (className?: string) => ReactNode; renderLeftContent?: () => ReactNode; image?: string; diff --git a/src/pages/common/components/ProposalFeedCard/ProposalFeedCard.tsx b/src/pages/common/components/ProposalFeedCard/ProposalFeedCard.tsx index 934cd0720d..6259c659ef 100644 --- a/src/pages/common/components/ProposalFeedCard/ProposalFeedCard.tsx +++ b/src/pages/common/components/ProposalFeedCard/ProposalFeedCard.tsx @@ -458,6 +458,7 @@ const ProposalFeedCard = forwardRef( seen={feedItemUserMetadata?.seen ?? !isFeedItemUserMetadataFetched} menuItems={menuItems} ownerId={item.userId} + commonId={commonId} > {renderContent()} diff --git a/src/pages/inbox/components/FeedItemBaseContent/FeedItemBaseContent.tsx b/src/pages/inbox/components/FeedItemBaseContent/FeedItemBaseContent.tsx index 438a80d52f..56055f4658 100644 --- a/src/pages/inbox/components/FeedItemBaseContent/FeedItemBaseContent.tsx +++ b/src/pages/inbox/components/FeedItemBaseContent/FeedItemBaseContent.tsx @@ -1,4 +1,5 @@ import React, { FC, MouseEventHandler, useRef, useState } from "react"; +import { useHistory } from "react-router-dom"; import classNames from "classnames"; import { useLongPress } from "use-long-press"; import { @@ -6,6 +7,7 @@ import { FeedItemBaseContentProps, useFeedItemContext, } from "@/pages/common"; +import { useRoutesContext } from "@/shared/contexts"; import { PredefinedTypes } from "@/shared/models"; import { ContextMenu, @@ -41,7 +43,10 @@ export const FeedItemBaseContent: FC = (props) => { isProject, discussionPredefinedType, dmUserId, + commonId, } = props; + const history = useHistory(); + const { getCommonPagePath } = useRoutesContext(); const contextMenuRef = useRef(null); const [isLongPressing, setIsLongPressing] = useState(false); const [isLongPressed, setIsLongPressed] = useState(false); @@ -106,6 +111,8 @@ export const FeedItemBaseContent: FC = (props) => { const handleAvatarClick = () => { if (onUserSelect && dmUserId) { onUserSelect(dmUserId); + } else if (commonId) { + history.push(getCommonPagePath(commonId)); } }; From c3a25654b29d8d3dbd7e8bb6dc446963a3d0b193 Mon Sep 17 00:00:00 2001 From: Roie Natan Date: Fri, 3 Nov 2023 11:43:47 -0400 Subject: [PATCH 03/12] show follow icon on space cards --- .../components/ProjectFeedItem/ProjectFeedItem.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/pages/common/components/FeedItem/components/ProjectFeedItem/ProjectFeedItem.tsx b/src/pages/common/components/FeedItem/components/ProjectFeedItem/ProjectFeedItem.tsx index ae282dc417..3b4624f969 100644 --- a/src/pages/common/components/FeedItem/components/ProjectFeedItem/ProjectFeedItem.tsx +++ b/src/pages/common/components/FeedItem/components/ProjectFeedItem/ProjectFeedItem.tsx @@ -3,7 +3,7 @@ import { useHistory } from "react-router-dom"; import classNames from "classnames"; import { useFeedItemContext } from "@/pages/common"; import { useRoutesContext } from "@/shared/contexts"; -import { useCommon } from "@/shared/hooks/useCases"; +import { useCommon, useFeedItemFollow } from "@/shared/hooks/useCases"; import { OpenIcon } from "@/shared/icons"; import { CommonFeed } from "@/shared/models"; import { CommonAvatar, parseStringToTextEditorValue } from "@/shared/ui-kit"; @@ -22,6 +22,10 @@ export const ProjectFeedItem: FC = (props) => { const { getCommonPagePath } = useRoutesContext(); const { renderFeedItemBaseContent } = useFeedItemContext(); const { data: common, fetched: isCommonFetched, fetchCommon } = useCommon(); + const feedItemFollow = useFeedItemFollow( + { feedItemId: item.id, commonId: item.data.id }, + { withSubscription: true }, + ); const { projectUnreadStreamsCount: unreadStreamsCount, projectUnreadMessages: unreadMessages, @@ -76,6 +80,7 @@ export const ProjectFeedItem: FC = (props) => { lastMessage, renderLeftContent, shouldHideBottomContent: !lastMessage, + isFollowing: feedItemFollow.isFollowing, })} ) || null From 3c8bd777364d4ed71e5075b150c0ceb3d635d0e8 Mon Sep 17 00:00:00 2001 From: Kiryl Budnik Date: Fri, 3 Nov 2023 18:52:01 +0100 Subject: [PATCH 04/12] Implemented chat improvements --- .../components/ChatComponent/ChatComponent.module.scss | 8 +++----- .../common/components/ChatComponent/ChatComponent.tsx | 2 +- .../components/ChatContent/ChatContent.module.scss | 1 - .../components/DesktopChat/DesktopChat.module.scss | 8 +++++++- .../FeedLayout/components/DesktopChat/DesktopChat.tsx | 6 +++++- src/shared/components/Chat/ChatMessage/ChatMessage.tsx | 4 ++-- 6 files changed, 18 insertions(+), 11 deletions(-) diff --git a/src/pages/common/components/ChatComponent/ChatComponent.module.scss b/src/pages/common/components/ChatComponent/ChatComponent.module.scss index 32838bd7c3..69b30c903e 100644 --- a/src/pages/common/components/ChatComponent/ChatComponent.module.scss +++ b/src/pages/common/components/ChatComponent/ChatComponent.module.scss @@ -6,7 +6,7 @@ flex-direction: column; flex: 1; width: inherit; - height: calc(100% - #{$container-desktop-header-height}); + height: calc(100% - var(--chat-header-height, 0rem)); background-color: $white; box-sizing: border-box; --chat-input-wrapper-height: 3.125rem; @@ -18,15 +18,13 @@ overscroll-behavior: contain; display: flex; flex-direction: column-reverse; - padding: 0.5rem 2rem 0; - padding-bottom: calc(var(--chat-input-wrapper-height) + 7rem); + padding: 0.5rem 2rem var(--chat-input-wrapper-height) 2rem; } .emptyChat { display: flex; justify-content: center; - padding: 0.5rem 2rem 0; - padding-bottom: calc(var(--chat-input-wrapper-height) + 7rem); + align-self: center; } .bottomChatContainer { diff --git a/src/pages/common/components/ChatComponent/ChatComponent.tsx b/src/pages/common/components/ChatComponent/ChatComponent.tsx index 0abf8d3382..d0c3b30add 100644 --- a/src/pages/common/components/ChatComponent/ChatComponent.tsx +++ b/src/pages/common/components/ChatComponent/ChatComponent.tsx @@ -189,7 +189,7 @@ export default function ChatComponent({ isScrolling, chatContentRect: chatContainerRef.current?.getBoundingClientRect(), }), - [isScrolling], + [isScrolling, chatContainerRef.current], ); const [message, setMessage] = useState( diff --git a/src/pages/common/components/ChatComponent/components/ChatContent/ChatContent.module.scss b/src/pages/common/components/ChatComponent/components/ChatContent/ChatContent.module.scss index fd9cd3d746..3ec76095c6 100644 --- a/src/pages/common/components/ChatComponent/components/ChatContent/ChatContent.module.scss +++ b/src/pages/common/components/ChatComponent/components/ChatContent/ChatContent.module.scss @@ -26,7 +26,6 @@ .noMessagesText { align-self: flex-start; max-width: 17.5rem; - margin: 3.375rem 0 0; padding: 0.5rem 1rem; font-size: $xsmall; line-height: 143%; diff --git a/src/pages/commonFeed/components/FeedLayout/components/DesktopChat/DesktopChat.module.scss b/src/pages/commonFeed/components/FeedLayout/components/DesktopChat/DesktopChat.module.scss index 9e0e494642..9f5a8cc971 100644 --- a/src/pages/commonFeed/components/FeedLayout/components/DesktopChat/DesktopChat.module.scss +++ b/src/pages/commonFeed/components/FeedLayout/components/DesktopChat/DesktopChat.module.scss @@ -1,7 +1,11 @@ @import "../../../../../../constants"; +.rightPaneContainerWithHeader { + --chat-header-height: #{$container-desktop-header-height}; +} + .titleWrapper { - height: $container-desktop-header-height; + height: var(--chat-header-height); padding: 0 1.25rem; display: flex; align-items: center; @@ -9,6 +13,7 @@ border-bottom: 0.0625rem solid $c-light-gray; box-sizing: border-box; } + .title { margin: 0; display: -webkit-box; @@ -22,6 +27,7 @@ overflow-wrap: break-word; text-overflow: ellipsis; } + .titleRTL { text-align: right; direction: rtl; diff --git a/src/pages/commonFeed/components/FeedLayout/components/DesktopChat/DesktopChat.tsx b/src/pages/commonFeed/components/FeedLayout/components/DesktopChat/DesktopChat.tsx index fe4b34d81d..38828ab262 100644 --- a/src/pages/commonFeed/components/FeedLayout/components/DesktopChat/DesktopChat.tsx +++ b/src/pages/commonFeed/components/FeedLayout/components/DesktopChat/DesktopChat.tsx @@ -82,7 +82,11 @@ const DesktopChat: FC = (props) => { }, [dmUserId]); return ( - + {withTitle && (

{dmUser?.photoURL && ( diff --git a/src/shared/components/Chat/ChatMessage/ChatMessage.tsx b/src/shared/components/Chat/ChatMessage/ChatMessage.tsx index e49ce29b03..39e8c46f29 100644 --- a/src/shared/components/Chat/ChatMessage/ChatMessage.tsx +++ b/src/shared/components/Chat/ChatMessage/ChatMessage.tsx @@ -213,7 +213,7 @@ export default function ChatMessage({ }, ); - const handleContextMenu: MouseEventHandler = (event) => { + const handleContextMenu: MouseEventHandler = (event) => { if (!isTabletView) { event.preventDefault(); setIsMenuOpen(true); @@ -330,7 +330,6 @@ export default function ChatMessage({
  • Date: Fri, 3 Nov 2023 14:55:59 -0400 Subject: [PATCH 05/12] display (personal) @ icon on unread mentioned stream --- src/pages/common/components/ChatComponent/context.ts | 1 + .../components/DiscussionFeedCard/DiscussionFeedCard.tsx | 6 ++++++ src/pages/common/components/FeedCard/FeedCard.tsx | 3 +++ .../components/FeedCardTags/FeedCardTags.module.scss | 4 ++++ .../FeedCard/components/FeedCardTags/FeedCardTags.tsx | 3 +++ .../components/FeedItemBaseContent/FeedItemBaseContent.tsx | 2 ++ src/pages/common/components/FeedItem/context.ts | 1 + .../common/components/ProposalFeedCard/ProposalFeedCard.tsx | 5 +++++ .../components/FeedItemBaseContent/FeedItemBaseContent.tsx | 2 ++ src/shared/models/CommonFeedObjectUserUnique.ts | 1 + 10 files changed, 28 insertions(+) diff --git a/src/pages/common/components/ChatComponent/context.ts b/src/pages/common/components/ChatComponent/context.ts index 2db6aeda1d..bf219498f4 100644 --- a/src/pages/common/components/ChatComponent/context.ts +++ b/src/pages/common/components/ChatComponent/context.ts @@ -15,6 +15,7 @@ export interface ChatItem { lastSeenItem?: CommonFeedObjectUserUnique["lastSeen"]; lastSeenAt?: CommonFeedObjectUserUnique["lastSeenAt"]; seenOnce?: boolean; + hasUnseenMention?: CommonFeedObjectUserUnique["hasUnseenMention"]; } export interface ChatContextValue { diff --git a/src/pages/common/components/DiscussionFeedCard/DiscussionFeedCard.tsx b/src/pages/common/components/DiscussionFeedCard/DiscussionFeedCard.tsx index 3ddf95d5c7..37ac83fd05 100644 --- a/src/pages/common/components/DiscussionFeedCard/DiscussionFeedCard.tsx +++ b/src/pages/common/components/DiscussionFeedCard/DiscussionFeedCard.tsx @@ -168,6 +168,7 @@ const DiscussionFeedCard = forwardRef( lastSeenItem: feedItemUserMetadata?.lastSeen, lastSeenAt: feedItemUserMetadata?.lastSeenAt, seenOnce: feedItemUserMetadata?.seenOnce, + hasUnseenMention: feedItemUserMetadata?.hasUnseenMention, }); } }, [ @@ -177,6 +178,7 @@ const DiscussionFeedCard = forwardRef( feedItemUserMetadata?.lastSeen, feedItemUserMetadata?.lastSeenAt, feedItemUserMetadata?.seenOnce, + feedItemUserMetadata?.hasUnseenMention, ]); const onDiscussionDelete = useCallback(async () => { @@ -333,6 +335,10 @@ const DiscussionFeedCard = forwardRef( seen={feedItemUserMetadata?.seen ?? !isFeedItemUserMetadataFetched} ownerId={item.userId} discussionPredefinedType={discussion?.predefinedType} + hasUnseenMention={ + feedItemUserMetadata?.hasUnseenMention ?? + !isFeedItemUserMetadataFetched + } > {renderContent()} diff --git a/src/pages/common/components/FeedCard/FeedCard.tsx b/src/pages/common/components/FeedCard/FeedCard.tsx index 84011cb894..8e593dc061 100644 --- a/src/pages/common/components/FeedCard/FeedCard.tsx +++ b/src/pages/common/components/FeedCard/FeedCard.tsx @@ -45,6 +45,7 @@ type FeedCardProps = PropsWithChildren<{ discussionPredefinedType?: PredefinedTypes; hasFiles?: boolean; hasImages?: boolean; + hasUnseenMention?: boolean; }>; const MOBILE_HEADER_HEIGHT = 52; @@ -79,6 +80,7 @@ export const FeedCard = forwardRef((props, ref) => { menuItems, seenOnce, seen, + hasUnseenMention, ownerId, discussionPredefinedType, hasImages, @@ -204,6 +206,7 @@ export const FeedCard = forwardRef((props, ref) => { discussionPredefinedType, hasFiles, hasImages, + hasUnseenMention, })}
    )} diff --git a/src/pages/common/components/FeedCard/components/FeedCardTags/FeedCardTags.module.scss b/src/pages/common/components/FeedCard/components/FeedCardTags/FeedCardTags.module.scss index 0f0985d0b5..92d2c46860 100644 --- a/src/pages/common/components/FeedCard/components/FeedCardTags/FeedCardTags.module.scss +++ b/src/pages/common/components/FeedCard/components/FeedCardTags/FeedCardTags.module.scss @@ -56,3 +56,7 @@ border-radius: 50%; background-color: $c-pink-primary; } + +.hasUnseenMention { + color: $c-pink-primary; +} diff --git a/src/pages/common/components/FeedCard/components/FeedCardTags/FeedCardTags.tsx b/src/pages/common/components/FeedCard/components/FeedCardTags/FeedCardTags.tsx index eb69e59e8e..168f1182d8 100644 --- a/src/pages/common/components/FeedCard/components/FeedCardTags/FeedCardTags.tsx +++ b/src/pages/common/components/FeedCard/components/FeedCardTags/FeedCardTags.tsx @@ -16,6 +16,7 @@ interface FeedCardTagsProps { isActive: boolean; isPinned?: boolean; isFollowing?: boolean; + hasUnseenMention?: boolean; } export const FeedCardTags: FC = (props) => { @@ -28,6 +29,7 @@ export const FeedCardTags: FC = (props) => { isActive, isPinned, isFollowing, + hasUnseenMention, } = props; const user = useSelector(selectUser()); const isOwner = ownerId === user?.uid; @@ -54,6 +56,7 @@ export const FeedCardTags: FC = (props) => { })} /> )} + {hasUnseenMention &&
    @
    } {isFollowing && ( )} diff --git a/src/pages/common/components/FeedCard/components/FeedItemBaseContent/FeedItemBaseContent.tsx b/src/pages/common/components/FeedCard/components/FeedItemBaseContent/FeedItemBaseContent.tsx index f51be70090..2324322854 100644 --- a/src/pages/common/components/FeedCard/components/FeedItemBaseContent/FeedItemBaseContent.tsx +++ b/src/pages/common/components/FeedCard/components/FeedItemBaseContent/FeedItemBaseContent.tsx @@ -35,6 +35,7 @@ export const FeedItemBaseContent: FC = (props) => { isFollowing, isLoading = false, shouldHideBottomContent = false, + hasUnseenMention, } = props; const contextMenuRef = useRef(null); const [isLongPressing, setIsLongPressing] = useState(false); @@ -154,6 +155,7 @@ export const FeedItemBaseContent: FC = (props) => { isActive={isActive} isPinned={isPinned} isFollowing={isFollowing} + hasUnseenMention={hasUnseenMention} />
    • diff --git a/src/pages/common/components/FeedItem/context.ts b/src/pages/common/components/FeedItem/context.ts index 67cf765193..38f3f3c557 100644 --- a/src/pages/common/components/FeedItem/context.ts +++ b/src/pages/common/components/FeedItem/context.ts @@ -42,6 +42,7 @@ export interface FeedItemBaseContentProps { hasImages?: boolean; isLoading?: boolean; shouldHideBottomContent?: boolean; + hasUnseenMention?: boolean; } export interface GetLastMessageOptions { diff --git a/src/pages/common/components/ProposalFeedCard/ProposalFeedCard.tsx b/src/pages/common/components/ProposalFeedCard/ProposalFeedCard.tsx index 934cd0720d..997588d9c6 100644 --- a/src/pages/common/components/ProposalFeedCard/ProposalFeedCard.tsx +++ b/src/pages/common/components/ProposalFeedCard/ProposalFeedCard.tsx @@ -270,6 +270,7 @@ const ProposalFeedCard = forwardRef( lastSeenItem: feedItemUserMetadata?.lastSeen, lastSeenAt: feedItemUserMetadata?.lastSeenAt, seenOnce: feedItemUserMetadata?.seenOnce, + hasUnseenMention: feedItemUserMetadata?.hasUnseenMention, }); } }, [ @@ -281,6 +282,7 @@ const ProposalFeedCard = forwardRef( feedItemUserMetadata?.lastSeen, feedItemUserMetadata?.lastSeenAt, feedItemUserMetadata?.seenOnce, + feedItemUserMetadata?.hasUnseenMention, ]); useEffect(() => { @@ -458,6 +460,9 @@ const ProposalFeedCard = forwardRef( seen={feedItemUserMetadata?.seen ?? !isFeedItemUserMetadataFetched} menuItems={menuItems} ownerId={item.userId} + hasUnseenMention={ + feedItemUserMetadata?.hasUnseenMention ?? !isFeedItemUserFetched + } > {renderContent()} diff --git a/src/pages/inbox/components/FeedItemBaseContent/FeedItemBaseContent.tsx b/src/pages/inbox/components/FeedItemBaseContent/FeedItemBaseContent.tsx index 04238c3472..ef5da01dba 100644 --- a/src/pages/inbox/components/FeedItemBaseContent/FeedItemBaseContent.tsx +++ b/src/pages/inbox/components/FeedItemBaseContent/FeedItemBaseContent.tsx @@ -36,6 +36,7 @@ export const FeedItemBaseContent: FC = (props) => { isImageRounded, isProject, discussionPredefinedType, + hasUnseenMention, } = props; const contextMenuRef = useRef(null); const [isLongPressing, setIsLongPressing] = useState(false); @@ -160,6 +161,7 @@ export const FeedItemBaseContent: FC = (props) => { ownerId={ownerId} isActive={isActive} isPinned={false} + hasUnseenMention={hasUnseenMention} />
    diff --git a/src/shared/models/CommonFeedObjectUserUnique.ts b/src/shared/models/CommonFeedObjectUserUnique.ts index ba4ce206e7..97fd50cbb5 100644 --- a/src/shared/models/CommonFeedObjectUserUnique.ts +++ b/src/shared/models/CommonFeedObjectUserUnique.ts @@ -14,4 +14,5 @@ export interface CommonFeedObjectUserUnique extends BaseEntity { commonId: string; seenOnce?: boolean; seen?: boolean; + hasUnseenMention?: boolean; } From 23043edc7407b80f9f575be50369a9aae762a8c2 Mon Sep 17 00:00:00 2001 From: Roie Natan Date: Fri, 3 Nov 2023 17:07:13 -0400 Subject: [PATCH 06/12] messages ballons design update --- .../common/components/ChatComponent/ChatComponent.module.scss | 4 ++-- .../components/Chat/ChatMessage/ChatMessage.module.scss | 2 ++ 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/pages/common/components/ChatComponent/ChatComponent.module.scss b/src/pages/common/components/ChatComponent/ChatComponent.module.scss index 32838bd7c3..d7f3103421 100644 --- a/src/pages/common/components/ChatComponent/ChatComponent.module.scss +++ b/src/pages/common/components/ChatComponent/ChatComponent.module.scss @@ -18,14 +18,14 @@ overscroll-behavior: contain; display: flex; flex-direction: column-reverse; - padding: 0.5rem 2rem 0; + padding: 0.5rem 1.375rem 0; padding-bottom: calc(var(--chat-input-wrapper-height) + 7rem); } .emptyChat { display: flex; justify-content: center; - padding: 0.5rem 2rem 0; + padding: 0.5rem 1.375rem 0; padding-bottom: calc(var(--chat-input-wrapper-height) + 7rem); } diff --git a/src/shared/components/Chat/ChatMessage/ChatMessage.module.scss b/src/shared/components/Chat/ChatMessage/ChatMessage.module.scss index d9cd0d7295..5fda3bf717 100644 --- a/src/shared/components/Chat/ChatMessage/ChatMessage.module.scss +++ b/src/shared/components/Chat/ChatMessage/ChatMessage.module.scss @@ -60,6 +60,7 @@ text-align: start; font-size: $small; color: $secondary-blue; + max-width: 33.563rem; &:hover { .menuArrowButton { @@ -90,6 +91,7 @@ .messageTextCurrentUser { background-color: $c-pink-active-feed-cards; + margin-left: 2.8rem; } .systemMessageContainer { From f2ae3c5c72e9c74ba9fb5ee1581ba306f5bce82f Mon Sep 17 00:00:00 2001 From: Andrey Mikhadyuk Date: Mon, 6 Nov 2023 11:54:31 +0300 Subject: [PATCH 07/12] fix inbox filter icon props names --- src/shared/icons/inboxFilter.icon.tsx | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/src/shared/icons/inboxFilter.icon.tsx b/src/shared/icons/inboxFilter.icon.tsx index 59251221f7..52ac490c20 100644 --- a/src/shared/icons/inboxFilter.icon.tsx +++ b/src/shared/icons/inboxFilter.icon.tsx @@ -17,32 +17,32 @@ const InboxFilterIcon: FC = ({ className }) => { ); From 90d178c35a82f3161019b0efc70dafe00530079a Mon Sep 17 00:00:00 2001 From: Roie Natan Date: Mon, 6 Nov 2023 14:43:04 -0500 Subject: [PATCH 08/12] code review updates --- .../common/components/ProposalFeedCard/ProposalFeedCard.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/pages/common/components/ProposalFeedCard/ProposalFeedCard.tsx b/src/pages/common/components/ProposalFeedCard/ProposalFeedCard.tsx index 997588d9c6..ddbc1c2414 100644 --- a/src/pages/common/components/ProposalFeedCard/ProposalFeedCard.tsx +++ b/src/pages/common/components/ProposalFeedCard/ProposalFeedCard.tsx @@ -461,7 +461,8 @@ const ProposalFeedCard = forwardRef( menuItems={menuItems} ownerId={item.userId} hasUnseenMention={ - feedItemUserMetadata?.hasUnseenMention ?? !isFeedItemUserFetched + feedItemUserMetadata?.hasUnseenMention ?? + !isFeedItemUserMetadataFetched } > {renderContent()} From 429f84013bbc94e37199884ecf1569837d401215 Mon Sep 17 00:00:00 2001 From: Kiryl Budnik Date: Mon, 6 Nov 2023 23:24:01 +0100 Subject: [PATCH 09/12] fix issue with displaying message menu in mobile chat --- .../components/ChatComponent/ChatComponent.module.scss | 7 ++++++- .../common/components/ChatComponent/ChatComponent.tsx | 6 +++--- .../components/MobileChat/MobileChat.module.scss | 2 ++ 3 files changed, 11 insertions(+), 4 deletions(-) diff --git a/src/pages/common/components/ChatComponent/ChatComponent.module.scss b/src/pages/common/components/ChatComponent/ChatComponent.module.scss index 69b30c903e..a6b857552c 100644 --- a/src/pages/common/components/ChatComponent/ChatComponent.module.scss +++ b/src/pages/common/components/ChatComponent/ChatComponent.module.scss @@ -18,7 +18,12 @@ overscroll-behavior: contain; display: flex; flex-direction: column-reverse; - padding: 0.5rem 2rem var(--chat-input-wrapper-height) 2rem; + padding: 0.5rem 2rem 0 2rem; + margin-bottom: var(--chat-input-wrapper-height); + + @include big-phone { + margin-bottom: 0; + } } .emptyChat { diff --git a/src/pages/common/components/ChatComponent/ChatComponent.tsx b/src/pages/common/components/ChatComponent/ChatComponent.tsx index d0c3b30add..b5f881624c 100644 --- a/src/pages/common/components/ChatComponent/ChatComponent.tsx +++ b/src/pages/common/components/ChatComponent/ChatComponent.tsx @@ -183,7 +183,7 @@ export default function ChatComponent({ const chatWrapperId = useMemo(() => `chat-wrapper-${uuidv4()}`, []); const chatInputWrapperRef = useRef(null); const chatContainerRef = useRef(null); - const [isScrolling, setScrolling] = useState(false); + const [isScrolling, setIsScrolling] = useState(false); const chatContentContextValue: ChatContentData = useMemo( () => ({ isScrolling, @@ -603,11 +603,11 @@ export default function ChatComponent({ useEffect(() => { const deactivateScrollingFlag = debounce(() => { - setScrolling(false); + setIsScrolling(false); }, 300); function handleScroll() { - setScrolling(true); + setIsScrolling(true); deactivateScrollingFlag(); } diff --git a/src/pages/commonFeed/components/FeedLayout/components/MobileChat/MobileChat.module.scss b/src/pages/commonFeed/components/FeedLayout/components/MobileChat/MobileChat.module.scss index 34d7a6a3fc..b326d84cff 100644 --- a/src/pages/commonFeed/components/FeedLayout/components/MobileChat/MobileChat.module.scss +++ b/src/pages/commonFeed/components/FeedLayout/components/MobileChat/MobileChat.module.scss @@ -1,6 +1,8 @@ @import "../../../../../../constants"; .modal { + height: 90vh; + .modalHeaderWrapper { padding: 0; From 51e305f84071789a3ac7dd1042022c7720053864 Mon Sep 17 00:00:00 2001 From: Roie Natan Date: Tue, 7 Nov 2023 08:07:44 -0500 Subject: [PATCH 10/12] added margins to others messages and system messages --- src/shared/components/Chat/ChatMessage/ChatMessage.module.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/shared/components/Chat/ChatMessage/ChatMessage.module.scss b/src/shared/components/Chat/ChatMessage/ChatMessage.module.scss index 5fda3bf717..0c49ea1085 100644 --- a/src/shared/components/Chat/ChatMessage/ChatMessage.module.scss +++ b/src/shared/components/Chat/ChatMessage/ChatMessage.module.scss @@ -61,6 +61,7 @@ font-size: $small; color: $secondary-blue; max-width: 33.563rem; + margin-right: 2.8rem; &:hover { .menuArrowButton { @@ -92,6 +93,7 @@ .messageTextCurrentUser { background-color: $c-pink-active-feed-cards; margin-left: 2.8rem; + margin-right: unset; } .systemMessageContainer { @@ -105,6 +107,7 @@ font-size: $xxsmall-2; color: $c-gray-60; direction: ltr; + margin: 0 4.25rem; } .messageName { From 7914ee8b763daab4fa57ff0731966342b882a45e Mon Sep 17 00:00:00 2001 From: Kiryl Budnik Date: Tue, 7 Nov 2023 19:46:50 +0100 Subject: [PATCH 11/12] update webpack configuration with devtool property --- craco.config.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/craco.config.js b/craco.config.js index f4477e6d2f..4398b2d0ed 100644 --- a/craco.config.js +++ b/craco.config.js @@ -22,5 +22,17 @@ module.exports = { tsConfigPath: "./tsconfig.paths.json", }, }, + { + plugin: { + overrideWebpackConfig: ({ webpackConfig }) => { + webpackConfig.devtool = + process.env.REACT_APP_ENV === "dev" + ? "source-map" + : "eval-cheap-module-source-map"; + + return webpackConfig; + }, + }, + }, ], }; From 7a7483a57683426c71a06ffa364658516eaf495e Mon Sep 17 00:00:00 2001 From: Kiryl Budnik Date: Wed, 8 Nov 2023 22:00:26 +0100 Subject: [PATCH 12/12] add "item" query param to inbox page --- src/pages/commonFeed/components/FeedLayout/FeedLayout.tsx | 6 ++++++ src/pages/inbox/BaseInbox.tsx | 1 + 2 files changed, 7 insertions(+) diff --git a/src/pages/commonFeed/components/FeedLayout/FeedLayout.tsx b/src/pages/commonFeed/components/FeedLayout/FeedLayout.tsx index 93441ebc08..5ffca2f17b 100644 --- a/src/pages/commonFeed/components/FeedLayout/FeedLayout.tsx +++ b/src/pages/commonFeed/components/FeedLayout/FeedLayout.tsx @@ -615,6 +615,12 @@ const FeedLayout: ForwardRefRenderFunction = ( } }, [batchNumber]); + useEffect(() => { + if (sharedFeedItemId && isTabletView && allFeedItems) { + setActiveChatItem({ feedItemId: sharedFeedItemId }); + } + }, [sharedFeedItemId, isTabletView, allFeedItems]); + useImperativeHandle( ref, () => ({ diff --git a/src/pages/inbox/BaseInbox.tsx b/src/pages/inbox/BaseInbox.tsx index 8be5cfa57e..fb3da68852 100644 --- a/src/pages/inbox/BaseInbox.tsx +++ b/src/pages/inbox/BaseInbox.tsx @@ -272,6 +272,7 @@ const InboxPage: FC = (props) => { renderChatChannelItem={renderChatChannelItem} onFeedItemUpdate={handleFeedItemUpdate} getLastMessage={getLastMessage} + sharedFeedItemId={sharedFeedItemId} emptyText={ isActiveUnreadInboxItemsQueryParam ? "Hurry! No unread items in your inbox :-)"