packages/components/CHANGELOG.md

@@ -4,7 +4,10 @@
 
 ### Patch Changes
 
-- Implementing remove profile member
+- Enable adding a member to an existing group
+- Refactor member and contacts list into a reusable component
+- Updated dependencies
+  - @baseapp-frontend/design-system@1.0.5
 
 ## 1.0.9
 

packages/components/modules/comments/web/CommentItem/index.tsx

@@ -2,10 +2,10 @@
 
 import { FC, useRef, useState, useTransition } from 'react'
 
-import { AvatarWithPlaceholder } from '@baseapp-frontend/design-system/components/web/avatars'
 
 import { Typography } from '@mui/material'
 import { useRefetchableFragment } from 'react-relay'
+import { AvatarWithPlaceholder } from '@baseapp-frontend/design-system/components/web/avatars'
 
 import { CommentItemRefetchQuery } from '../../../../__generated__/CommentItemRefetchQuery.graphql'
 import { CommentItem_comment$key } from '../../../../__generated__/CommentItem_comment.graphql'

packages/components/modules/messages/common/constants.ts

@@ -4,3 +4,10 @@ export const MESSAGE_TYPE = {
   user: 'USER_MESSAGE',
   system: 'SYSTEM_GENERATED',
 } as const
+
+export const CHAT_ROOM_PARTICIPANT_ROLES = {
+  admin: 'ADMIN',
+  member: 'MEMBER',
+} as const
+
+export const ADMIN_LABEL = 'Admin'

packages/components/modules/messages/common/graphql/fragments/RoomTitle.ts

@@ -14,6 +14,7 @@ export const RoomTitleFragment = graphql`
               url
             }
           }
+          role
         }
       }
     }

packages/components/modules/messages/common/types.ts

@@ -1,10 +1,12 @@
 import { ValueOf } from '@baseapp-frontend/utils'
 
 import { MessagesListFragment$data } from '../../../__generated__/MessagesListFragment.graphql'
-import { MESSAGE_TYPE } from './constants'
+import { CHAT_ROOM_PARTICIPANT_ROLES, MESSAGE_TYPE } from './constants'
 
 export type AllMessages = NonNullable<MessagesListFragment$data['allMessages']>
 export type MessageEdges = AllMessages['edges']
 export type MessageNode = NonNullable<MessageEdges[number]>['node']
 
 export type MessageTypeOptions = ValueOf<typeof MESSAGE_TYPE>
+
+export type ChatRoomParticipantRoles = ValueOf<typeof CHAT_ROOM_PARTICIPANT_ROLES>

packages/components/modules/messages/common/utils.ts

@@ -5,13 +5,20 @@ import ConnectionHandler from 'relay-connection-handler-plus'
 import { RecordProxy, RecordSourceSelectorProxy, Variables } from 'relay-runtime'
 
 import { GroupTitleFragment$key } from '../../../__generated__/GroupTitleFragment.graphql'
+import { MembersListFragment$data } from '../../../__generated__/MembersListFragment.graphql'
 import { RoomTitleFragment$key } from '../../../__generated__/RoomTitleFragment.graphql'
 import { TitleFragment$data } from '../../../__generated__/TitleFragment.graphql'
+import { CHAT_ROOM_PARTICIPANT_ROLES } from './constants'
 import { GroupTitleFragment } from './graphql/fragments/GroupTitle'
 import { RoomTitleFragment } from './graphql/fragments/RoomTitle'
 
-export const useGroupNameAndAvatar = (headerRef: GroupTitleFragment$key | null | undefined) => {
-  const header = useFragment<GroupTitleFragment$key>(GroupTitleFragment, headerRef)
+export const useGroupNameAndAvatar = (
+  headerRef: GroupTitleFragment$key | RoomTitleFragment$key | null | undefined,
+) => {
+  const header = useFragment<GroupTitleFragment$key>(
+    GroupTitleFragment,
+    headerRef as GroupTitleFragment$key,
+  )
   return {
     title: header?.title,
     avatar: header?.image?.url,
@@ -26,6 +33,7 @@ const useRoomNameAndAvatar = (headerRef: RoomTitleFragment$key | null | undefine
       title: 'Error: No participants',
     }
   }
+
   const otherParticipant = header.participants.edges.find(
     (edge) => edge?.node?.profile?.id && edge?.node?.profile?.id !== currentProfile?.id,
   )
@@ -60,3 +68,14 @@ export const getChatRoomConnections: (
   }
   return []
 }
+
+export const useCheckIsAdmin = (participants: MembersListFragment$data['participants']) => {
+  const { currentProfile } = useCurrentProfile()
+  const me = participants?.edges?.find((edge) => edge?.node?.profile?.id === currentProfile?.id)
+  const isAdmin = me?.node?.role === CHAT_ROOM_PARTICIPANT_ROLES.admin
+  const isSoleAdmin =
+    isAdmin &&
+    participants?.edges?.filter((edge) => edge?.node?.role === CHAT_ROOM_PARTICIPANT_ROLES.admin)
+      .length === 1
+  return { isAdmin, isSoleAdmin }
+}