updated remaining get calls to the backend to use the new common method

src/routes/ProcessGroupShow.tsx

@@ -1,13 +1,12 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Link, useSearchParams, useParams } from 'react-router-dom';
 import { Button, Table, Stack } from 'react-bootstrap';
-import { BACKEND_BASE_URL } from '../config';
-import { HOT_AUTH_TOKEN } from '../services/UserService';
 import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
 import PaginationForTable, {
   DEFAULT_PER_PAGE,
   DEFAULT_PAGE,
 } from '../components/PaginationForTable';
+import HttpService from '../services/HttpService';
 
 export default function ProcessGroupShow() {
   const params = useParams();
@@ -18,6 +17,17 @@ export default function ProcessGroupShow() {
   const [pagination, setPagination] = useState(null);
 
   useEffect(() => {
+    const setProcessModelFromResult = (result: any) => {
+      setProcessModels(result.results);
+      setPagination(result.pagination);
+    };
+    const processResult = (result: any) => {
+      setProcessGroup(result);
+      HttpService.makeCallToBackend({
+        path: `/process-groups/${params.process_group_id}/process-models?per_page=${perPage}&page=${page}`,
+        successCallback: setProcessModelFromResult,
+      });
+    };
     // @ts-expect-error TS(2345) FIXME: Argument of type 'string | 1' is not assignable to... Remove this comment to see the full error message
     const page = parseInt(searchParams.get('page') || DEFAULT_PAGE, 10);
     const perPage = parseInt(
@@ -25,38 +35,10 @@ export default function ProcessGroupShow() {
       searchParams.get('per_page') || DEFAULT_PER_PAGE,
       10
     );
-    fetch(`${BACKEND_BASE_URL}/process-groups/${params.process_group_id}`, {
-      headers: new Headers({
-        Authorization: `Bearer ${HOT_AUTH_TOKEN}`,
-      }),
-    })
-      .then((res) => res.json())
-      .then(
-        (processGroupResult) => {
-          setProcessGroup(processGroupResult);
-          fetch(
-            `${BACKEND_BASE_URL}/process-groups/${params.process_group_id}/process-models?per_page=${perPage}&page=${page}`,
-            {
-              headers: new Headers({
-                Authorization: `Bearer ${HOT_AUTH_TOKEN}`,
-              }),
-            }
-          )
-            .then((res) => res.json())
-            .then(
-              (processModelResult) => {
-                setProcessModels(processModelResult.results);
-                setPagination(processModelResult.pagination);
-              },
-              (error) => {
-                console.log(error);
-              }
-            );
-        },
-        (error) => {
-          console.log(error);
-        }
-      );
+    HttpService.makeCallToBackend({
+      path: `/process-groups/${params.process_group_id}`,
+      successCallback: processResult,
+    });
   }, [params, searchParams]);
 
   const buildTable = () => {

src/routes/ProcessInstanceReportList.tsx

@@ -1,32 +1,18 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Button, Table } from 'react-bootstrap';
 import { useParams, Link } from 'react-router-dom';
-import { BACKEND_BASE_URL } from '../config';
-import { HOT_AUTH_TOKEN } from '../services/UserService';
 import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
+import HttpService from '../services/HttpService';
 
 export default function ProcessInstanceReportList() {
   const params = useParams();
   const [processInstanceReports, setProcessInstanceReports] = useState([]);
 
   useEffect(() => {
-    fetch(
-      `${BACKEND_BASE_URL}/process-models/${params.process_group_id}/${params.process_model_id}/process-instances/reports`,
-      {
-        headers: new Headers({
-          Authorization: `Bearer ${HOT_AUTH_TOKEN}`,
-        }),
-      }
-    )
-      .then((res) => res.json())
-      .then(
-        (result) => {
-          setProcessInstanceReports(result);
-        },
-        (error) => {
-          console.log(error);
-        }
-      );
+    HttpService.makeCallToBackend({
+      path: `/process-models/${params.process_group_id}/${params.process_model_id}/process-instances/reports`,
+      successCallback: setProcessInstanceReports,
+    });
   }, [params]);
 
   const buildTable = () => {

src/routes/ProcessInstanceReportShow.tsx

@@ -1,14 +1,13 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useParams, useSearchParams } from 'react-router-dom';
 
 import { Button, Table } from 'react-bootstrap';
-import { BACKEND_BASE_URL } from '../config';
-import { HOT_AUTH_TOKEN } from '../services/UserService';
 import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
 
 import PaginationForTable, {
   DEFAULT_PAGE,
 } from '../components/PaginationForTable';
+import HttpService from '../services/HttpService';
 
 const PER_PAGE_FOR_PROCESS_INSTANCE_REPORT = 500;
 
@@ -21,6 +20,13 @@ export default function ProcessInstanceReport() {
   const [pagination, setPagination] = useState(null);
 
   useEffect(() => {
+    const processResult = (result: any) => {
+      const processInstancesFromApi = result.results;
+      setProcessInstances(processInstancesFromApi);
+      setReportMetadata(result.report_metadata);
+      setPagination(result.pagination);
+    };
+
     function getProcessInstances() {
       const page = searchParams.get('page') || DEFAULT_PAGE;
       const perPage = parseInt(
@@ -34,26 +40,10 @@ export default function ProcessInstanceReport() {
           query += `&${key}=${value}`;
         }
       });
-      fetch(
-        `${BACKEND_BASE_URL}/process-models/${params.process_group_id}/${params.process_model_id}/process-instances/reports/${params.report_identifier}?${query}`,
-        {
-          headers: new Headers({
-            Authorization: `Bearer ${HOT_AUTH_TOKEN}`,
-          }),
-        }
-      )
-        .then((res) => res.json())
-        .then(
-          (result) => {
-            const processInstancesFromApi = result.results;
-            setProcessInstances(processInstancesFromApi);
-            setReportMetadata(result.report_metadata);
-            setPagination(result.pagination);
-          },
-          (error) => {
-            console.log(error);
-          }
-        );
+      HttpService.makeCallToBackend({
+        path: `/process-models/${params.process_group_id}/${params.process_model_id}/process-instances/reports/${params.report_identifier}?${query}`,
+        successCallback: processResult,
+      });
     }
 
     getProcessInstances();

src/routes/ProcessInstanceShow.tsx

@@ -1,9 +1,10 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 import { Button } from 'react-bootstrap';
 import { BACKEND_BASE_URL } from '../config';
 import { HOT_AUTH_TOKEN } from '../services/UserService';
 import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
+import HttpService from '../services/HttpService';
 
 export default function ProcessInstanceShow() {
   const navigate = useNavigate();
@@ -12,23 +13,10 @@ export default function ProcessInstanceShow() {
   const [processInstance, setProcessInstance] = useState(null);
 
   useEffect(() => {
-    fetch(
-      `${BACKEND_BASE_URL}/process-models/${params.process_group_id}/${params.process_model_id}/process-instances/${params.process_instance_id}`,
-      {
-        headers: new Headers({
-          Authorization: `Bearer ${HOT_AUTH_TOKEN}`,
-        }),
-      }
-    )
-      .then((res) => res.json())
-      .then(
-        (result) => {
-          setProcessInstance(result);
-        },
-        (error) => {
-          console.log(error);
-        }
-      );
+    HttpService.makeCallToBackend({
+      path: `/process-models/${params.process_group_id}/${params.process_model_id}/process-instances/${params.process_instance_id}`,
+      successCallback: setProcessInstance,
+    });
   }, [params]);
 
   const deleteProcessInstance = () => {

src/routes/ProcessModelEdit.tsx

@@ -1,9 +1,10 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 import { Button, Stack } from 'react-bootstrap';
 import { BACKEND_BASE_URL } from '../config';
-import { HOT_AUTH_TOKEN, STANDARD_HEADERS } from '../services/UserService';
+import { HOT_AUTH_TOKEN } from '../services/UserService';
 import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
+import HttpService from '../services/HttpService';
 
 export default function ProcessModelEdit() {
   const [displayName, setDisplayName] = useState('');
@@ -14,19 +15,14 @@ export default function ProcessModelEdit() {
   const processModelPath = `process-models/${params.process_group_id}/${params.process_model_id}`;
 
   useEffect(() => {
-    fetch(`${BACKEND_BASE_URL}/${processModelPath}`, {
-      headers: new Headers(STANDARD_HEADERS),
-    })
-      .then((res) => res.json())
-      .then(
-        (result) => {
-          setProcessModel(result);
-          setDisplayName(result.display_name);
-        },
-        (error) => {
-          console.log(error);
-        }
-      );
+    const processResult = (result: any) => {
+      setProcessModel(result);
+      setDisplayName(result.display_name);
+    };
+    HttpService.makeCallToBackend({
+      path: `/${processModelPath}`,
+      successCallback: processResult,
+    });
   }, [processModelPath]);
 
   const updateProcessModel = (event: any) => {

src/routes/ProcessModelEditDiagram.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
 import { Button, Modal } from 'react-bootstrap';
 import Editor from '@monaco-editor/react';
@@ -7,6 +7,7 @@ import { HOT_AUTH_TOKEN } from '../services/UserService';
 
 import ReactDiagramEditor from '../components/ReactDiagramEditor';
 import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
+import HttpService from '../services/HttpService';
 
 export default function ProcessModelEditDiagram() {
   const [showFileNameEditor, setShowFileNameEditor] = useState(false);
@@ -28,26 +29,14 @@ export default function ProcessModelEditDiagram() {
     useState(null);
 
   useEffect(() => {
-    if (params.file_name) {
-      fetch(
-        `${BACKEND_BASE_URL}/process-models/${params.process_group_id}/${params.process_model_id}/file/${params.file_name}`,
-        {
-          headers: new Headers({
-            Authorization: `Bearer ${HOT_AUTH_TOKEN}`,
-          }),
-        }
-      )
-        .then((res) => res.json())
-        .then(
-          (result) => {
-            setProcessModelFile(result);
-            setBpmnXmlForDiagramRendering(result.file_contents);
-          },
-          (error) => {
-            console.log(error);
-          }
-        );
-    }
+    const processResult = (result: any) => {
+      setProcessModelFile(result);
+      setBpmnXmlForDiagramRendering(result.file_contents);
+    };
+    HttpService.makeCallToBackend({
+      path: `/process-models/${params.process_group_id}/${params.process_model_id}/file/${params.file_name}`,
+      successCallback: processResult,
+    });
   }, [params]);
 
   const handleFileNameCancel = () => {

src/routes/TaskShow.tsx

@@ -1,10 +1,11 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import Form from '@rjsf/core';
 import { Button } from 'react-bootstrap';
 
 import { BACKEND_BASE_URL } from '../config';
 import { HOT_AUTH_TOKEN } from '../services/UserService';
+import HttpService from '../services/HttpService';
 
 export default function TaskShow() {
   const [task, setTask] = useState(null);
@@ -14,20 +15,10 @@ export default function TaskShow() {
   useEffect(() => {
     // @ts-expect-error TS(2345) FIXME: Argument of type 'string | undefined' is not assig... Remove this comment to see the full error message
     const taskId = parseInt(params.task_id, 10);
-    fetch(`${BACKEND_BASE_URL}/tasks/${taskId}`, {
-      headers: new Headers({
-        Authorization: `Bearer ${HOT_AUTH_TOKEN}`,
-      }),
-    })
-      .then((res) => res.json())
-      .then(
-        (result) => {
-          setTask(result);
-        },
-        (newError) => {
-          console.log(newError);
-        }
-      );
+    HttpService.makeCallToBackend({
+      path: `/tasks/${taskId}`,
+      successCallback: setTask,
+    });
   }, [params.task_id]);
 
   const handleFormSubmit = (event: any) => {