From 4400a73a95f363e7f5d2c338a3605b798561f90c Mon Sep 17 00:00:00 2001 From: joaosoutto Date: Thu, 30 Jan 2025 17:19:16 -0500 Subject: [PATCH 1/6] adding removing member option --- .../RemoveMemberMutation.graphql.ts | 119 ++++++++++++++++++ .../common/graphql/mutations/RemoveMember.ts | 38 ++++++ .../web/ProfileMembers/MemberItem/index.tsx | 63 +++++++++- .../ProfileMembers/MemberListItem/index.tsx | 2 +- .../profiles/web/ProfileMembers/constants.ts | 8 ++ 5 files changed, 223 insertions(+), 7 deletions(-) create mode 100644 packages/components/__generated__/RemoveMemberMutation.graphql.ts create mode 100644 packages/components/modules/profiles/common/graphql/mutations/RemoveMember.ts 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..32578e13 --- /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..a9d77621 100644 --- a/packages/components/modules/profiles/web/ProfileMembers/MemberItem/index.tsx +++ b/packages/components/modules/profiles/web/ProfileMembers/MemberItem/index.tsx @@ -4,7 +4,7 @@ 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 { ProfileItemFragment$key } from '../../../../../__generated__/ProfileItemFragment.graphql' @@ -25,12 +25,16 @@ 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 @@ -39,6 +43,25 @@ const MemberItem: FC = ({ 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 +99,27 @@ const MemberItem: FC = ({