diff --git a/app/views/AnalyticalFramework/UserTable/index.tsx b/app/views/AnalyticalFramework/UserTable/index.tsx index eb2d8296cf..4dead1309f 100644 --- a/app/views/AnalyticalFramework/UserTable/index.tsx +++ b/app/views/AnalyticalFramework/UserTable/index.tsx @@ -1,5 +1,5 @@ import React, { useContext, useState, useCallback, useMemo } from 'react'; -import { _cs, isNotDefined } from '@togglecorp/fujs'; +import { _cs, isDefined, isNotDefined } from '@togglecorp/fujs'; import { IoAdd } from 'react-icons/io5'; import { Pager, @@ -13,13 +13,10 @@ import { TableHeaderCell, TableHeaderCellProps, } from '@the-deep/deep-ui'; -import { gql, useQuery } from '@apollo/client'; +import { gql, useMutation, useQuery } from '@apollo/client'; import { createDateColumn } from '#components/tableHelpers'; -import { AnalysisFrameworkMembersQuery } from '#generated/types'; -import { - useLazyRequest, -} from '#base/utils/restRequest'; +import { AnalysisFrameworkMembersQuery, AnalysisFrameworkMembershipDeleteMutation, AnalysisFrameworkMembershipDeleteMutationVariables } from '#generated/types'; import { useModalState } from '#hooks/stateManagement'; import ActionCell, { Props as ActionCellProps } from '#components/tableHelpers/EditDeleteActionCell'; import _ts from '#ts'; @@ -55,6 +52,22 @@ const ANALYSIS_FRAMEWORK_MEMBERS = gql` } `; +const ANALYSIS_FRAMEWORK_MEMBERS_DELETE = gql` + mutation AnalysisFrameworkMembershipDelete( + $frameworkId: ID!, + $deleteIds: [ID!], + ) { + analysisFramework(id: $frameworkId) { + analysisFrameworkMembershipBulk(deleteIds: $deleteIds) { + deletedResult { + id + } + errors + } + } + } +`; + type AnalysisFrameworkMember = NonNullable['members']>[number]; const userKeySelector = (user: AnalysisFrameworkMember) => user.id; @@ -101,23 +114,59 @@ function UserTable(props: Props) { hideUserAddModal, ] = useModalState(false); - const { - pending: pendingDeleteAction, - trigger: triggerUserRemove, - } = useLazyRequest({ - url: (ctx) => `server://framework-memberships/${ctx}/`, - method: 'DELETE', - onSuccess: () => { - alert.show( - 'Successfully removed user from the analytical framework.', - { - variant: 'success', - }, - ); - analysisFrameworkMembersTrigger(); + const [ + deleteFrameworkMembership, + { + loading: deleteFrameworkMembershipLoading, }, - failureMessage: 'Failed to remove user from the analytical framework.', - }); + ] = useMutation< + AnalysisFrameworkMembershipDeleteMutation, + AnalysisFrameworkMembershipDeleteMutationVariables + >( + ANALYSIS_FRAMEWORK_MEMBERS_DELETE, + { + onCompleted: (response) => { + if (!response.analysisFramework + ?.analysisFrameworkMembershipBulk?.deletedResult) { + return; + } + + const { + deletedResult, + errors, + } = response.analysisFramework.analysisFrameworkMembershipBulk; + + const ok = isDefined(deletedResult) && deletedResult?.length > 0; + + if (ok) { + alert.show( + 'Successfully removed user from the analytical framework.', + { + variant: 'success', + }, + ); + analysisFrameworkMembersTrigger(); + } + + if (errors && errors?.length > 0) { + alert.show( + 'Failed to remove user from the analytical framework.', + { + variant: 'error', + }, + ); + } + }, + onError: () => { + alert.show( + 'Failed to remove user from the analytical framework.', + { + variant: 'error', + }, + ); + }, + }, + ); const [userToEdit, setUserToEdit] = useState(undefined); @@ -140,6 +189,15 @@ function UserTable(props: Props) { showUserAddModal(); }, [showUserAddModal]); + const handleUserDeleteClick = useCallback((userId: string) => { + deleteFrameworkMembership({ + variables: { + frameworkId, + deleteIds: [userId], + }, + }); + }, [deleteFrameworkMembership, frameworkId]); + const columns = useMemo( () => { const actionColumn: TableColumn< @@ -158,7 +216,7 @@ function UserTable(props: Props) { cellRendererParams: (userId, data) => ({ itemKey: userId, onEditClick: handleUserEditClick, - onDeleteClick: triggerUserRemove, + onDeleteClick: handleUserDeleteClick, disabled: data.id === activeUserId, editButtonTitle: _ts('analyticalFramework', 'editUserLabel'), deleteButtonTitle: _ts('analyticalFramework', 'deleteUserLabel'), @@ -195,12 +253,12 @@ function UserTable(props: Props) { actionColumn, ]); }, - [handleUserEditClick, triggerUserRemove, activeUserId], + [handleUserEditClick, handleUserDeleteClick, activeUserId], ); return ( <> - {pendingDeleteAction && } + {deleteFrameworkMembershipLoading && }