BA-2226 Three dot menu cleanup

packages/components/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @baseapp-frontend/components
 
+## 1.0.5
+
+### Patch Changes
+
+- Clean up the three dot menu in the chat header (do not display the option to leave a non-group chat, implement archiving chats from there)
+
 ## 1.0.4
 
 ### Patch Changes

packages/components/modules/messages/common/graphql/mutations/ArchiveChatRoom.ts

@@ -1,14 +1,17 @@
+import { useCurrentProfile } from '@baseapp-frontend/authentication'
 import { useNotification } from '@baseapp-frontend/utils'
 
-import { Disposable, UseMutationConfig, graphql, useMutation } from 'react-relay'
+import { ConnectionHandler, Disposable, UseMutationConfig, graphql, useMutation } from 'react-relay'
 
 import { ArchiveChatRoomMutation } from '../../../../../__generated__/ArchiveChatRoomMutation.graphql'
+import { getChatRoomConnections } from '../../utils'
 
 export const ArchiveChatRoomMutationQuery = graphql`
   mutation ArchiveChatRoomMutation($input: ChatRoomArchiveInput!) {
     chatRoomArchive(input: $input) {
       room {
         id
+        isArchived
       }
       errors {
         field
@@ -26,6 +29,7 @@ export const useArchiveChatRoomMutation = (): [
   const [commitMutation, isMutationInFlight] = useMutation<ArchiveChatRoomMutation>(
     ArchiveChatRoomMutationQuery,
   )
+  const { currentProfile } = useCurrentProfile()
 
   const commit = (config: UseMutationConfig<ArchiveChatRoomMutation>) =>
     commitMutation({
@@ -40,6 +44,19 @@ export const useArchiveChatRoomMutation = (): [
         sendToast(error.message, { type: 'error' })
         config?.onError?.(error)
       },
+      updater: (store, data) => {
+        if (!data?.chatRoomArchive?.errors && currentProfile?.id) {
+          getChatRoomConnections(
+            store,
+            currentProfile.id,
+            ({ archived }) => archived === !data?.chatRoomArchive?.room?.isArchived,
+          ).forEach((connectionRecord) => {
+            if (data?.chatRoomArchive?.room?.id)
+              ConnectionHandler.deleteNode(connectionRecord, data?.chatRoomArchive?.room?.id)
+          })
+        }
+        config?.updater?.(store, data)
+      },
     })
 
   return [commit, isMutationInFlight]

packages/components/modules/messages/common/graphql/queries/ChatRoomQuery.ts

@@ -4,6 +4,7 @@ export const ChatRoomQuery = graphql`
   query ChatRoomQuery($roomId: ID!) {
     chatRoom(id: $roomId) {
       id
+      isArchived
       participantsCount
       ...TitleFragment
       ...MessagesListFragment

packages/components/modules/messages/web/ChatRoom/ChatRoomHeader/ChatRoomOptions/index.tsx

@@ -5,23 +5,29 @@ import { MenuItem, MenuList, Typography } from '@mui/material'
 import { ChatRoomOptionsProps } from './types'
 
 const ChatRoomOptions: FC<ChatRoomOptionsProps> = ({
+  isArchived,
+  isArchiveMutationInFlight,
+  isGroup,
   onArchiveClicked,
   onDetailsClicked,
   onLeaveClicked,
 }) => (
   <MenuList>
-    {/* TODO: Implement archive room functionality */}
-    <MenuItem onClick={onArchiveClicked}>
-      <Typography variant="body2">Archive Chat</Typography>
-    </MenuItem>
-    <MenuItem onClick={onDetailsClicked}>
-      <Typography variant="body2">Group Details</Typography>
-    </MenuItem>
-    <MenuItem onClick={onLeaveClicked}>
-      <Typography variant="body2" color="error">
-        Leave Group
-      </Typography>
+    <MenuItem onClick={onArchiveClicked} disabled={isArchiveMutationInFlight}>
+      <Typography variant="body2">{isArchived ? 'Unarchive Chat' : 'Archive Chat'}</Typography>
     </MenuItem>
+    {isGroup ? (
+      <>
+        <MenuItem onClick={onDetailsClicked}>
+          <Typography variant="body2">Group Details</Typography>
+        </MenuItem>
+        <MenuItem onClick={onLeaveClicked}>
+          <Typography variant="body2" color="error">
+            Leave Group
+          </Typography>
+        </MenuItem>
+      </>
+    ) : null}
   </MenuList>
 )
 

packages/components/modules/messages/web/ChatRoom/ChatRoomHeader/ChatRoomOptions/types.ts

@@ -1,4 +1,7 @@
 export interface ChatRoomOptionsProps {
+  isArchived: boolean
+  isArchiveMutationInFlight: boolean
+  isGroup: boolean
   onArchiveClicked: () => void
   onDetailsClicked: () => void
   onLeaveClicked: () => void

packages/components/modules/messages/web/ChatRoom/ChatRoomHeader/index.tsx

@@ -15,6 +15,7 @@ import { useFragment } from 'react-relay'
 import {
   TitleFragment,
   getParticipantCountString,
+  useArchiveChatRoomMutation,
   useChatRoom,
   useNameAndAvatar,
 } from '../../../common'
@@ -24,6 +25,7 @@ import { BackButtonContainer, ChatHeaderContainer, ChatTitleContainer } from './
 import { ChatRoomHeaderProps } from './types'
 
 const ChatRoomHeader: FC<ChatRoomHeaderProps> = ({
+  isArchived,
   participantsCount,
   roomTitleRef,
   onDisplayGroupDetailsClicked,
@@ -35,10 +37,27 @@ const ChatRoomHeader: FC<ChatRoomHeaderProps> = ({
   const isUpToMd = useResponsive('up', 'md')
   const { resetChatRoom } = useChatRoom()
 
+  const { isGroup } = roomHeader
   const { title, avatar } = useNameAndAvatar(roomHeader)
   const members = getParticipantCountString(participantsCount)
   const popover = usePopover()
   const { currentProfile } = useCurrentProfile()
+  const [commit, isMutationInFlight] = useArchiveChatRoomMutation()
+
+  const toggleArchiveChatroom = () => {
+    popover.onClose()
+    if (currentProfile?.id && roomId) {
+      commit({
+        variables: {
+          input: {
+            roomId,
+            profileId: currentProfile.id,
+            archive: !isArchived,
+          },
+        },
+      })
+    }
+  }
 
   const onChatRoomOptionsClicked = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.stopPropagation()
@@ -68,8 +87,8 @@ const ChatRoomHeader: FC<ChatRoomHeaderProps> = ({
           </BackButtonContainer>
         )}
         <ChatTitleContainer
-          onClick={roomHeader.isGroup ? onDisplayGroupDetailsClicked : undefined}
-          isClickable={roomHeader.isGroup}
+          onClick={isGroup ? onDisplayGroupDetailsClicked : undefined}
+          isClickable={isGroup}
         >
           <AvatarWithPlaceholder
             className="self-start justify-self-center"
@@ -82,7 +101,7 @@ const ChatRoomHeader: FC<ChatRoomHeaderProps> = ({
             <Typography component="span" variant="subtitle2" sx={{ float: 'left', clear: 'left' }}>
               {title}
             </Typography>
-            {roomHeader.isGroup && (
+            {isGroup && (
               <Typography component="span" variant="caption" sx={{ float: 'left', clear: 'left' }}>
                 {members}
               </Typography>
@@ -100,11 +119,18 @@ const ChatRoomHeader: FC<ChatRoomHeaderProps> = ({
               }}
             >
               <ChatRoomOptions
-                onArchiveClicked={() => {}}
-                onDetailsClicked={() =>
-                  roomHeader.isGroup ? onDisplayGroupDetailsClicked() : undefined
-                }
-                onLeaveClicked={() => setOpen(true)}
+                isArchived={isArchived}
+                isArchiveMutationInFlight={isMutationInFlight}
+                isGroup={isGroup}
+                onArchiveClicked={toggleArchiveChatroom}
+                onDetailsClicked={() => {
+                  popover.onClose()
+                  onDisplayGroupDetailsClicked()
+                }}
+                onLeaveClicked={() => {
+                  popover.onClose()
+                  setOpen(true)
+                }}
               />
             </Popover>
           </Box>

packages/components/modules/messages/web/ChatRoom/ChatRoomHeader/types.ts

@@ -3,6 +3,7 @@ import { BoxProps } from '@mui/material'
 import { TitleFragment$key } from '../../../../../__generated__/TitleFragment.graphql'
 
 export interface ChatRoomHeaderProps {
+  isArchived: boolean
   participantsCount: number
   roomTitleRef: TitleFragment$key
   onDisplayGroupDetailsClicked: VoidFunction

packages/components/modules/messages/web/ChatRoom/index.tsx

@@ -43,6 +43,7 @@ const ChatRoom: FC<ChatRoomProps> = ({
   return (
     <ChatRoomContainer>
       <ChatRoomHeader
+        isArchived={!!chatRoom.isArchived}
         participantsCount={chatRoom.participantsCount}
         roomTitleRef={chatRoom}
         onDisplayGroupDetailsClicked={onDisplayGroupDetailsClicked}

packages/components/modules/messages/web/ChatRoomsList/ChatRoomItem/index.tsx

@@ -9,9 +9,7 @@ import {
 } from '@baseapp-frontend/design-system/components/web/icons'
 
 import { Box, Badge as DefaultBadge, Typography } from '@mui/material'
-import { ConnectionHandler, useFragment } from 'react-relay'
-import { RecordSourceSelectorProxy } from 'relay-runtime'
-
+import { useFragment } from 'react-relay'
 import { LastMessageFragment$key } from '../../../../../__generated__/LastMessageFragment.graphql'
 import { TitleFragment$key } from '../../../../../__generated__/TitleFragment.graphql'
 import { UnreadMessagesCountFragment$key } from '../../../../../__generated__/UnreadMessagesCountFragment.graphql'
@@ -20,7 +18,6 @@ import {
   LastMessageFragment,
   TitleFragment,
   UnreadMessagesCountFragment,
-  getChatRoomConnections,
   useArchiveChatRoomMutation,
   useNameAndAvatar,
   useUnreadChatMutation,
@@ -94,13 +91,6 @@ const ChatRoomItem: FC<ChatRoomItemProps> = ({
                     archive: !isInArchivedTab,
                   },
                 },
-                updater: (store: RecordSourceSelectorProxy<unknown>, data: any) => {
-                  if (!data?.errors) {
-                    getChatRoomConnections(store, currentProfile.id).forEach((connectionRecord) =>
-                      ConnectionHandler.deleteNode(connectionRecord, roomRef.id),
-                    )
-                  }
-                },
               })
             }
           },

packages/components/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@baseapp-frontend/components",
   "description": "BaseApp components modules such as comments, notifications, messages, and more.",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "sideEffects": false,
   "scripts": {
     "babel:bundle": "babel modules -d tmp-babel --extensions .ts,.tsx --ignore '**/__tests__/**','**/__storybook__/**'",