make pagination configurable

onaio · Jun 28, 2021 · 8b69258 · 8b69258
1 parent aff169d
commit 8b69258
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 6 deletions.
diff --git a/app/.env.sample b/app/.env.sample
@@ -40,7 +40,8 @@ REACT_APP_PROJECT_LANGUAGE_CODE=eusm
 REACT_APP_SUPPORTED_LANGUAGES=en,fr
 REACT_APP_ENABLE_LANGUAGE_SWITCHER=true
 # user roles
-REACT_APP_OPENSRP_ROLES={"USERS": "ROLE_EDIT_KEYCLOAK_USERS", "PLANS": "ROLE_VIEW_KEYCLOAK_USERS", "LOCATIONS": "ROLE_VIEW_KEYCLOAK_USERS", "CARD_SUPPORT": "ROLE_VIEW_KEYCLOAK_USERS", "INVENTORY": "ROLE_VIEW_KEYCLOAK_USERS", "TEAMS": "ROLE_VIEW_KEYCLOAK_USERS", "PRODUCT_CATALOGUE": "ROLE_VIEW_KEYCLOAK_USERS", "FORM_CONFIGURATION": "ROLE_VIEW_KEYCLOAK_USERS"}
+REACT_APP_OPENSRP_ROLES="{"USERS": "ROLE_EDIT_KEYCLOAK_USERS", "PLANS": "ROLE_VIEW_KEYCLOAK_USERS", "LOCATIONS": "ROLE_VIEW_KEYCLOAK_USERS", "CARD_SUPPORT": "ROLE_VIEW_KEYCLOAK_USERS", "INVENTORY": "ROLE_VIEW_KEYCLOAK_USERS", "TEAMS": "ROLE_VIEW_KEYCLOAK_USERS", "PRODUCT_CATALOGUE": "ROLE_VIEW_KEYCLOAK_USERS", "FORM_CONFIGURATION": "ROLE_VIEW_KEYCLOAK_USERS"}"
 REACT_APP_DISABLE_TEAM_MEMBER_REASSIGNMENT=false
 REACT_APP_USER_FORM_HIDDEN_FIELDS=""
 REACT_APP_USER_FORM_RENDER_FIELDS=""
+REACT_APP_PAGINATION_SIZE=1000
diff --git a/app/src/App/App.tsx b/app/src/App/App.tsx
@@ -543,6 +543,7 @@ const App: React.FC = () => {
               exact
               path={URL_TEAMS_ADD}
               component={TeamsAddEdit}
+              {...teamManagementProps}
             />
             <PrivateComponent
               redirectPath={APP_CALLBACK_URL}

diff --git a/app/src/App/utils.tsx b/app/src/App/utils.tsx
@@ -22,10 +22,11 @@ import {
   TASK_GENERATION_STATUS,
   DEFAULT_PLAN_ID,
   FILTER_BY_PARENT_ID,
-  KEYCLOAK_USERS_PAGE_SIZE, 
+  KEYCLOAK_USERS_PAGE_SIZE,
   DISABLE_TEAM_MEMBER_REASSIGNMENT,
   USER_FORM_HIDDEN_FIELDS,
   USER_FORM_RENDER_FIELDS,
+  PAGINATION_SIZE,
 } from '../configs/env';
 
 export const BaseProps = {
@@ -38,6 +39,7 @@ export const teamAssignmentProps = {
 
 export const teamManagementProps = {
   disableTeamMemberReassignment: DISABLE_TEAM_MEMBER_REASSIGNMENT,
+  paginationSize: PAGINATION_SIZE,
 };
 
 export const locationUnitProps = {

diff --git a/app/src/configs/env.ts b/app/src/configs/env.ts
@@ -179,3 +179,5 @@ export const DISABLE_TEAM_MEMBER_REASSIGNMENT =
 export const USER_FORM_HIDDEN_FIELDS = setEnv('REACT_APP_USER_FORM_HIDDEN_FIELDS', '').split(',');
 
 export const USER_FORM_RENDER_FIELDS = setEnv('REACT_APP_USER_FORM_RENDER_FIELDS', '').split(',');
+
+export const PAGINATION_SIZE = Number(setEnv('REACT_APP_PAGINATION_SIZE', 1000));
diff --git a/packages/team-management/src/components/TeamsAddEdit/index.tsx b/packages/team-management/src/components/TeamsAddEdit/index.tsx
@@ -84,6 +84,7 @@ function setupInitialValue(
 export interface Props {
   opensrpBaseURL: string;
   disableTeamMemberReassignment: boolean;
+  paginationSize: number;
 }
 
 /** default component props */
@@ -135,7 +136,7 @@ async function fetchPractitionersRecursively(
   opensrpBaseURL: string,
   practitionersCountEndpoint: string,
   practitionersEndpoint: string,
-  pageSize = 1000
+  pageSize: number
 ): Promise<Practitioner[]> {
   // get the total number of practitioners
   const serve = new OpenSRPService(practitionersCountEndpoint, opensrpBaseURL);
@@ -167,7 +168,7 @@ export const TeamsAddEdit: React.FC<Props> = (props: Props) => {
   const [initialValue, setInitialValue] = useState<FormField | null>(null);
   const [practitioners, setPractitioners] = useState<Practitioner[] | null>(null);
   const [practitionersRole, setPractitionersRole] = useState<PractitionerPOST[] | null>(null);
-  const { opensrpBaseURL, disableTeamMemberReassignment } = props;
+  const { opensrpBaseURL, disableTeamMemberReassignment, paginationSize } = props;
 
   useEffect(() => {
     if (params.id) setupInitialValue(params.id, opensrpBaseURL, setInitialValue);
@@ -197,7 +198,12 @@ export const TeamsAddEdit: React.FC<Props> = (props: Props) => {
   useEffect(() => {
     if ((disableTeamMemberReassignment && practitionersRole) || !disableTeamMemberReassignment) {
       // fetch practitioners recursively from a paginated endpoint
-      fetchPractitionersRecursively(opensrpBaseURL, PRACTITIONER_COUNT, PRACTITIONER_GET)
+      fetchPractitionersRecursively(
+        opensrpBaseURL,
+        PRACTITIONER_COUNT,
+        PRACTITIONER_GET,
+        paginationSize
+      )
         .then((response: Practitioner[]) => {
           // filter out inactive practitioners
           const activePractitioners = response.filter((practitioner) => practitioner.active);
@@ -233,7 +239,7 @@ export const TeamsAddEdit: React.FC<Props> = (props: Props) => {
         })
         .catch(() => sendErrorNotification(lang.ERROR_OCCURRED));
     }
-  }, [disableTeamMemberReassignment, opensrpBaseURL, practitionersRole]);
+  }, [disableTeamMemberReassignment, opensrpBaseURL, paginationSize, practitionersRole]);
 
   if (!practitioners || (params.id && !initialValue)) return <Spin size={'large'} />;