diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 7dd161a8..86d64d9c 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -1,5 +1,11 @@ # @baseapp-frontend/components +## 1.0.11 + +### Patch Changes + +- Implementing Remove Profile Members + ## 1.0.10 ### Patch Changes diff --git a/packages/components/__generated__/RemoveMemberMutation.graphql.ts b/packages/components/__generated__/RemoveMemberMutation.graphql.ts new file mode 100644 index 00000000..3eaa670d --- /dev/null +++ b/packages/components/__generated__/RemoveMemberMutation.graphql.ts @@ -0,0 +1,119 @@ +/** + * @generated SignedSource<<75b6ee0b9ad6bcd307634d310129e71b>> + * @lightSyntaxTransform + * @nogrep + */ + +/* tslint:disable */ + +/* eslint-disable */ +// @ts-nocheck +import { ConcreteRequest, Mutation } from 'relay-runtime' + +export type ProfileRemoveMemberInput = { + clientMutationId?: string | null | undefined + profileId: string + userId: string +} +export type RemoveMemberMutation$variables = { + input: ProfileRemoveMemberInput +} +export type RemoveMemberMutation$data = { + readonly profileRemoveMember: + | { + readonly deletedId: string | null | undefined + } + | null + | undefined +} +export type RemoveMemberMutation = { + response: RemoveMemberMutation$data + variables: RemoveMemberMutation$variables +} + +const node: ConcreteRequest = (function () { + var v0 = [ + { + defaultValue: null, + kind: 'LocalArgument', + name: 'input', + }, + ], + v1 = [ + { + kind: 'Variable', + name: 'input', + variableName: 'input', + }, + ], + v2 = { + alias: null, + args: null, + kind: 'ScalarField', + name: 'deletedId', + storageKey: null, + } + return { + fragment: { + argumentDefinitions: v0 /*: any*/, + kind: 'Fragment', + metadata: null, + name: 'RemoveMemberMutation', + selections: [ + { + alias: null, + args: v1 /*: any*/, + concreteType: 'ProfileRemoveMemberPayload', + kind: 'LinkedField', + name: 'profileRemoveMember', + plural: false, + selections: [v2 /*: any*/], + storageKey: null, + }, + ], + type: 'Mutation', + abstractKey: null, + }, + kind: 'Request', + operation: { + argumentDefinitions: v0 /*: any*/, + kind: 'Operation', + name: 'RemoveMemberMutation', + selections: [ + { + alias: null, + args: v1 /*: any*/, + concreteType: 'ProfileRemoveMemberPayload', + kind: 'LinkedField', + name: 'profileRemoveMember', + plural: false, + selections: [ + v2 /*: any*/, + { + alias: null, + args: null, + filters: null, + handle: 'deleteRecord', + key: '', + kind: 'ScalarHandle', + name: 'deletedId', + }, + ], + storageKey: null, + }, + ], + }, + params: { + cacheID: '7ede42a17cf2d60398c7a5019de5f013', + id: null, + metadata: {}, + name: 'RemoveMemberMutation', + operationKind: 'mutation', + text: 'mutation RemoveMemberMutation(\n $input: ProfileRemoveMemberInput!\n) {\n profileRemoveMember(input: $input) {\n deletedId\n }\n}\n', + }, + } +})() + +;(node as any).hash = '4426831487fa708c1e351d2c7608e1f8' + +export default node diff --git a/packages/components/modules/profiles/common/graphql/mutations/RemoveMember.ts b/packages/components/modules/profiles/common/graphql/mutations/RemoveMember.ts new file mode 100644 index 00000000..da0948fa --- /dev/null +++ b/packages/components/modules/profiles/common/graphql/mutations/RemoveMember.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) => Disposable, + boolean, +] => { + const { sendToast } = useNotification() + const [commitMutation, isMutationInFlight] = useMutation( + ProfileRemoveMemberMutationQuery, + ) + + const commit = (config: UseMutationConfig) => + 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] +} diff --git a/packages/components/modules/profiles/web/ProfileMembers/MemberItem/index.tsx b/packages/components/modules/profiles/web/ProfileMembers/MemberItem/index.tsx index 0fd34585..a7aa00f3 100644 --- a/packages/components/modules/profiles/web/ProfileMembers/MemberItem/index.tsx +++ b/packages/components/modules/profiles/web/ProfileMembers/MemberItem/index.tsx @@ -4,12 +4,14 @@ import { useCurrentProfile } from '@baseapp-frontend/authentication' import { AvatarWithPlaceholder } from '@baseapp-frontend/design-system/components/web/avatars' import { ConfirmDialog } from '@baseapp-frontend/design-system/components/web/dialogs' -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 { ProfileRoles } from '../../../../../__generated__/ChangeUserRoleMutation.graphql' import { ProfileItemFragment$key } from '../../../../../__generated__/ProfileItemFragment.graphql' import { ProfileItemFragment, useChangeUserRoleMutation } from '../../../common' -import { MemberRoles, MemberStatuses, roleOptions } from '../constants' +import { useRemoveMemberMutation } from '../../../common/graphql/mutations/RemoveMember' +import { MEMBER_ACTIONS, MEMBER_ROLES, MEMBER_STATUSES, roleOptions } from '../constants' import { capitalizeFirstLetter } from '../utils' import { MemberItemContainer, MemberPersonalInformation, Select } from './styled' import { MemberItemProps } from './types' @@ -25,21 +27,44 @@ const MemberItem: FC = ({ userId, searchQuery, }) => { + const theme = useTheme() + const memberProfile = useFragment(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 const shouldRenderChangeRoleSelect = - status === MemberStatuses.active && memberRole !== 'owner' && canChangeMember + status === MEMBER_STATUSES.active && memberRole !== 'owner' && canChangeMember const haveMemberRoleAndStatus = memberRole && status - const changeRole = (roleType: MemberRoles) => { + 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: ProfileRoles) => { if (currentProfile?.id && userId) { changeUserRole({ variables: { @@ -49,13 +74,13 @@ const MemberItem: FC = ({ } } - const handleRoleChange = (event: SelectChangeEvent<{ value: MemberRoles }>) => { - if (event.target.value === MemberRoles.admin) { + const handleRoleChange = (event: SelectChangeEvent<{ value: ProfileRoles }>) => { + if (event.target.value === MEMBER_ROLES.admin) { setOpenConfirmChangeMember(true) return } if (currentProfile?.id && userId) { - changeRole(event?.target?.value as MemberRoles) + changeRole(event?.target?.value as ProfileRoles) } } @@ -65,7 +90,7 @@ const MemberItem: FC = ({ const confirmChangeRole = () => { if (currentProfile?.id && userId) { - changeRole(MemberRoles.admin) + changeRole(MEMBER_ROLES.admin) } setOpenConfirmChangeMember(false) } @@ -76,16 +101,27 @@ const MemberItem: FC = ({