use axios on frontend

client/package.json

@@ -18,6 +18,7 @@
     "@material-ui/lab": "4.0.0-alpha.49",
     "@material-ui/pickers": "3.2.10",
     "@react-keycloak/web": "2.1.4",
+    "axios": "1.3.6",
     "classnames": "2.2.6",
     "cross-fetch": "3.1.5",
     "dayjs": "1.11.1",

client/src/components/employer-form/index.js

@@ -14,16 +14,17 @@ import KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft';
 import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight';
 import Typography from '@material-ui/core/Typography';
 
-import { API_URL, EmployerFormSchema, Routes, ToastStatus } from '../../constants';
+import { EmployerFormSchema, Routes } from '../../constants';
 import { useToast } from '../../hooks';
-import { scrollUp, mapObjectProps } from '../../utils';
+import { scrollUp, mapObjectProps, getErrorMessage } from '../../utils';
 import { Card, Button } from '../generic';
 import { BeforeYouBegin } from './BeforeYouBegin';
 import { OperatorInfo } from './OperatorInfo';
 import { SiteInfo } from './SiteInfo';
 import { ExpressionOfInt } from './ExpressionOfInt';
 import { WorkforceBaseline } from './WorkforceBaseline';
 import { Review } from './Review';
+import { axiosInstance } from '../../services/api';
 
 const steps = [
   'Before You Begin',
@@ -150,19 +151,11 @@ export const Form = ({ hideCollectionNotice, initialValues, isDisabled }) => {
   const handleSubmit = async (values) => {
     setSubmitLoading(true);
 
-    const response = await fetch(`${API_URL}/api/v1/employer-form`, {
-      method: 'POST',
-      headers: { Accept: 'application/json', 'Content-type': 'application/json' },
-      body: JSON.stringify(mapBaselineList(values)),
-    });
-
-    if (response.ok) {
+    try {
+      await axiosInstance.post('/employer-form', mapBaselineList(values));
       history.push(Routes.EmployerConfirmation, { formValues: values });
-    } else {
-      openToast({
-        status: ToastStatus.Error,
-        message: response.error || response.statusText || 'Server error',
-      });
+    } catch (e) {
+      openToast(getErrorMessage(e));
     }
 
     setSubmitLoading(false);

client/src/components/modal-forms/AllocationForm.js

@@ -5,8 +5,9 @@ import { makeStyles } from '@material-ui/core/styles';
 import { RenderTextField, RenderDateField } from '../fields';
 import { Field, Formik, Form as FormikForm } from 'formik';
 import { CreateAllocationSchema, ToastStatus } from '../../constants';
-import { createAllocation, updateAllocation } from '../../services/allocations';
+import { createAllocation, updateAllocation } from '../../services';
 import { useToast } from '../../hooks';
+import { getErrorMessage } from '../../utils';
 
 const useStyles = makeStyles(() => ({
   formButton: {
@@ -40,22 +41,21 @@ export const AllocationForm = ({ onSubmit, onClose, open, content, isNew, siteId
           site_id: parseInt(siteId, 10),
         }
       : { allocation: allocation.allocation };
-    const response = await (isNew
-      ? createAllocation(allocationJson)
-      : updateAllocation(content.allocationId, allocationJson));
-    if (response.ok) {
+
+    try {
+      await (isNew
+        ? createAllocation(allocationJson)
+        : updateAllocation(content.allocationId, allocationJson));
+
       openToast({
         status: ToastStatus.Success,
         message: isNew
           ? `New phase allocation has been successfully assigned`
           : `Phase allocation has been successfully updated`,
       });
       await onSubmit();
-    } else {
-      openToast({
-        status: ToastStatus.Error,
-        message: response.error || response.statusText || 'Server error',
-      });
+    } catch (e) {
+      openToast(getErrorMessage(e));
     }
   };
   return (

client/src/components/modal-forms/BulkAllocationForm.js

@@ -1,14 +1,13 @@
 import React, { useState } from 'react';
-import { Button, Dialog } from '../generic';
+import { Field, Formik, Form as FormikForm } from 'formik';
 import { Box, Typography } from '@material-ui/core';
 import Alert from '@material-ui/lab/Alert';
 import { makeStyles } from '@material-ui/core/styles';
+import { Button, Dialog } from '../generic';
 import { BulkAllocationSchema, ToastStatus } from '../../constants';
 import { RenderTextField, RenderSelectField, RenderCheckbox } from '../fields';
-import { Field, Formik, Form as FormikForm } from 'formik';
-import { formatLongDate } from '../../utils/date';
-import { addEllipsisMask } from '../../utils';
-import { bulkAllocation } from '../../services/allocations';
+import { addEllipsisMask, formatLongDate, getErrorMessage } from '../../utils';
+import { bulkAllocation } from '../../services';
 import { useToast } from '../../hooks';
 
 const useStyles = makeStyles(() => ({
@@ -69,18 +68,16 @@ export const BulkAllocationForm = ({ onClose, afterSubmit, open, sites, phases =
       allocation: values.allocation,
       phase_id: values.phase_id,
     };
-    const response = await bulkAllocation(payload);
-    if (response.ok) {
+    try {
+      await bulkAllocation(payload);
+
       await afterSubmit();
       openToast({
         status: ToastStatus.Success,
         message: `${sites.length} sites have been assigned allocations`,
       });
-    } else {
-      openToast({
-        status: ToastStatus.Error,
-        message: response.error || response.statusText || 'Server error',
-      });
+    } catch (e) {
+      openToast(getErrorMessage(e));
     }
   };