Merge branch 'dev' into feature/CW-2288-inbox-feed-caching

# Conflicts: # src/shared/hooks/useCases/useInboxItems.ts
daostack · Nov 9, 2023 · ab5ebdb · ab5ebdb
2 parents 67e8d5e + cff5098
commit ab5ebdb
Show file tree

Hide file tree

Showing 27 changed files with 137 additions and 31 deletions.
diff --git 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;
+        },
+      },
+    },
   ],
 };
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/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/...ponents/CommonTabPanels/components/FeedTab/components/NewStreamButton/NewStreamButton.tsx b/...ponents/CommonTabPanels/components/FeedTab/components/NewStreamButton/NewStreamButton.tsx
@@ -1,9 +1,9 @@
 import React, { FC } from "react";
-import { BoldPlusIcon } from "@/shared/icons";
+import { PlusButton } from "@/pages/inbox/components/HeaderContent/components";
+import { PlusIcon } from "@/shared/icons";
 import { CirclesPermissions, CommonMember, Governance } from "@/shared/models";
 import {
   Button,
-  ButtonIcon,
   ButtonSize,
   ButtonVariant,
   DesktopMenu,
@@ -28,7 +28,7 @@ const NewStreamButton: FC<NewStreamButtonProps> = (props) => {
   } = props;
   const items = useMenuItems({ commonMember, governance });
   const buttonVariant = ButtonVariant.OutlineDarkPink;
-  const iconEl = <BoldPlusIcon className={styles.icon} />;
+  const iconEl = <PlusIcon className={styles.icon} />;
 
   if (items.length === 0) {
     return null;
@@ -55,7 +55,7 @@ const NewStreamButton: FC<NewStreamButtonProps> = (props) => {
   return (
     <MobileMenu
       className={className}
-      triggerEl={<ButtonIcon variant={buttonVariant}>{iconEl}</ButtonIcon>}
+      triggerEl={<PlusButton />}
       items={items}
     />
   );

diff --git a/src/pages/common/components/DiscussionFeedCard/DiscussionFeedCard.tsx b/src/pages/common/components/DiscussionFeedCard/DiscussionFeedCard.tsx
@@ -166,6 +166,7 @@ const DiscussionFeedCard = forwardRef<FeedItemRef, DiscussionFeedCardProps>(
           lastSeenItem: feedItemUserMetadata?.lastSeen,
           lastSeenAt: feedItemUserMetadata?.lastSeenAt,
           seenOnce: feedItemUserMetadata?.seenOnce,
+          hasUnseenMention: feedItemUserMetadata?.hasUnseenMention,
         });
       }
     }, [
@@ -175,6 +176,7 @@ const DiscussionFeedCard = forwardRef<FeedItemRef, DiscussionFeedCardProps>(
       feedItemUserMetadata?.lastSeen,
       feedItemUserMetadata?.lastSeenAt,
       feedItemUserMetadata?.seenOnce,
+      feedItemUserMetadata?.hasUnseenMention,
     ]);
 
     const onDiscussionDelete = useCallback(async () => {
@@ -319,6 +321,7 @@ const DiscussionFeedCard = forwardRef<FeedItemRef, DiscussionFeedCardProps>(
           isPreviewMode={isPreviewMode}
           isPinned={isPinned}
           commonName={commonName}
+          commonId={commonId}
           image={commonImage}
           imageAlt={`${commonName}'s image`}
           isProject={isProject}
@@ -331,6 +334,10 @@ const DiscussionFeedCard = forwardRef<FeedItemRef, DiscussionFeedCardProps>(
           seen={feedItemUserMetadata?.seen ?? !isFeedItemUserMetadataFetched}
           ownerId={item.userId}
           discussionPredefinedType={discussion?.predefinedType}
+          hasUnseenMention={
+            feedItemUserMetadata?.hasUnseenMention ??
+            !isFeedItemUserMetadataFetched
+          }
         >
           {renderContent()}
         </FeedCard>

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;
@@ -45,6 +46,7 @@ type FeedCardProps = PropsWithChildren<{
   discussionPredefinedType?: PredefinedTypes;
   hasFiles?: boolean;
   hasImages?: boolean;
+  hasUnseenMention?: boolean;
 }>;
 
 const MOBILE_HEADER_HEIGHT = 52;
@@ -69,6 +71,7 @@ export const FeedCard = forwardRef<FeedCardRef, FeedCardProps>((props, ref) => {
     lastMessage,
     isPreviewMode = true,
     commonName,
+    commonId,
     image,
     imageAlt,
     isProject,
@@ -79,6 +82,7 @@ export const FeedCard = forwardRef<FeedCardRef, FeedCardProps>((props, ref) => {
     menuItems,
     seenOnce,
     seen,
+    hasUnseenMention,
     ownerId,
     discussionPredefinedType,
     hasImages,
@@ -192,6 +196,7 @@ export const FeedCard = forwardRef<FeedCardRef, FeedCardProps>((props, ref) => {
             lastMessage: !isLoading ? lastMessage : undefined,
             menuItems,
             commonName,
+            commonId,
             image,
             imageAlt,
             isProject,
@@ -204,6 +209,7 @@ export const FeedCard = forwardRef<FeedCardRef, FeedCardProps>((props, ref) => {
             discussionPredefinedType,
             hasFiles,
             hasImages,
+            hasUnseenMention,
           })}
         </div>
       )}

diff --git 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
@@ -16,6 +16,7 @@ interface FeedCardTagsProps {
   isActive: boolean;
   isPinned?: boolean;
   isFollowing?: boolean;
+  hasUnseenMention?: boolean;
 }
 
 export const FeedCardTags: FC<FeedCardTagsProps> = (props) => {
@@ -28,6 +29,7 @@ export const FeedCardTags: FC<FeedCardTagsProps> = (props) => {
     isActive,
     isPinned,
     isFollowing,
+    hasUnseenMention,
   } = props;
   const user = useSelector(selectUser());
   const isOwner = ownerId === user?.uid;
@@ -54,6 +56,7 @@ export const FeedCardTags: FC<FeedCardTagsProps> = (props) => {
           })}
         />
       )}
+      {hasUnseenMention && <div className={styles.hasUnseenMention}>@</div>}
       {isFollowing && (
         <StarIcon className={styles.starIcon} stroke="currentColor" />
       )}

diff --git 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<FeedItemBaseContentProps> = (props) => {
     isFollowing,
     isLoading = false,
     shouldHideBottomContent = false,
+    hasUnseenMention,
   } = props;
   const contextMenuRef = useRef<ContextMenuRef>(null);
   const [isLongPressing, setIsLongPressing] = useState(false);
@@ -154,6 +155,7 @@ export const FeedItemBaseContent: FC<FeedItemBaseContentProps> = (props) => {
                 isActive={isActive}
                 isPinned={isPinned}
                 isFollowing={isFollowing}
+                hasUnseenMention={hasUnseenMention}
               />
             </div>
           </div>

diff --git 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<ProjectFeedItemProps> = (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<ProjectFeedItemProps> = (props) => {
           lastMessage,
           renderLeftContent,
           shouldHideBottomContent: !lastMessage,
+          isFollowing: feedItemFollow.isFollowing,
         })}
       </>
     ) || null

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,8 @@ export interface FeedItemBaseContentProps {
   hasImages?: boolean;
   isLoading?: boolean;
   shouldHideBottomContent?: boolean;
+  dmUserId?: string;
+  hasUnseenMention?: boolean;
 }
 
 export interface GetLastMessageOptions {

diff --git a/src/pages/common/components/ProposalFeedCard/ProposalFeedCard.tsx b/src/pages/common/components/ProposalFeedCard/ProposalFeedCard.tsx
@@ -268,6 +268,7 @@ const ProposalFeedCard = forwardRef<FeedItemRef, ProposalFeedCardProps>(
           lastSeenItem: feedItemUserMetadata?.lastSeen,
           lastSeenAt: feedItemUserMetadata?.lastSeenAt,
           seenOnce: feedItemUserMetadata?.seenOnce,
+          hasUnseenMention: feedItemUserMetadata?.hasUnseenMention,
         });
       }
     }, [
@@ -279,6 +280,7 @@ const ProposalFeedCard = forwardRef<FeedItemRef, ProposalFeedCardProps>(
       feedItemUserMetadata?.lastSeen,
       feedItemUserMetadata?.lastSeenAt,
       feedItemUserMetadata?.seenOnce,
+      feedItemUserMetadata?.hasUnseenMention,
     ]);
 
     useEffect(() => {
@@ -456,6 +458,11 @@ const ProposalFeedCard = forwardRef<FeedItemRef, ProposalFeedCardProps>(
           seen={feedItemUserMetadata?.seen ?? !isFeedItemUserMetadataFetched}
           menuItems={menuItems}
           ownerId={item.userId}
+          commonId={commonId}
+          hasUnseenMention={
+            feedItemUserMetadata?.hasUnseenMention ??
+            !isFeedItemUserMetadataFetched
+          }
         >
           {renderContent()}
         </FeedCard>

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,
@@ -620,6 +619,12 @@ const FeedLayout: ForwardRefRenderFunction<FeedLayoutRef, FeedLayoutProps> = (
     }
   }, [batchNumber]);
 
+  useEffect(() => {
+    if (sharedFeedItemId && isTabletView && allFeedItems) {
+      setActiveChatItem({ feedItemId: sharedFeedItemId });
+    }
+  }, [sharedFeedItemId, isTabletView, allFeedItems]);
+
   useImperativeHandle(
     ref,
     () => ({

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 && (