diff --git a/app/views/AnalyticalFramework/UserTable/index.tsx b/app/views/AnalyticalFramework/UserTable/index.tsx index 3a6bf50736..eb124bfdb5 100644 --- a/app/views/AnalyticalFramework/UserTable/index.tsx +++ b/app/views/AnalyticalFramework/UserTable/index.tsx @@ -13,17 +13,15 @@ import { TableHeaderCell, TableHeaderCellProps, } from '@the-deep/deep-ui'; +import { gql, useQuery } from '@apollo/client'; import { createDateColumn } from '#components/tableHelpers'; +import { AnalysisFrameworkMembersQuery } from '#generated/types'; import { - useRequest, useLazyRequest, } from '#base/utils/restRequest'; import { useModalState } from '#hooks/stateManagement'; import ActionCell, { Props as ActionCellProps } from '#components/tableHelpers/EditDeleteActionCell'; -import { - MultiResponse, -} from '#types'; import _ts from '#ts'; import UserContext from '#base/context/UserContext'; @@ -32,33 +30,33 @@ import { Framework } from '../types'; import AddUserModal from './AddUserModal'; import styles from './styles.css'; -interface User { - id: number; - member: number; - role: number; - roleDisplay: string; - joinedAt: string; - - memberDetails: { - displayName: string; - organizationTitle?: string; - }; - roleDetails: { - title: string; - }; - addedByDetails?: { - displayName: string; - }; -} +const ANALYSIS_FRAMEWORK_MEMBERS = gql` + query AnalysisFrameworkMembers($frameworkId: ID!) { + analysisFramework(id: $frameworkId) { + members { + addedBy { + displayName + } + id + joinedAt + member { + displayName + profile { + organization + } + } + role { + title + id + } + } + } + } +`; -interface UserToEdit { - id: number; - member: number; - memberName: string; - role: number; -} +type AnalysisFrameworkMember = NonNullable['members']>[number]; -const userKeySelector = (user: User) => user.id; +const userKeySelector = (user: AnalysisFrameworkMember) => user.id; const maxItemsPerPage = 10; interface Props { @@ -77,28 +75,24 @@ function UserTable(props: Props) { } = useContext(UserContext); const alert = useAlert(); - const activeUserId = user ? +user.id : undefined; + const activeUserId = user ? user.id : undefined; const [activePage, setActivePage] = useState(1); - const frameworkUsersQuery = useMemo(() => ({ - offset: (activePage - 1) * maxItemsPerPage, - limit: maxItemsPerPage, - }), [activePage]); - - const frameworkId = +framework.id; + const frameworkId = framework.id; const { - pending: frameworkUsersGetPending, - response: frameworkUsers, - retrigger: triggerMembersList, - } = useRequest>({ - skip: isNotDefined(frameworkId), - url: `server://analysis-frameworks/${frameworkId}/memberships/`, - query: frameworkUsersQuery, - method: 'GET', - preserveResponse: true, - }); + data: analysisFrameworkMembersResponse, + loading: analysisFrameworkMembersLoading, + refetch: analysisFrameworkMembersTrigger, + } = useQuery( + ANALYSIS_FRAMEWORK_MEMBERS, + { + variables: { + frameworkId, + }, + }, + ); const [ addUserModalShown, @@ -109,7 +103,7 @@ function UserTable(props: Props) { const { pending: pendingDeleteAction, trigger: triggerUserRemove, - } = useLazyRequest({ + } = useLazyRequest({ url: (ctx) => `server://framework-memberships/${ctx}/`, method: 'DELETE', onSuccess: () => { @@ -119,26 +113,26 @@ function UserTable(props: Props) { variant: 'success', }, ); - triggerMembersList(); + analysisFrameworkMembersTrigger(); }, failureMessage: 'Failed to remove user from the analytical framework.', }); - const [userToEdit, setUserToEdit] = useState(undefined); + const [userToEdit, setUserToEdit] = useState(undefined); + + const handleUserEditClick = useCallback((userId: string) => { + if (isNotDefined(analysisFrameworkMembersResponse?.analysisFramework?.members)) { + return; + } + const selectedUser = analysisFrameworkMembersResponse + ?.analysisFramework?.members.find((u) => u.id === userId); - const handleUserEditClick = useCallback((userId: number) => { - const selectedUser = frameworkUsers?.results?.find((u) => u.id === userId); if (!selectedUser) { return; } - setUserToEdit({ - id: selectedUser.id, - member: selectedUser.member, - memberName: selectedUser.memberDetails?.displayName, - role: selectedUser.role, - }); + setUserToEdit(selectedUser); showUserAddModal(); - }, [frameworkUsers?.results, showUserAddModal]); + }, [analysisFrameworkMembersResponse, showUserAddModal]); const handleUserAddClick = useCallback(() => { setUserToEdit(undefined); @@ -148,7 +142,10 @@ function UserTable(props: Props) { const columns = useMemo( () => { const actionColumn: TableColumn< - User, number, ActionCellProps, TableHeaderCellProps + AnalysisFrameworkMember, + string, + ActionCellProps, + TableHeaderCellProps > = { id: 'action', title: 'Actions', @@ -161,7 +158,7 @@ function UserTable(props: Props) { itemKey: userId, onEditClick: handleUserEditClick, onDeleteClick: triggerUserRemove, - disabled: data.member === activeUserId, + disabled: data.id === activeUserId, editButtonTitle: _ts('analyticalFramework', 'editUserLabel'), deleteButtonTitle: _ts('analyticalFramework', 'deleteUserLabel'), deleteConfirmationMessage: _ts('analyticalFramework', 'removeUserConfirmation'), @@ -169,30 +166,30 @@ function UserTable(props: Props) { }; return ([ - createStringColumn( + createStringColumn( 'name', 'Name', - (item) => item?.memberDetails?.displayName, + (item) => item?.member?.displayName, ), - createStringColumn( + createStringColumn( 'organization', 'Organization', - (item) => item?.memberDetails?.organizationTitle, + (item) => item?.member?.profile.organization, ), - createStringColumn( + createStringColumn( 'added_by', 'Added By', - (item) => item?.addedByDetails?.displayName, + (item) => item?.addedBy?.displayName, ), - createDateColumn( + createDateColumn( 'joined_at', 'Joined By', (item) => item?.joinedAt, ), - createStringColumn( + createStringColumn( 'role', 'Assigned Role', - (item) => item?.roleDetails?.title, + (item) => item?.role?.title, ), actionColumn, ]); @@ -218,7 +215,10 @@ function UserTable(props: Props) { footerActions={(