React async practitioner view

src/App/App.tsx

@@ -215,7 +215,7 @@ const App = () => {
                 redirectPath={APP_CALLBACK_URL}
                 disableLoginProtection={DISABLE_LOGIN_PROTECTION}
                 exact={true}
-                path={`${ASSIGN_PLAN_URL}`}
+                path={ASSIGN_PLAN_URL}
                 component={ConnectedIRSAssignmentPlansList}
               />
               <ConnectedPrivateRoute

src/components/AsyncRenderer/index.tsx

@@ -0,0 +1,59 @@
+import React, { PropsWithChildren } from 'react';
+import { AsyncState, IfFulfilled, IfPending, PromiseFn, useAsync } from 'react-async';
+import { PLEASE_PROVIDE_CUSTOM_COMPONENT_TO_RENDER } from '../../constants';
+import Loading from '../page/Loading';
+
+/** props for AsyncRender component */
+export interface AsyncRendererProps<TData, TPromiseFunctionProps> {
+  data: TData[] /** interface describing data to be consumed by render component */;
+  promiseFn: PromiseFn<TData[]> /** react-async-type asynchronous function */;
+  promiseFnProps: TPromiseFunctionProps /** options to be passed to promiseFn */;
+  ifLoadingRender: (
+    state: AsyncState<TData[]>
+  ) => React.ReactNode /** renderProp invoked while promise returned by promiseFn is pending */;
+  ifFulfilledRender: (
+    state: AsyncState<TData[]>
+  ) => React.ReactNode /** renderProp invoked after promise returned by promiseFn is fulfilled */;
+}
+
+// tslint:disable-next-line: no-empty-destructuring
+const defaultPromiseFn = async ({}) => [];
+
+/** default props for AsyncRenderer */
+const defaultAsyncRenderProps: AsyncRendererProps<any, any> = {
+  data: [],
+  ifFulfilledRender: () => <div>{PLEASE_PROVIDE_CUSTOM_COMPONENT_TO_RENDER}</div>,
+  ifLoadingRender: () => <Loading />,
+  promiseFn: defaultPromiseFn,
+  promiseFnProps: {},
+};
+
+/** helps Dry out trivial react-async rendering */
+export const AsyncRenderer = <TData, TPromiseFunctionProps>({
+  data,
+  ifFulfilledRender,
+  ifLoadingRender,
+  promiseFn,
+  promiseFnProps,
+}: PropsWithChildren<
+  AsyncRendererProps<TData, TPromiseFunctionProps>
+> = defaultAsyncRenderProps) => {
+  const loadPractitionersState = useAsync<TData[]>(promiseFn, promiseFnProps);
+
+  React.useEffect(() => {
+    if (data.length > 0) {
+      loadPractitionersState.setData(data);
+    }
+  }, []);
+
+  return (
+    <>
+      <IfPending state={loadPractitionersState}>
+        {ifLoadingRender(loadPractitionersState)}
+      </IfPending>
+      <IfFulfilled state={loadPractitionersState}>
+        {ifFulfilledRender(loadPractitionersState)}
+      </IfFulfilled>
+    </>
+  );
+};

src/components/AsyncRenderer/tests/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`src/components/AsyncRenderer AsyncRenderer loads correctly: after Promise resolution 1`] = `"Promise Resolved with 200);"`;
+
+exports[`src/components/AsyncRenderer AsyncRenderer loads correctly: before promise resolution 1`] = `"Promise Pending);"`;
+
+exports[`src/components/AsyncRenderer Does not load when there is pre-populated data: after Promise resolution 1`] = `"Promise Resolved with 200);"`;
+
+exports[`src/components/AsyncRenderer Does not load when there is pre-populated data: before promise resolution 1`] = `"Promise Resolved with 100);"`;

src/components/AsyncRenderer/tests/index.test.tsx

