Merge pull request #2291 from daostack/cw-2254-show-@-tag-if-mentioned

Add (personal) @ icon on unread “mentioned” stream #2254
daostack · Nov 6, 2023 · 3495fc3 · 3495fc3
2 parents ad70171 + 90d178c
commit 3495fc3
Show file tree

Hide file tree

Showing 10 changed files with 29 additions and 0 deletions.
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/src/pages/common/components/DiscussionFeedCard/DiscussionFeedCard.tsx b/src/pages/common/components/DiscussionFeedCard/DiscussionFeedCard.tsx
@@ -168,6 +168,7 @@ const DiscussionFeedCard = forwardRef<FeedItemRef, DiscussionFeedCardProps>(
           lastSeenItem: feedItemUserMetadata?.lastSeen,
           lastSeenAt: feedItemUserMetadata?.lastSeenAt,
           seenOnce: feedItemUserMetadata?.seenOnce,
+          hasUnseenMention: feedItemUserMetadata?.hasUnseenMention,
         });
       }
     }, [
@@ -177,6 +178,7 @@ const DiscussionFeedCard = forwardRef<FeedItemRef, DiscussionFeedCardProps>(
       feedItemUserMetadata?.lastSeen,
       feedItemUserMetadata?.lastSeenAt,
       feedItemUserMetadata?.seenOnce,
+      feedItemUserMetadata?.hasUnseenMention,
     ]);
 
     const onDiscussionDelete = useCallback(async () => {
@@ -333,6 +335,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
@@ -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<FeedCardRef, FeedCardProps>((props, ref) => {
     menuItems,
     seenOnce,
     seen,
+    hasUnseenMention,
     ownerId,
     discussionPredefinedType,
     hasImages,
@@ -204,6 +206,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/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
@@ -270,6 +270,7 @@ const ProposalFeedCard = forwardRef<FeedItemRef, ProposalFeedCardProps>(
           lastSeenItem: feedItemUserMetadata?.lastSeen,
           lastSeenAt: feedItemUserMetadata?.lastSeenAt,
           seenOnce: feedItemUserMetadata?.seenOnce,
+          hasUnseenMention: feedItemUserMetadata?.hasUnseenMention,
         });
       }
     }, [
@@ -281,6 +282,7 @@ const ProposalFeedCard = forwardRef<FeedItemRef, ProposalFeedCardProps>(
       feedItemUserMetadata?.lastSeen,
       feedItemUserMetadata?.lastSeenAt,
       feedItemUserMetadata?.seenOnce,
+      feedItemUserMetadata?.hasUnseenMention,
     ]);
 
     useEffect(() => {
@@ -458,6 +460,10 @@ const ProposalFeedCard = forwardRef<FeedItemRef, ProposalFeedCardProps>(
           seen={feedItemUserMetadata?.seen ?? !isFeedItemUserMetadataFetched}
           menuItems={menuItems}
           ownerId={item.userId}
+          hasUnseenMention={
+            feedItemUserMetadata?.hasUnseenMention ??
+            !isFeedItemUserMetadataFetched
+          }
         >
           {renderContent()}
         </FeedCard>

diff --git a/src/pages/inbox/components/FeedItemBaseContent/FeedItemBaseContent.tsx b/src/pages/inbox/components/FeedItemBaseContent/FeedItemBaseContent.tsx
@@ -36,6 +36,7 @@ export const FeedItemBaseContent: FC<FeedItemBaseContentProps> = (props) => {
     isImageRounded,
     isProject,
     discussionPredefinedType,
+    hasUnseenMention,
   } = props;
   const contextMenuRef = useRef<ContextMenuRef>(null);
   const [isLongPressing, setIsLongPressing] = useState(false);
@@ -160,6 +161,7 @@ export const FeedItemBaseContent: FC<FeedItemBaseContentProps> = (props) => {
               ownerId={ownerId}
               isActive={isActive}
               isPinned={false}
+              hasUnseenMention={hasUnseenMention}
             />
           </div>
         </div>

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