From abf7786844ff540eeb980b5cf8682fd7659cbbb9 Mon Sep 17 00:00:00 2001 From: jasquat Date: Fri, 15 Jul 2022 15:45:06 -0400 Subject: [PATCH] updated remaining get calls to the backend to use the new common method --- src/routes/ProcessGroupShow.tsx | 52 ++++++++---------------- src/routes/ProcessInstanceReportList.tsx | 26 +++--------- src/routes/ProcessInstanceReportShow.tsx | 36 ++++++---------- src/routes/ProcessInstanceShow.tsx | 24 +++-------- src/routes/ProcessModelEdit.tsx | 26 +++++------- src/routes/ProcessModelEditDiagram.tsx | 31 +++++--------- src/routes/TaskShow.tsx | 21 +++------- 7 files changed, 69 insertions(+), 147 deletions(-) diff --git a/src/routes/ProcessGroupShow.tsx b/src/routes/ProcessGroupShow.tsx index c416b22..9e0dfe0 100644 --- a/src/routes/ProcessGroupShow.tsx +++ b/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 = () => { diff --git a/src/routes/ProcessInstanceReportList.tsx b/src/routes/ProcessInstanceReportList.tsx index b3dfb0e..a4fd92b 100644 --- a/src/routes/ProcessInstanceReportList.tsx +++ b/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 = () => { diff --git a/src/routes/ProcessInstanceReportShow.tsx b/src/routes/ProcessInstanceReportShow.tsx index 30ec266..9615f08 100644 --- a/src/routes/ProcessInstanceReportShow.tsx +++ b/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(); diff --git a/src/routes/ProcessInstanceShow.tsx b/src/routes/ProcessInstanceShow.tsx index 0e7834c..e5cd4fa 100644 --- a/src/routes/ProcessInstanceShow.tsx +++ b/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 = () => { diff --git a/src/routes/ProcessModelEdit.tsx b/src/routes/ProcessModelEdit.tsx index 7ec9cce..29632b0 100644 --- a/src/routes/ProcessModelEdit.tsx +++ b/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) => { diff --git a/src/routes/ProcessModelEditDiagram.tsx b/src/routes/ProcessModelEditDiagram.tsx index 7964795..5d0e0c0 100644 --- a/src/routes/ProcessModelEditDiagram.tsx +++ b/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 = () => { diff --git a/src/routes/TaskShow.tsx b/src/routes/TaskShow.tsx index e894c9e..e4256ce 100644 --- a/src/routes/TaskShow.tsx +++ b/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) => {