@@ -0,0 +1,92 @@
+import { mount, shallow } from 'enzyme';
+import React from 'react';
+import { AsyncState, PromiseFn } from 'react-async';
+import { AsyncRenderer } from '..';
+
+// tslint:disable-next-line: no-var-requires
+const fetch = require('jest-fetch-mock');
+
+/** hasPrePopulatedData is meant to represent when there is some data
+ * that the component can readily consume as a fetch request to get more data is
+ * pending.
+ */
+interface TestComponentProps {
+  hasPrePopulatedData: boolean;
+}
+const defaultTestComponentProps = {
+  hasPrePopulatedData: false,
+};
+const TestComponent = (props: TestComponentProps = defaultTestComponentProps) => {
+  interface PromiseFnProps {
+    otherNumber: number;
+  }
+  const samplePromiseFn: PromiseFn<number[]> = async (
+    { otherNumber },
+    { signal }: AbortController
+  ) =>
+    fetch('https://someUrl.org', signal)
+      .then(() => [otherNumber])
+      .catch(() => [400]);
+
+  const asyncRendererProps = {
+    data: props.hasPrePopulatedData ? [100] : [],
+    ifFulfilledRender: ({ data }: AsyncState<number[]>) => <p>Promise Resolved with {data}</p>,
+    ifLoadingRender: () => <p>Promise Pending</p>,
+    promiseFn: samplePromiseFn,
+    promiseFnProps: { otherNumber: 200 },
+  };
+
+  return (
+    <div>
+      <AsyncRenderer<number, PromiseFnProps> {...asyncRendererProps} />
+      );
+    </div>
+  );
+};
+
+describe('src/components/AsyncRenderer', () => {
+  it('renders without crashing', () => {
+    // its a type thing too
+    interface PromiseFnProps {
+      otherNumber: number;
+    }
+    const samplePromiseFn: PromiseFn<number[]> = async ({ otherNumber }) => {
+      return [otherNumber];
+    };
+
+    const props = {
+      data: [1],
+      ifFulfilledRender: () => <p>Promise Resolved</p>,
+      ifLoadingRender: () => <p>Promise Pending</p>,
+      promiseFn: samplePromiseFn,
+      promiseFnProps: { otherNumber: 5 },
+    };
+
+    shallow(<AsyncRenderer<number, PromiseFnProps> {...props} />);
+  });
+
+  it('AsyncRenderer loads correctly', async () => {
+    fetch.once(JSON.stringify([200]));
+    const wrapper = mount(<TestComponent hasPrePopulatedData={false} />);
+    // before fetch is resolved; we should see content rendered by the ifPending render prop
+    expect(wrapper.text()).toMatchSnapshot('before promise resolution');
+    expect(wrapper.text().includes('Pending')).toEqual(true);
+    expect(wrapper.text().includes('Resolved')).toEqual(false);
+    await new Promise(resolve => setImmediate(resolve));
+    // upon flushing pending promises; we should now see content rendered by the ifFulfilled render prop
+    expect(wrapper.text()).toMatchSnapshot('after Promise resolution');
+    expect(wrapper.text().includes('Pending')).toEqual(false);
+    expect(wrapper.text().includes('Resolved')).toEqual(true);
+  });
+
+  it('Does not load when there is pre-populated data', async () => {
+    // this simulates a condition such as when there is already data in the store
+    fetch.once(JSON.stringify([200]));
+    const wrapper = mount(<TestComponent hasPrePopulatedData={true} />);
+    // before the promise is resolved we render the initial data which is a [100]
+    expect(wrapper.text()).toMatchSnapshot('before promise resolution');
+    await new Promise(resolve => setImmediate(resolve));
+    // after promise resolution we know render the fetched data which is [200]
+    expect(wrapper.text()).toMatchSnapshot('after Promise resolution');
+  });
+});

src/constants.tsx

@@ -120,5 +120,8 @@ export const MOSQUITO_COLLECTION_CODE = 'Mosquito Collection';
 export const PRACTITIONER_CODE = {
   text: 'Community Health Worker',
 };
+
 /** Field to sort plans by */
 export const SORT_BY_EFFECTIVE_PERIOD_START_FIELD = 'plan_effective_period_start';
+export const PLEASE_PROVIDE_CUSTOM_COMPONENT_TO_RENDER =
+  'Please provide a custom component to be rendered';

src/containers/pages/IRS/assignments/index.tsx

@@ -1,11 +1,12 @@
 import ListView from '@onaio/list-view';
 import reducerRegistry, { Registry } from '@onaio/redux-reducer-registry';
-import React, { useEffect, useRef, useState } from 'react';
+import React from 'react';
 import { Helmet } from 'react-helmet';
 import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
 import { Col, Row } from 'reactstrap';
 import { Store } from 'redux';
