adding removing member option

Author: joaosoutto

packages/components/__generated__/RemoveMemberMutation.graphql.ts

@@ -3,13 +3,14 @@ import { FC, useState } from 'react'
 import { useCurrentProfile } from '@baseapp-frontend/authentication'
 import { AvatarWithPlaceholder, ConfirmDialog } from '@baseapp-frontend/design-system'
 
-import { Box, Button, MenuItem, SelectChangeEvent, Typography } from '@mui/material'
+import { Box, Button, MenuItem, SelectChangeEvent, Typography, useTheme } from '@mui/material'
 import { useFragment } from 'react-relay'
 
 import { ProfileItemFragment$key } from '../../../../__generated__/ProfileItemFragment.graphql'
 import { useChangeUserRoleMutation } from '../../graphql/mutations/ChangeUserRole'
+import { useRemoveMemberMutation } from '../../graphql/mutations/RemoveMember'
 import { ProfileItemFragment } from '../../graphql/queries/ProfileItem'
-import { MemberRoles, MemberStatuses, roleOptions } from '../constants'
+import { MemberActions, MemberRoles, MemberStatuses, roleOptions } from '../constants'
 import { capitalizeFirstLetter } from '../utils'
 import { MemberItemContainer, MemberPersonalInformation, Select } from './styled'
 import { MemberItemProps } from './types'
@@ -25,12 +26,16 @@ const MemberItem: FC<MemberItemProps> = ({
   userId,
   searchQuery,
 }) => {
+  const theme = useTheme()
+
   const memberProfile = useFragment<ProfileItemFragment$key>(ProfileItemFragment, member)
 
   const { currentProfile } = useCurrentProfile()
 
   const [changeUserRole, isChangingUserRole] = useChangeUserRoleMutation()
+  const [removeMember, isRemovingMember] = useRemoveMemberMutation()
   const [openConfirmChangeMember, setOpenConfirmChangeMember] = useState(false)
+  const [openConfirmRemoveMember, setOpenConfirmRemoveMember] = useState(false)
 
   if (!memberProfile) return null
 
@@ -39,6 +44,25 @@ const MemberItem: FC<MemberItemProps> = ({
 
   const haveMemberRoleAndStatus = memberRole && status
 
+  const removeProfileMember = () => {
+    if (currentProfile?.id && userId) {
+      removeMember({
+        variables: { input: { profileId: currentProfile.id, userId } },
+      })
+    }
+  }
+
+  const confirmRemoveProfileMember = () => {
+    if (currentProfile?.id && userId) {
+      removeProfileMember()
+    }
+    setOpenConfirmRemoveMember(false)
+  }
+
+  const handleRemoveMemberDialog = () => {
+    setOpenConfirmRemoveMember(!openConfirmRemoveMember)
+  }
+
   const changeRole = (roleType: MemberRoles) => {
     if (currentProfile?.id && userId) {
       changeUserRole({
@@ -76,16 +100,27 @@ const MemberItem: FC<MemberItemProps> = ({
         <Box>
           <Select
             value={memberRole}
-            onChange={(event, _) =>
-              handleRoleChange(event as SelectChangeEvent<{ value: MemberRoles }>)
-            }
+            onChange={(event, _) => {
+              const { value } = event.target
+              if (value === MemberActions.remove) {
+                handleRemoveMemberDialog()
+              } else {
+                handleRoleChange(event as SelectChangeEvent<{ value: MemberRoles }>)
+              }
+            }}
             displayEmpty
             variant="filled"
             size="small"
-            disabled={isChangingUserRole}
+            disabled={isChangingUserRole || isRemovingMember}
           >
             {roleOptions.map(({ value, label }) => (
-              <MenuItem key={value} value={value}>
+              <MenuItem
+                key={value}
+                value={value}
+                sx={{
+                  color: value === MemberActions.remove ? theme.palette.error.main : 'inherit',
+                }}
+              >
                 {label}
               </MenuItem>
             ))}
@@ -130,6 +165,23 @@ const MemberItem: FC<MemberItemProps> = ({
         }
         cancelText="Back"
       />
+      <ConfirmDialog
+        title="Remove member"
+        open={openConfirmRemoveMember}
+        onClose={handleRemoveMemberDialog}
+        content={
+          <Typography variant="body1">
+            Are you sure you want to remove this member? This action will revoke their access to the
+            organization profile.
+          </Typography>
+        }
+        cancelText="Back"
+        action={
+          <Button variant="contained" color="error" onClick={confirmRemoveProfileMember}>
+            Remove
+          </Button>
+        }
+      />
       <MemberPersonalInformation isActive={status === MemberStatuses.active || false}>
         <AvatarWithPlaceholder
           width={avatarWidth}

packages/components/modules/profiles/Members/MemberItem/index.tsx

@@ -20,7 +20,7 @@ const MemberListItem: FC<MemberListItemProps> = ({
   const nextMemberFragment = useFragment(MemberItemFragment, nextMember)
   const prevMemberFragment = useFragment(MemberItemFragment, prevMember)
 
-  const isActiveMember = memberFragment.status === MemberStatuses.active
+  const isActiveMember = memberFragment?.status === MemberStatuses.active
   const isPreviousMemberInactive = prevMemberFragment?.status !== MemberStatuses.active
   const isPreviousMemberUndefined = !prevMemberFragment?.status
   const isNextMemberUndefined = !nextMemberFragment?.status

packages/components/modules/profiles/Members/MemberListItem/index.tsx

@@ -13,6 +13,10 @@ export enum MemberRoles {
   manager = 'MANAGER',
 }
 
+export enum MemberActions {
+  remove = 'REMOVE',
+}
+
 export const roleOptions = [
   {
     value: MemberRoles.admin,
@@ -22,4 +26,8 @@ export const roleOptions = [
     value: MemberRoles.manager,
     label: capitalizeFirstLetter(MemberRoles.manager.toLowerCase()),
   },
+  {
+    value: MemberActions.remove,
+    label: capitalizeFirstLetter(MemberActions.remove.toLowerCase()),
+  },
 ]

packages/components/modules/profiles/Members/constants.ts

@@ -0,0 +1,38 @@
+import { useNotification } from '@baseapp-frontend/utils'
+
+import { Disposable, UseMutationConfig, graphql, useMutation } from 'react-relay'
+
+import { RemoveMemberMutation } from '../../../../__generated__/RemoveMemberMutation.graphql'
+
+export const ProfileRemoveMemberMutationQuery = graphql`
+  mutation RemoveMemberMutation($input: ProfileRemoveMemberInput!) {
+    profileRemoveMember(input: $input) {
+      deletedId @deleteRecord
+    }
+  }
+`
+
+export const useRemoveMemberMutation = (): [
+  (config: UseMutationConfig<RemoveMemberMutation>) => Disposable,
+  boolean,
+] => {
+  const { sendToast } = useNotification()
+  const [commitMutation, isMutationInFlight] = useMutation<RemoveMemberMutation>(
+    ProfileRemoveMemberMutationQuery,
+  )
+
+  const commit = (config: UseMutationConfig<RemoveMemberMutation>) =>
+    commitMutation({
+      ...config,
+      onCompleted: (response, errors) => {
+        sendToast('Member removed successfully', { type: 'success' })
+        config?.onCompleted?.(response, errors)
+      },
+      onError: (error) => {
+        sendToast(error.message, { type: 'error' })
+        config?.onError?.(error)
+      },
+    })
+
+  return [commit, isMutationInFlight]
+}