Fix Pagination in care teams

packages/fhir-care-team/src/components/ListView/index.tsx

@@ -1,83 +1,42 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 import React from 'react';
 import { Helmet } from 'react-helmet';
-import {
-  Row,
-  Col,
-  Table,
-  Spin,
-  PageHeader,
-  Button,
-  Divider,
-  Dropdown,
-  Menu,
-  Popconfirm,
-} from 'antd';
+import { Row, Col, PageHeader, Button, Divider, Dropdown, Menu, Popconfirm } from 'antd';
 import { MoreOutlined, PlusOutlined } from '@ant-design/icons';
-import { RouteComponentProps, useHistory } from 'react-router';
+import { RouteComponentProps, useParams } from 'react-router';
 import { Link } from 'react-router-dom';
-import { useQuery } from 'react-query';
-import { FHIRServiceClass } from '@opensrp/react-utils';
-import { createChangeHandler, getQueryParams, SearchForm, BrokenPage } from '@opensrp/react-utils';
+import {
+  FHIRServiceClass,
+  useSimpleTabularView,
+  BrokenPage,
+  SearchForm,
+  TableLayout,
+} from '@opensrp/react-utils';
 import lang from '../../lang';
 import {
-  SEARCH_QUERY_PARAM,
   FHIR_CARE_TEAM,
   URL_EDIT_CARE_TEAM,
   URL_CARE_TEAM,
-  ROUTE_PARAM_CARE_TEAM_ID,
   URL_CREATE_CARE_TEAM,
+  careTeamResourceType,
 } from '../../constants';
 import { ViewDetails } from '../ViewDetails';
 import { Dictionary } from '@onaio/utils';
 import { sendErrorNotification, sendSuccessNotification } from '@opensrp/notifications';
+import { ICareTeam } from '@smile-cdr/fhirts/dist/FHIR-R4/interfaces/ICareTeam';
 
 // route params for care team pages
 interface RouteParams {
   careTeamId: string | undefined;
 }
 
-interface TableData {
-  key: number | string;
-  id: string;
-  name: string;
-}
-
 interface Props {
   fhirBaseURL: string;
   careTeamPageSize: number;
 }
 
-export interface PaginationProps {
-  currentPage: number;
-  pageSize: number;
-}
-
-/** default component props */
-const defaultProps = {
-  fhirBaseURL: '',
-  careTeamPageSize: 5,
-};
-
 export type CareTeamListPropTypes = Props & RouteComponentProps<RouteParams>;
 
-export const fetchCareTeams = async (
-  fhirBaseURL: string,
-  pageSize: number,
-  pageOffset: number,
-  setPayloadCount: (count: number) => void
-) => {
-  const serve = new FHIRServiceClass(fhirBaseURL, FHIR_CARE_TEAM);
-  const params = {
-    _count: pageSize,
-    _getpagesoffset: pageOffset,
-  };
-  return serve.list(params).then((res) => {
-    setPayloadCount(res.total as number);
-    return res;
-  });
-};
-
 export const deleteCareTeam = async (fhirBaseURL: string, id: string): Promise<void> => {
   const serve = new FHIRServiceClass(fhirBaseURL, FHIR_CARE_TEAM);
   return serve
@@ -86,72 +45,40 @@ export const deleteCareTeam = async (fhirBaseURL: string, id: string): Promise<v
     .catch(() => sendErrorNotification(lang.ERROR_OCCURRED));
 };
 
