Merge pull request #2274 from daostack/cw-2240-inbox-items-avatar-cli…

…ckable

Make the inbox items avatars clickable #2240

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}

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,

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;
 }
 

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

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,

src/pages/inbox/components/ChatChannelItem/ChatChannelItem.tsx

@@ -129,6 +129,7 @@ export const ChatChannelItem: FC<ChatChannelFeedLayoutItemProps> = (props) => {
       ownerId={userId}
       renderImage={renderImage}
       isImageRounded
+      dmUserId={dmUserId}
     />
   );
 };

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

src/pages/inbox/components/InboxFilterButton/InboxFilterButton.module.scss

@@ -26,4 +26,4 @@
   width: 1.5rem;
   height: 1.5rem;
   color: inherit;
-}
+}

src/pages/inbox/components/InboxFilterButton/index.ts

@@ -1 +1 @@
-export { default as InboxFilterButton } from "./InboxFilterButton";
+export { default as InboxFilterButton } from "./InboxFilterButton";

src/shared/hooks/useCases/useInboxItems.ts

@@ -133,7 +133,7 @@ export const useInboxItems = (
   const refetch = () => {
     dispatch(inboxActions.resetInboxItems());
     fetch();
-  }
+  };
 
   useEffect(() => {
     if (!inboxItems.firstDocTimestamp || !userId) {