Merge pull request #2164 from daostack/CW-2048-add-actions-menu-to-dms

Add action menu for dms with mark as read\unread functionality #2048

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

@@ -12,23 +12,20 @@ import { ChatChannel } from "@/shared/models";
 import { getUserName } from "@/shared/utils";
 import { inboxActions } from "@/store/states";
 import { FeedItemBaseContent } from "../FeedItemBaseContent";
-import { useChatChannelSubscription } from "./hooks";
+import { useChatChannelSubscription, useMenuItems } from "./hooks";
 import { getLastMessage } from "./utils";
 
 export const ChatChannelItem: FC<ChatChannelFeedLayoutItemProps> = (props) => {
   const { chatChannel, isActive, onActiveItemDataChange } = props;
   const dispatch = useDispatch();
   const isTabletView = useIsTabletView();
-  const {
-    fetchUser: fetchDMUser,
-    data: dmUser,
-    fetched: isDMUserFetched,
-  } = useUserById();
+  const { fetchUser: fetchDMUser, data: dmUser } = useUserById();
   const {
     data: chatChannelUserStatus,
     fetched: isChatChannelUserStatusFetched,
     fetchChatChannelUserStatus,
   } = useChatChannelUserStatus();
+  const menuItems = useMenuItems({ chatChannelUserStatus });
   const { setChatItem, feedItemIdForAutoChatOpen, shouldAllowChatAutoOpen } =
     useChatContext();
   const user = useSelector(selectUser());
@@ -126,7 +123,8 @@ export const ChatChannelItem: FC<ChatChannelFeedLayoutItemProps> = (props) => {
       lastMessage={getLastMessage(chatChannel.lastMessage)}
       canBeExpanded={false}
       onClick={handleOpenChat}
-      menuItems={[]}
+      menuItems={menuItems}
+      seen={chatChannelUserStatus?.seen}
       seenOnce={chatChannelUserStatus?.seenOnce}
       ownerId={userId}
       renderImage={renderImage}

src/pages/inbox/components/ChatChannelItem/constants/chatChannelMenuItems.ts

@@ -0,0 +1,4 @@
+export enum ChatChannelMenuItem {
+  MarkUnread = "markUnread",
+  MarkRead = "markRead",
+}

src/pages/inbox/components/ChatChannelItem/constants/index.ts

@@ -0,0 +1 @@
+export * from "./chatChannelMenuItems";

src/pages/inbox/components/ChatChannelItem/hooks/index.ts

@@ -1 +1,2 @@
 export * from "./useChatChannelSubscription";
+export * from "./useMenuItems";

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

@@ -0,0 +1,42 @@
+import React from "react";
+import { ChatService } from "@/services";
+import { Message3Icon } from "@/shared/icons";
+import { ContextMenuItem as Item } from "@/shared/interfaces";
+import { ChatChannelMenuItem } from "../constants";
+import { getAllowedItems, Options as GetAllowedItemsOptions } from "../utils";
+
+export const useMenuItems = (options: GetAllowedItemsOptions): Item[] => {
+  const { chatChannelUserStatus } = options;
+  const items: Item[] = [
+    {
+      id: ChatChannelMenuItem.MarkUnread,
+      text: "Mark as unread",
+      onClick: async () => {
+        if (!chatChannelUserStatus) {
+          return;
+        }
+
+        await ChatService.markChatChannelAsUnseen(
+          chatChannelUserStatus.chatChannelId,
+        );
+      },
+      icon: <Message3Icon />,
+    },
+    {
+      id: ChatChannelMenuItem.MarkRead,
+      text: "Mark as read",
+      onClick: async () => {
+        if (!chatChannelUserStatus) {
+          return;
+        }
+
+        await ChatService.markChatChannelAsSeen(
+          chatChannelUserStatus.chatChannelId,
+        );
+      },
+      icon: <Message3Icon />,
+    },
+  ];
+
+  return getAllowedItems(items, options);
+};

src/pages/inbox/components/ChatChannelItem/utils/getAllowedItems.ts

@@ -0,0 +1,20 @@
+import { ContextMenuItem as Item } from "@/shared/interfaces";
+import { ChatChannelUserStatus } from "@/shared/models";
+import { ChatChannelMenuItem } from "../constants";
+
+export interface Options {
+  chatChannelUserStatus: ChatChannelUserStatus | null;
+}
+
+const MENU_ITEM_TO_CHECK_FUNCTION_MAP: Record<
+  ChatChannelMenuItem,
+  (options: Options) => boolean
+> = {
+  [ChatChannelMenuItem.MarkUnread]: ({ chatChannelUserStatus }) =>
+    Boolean(chatChannelUserStatus?.seen),
+  [ChatChannelMenuItem.MarkRead]: ({ chatChannelUserStatus }) =>
+    Boolean(chatChannelUserStatus && !chatChannelUserStatus.seen),
+};
+
+export const getAllowedItems = (items: Item[], options: Options): Item[] =>
+  items.filter(({ id }) => MENU_ITEM_TO_CHECK_FUNCTION_MAP[id](options));

src/pages/inbox/components/ChatChannelItem/utils/index.ts

@@ -1 +1,2 @@
 export * from "./getLastMessage";
+export * from "./getAllowedItems";

src/services/Chat.ts

@@ -192,6 +192,18 @@ class ChatService {
     );
   };
 
+  public markChatChannelAsUnseen = async (
+    chatChannelId: string,
+    options: { cancelToken?: CancelToken } = {},
+  ): Promise<void> => {
+    const { cancelToken } = options;
+    await Api.post(
+      ApiEndpoint.MarkChatChannelAsUnseen(chatChannelId),
+      undefined,
+      { cancelToken },
+    );
+  };
+
   public markChatMessageAsSeen = async (
     chatMessageId: string,
     options: { cancelToken?: CancelToken } = {},

src/shared/constants/endpoint.ts

@@ -57,6 +57,8 @@ export const ApiEndpoint = {
     `/chat/message/${chatMessageId}`,
   MarkChatChannelAsSeen: (channelId: string) =>
     `/chat/channel/${channelId}/seen`,
+  MarkChatChannelAsUnseen: (channelId: string) =>
+    `/chat/channel/${channelId}/unseen`,
   MarkChatMessageAsSeen: (chatMessageId: string) =>
     `/chat/message/${chatMessageId}/seen`,
 };

src/shared/models/ChatChannelUserStatus.ts

@@ -8,4 +8,5 @@ export interface ChatChannelUserStatus extends BaseEntity {
   notSeenCount: number;
   seenOnce?: boolean;
   seenAt?: Timestamp;
+  seen: boolean;
 }