create api response pagination

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/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';
@@ -7,16 +8,11 @@ export const fetchAttributes = (): Generator<any, any, any> => {
     method: 'OPTIONS'
   }));
 };
-export const fetchReceivableTypes = (nextUrl: string): Generator<any, any, any> => {
+export const fetchReceivableTypes = (): Generator<any, any, any> => {
   const state = store.getState();
   const lease = getCurrentLease(state);
   const serviceUnit = lease.service_unit;
-  if (nextUrl) {
-    return callApi(new Request(nextUrl, {
-      method: 'GET'
-    }));
-  }
-  return callApi(new Request(createUrl(`receivable_type/`, {
+  return callApiPaginated(new Request(createUrl(`receivable_type/`, {
     service_unit: serviceUnit.id
   }), {
     method: 'GET'

src/leaseCreateCharge/saga.ts

@@ -3,8 +3,6 @@ import { receiveAttributes, attributesNotFound, receiveReceivableTypes, receivab
 import { receiveError } from "@/api/actions";
 import { fetchAttributes, fetchReceivableTypes } from "./requests";
 
-const SAFETY_CAP_FOR_WHILE_LOOP_ITERATIONS = 20;
-
 function* fetchAttributesSaga(): Generator<any, any, any> {
   try {
     const {
@@ -32,37 +30,28 @@ function* fetchAttributesSaga(): Generator<any, any, any> {
 }
 
 function* fetchReceivableTypesSaga(): Generator<any, any, any> {
-  let nextUrl = ''
-  let iterationCounter = 0;
-  const allReceivableTypes = []
   try {
-    while (nextUrl !== null && iterationCounter < SAFETY_CAP_FOR_WHILE_LOOP_ITERATIONS) {
-      const {
-        response: {
-          status: statusCode
-        },
-        bodyAsJson
-      } = yield call(fetchReceivableTypes, nextUrl);
+    const {
+      response: {
+        status: statusCode
+      },
+      bodyAsJson
+    } = yield call(fetchReceivableTypes);
 
-      switch (statusCode) {
-        case 200:
-          allReceivableTypes.push(...bodyAsJson.results);
-          nextUrl = bodyAsJson.next || null;
-          break;
+    switch (statusCode) {
+      case 200:
+        const receivableTypes = bodyAsJson.results;
+        yield put(receiveReceivableTypes(receivableTypes));
+        break;
 
-        default:
-          yield put(receivableTypesNotFound());
-          nextUrl = null;
-          break;
-      }
-      iterationCounter++;
+      default:
+        yield put(receivableTypesNotFound());
+        break;
     }
-    yield put(receiveReceivableTypes(allReceivableTypes));
   } catch (error) {
     console.error('Failed to fetch receivable types with error "%s"', error);
     yield put(receivableTypesNotFound());
     yield put(receiveError(error));
-    nextUrl = null;
   }
 }