Merge branch 'dev' into feature/CW-2299-sorce-map-config

daostack · Nov 8, 2023 · 8a66bb6 · 8a66bb6
2 parents 7914ee8 + f65cf5c
commit 8a66bb6
Show file tree

Hide file tree

Showing 18 changed files with 74 additions and 27 deletions.
diff --git 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,18 @@
   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 0 2rem;
+  margin-bottom: var(--chat-input-wrapper-height);
+
+  @include big-phone {
+    margin-bottom: 0;
+  }
 }
 
 .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
@@ -183,13 +183,13 @@ export default function ChatComponent({
   const chatWrapperId = useMemo(() => `chat-wrapper-${uuidv4()}`, []);
   const chatInputWrapperRef = useRef<HTMLDivElement>(null);
   const chatContainerRef = useRef<HTMLDivElement>(null);
-  const [isScrolling, setScrolling] = useState(false);
+  const [isScrolling, setIsScrolling] = useState(false);
   const chatContentContextValue: ChatContentData = useMemo(
     () => ({
       isScrolling,
       chatContentRect: chatContainerRef.current?.getBoundingClientRect(),
     }),
-    [isScrolling],
+    [isScrolling, chatContainerRef.current],
   );
 
   const [message, setMessage] = useState<TextEditorValue>(
@@ -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/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/common/components/DiscussionFeedCard/DiscussionFeedCard.tsx b/src/pages/common/components/DiscussionFeedCard/DiscussionFeedCard.tsx
@@ -323,6 +323,7 @@ const DiscussionFeedCard = forwardRef<FeedItemRef, DiscussionFeedCardProps>(
           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
@@ -31,6 +31,7 @@ type FeedCardProps = PropsWithChildren<{
   lastMessage?: TextEditorValue;
   isPreviewMode?: boolean;
   commonName?: string;
+  commonId?: string;
   image?: string;
   imageAlt?: string;
   isProject?: boolean;
@@ -70,6 +71,7 @@ export const FeedCard = forwardRef<FeedCardRef, FeedCardProps>((props, ref) => {
     lastMessage,
     isPreviewMode = true,
     commonName,
+    commonId,
     image,
     imageAlt,
     isProject,
@@ -194,6 +196,7 @@ export const FeedCard = forwardRef<FeedCardRef, FeedCardProps>((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
@@ -29,6 +29,7 @@ export interface FeedItemBaseContentProps {
   seen?: boolean;
   ownerId?: string;
   commonName?: string;
+  commonId?: string;
   renderImage?: (className?: string) => ReactNode;
   renderLeftContent?: () => ReactNode;
   image?: string;
@@ -42,6 +43,7 @@ export interface FeedItemBaseContentProps {
   hasImages?: boolean;
   isLoading?: boolean;
   shouldHideBottomContent?: boolean;
+  dmUserId?: string;
   hasUnseenMention?: boolean;
 }
 

diff --git a/src/pages/common/components/ProposalFeedCard/ProposalFeedCard.tsx b/src/pages/common/components/ProposalFeedCard/ProposalFeedCard.tsx
@@ -460,6 +460,7 @@ const ProposalFeedCard = forwardRef<FeedItemRef, ProposalFeedCardProps>(
           seen={feedItemUserMetadata?.seen ?? !isFeedItemUserMetadataFetched}
           menuItems={menuItems}
           ownerId={item.userId}
+          commonId={commonId}
           hasUnseenMention={
             feedItemUserMetadata?.hasUnseenMention ??
             !isFeedItemUserMetadataFetched

diff --git 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/commonFeed/components/FeedLayout/components/DesktopChat/DesktopChat.module.scss b/src/pages/commonFeed/components/FeedLayout/components/DesktopChat/DesktopChat.module.scss
@@ -1,14 +1,19 @@
 @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;
   background-color: $c-light-gray-2;
   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
@@ -82,7 +82,11 @@ const DesktopChat: FC<ChatProps> = (props) => {
   }, [dmUserId]);
 
   return (
-    <DesktopRightPane className={className}>
+    <DesktopRightPane
+      className={classNames(className, {
+        [styles.rightPaneContainerWithHeader]: withTitle,
+      })}
+    >
       {withTitle && (
         <div className={styles.titleWrapper}>
           {dmUser?.photoURL && (

diff --git 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;
 

diff --git a/src/pages/inbox/components/ChatChannelItem/ChatChannelItem.tsx b/src/pages/inbox/components/ChatChannelItem/ChatChannelItem.tsx
@@ -129,6 +129,7 @@ export const ChatChannelItem: FC<ChatChannelFeedLayoutItemProps> = (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
@@ -1,7 +1,13 @@
 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 { FeedCardTags, FeedItemBaseContentProps } from "@/pages/common";
+import {
+  FeedCardTags,
+  FeedItemBaseContentProps,
+  useFeedItemContext,
+} from "@/pages/common";
+import { useRoutesContext } from "@/shared/contexts";
 import { PredefinedTypes } from "@/shared/models";
 import {
   ContextMenu,
@@ -36,11 +42,16 @@ export const FeedItemBaseContent: FC<FeedItemBaseContentProps> = (props) => {
     isImageRounded,
     isProject,
     discussionPredefinedType,
+    dmUserId,
+    commonId,
     hasUnseenMention,
   } = props;
+  const history = useHistory();
+  const { getCommonPagePath } = useRoutesContext();
   const contextMenuRef = useRef<ContextMenuRef>(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
@@ -98,6 +109,14 @@ export const FeedItemBaseContent: FC<FeedItemBaseContentProps> = (props) => {
     }
   };
 
+  const handleAvatarClick = () => {
+    if (onUserSelect && dmUserId) {
+      onUserSelect(dmUserId);
+    } else if (commonId) {
+      history.push(getCommonPagePath(commonId));
+    }
+  };
+
   return (
     <div
       className={classNames(styles.container, {
@@ -109,14 +128,16 @@ export const FeedItemBaseContent: FC<FeedItemBaseContentProps> = (props) => {
       onContextMenu={handleContextMenu}
       {...getLongPressProps()}
     >
-      {renderImage?.(imageClassName) || (
-        <CommonAvatar
-          name={commonName}
-          src={image}
-          className={imageClassName}
-          alt={imageAlt}
-        />
-      )}
+      <div onClick={handleAvatarClick}>
+        {renderImage?.(imageClassName) || (
+          <CommonAvatar
+            name={commonName}
+            src={image}
+            className={imageClassName}
+            alt={imageAlt}
+          />
+        )}
+      </div>
       <div className={styles.content}>
         <div className={styles.topContent}>
           <p

diff --git a/src/pages/inbox/components/InboxFilterButton/InboxFilterButton.module.scss b/src/pages/inbox/components/InboxFilterButton/InboxFilterButton.module.scss
@@ -26,4 +26,4 @@
   width: 1.5rem;
   height: 1.5rem;
   color: inherit;
-}
+}
diff --git a/src/pages/inbox/components/InboxFilterButton/index.ts b/src/pages/inbox/components/InboxFilterButton/index.ts
@@ -1 +1 @@
-export { default as InboxFilterButton } from "./InboxFilterButton";
+export { default as InboxFilterButton } from "./InboxFilterButton";
diff --git a/src/shared/components/Chat/ChatMessage/ChatMessage.module.scss b/src/shared/components/Chat/ChatMessage/ChatMessage.module.scss
@@ -60,6 +60,8 @@
   text-align: start;
   font-size: $small;
   color: $secondary-blue;
+  max-width: 33.563rem;
+  margin-right: 2.8rem;
 
   &:hover {
     .menuArrowButton {
@@ -90,6 +92,8 @@
 
 .messageTextCurrentUser {
   background-color: $c-pink-active-feed-cards;
+  margin-left: 2.8rem;
+  margin-right: unset;
 }
 
 .systemMessageContainer {
@@ -103,6 +107,7 @@
   font-size: $xxsmall-2;
   color: $c-gray-60;
   direction: ltr;
+  margin: 0 4.25rem;
 }
 
 .messageName {

diff --git a/src/shared/components/Chat/ChatMessage/ChatMessage.tsx b/src/shared/components/Chat/ChatMessage/ChatMessage.tsx
@@ -224,7 +224,7 @@ export default function ChatMessage({
     },
   );
 
-  const handleContextMenu: MouseEventHandler<HTMLLIElement> = (event) => {
+  const handleContextMenu: MouseEventHandler<HTMLDivElement> = (event) => {
     if (!isTabletView) {
       event.preventDefault();
       setIsMenuOpen(true);
@@ -341,7 +341,6 @@ export default function ChatMessage({
     <li
       id={discussionMessage.id}
       className={classNames(styles.container, className)}
-      onContextMenu={handleContextMenu}
     >
       <div
         className={classNames(styles.message, {
@@ -370,6 +369,7 @@ export default function ChatMessage({
         ) : (
           <>
             <div
+              onContextMenu={handleContextMenu}
               className={classNames(styles.messageText, {
                 [styles.messageTextCurrentUser]: !isNotCurrentUserMessage,
                 [styles.messageTextRtl]: isRtlText(discussionMessage.text),

diff --git a/src/shared/hooks/useCases/useInboxItems.ts b/src/shared/hooks/useCases/useInboxItems.ts
@@ -133,7 +133,7 @@ export const useInboxItems = (
   const refetch = () => {
     dispatch(inboxActions.resetInboxItems());
     fetch();
-  }
+  };
 
   useEffect(() => {
     if (!inboxItems.firstDocTimestamp || !userId) {
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		export { default as InboxFilterButton } from "./InboxFilterButton";
		export { default as InboxFilterButton } from "./InboxFilterButton";