Add graphql query for user members in analytical framework

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<NonNullable<AnalysisFrameworkMembersQuery['analysisFramework']>['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<MultiResponse<User>>({
-        skip: isNotDefined(frameworkId),
-        url: `server://analysis-frameworks/${frameworkId}/memberships/`,
-        query: frameworkUsersQuery,
-        method: 'GET',
-        preserveResponse: true,
-    });
+        data: analysisFrameworkMembersResponse,
+        loading: analysisFrameworkMembersLoading,
+        refetch: analysisFrameworkMembersTrigger,
+    } = useQuery<AnalysisFrameworkMembersQuery>(
+        ANALYSIS_FRAMEWORK_MEMBERS,
+        {
+            variables: {
+                frameworkId,
+            },
+        },
+    );
 
     const [
         addUserModalShown,
@@ -109,7 +103,7 @@ function UserTable(props: Props) {
     const {
         pending: pendingDeleteAction,
         trigger: triggerUserRemove,
-    } = useLazyRequest<unknown, number>({
+    } = useLazyRequest<unknown, string>({
         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<UserToEdit | undefined>(undefined);
+    const [userToEdit, setUserToEdit] = useState<AnalysisFrameworkMember | undefined>(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<number>, TableHeaderCellProps
+                AnalysisFrameworkMember,
+                string,
+                ActionCellProps<string>,
+                TableHeaderCellProps
             > = {
                 id: 'action',
                 title: 'Actions',
@@ -161,38 +158,38 @@ 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'),
                 }),
             };
 
             return ([
-                createStringColumn<User, number>(
+                createStringColumn<AnalysisFrameworkMember, string>(
                     'name',
                     'Name',
-                    (item) => item?.memberDetails?.displayName,
+                    (item) => item?.member?.displayName,
                 ),
-                createStringColumn<User, number>(
+                createStringColumn<AnalysisFrameworkMember, string>(
                     'organization',
                     'Organization',
-                    (item) => item?.memberDetails?.organizationTitle,
+                    (item) => item?.member?.profile.organization,
                 ),
-                createStringColumn<User, number>(
+                createStringColumn<AnalysisFrameworkMember, string>(
                     'added_by',
                     'Added By',
-                    (item) => item?.addedByDetails?.displayName,
+                    (item) => item?.addedBy?.displayName,
                 ),
-                createDateColumn<User, number>(
+                createDateColumn<AnalysisFrameworkMember, string>(
                     'joined_at',
                     'Joined By',
                     (item) => item?.joinedAt,
                 ),
-                createStringColumn<User, number>(
+                createStringColumn<AnalysisFrameworkMember, string>(
                     'role',
                     'Assigned Role',
-                    (item) => item?.roleDetails?.title,
+                    (item) => item?.role?.title,
                 ),
                 actionColumn,
             ]);
@@ -218,19 +215,22 @@ function UserTable(props: Props) {
                 footerActions={(
                     <Pager
                         activePage={activePage}
-                        itemsCount={frameworkUsers?.count ?? 0}
+                        itemsCount={
+                            analysisFrameworkMembersResponse?.analysisFramework?.members?.length
+                                ?? 0
+                        }
                         maxItemsPerPage={maxItemsPerPage}
                         onActivePageChange={setActivePage}
                         itemsPerPageControlHidden
                     />
                 )}
             >
                 <TableView
-                    data={frameworkUsers?.results}
+                    data={analysisFrameworkMembersResponse?.analysisFramework?.members}
                     keySelector={userKeySelector}
                     columns={columns}
                     rowClassName={styles.tableRow}
-                    pending={frameworkUsersGetPending}
+                    pending={analysisFrameworkMembersLoading}
                     errored={false}
                     filtered={false}
                     emptyMessage="No users found"
@@ -241,7 +241,7 @@ function UserTable(props: Props) {
                 <AddUserModal
                     frameworkId={frameworkId}
                     onModalClose={hideUserAddModal}
-                    onTableReload={triggerMembersList}
+                    onTableReload={analysisFrameworkMembersTrigger}
                     isPrivateFramework={framework.isPrivate}
                     userValue={userToEdit}
                 />