receivable types: fetch beyond page limit

src/api/callApiPaginated.ts

@@ -0,0 +1,46 @@
+import callApi from "./callApi";
+
+function* callApiPaginated(request: Request): Generator<any, any, any> {
+  let { response, bodyAsJson } = yield callApi(request);
+  const allResults = [...bodyAsJson.results];
+
+  if (bodyAsJson.next) {
+    let nextUrl = bodyAsJson.next;
+    while (nextUrl !== null) {
+      request = new Request(nextUrl, {
+        method: 'GET'
+      });
+      ({ response, bodyAsJson } = yield callApi(request));
+      const status = response.status;
+
+      switch (status) {
+        case 200:
+          allResults.push(...bodyAsJson.results);
+          break;
+        case 204:
+          return {
+            response
+          };
+          break;
+
+        default:
+          return {
+            response,
+            bodyAsJson: {
+              exception: response.status,
+              message: response.statusText
+            }
+          };
+          break;
+      }
+
+      nextUrl = bodyAsJson.next || null;
+    }
+  }
+
+  bodyAsJson.results = allResults;
+
+  return { response, bodyAsJson };
+}
+
+export default callApiPaginated;

src/leaseCreateCharge/helpers.ts

@@ -37,7 +37,9 @@ export const getPayloadLeaseCreateCharge = (invoice: Record<string, any>): Recor
  * @returns {Object}
  */
 export const receivableTypesFromAttributes = (fieldAttributes: Record<string, any>, receivableTypes: Record<string, any>): Record<string, any> => {
-  const newChoices = fieldAttributes.choices.filter(choice => receivableTypes.find(type => type.is_active && type.id === choice.value));
+  const newChoices = fieldAttributes.choices
+    .filter(choice => receivableTypes.find(type => type.is_active && type.id === choice.value))
+    .sort((a, b) => a.display_name.localeCompare(b.display_name));
   const newFieldAttributes = { ...fieldAttributes,
     choices: newChoices
   };

src/leaseCreateCharge/requests.ts

@@ -1,4 +1,5 @@
 import callApi from "@/api/callApi";
+import callApiPaginated from "@/api/callApiPaginated";
 import createUrl from "@/api/createUrl";
 import { store } from "@/index";
 import { getCurrentLease } from '@/leases/selectors';
@@ -11,7 +12,7 @@ export const fetchReceivableTypes = (): Generator<any, any, any> => {
   const state = store.getState();
   const lease = getCurrentLease(state);
   const serviceUnit = lease.service_unit;
-  return callApi(new Request(createUrl(`receivable_type/`, {
+  return callApiPaginated(new Request(createUrl(`receivable_type/`, {
     service_unit: serviceUnit.id
   }), {
     method: 'GET'