-export const useCareTeamsHook = (
-  fhirBaseURL: string,
-  pageSize: number,
-  pageOffset: number,
-  setPayloadCount: (count: number) => void
-) => {
-  return useQuery(
-    [FHIR_CARE_TEAM, pageOffset],
-    () => fetchCareTeams(fhirBaseURL, pageSize, pageOffset, setPayloadCount),
-    {
-      refetchOnWindowFocus: false,
-    }
-  );
-};
-
 /**
  * Function which shows the list of all roles and their details
  *
  * @param {Object} props - UserRolesList component props
  * @returns {Function} returns User Roles list display
  */
 export const CareTeamList: React.FC<CareTeamListPropTypes> = (props: CareTeamListPropTypes) => {
-  const { fhirBaseURL, careTeamPageSize } = props;
-  const history = useHistory();
-  const careTeamId = props.match.params[ROUTE_PARAM_CARE_TEAM_ID] ?? '';
+  const { fhirBaseURL } = props;
 
-  const [payloadCount, setPayloadCount] = React.useState<number>(0);
-  const [pageProps, setPageProps] = React.useState<PaginationProps>({
-    currentPage: 1,
-    pageSize: careTeamPageSize,
-  });
-  const { currentPage, pageSize } = pageProps;
-  const pageOffset = (currentPage - 1) * pageSize;
-
-  const { data, isLoading, isFetching, error, refetch } = useCareTeamsHook(
+  const { careTeamId: resourceId } = useParams<RouteParams>();
+  const { searchFormProps, tablePaginationProps, queryValues } = useSimpleTabularView<ICareTeam>(
     fhirBaseURL,
-    pageSize as number,
-    pageOffset,
-    setPayloadCount
+    careTeamResourceType
   );
+  const { data, isFetching, isLoading, error, refetch } = queryValues;
 
-  if (isLoading || isFetching) return <Spin size="large" className="custom-spinner" />;
-
-  if (error) {
-    return <BrokenPage errorMessage={`${error}`} />;
+  if (error && !data) {
+    return <BrokenPage errorMessage={(error as Error).message} />;
   }
 
-  const searchFormProps = {
-    defaultValue: getQueryParams(props.location)[SEARCH_QUERY_PARAM],
-    onChangeHandler: createChangeHandler(SEARCH_QUERY_PARAM, props),
-  };
-
-  const tableData = data?.entry?.map((datum: Dictionary, index: number) => {
+  const tableData = (data?.records ?? []).map((datum: Dictionary) => {
     return {
-      key: `${index}`,
-      id: datum.resource.id,
-      name: datum.resource.name,
+      key: datum.id,
+      id: datum.id,
+      name: datum.name,
     };
   });
+  type TableData = typeof tableData[0];
 
   const columns = [
     {
       title: lang.NAME,
-      dataIndex: 'name',
+      dataIndex: 'name' as const,
       editable: true,
-      sorter: (a: TableData, b: TableData) => a.name.localeCompare(b.name),
     },
     {
       title: 'Actions',
@@ -169,7 +96,7 @@ export const CareTeamList: React.FC<CareTeamListPropTypes> = (props: CareTeamLis
           <Dropdown
             overlay={
               <Menu className="menu">
-                <Menu.Item>
+                <Menu.Item key="delete">
                   <Popconfirm
                     title={lang.CONFIRM_DELETE}
                     okText={lang.YES}
@@ -184,27 +111,29 @@ export const CareTeamList: React.FC<CareTeamListPropTypes> = (props: CareTeamLis
                     </Button>
                   </Popconfirm>
                 </Menu.Item>
-                <Menu.Item
-                  className="viewdetails"
-                  onClick={() => {
-                    history.push(`${URL_CARE_TEAM}/${record.id}`);
-                  }}
-                >
-                  View Details
+                <Menu.Item key="view-details" className="view-details">
+                  <Link to={`${URL_CARE_TEAM}/${record.id}`}>View Details</Link>
                 </Menu.Item>
               </Menu>
             }
             placement="bottomRight"
             arrow
             trigger={['click']}
           >
-            <MoreOutlined className="more-options" />
+            <MoreOutlined className="more-options" data-testid="action-dropdown" />
           </Dropdown>
         </span>
       ),
     },
   ];
 
+  const tableProps = {
+    datasource: tableData,
+    columns,
+    loading: isFetching || isLoading,
+    pagination: tablePaginationProps,
+  };
+
   return (
     <div className="content-section">
       <Helmet>
@@ -222,31 +151,10 @@ export const CareTeamList: React.FC<CareTeamListPropTypes> = (props: CareTeamLis
               </Button>
             </Link>
           </div>
-          <Table
-            dataSource={tableData}
-            columns={columns}
-            pagination={{
-              showQuickJumper: true,
-              showSizeChanger: true,
-              defaultPageSize: pageSize,
-              onChange: (page: number, pageSize: number | undefined) => {
-                setPageProps({
-                  currentPage: page,
-                  pageSize: pageSize ?? careTeamPageSize,
-                });
-              },
-              current: currentPage,
-              total: payloadCount,
-              pageSizeOptions: ['5', '10', '20', '50', '100'],
-            }}
-          />
+          <TableLayout {...tableProps} />
         </Col>
-        <ViewDetails careTeamId={careTeamId} fhirBaseURL={fhirBaseURL} />
+        {resourceId && <ViewDetails careTeamId={resourceId} fhirBaseURL={fhirBaseURL} />}
       </Row>
     </div>
   );
 };
-
-CareTeamList.defaultProps = defaultProps;
-
-export default CareTeamList;