+import { AsyncRenderer, AsyncRendererProps } from '../../../../components/AsyncRenderer';
 import HeaderBreadcrumb from '../../../../components/page/HeaderBreadcrumb/HeaderBreadcrumb';
 import Loading from '../../../../components/page/Loading';
 import {
@@ -25,8 +26,10 @@ import {
   PLAN_RECORD_BY_ID,
   REPORT_IRS_PLAN_URL,
 } from '../../../../constants';
-import { displayError } from '../../../../helpers/errors';
-import { extractPlanRecordResponseFromPlanPayload } from '../../../../helpers/utils';
+import {
+  asyncGetPlanRecords,
+  AsyncGetPlanRecordsOptions,
+} from '../../../../helpers/dataLoadingUtils/plansService';
 import { OpenSRPService } from '../../../../services/opensrp';
 import IRSPlansReducer, {
   reducerName as IRSPlansReducerName,
@@ -36,29 +39,25 @@ import {
   InterventionType,
   makePlansArraySelector,
   PlanRecord,
-  PlanRecordResponse,
   PlanStatus,
 } from '../../../../store/ducks/plans';
 
 /** register the plan definitions reducer */
 reducerRegistry.register(IRSPlansReducerName, IRSPlansReducer);
 
-const OpenSrpPlanService = new OpenSRPService('plans');
-
 /** Plans filter selector */
 const plansArraySelector = makePlansArraySelector(PLAN_RECORD_BY_ID);
 
 /** interface for PlanAssignmentsListProps props */
 interface PlanAssignmentsListProps {
   fetchPlans: typeof fetchPlanRecords;
   plans: PlanRecord[];
+  service: typeof OpenSRPService;
 }
 
 /** Simple component that loads plans and allows you to manage plan-jurisdiciton-organization assignments */
 const IRSAssignmentPlansList = (props: PlanAssignmentsListProps) => {
   const { fetchPlans, plans } = props;
-  const [loading, setLoading] = useState<boolean>(plans.length < 1);
-  const isMounted = useRef<boolean>(false);
 
   const pageTitle: string = `${ASSIGN_PLANS}`;
 
@@ -75,41 +74,6 @@ const IRSAssignmentPlansList = (props: PlanAssignmentsListProps) => {
     ],
   };
 
-  /** async function to load the data */
-  async function loadData() {
-    try {
-      setLoading(plans.length < 1); // only set loading when there are no plans
-      await OpenSrpPlanService.list()
-        .then(planResults => {
-          if (planResults) {
-            const planRecords: PlanRecordResponse[] =
-              planResults.map(extractPlanRecordResponseFromPlanPayload) || [];
-            return fetchPlans(planRecords);
-          }
-        })
-        .catch(err => {
-          displayError(err);
-        });
-      if (isMounted.current) {
-        setLoading(false);
-      }
-    } catch (e) {
-      displayError(e);
-    }
-  }
-
-  useEffect(() => {
-    isMounted.current = true;
-    loadData().catch(error => displayError(error));
-    return () => {
-      isMounted.current = false;
-    };
-  }, []);
-
-  if (loading) {
-    return <Loading />;
-  }
-
   const listViewProps = {
     data: plans.map(planObj => {
       return [
@@ -126,6 +90,27 @@ const IRSAssignmentPlansList = (props: PlanAssignmentsListProps) => {
     tableClass: 'table table-bordered plans-list',
   };
 
+  const asyncRendererProps: AsyncRendererProps<PlanRecord, AsyncGetPlanRecordsOptions> = {
+    data: plans,
+    ifFulfilledRender: () => (
+      <Row>
+        <Col>
+          {plans.length < 1 ? (
+            <span>{NO_PLANS_LOADED_MESSAGE}</span>
+          ) : (
+            <ListView {...listViewProps} />
+          )}
+        </Col>
+      </Row>
+    ),
+    ifLoadingRender: () => <Loading />,
+    promiseFn: asyncGetPlanRecords,
+    promiseFnProps: {
+      fetchPlansCreator: fetchPlans,
+      service: props.service,
+    },
+  };
+
   return (
     <div>
       <Helmet>
@@ -137,15 +122,7 @@ const IRSAssignmentPlansList = (props: PlanAssignmentsListProps) => {
           <h3 className="mt-3 mb-3 page-title">{pageTitle}</h3>
         </Col>
       </Row>
-      <Row>
-        <Col>
-          {plans.length < 1 ? (
-            <span>{NO_PLANS_LOADED_MESSAGE}</span>
-          ) : (
-            <ListView {...listViewProps} />
-          )}
-        </Col>
-      </Row>
+      <AsyncRenderer<PlanRecord, AsyncGetPlanRecordsOptions> {...asyncRendererProps} />
     </div>
   );
 };
@@ -154,6 +131,7 @@ const IRSAssignmentPlansList = (props: PlanAssignmentsListProps) => {
 const defaultProps: PlanAssignmentsListProps = {
   fetchPlans: fetchPlanRecords,
   plans: [],
+  service: OpenSRPService,
 };
 
 IRSAssignmentPlansList.defaultProps = defaultProps;