From 06d40ac85f381a183e855d9ed33c0cc745d75f1a Mon Sep 17 00:00:00 2001
From: jasquat <jasquat@users.noreply.github.com>
Date: Fri, 29 Jul 2022 16:23:55 -0400
Subject: [PATCH] updated several FIXME lines for typescript errors

---
 src/components/PaginationForTable.tsx    | 10 ++----
 src/components/ProcessBreadcrumb.tsx     |  8 ++---
 src/components/ReactDiagramEditor.tsx    | 32 +++++++++----------
 src/helpers.tsx                          | 18 +++++++++++
 src/index.tsx                            |  1 -
 src/routes/AdminRoutes.tsx               |  9 ------
 src/routes/ProcessGroupEdit.tsx          | 13 +++-----
 src/routes/ProcessGroupShow.tsx          | 29 +++++-------------
 src/routes/ProcessGroups.tsx             | 33 ++++----------------
 src/routes/ProcessInstanceList.tsx       | 39 ++++++------------------
 src/routes/ProcessInstanceReportList.tsx |  3 +-
 src/routes/ProcessInstanceReportShow.tsx | 27 ++++++----------
 src/routes/ProcessInstanceShow.tsx       |  4 +--
 src/routes/ProcessModelEdit.tsx          | 24 ++++++---------
 src/routes/ProcessModelEditDiagram.tsx   |  9 ++----
 src/routes/ProcessModelShow.tsx          |  4 +--
 src/routes/TaskList.tsx                  | 25 +++------------
 src/services/UserService.ts              | 10 +++---
 18 files changed, 106 insertions(+), 192 deletions(-)

diff --git a/src/components/PaginationForTable.tsx b/src/components/PaginationForTable.tsx
index e9681e1..4bb750f 100644
--- a/src/components/PaginationForTable.tsx
+++ b/src/components/PaginationForTable.tsx
@@ -12,7 +12,7 @@ type OwnProps = {
   pagination: {
     [key: string]: number;
   };
-  tableToDisplay: string;
+  tableToDisplay: any;
   queryParamString?: string;
   path: string;
 };
@@ -66,9 +66,8 @@ export default function PaginationForTable({
   };
 
   const buildPaginationNav = () => {
-    let previousPageTag = '';
+    let previousPageTag = null;
     if (page === 1) {
-      // @ts-expect-error TS(2322) FIXME: Type 'Element' is not assignable to type 'string'.
       previousPageTag = (
         <li
           data-qa="pagination-previous-button-inactive"
@@ -81,7 +80,6 @@ export default function PaginationForTable({
         </li>
       );
     } else {
-      // @ts-expect-error TS(2322) FIXME: Type 'Element' is not assignable to type 'string'.
       previousPageTag = (
         <li className="page-item" key="previous">
           <Link
@@ -98,9 +96,8 @@ export default function PaginationForTable({
       );
     }
 
-    let nextPageTag = '';
+    let nextPageTag = null;
     if (page >= pagination.pages) {
-      // @ts-expect-error TS(2322) FIXME: Type 'Element' is not assignable to type 'string'.
       nextPageTag = (
         <li
           data-qa="pagination-next-button-inactive"
@@ -113,7 +110,6 @@ export default function PaginationForTable({
         </li>
       );
     } else {
-      // @ts-expect-error TS(2322) FIXME: Type 'Element' is not assignable to type 'string'.
       nextPageTag = (
         <li className="page-item" key="next">
           <Link
diff --git a/src/components/ProcessBreadcrumb.tsx b/src/components/ProcessBreadcrumb.tsx
index e1e119c..4e7a959 100644
--- a/src/components/ProcessBreadcrumb.tsx
+++ b/src/components/ProcessBreadcrumb.tsx
@@ -12,12 +12,11 @@ export default function ProcessBreadcrumb({
   processGroupId,
   linkProcessModel = false,
 }: OwnProps) {
-  let processGroupBreadcrumb = '';
-  let processModelBreadcrumb = '';
+  let processGroupBreadcrumb = null;
+  let processModelBreadcrumb = null;
 
   if (processModelId) {
     if (linkProcessModel) {
-      // @ts-expect-error TS(2322) FIXME: Type 'Element' is not assignable to type 'string'.
       processModelBreadcrumb = (
         <Breadcrumb.Item
           linkAs={Link}
@@ -29,14 +28,12 @@ export default function ProcessBreadcrumb({
         </Breadcrumb.Item>
       );
     } else {
-      // @ts-expect-error TS(2322) FIXME: Type 'Element' is not assignable to type 'string'.
       processModelBreadcrumb = (
         <Breadcrumb.Item active>
           Process Model: {processModelId}
         </Breadcrumb.Item>
       );
     }
-    // @ts-expect-error TS(2322) FIXME: Type 'Element' is not assignable to type 'string'.
     processGroupBreadcrumb = (
       <Breadcrumb.Item
         linkAs={Link}
@@ -47,7 +44,6 @@ export default function ProcessBreadcrumb({
       </Breadcrumb.Item>
     );
   } else if (processGroupId) {
-    // @ts-expect-error TS(2322) FIXME: Type 'Element' is not assignable to type 'string'.
     processGroupBreadcrumb = (
       <Breadcrumb.Item active>Process Group: {processGroupId}</Breadcrumb.Item>
     );
diff --git a/src/components/ReactDiagramEditor.tsx b/src/components/ReactDiagramEditor.tsx
index ed3976c..ed2dc33 100644
--- a/src/components/ReactDiagramEditor.tsx
+++ b/src/components/ReactDiagramEditor.tsx
@@ -60,7 +60,7 @@ type OwnProps = {
   activeTaskBpmnIds?: string[] | null;
   completedTasksBpmnIds?: string[] | null;
   saveDiagram?: (..._args: any[]) => any;
-  diagramXML?: string;
+  diagramXML?: string | null;
   fileName?: string;
   onLaunchScriptEditor?: (..._args: any[]) => any;
   url?: string;
@@ -90,15 +90,12 @@ export default function ReactDiagramEditor({
       return;
     }
 
-    // @ts-expect-error TS(2531) FIXME: Object is possibly 'null'.
-    document.getElementById('diagram-container').innerHTML = '';
-    const temp = document.createElement('template');
-
     let canvasClass = 'diagram-editor-canvas';
     if (diagramType === 'readonly') {
       canvasClass = 'diagram-viewer-canvas';
     }
 
+    const temp = document.createElement('template');
     temp.innerHTML = `
       <div class="content with-diagram" id="js-drop-zone">
         <div class="canvas ${canvasClass}" id="canvas"
@@ -106,10 +103,14 @@ export default function ReactDiagramEditor({
         <div class="properties-panel-parent" id="js-properties-panel"></div>
       </div>
     `;
-
     const frag = temp.content;
-    // @ts-expect-error TS(2531) FIXME: Object is possibly 'null'.
-    document.getElementById('diagram-container').appendChild(frag);
+
+    const diagramContainerElement =
+      document.getElementById('diagram-container');
+    if (diagramContainerElement) {
+      diagramContainerElement.innerHTML = '';
+      diagramContainerElement.appendChild(frag);
+    }
 
     let diagramModeler: any = null;
 
@@ -209,8 +210,7 @@ export default function ReactDiagramEditor({
 
       let modeler = diagramModelerState;
       if (diagramType === 'dmn') {
-        // @ts-expect-error TS(2531) FIXME: Object is possibly 'null'.
-        modeler = diagramModelerState.getActiveViewer();
+        modeler = (diagramModelerState as any).getActiveViewer();
       }
 
       const canvas = (modeler as any).get('canvas');
@@ -218,8 +218,7 @@ export default function ReactDiagramEditor({
       // only get the canvas if the dmn active viewer is actually
       // a Modeler and not an Editor which is what it will when we are
       // actively editing a decision table
-      // @ts-expect-error TS(2531) FIXME: Object is possibly 'null'.
-      if (modeler.constructor.name === 'Modeler') {
+      if ((modeler as any).constructor.name === 'Modeler') {
         canvas.zoom('fit-viewport');
       }
 
@@ -320,10 +319,11 @@ export default function ReactDiagramEditor({
 
   function handleSave() {
     if (saveDiagram) {
-      // @ts-expect-error TS(2531) FIXME: Object is possibly 'null'.
-      diagramModelerState.saveXML({ format: true }).then((xmlObject: any) => {
-        saveDiagram(xmlObject.xml);
-      });
+      (diagramModelerState as any)
+        .saveXML({ format: true })
+        .then((xmlObject: any) => {
+          saveDiagram(xmlObject.xml);
+        });
     }
   }
 
diff --git a/src/helpers.tsx b/src/helpers.tsx
index 8625282..fa62e3b 100644
--- a/src/helpers.tsx
+++ b/src/helpers.tsx
@@ -1,5 +1,9 @@
 import { format } from 'date-fns';
 import { DATE_FORMAT } from './config';
+import {
+  DEFAULT_PER_PAGE,
+  DEFAULT_PAGE,
+} from './components/PaginationForTable';
 
 // https://www.30secondsofcode.org/js/s/slugify
 export const slugifyString = (str: any) => {
@@ -46,3 +50,17 @@ export const convertSecondsToFormattedDate = (seconds: number) => {
 export const objectIsEmpty = (obj: object) => {
   return Object.keys(obj).length === 0;
 };
+
+export const getPageInfoFromSearchParams = (
+  searchParams: any,
+  defaultPerPage: string | number = DEFAULT_PER_PAGE,
+  defaultPage: string | number = DEFAULT_PAGE
+) => {
+  const page = parseInt(searchParams.get('page') || defaultPage.toString(), 10);
+  const perPage = parseInt(
+    searchParams.get('per_page') || defaultPerPage.toString(),
+    10
+  );
+
+  return { page, perPage };
+};
diff --git a/src/index.tsx b/src/index.tsx
index bacef50..ebd4041 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -7,7 +7,6 @@ import './index.css';
 
 import reportWebVitals from './reportWebVitals';
 import UserService from './services/UserService';
-// import HttpService from './services/HttpService';
 
 // @ts-expect-error TS(2345) FIXME: Argument of type 'HTMLElement | null' is not assig... Remove this comment to see the full error message
 const root = ReactDOMClient.createRoot(document.getElementById('root'));
diff --git a/src/routes/AdminRoutes.tsx b/src/routes/AdminRoutes.tsx
index d4d8753..eb265be 100644
--- a/src/routes/AdminRoutes.tsx
+++ b/src/routes/AdminRoutes.tsx
@@ -25,13 +25,11 @@ export default function AdminRoutes() {
         <Route path="process-groups" element={<ProcessGroups />} />
         <Route
           path="process-groups/:process_group_id"
-          // @ts-expect-error TS(2786) FIXME: 'ProcessGroupShow' cannot be used as a JSX compone... Remove this comment to see the full error message
           element={<ProcessGroupShow />}
         />
         <Route path="process-groups/new" element={<ProcessGroupNew />} />
         <Route
           path="process-groups/:process_group_id/edit"
-          // @ts-expect-error TS(2786) FIXME: 'ProcessGroupEdit' cannot be used as a JSX compone... Remove this comment to see the full error message
           element={<ProcessGroupEdit />}
         />
 
@@ -41,32 +39,26 @@ export default function AdminRoutes() {
         />
         <Route
           path="process-models/:process_group_id/:process_model_id"
-          // @ts-expect-error TS(2786) FIXME: 'ProcessModelShow' cannot be used as a JSX compone... Remove this comment to see the full error message
           element={<ProcessModelShow />}
         />
         <Route
           path="process-models/:process_group_id/:process_model_id/file"
-          // @ts-expect-error TS(2786) FIXME: 'ProcessModelEditDiagram' cannot be used as a JSX ... Remove this comment to see the full error message
           element={<ProcessModelEditDiagram />}
         />
         <Route
           path="process-models/:process_group_id/:process_model_id/file/:file_name"
-          // @ts-expect-error TS(2786) FIXME: 'ProcessModelEditDiagram' cannot be used as a JSX ... Remove this comment to see the full error message
           element={<ProcessModelEditDiagram />}
         />
         <Route
           path="process-models/:process_group_id/:process_model_id/process-instances"
-          // @ts-expect-error TS(2786) FIXME: 'ProcessInstanceList' cannot be used as a JSX comp... Remove this comment to see the full error message
           element={<ProcessInstanceList />}
         />
         <Route
           path="process-models/:process_group_id/:process_model_id/edit"
-          // @ts-expect-error TS(2786) FIXME: 'ProcessModelEdit' cannot be used as a JSX compone... Remove this comment to see the full error message
           element={<ProcessModelEdit />}
         />
         <Route
           path="process-models/:process_group_id/:process_model_id/process-instances/:process_instance_id"
-          // @ts-expect-error TS(2786) FIXME: 'ProcessInstanceShow' cannot be used as a JSX comp... Remove this comment to see the full error message
           element={<ProcessInstanceShow />}
         />
         <Route
@@ -75,7 +67,6 @@ export default function AdminRoutes() {
         />
         <Route
           path="process-models/:process_group_id/:process_model_id/process-instances/reports/:report_identifier"
-          // @ts-expect-error TS(2786) FIXME: 'ProcessInstanceReport' cannot be used as a JSX co... Remove this comment to see the full error message
           element={<ProcessInstanceReportShow />}
         />
         <Route
diff --git a/src/routes/ProcessGroupEdit.tsx b/src/routes/ProcessGroupEdit.tsx
index e7b685c..36971be 100644
--- a/src/routes/ProcessGroupEdit.tsx
+++ b/src/routes/ProcessGroupEdit.tsx
@@ -23,8 +23,7 @@ export default function ProcessGroupEdit() {
   }, [params]);
 
   const navigateToProcessGroup = (_result: any) => {
-    // @ts-expect-error TS(2531) FIXME: Object is possibly 'null'.
-    navigate(`/admin/process-groups/${processGroup.id}`);
+    navigate(`/admin/process-groups/${(processGroup as any).id}`);
   };
 
   const navigateToProcessGroups = (_result: any) => {
@@ -34,22 +33,19 @@ export default function ProcessGroupEdit() {
   const updateProcessGroup = (event: any) => {
     event.preventDefault();
     HttpService.makeCallToBackend({
-      // @ts-expect-error TS(2531) FIXME: Object is possibly 'null'.
-      path: `/process-groups/${processGroup.id}`,
+      path: `/process-groups/${(processGroup as any).id}`,
       successCallback: navigateToProcessGroup,
       httpMethod: 'PUT',
       postBody: {
         display_name: displayName,
-        // @ts-expect-error TS(2531) FIXME: Object is possibly 'null'.
-        id: processGroup.id,
+        id: (processGroup as any).id,
       },
     });
   };
 
   const deleteProcessGroup = () => {
     HttpService.makeCallToBackend({
-      // @ts-expect-error TS(2531) FIXME: Object is possibly 'null'.
-      path: `/process-groups/${processGroup.id}`,
+      path: `/process-groups/${(processGroup as any).id}`,
       successCallback: navigateToProcessGroups,
       httpMethod: 'DELETE',
     });
@@ -90,4 +86,5 @@ export default function ProcessGroupEdit() {
       </main>
     );
   }
+  return null;
 }
diff --git a/src/routes/ProcessGroupShow.tsx b/src/routes/ProcessGroupShow.tsx
index 013017a..e0d2fea 100644
--- a/src/routes/ProcessGroupShow.tsx
+++ b/src/routes/ProcessGroupShow.tsx
@@ -2,11 +2,9 @@ import { useEffect, useState } from 'react';
 import { Link, useSearchParams, useParams } from 'react-router-dom';
 import { Button, Table, Stack } from 'react-bootstrap';
 import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
-import PaginationForTable, {
-  DEFAULT_PER_PAGE,
-  DEFAULT_PAGE,
-} from '../components/PaginationForTable';
+import PaginationForTable from '../components/PaginationForTable';
 import HttpService from '../services/HttpService';
+import { getPageInfoFromSearchParams } from '../helpers';
 
 export default function ProcessGroupShow() {
   const params = useParams();
@@ -17,13 +15,7 @@ export default function ProcessGroupShow() {
   const [pagination, setPagination] = useState(null);
 
   useEffect(() => {
-    // @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(
-      // @ts-expect-error TS(2345) FIXME: Argument of type 'string | 50' is not assignable t... Remove this comment to see the full error message
-      searchParams.get('per_page') || DEFAULT_PER_PAGE,
-      10
-    );
+    const { page, perPage } = getPageInfoFromSearchParams(searchParams);
 
     const setProcessModelFromResult = (result: any) => {
       setProcessModels(result.results);
@@ -48,8 +40,9 @@ export default function ProcessGroupShow() {
         <tr key={(row as any).id}>
           <td>
             <Link
-              // @ts-expect-error TS(2531) FIXME: Object is possibly 'null'.
-              to={`/admin/process-models/${processGroup.id}/${(row as any).id}`}
+              to={`/admin/process-models/${(processGroup as any).id}/${
+                (row as any).id
+              }`}
               data-qa="process-model-show-link"
             >
               {(row as any).id}
@@ -76,13 +69,7 @@ export default function ProcessGroupShow() {
   };
 
   if (processGroup && pagination) {
-    const perPage = parseInt(
-      // @ts-expect-error TS(2345) FIXME: Argument of type 'string | 50' is not assignable t... Remove this comment to see the full error message
-      searchParams.get('per_page') || DEFAULT_PER_PAGE,
-      10
-    );
-    // @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 { page, perPage } = getPageInfoFromSearchParams(searchParams);
     return (
       <main style={{ padding: '1rem 0' }}>
         <ProcessBreadcrumb processGroupId={(processGroup as any).id} />
@@ -107,7 +94,6 @@ export default function ProcessGroupShow() {
             page={page}
             perPage={perPage}
             pagination={pagination}
-            // @ts-expect-error TS(2322) FIXME: Type 'Element' is not assignable to type 'string'.
             tableToDisplay={buildTable()}
             path={`/admin/process-groups/${(processGroup as any).id}`}
           />
@@ -115,4 +101,5 @@ export default function ProcessGroupShow() {
       </main>
     );
   }
+  return null;
 }
diff --git a/src/routes/ProcessGroups.tsx b/src/routes/ProcessGroups.tsx
index 83f542c..b3c10bc 100644
--- a/src/routes/ProcessGroups.tsx
+++ b/src/routes/ProcessGroups.tsx
@@ -2,11 +2,9 @@ import { useEffect, useState } from 'react';
 import { Link, useSearchParams } from 'react-router-dom';
 import { Button, Table } from 'react-bootstrap';
 import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
-import PaginationForTable, {
-  DEFAULT_PER_PAGE,
-  DEFAULT_PAGE,
-} from '../components/PaginationForTable';
+import PaginationForTable from '../components/PaginationForTable';
 import HttpService from '../services/HttpService';
+import { getPageInfoFromSearchParams } from '../helpers';
 
 // Example process group json
 // {'admin': False, 'display_name': 'Test Workflows', 'display_order': 0, 'id': 'test_process_group'}
@@ -21,15 +19,7 @@ export default function ProcessGroups() {
       setProcessGroups(result.results);
       setPagination(result.pagination);
     };
-
-    const page = parseInt(
-      searchParams.get('page') || DEFAULT_PAGE.toString(),
-      10
-    );
-    const perPage = parseInt(
-      searchParams.get('per_page') || DEFAULT_PER_PAGE.toString(),
-      10
-    );
+    const { page, perPage } = getPageInfoFromSearchParams(searchParams);
     HttpService.makeCallToBackend({
       path: `/process-groups?per_page=${perPage}&page=${page}`,
       successCallback: setProcessGroupsFromResult,
@@ -63,30 +53,19 @@ export default function ProcessGroups() {
   };
 
   const processGroupsDisplayArea = () => {
-    const perPage = parseInt(
-      searchParams.get('per_page') || DEFAULT_PER_PAGE.toString(),
-      10
-    );
-    const page = parseInt(
-      searchParams.get('page') || DEFAULT_PAGE.toString(),
-      10
-    );
-    let displayText = '';
+    const { page, perPage } = getPageInfoFromSearchParams(searchParams);
+    let displayText = null;
     if (processGroups?.length > 0) {
-      // @ts-expect-error TS(2322) FIXME: Type 'Element' is not assignable to type 'string'.
       displayText = (
         <PaginationForTable
           page={page}
           perPage={perPage}
-          // @ts-expect-error TS(2322) FIXME: Type 'null' is not assignable to type '{ [key: str... Remove this comment to see the full error message
-          pagination={pagination}
-          // @ts-expect-error TS(2322) FIXME: Type 'Element' is not assignable to type 'string'.
+          pagination={pagination as any}
           tableToDisplay={buildTable()}
           path="/admin/process-groups"
         />
       );
     } else {
-      // @ts-expect-error TS(2322) FIXME: Type 'Element' is not assignable to type 'string'.
       displayText = <p>No Groups To Display</p>;
     }
     return displayText;
diff --git a/src/routes/ProcessInstanceList.tsx b/src/routes/ProcessInstanceList.tsx
index aa64c73..76a89f7 100644
--- a/src/routes/ProcessInstanceList.tsx
+++ b/src/routes/ProcessInstanceList.tsx
@@ -14,12 +14,10 @@ import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
 import {
   convertDateToSeconds,
   convertSecondsToFormattedDate,
+  getPageInfoFromSearchParams,
 } from '../helpers';
 
-import PaginationForTable, {
-  DEFAULT_PER_PAGE,
-  DEFAULT_PAGE,
-} from '../components/PaginationForTable';
+import PaginationForTable from '../components/PaginationForTable';
 import 'react-datepicker/dist/react-datepicker.css';
 
 import ErrorContext from '../contexts/ErrorContext';
@@ -59,15 +57,10 @@ export default function ProcessInstanceList() {
       setPagination(result.pagination);
     }
     function getProcessInstances() {
-      const page = searchParams.get('page') || DEFAULT_PAGE;
-      const perPage = parseInt(
-        // @ts-expect-error TS(2345) FIXME: Argument of type 'string | 50' is not assignable t... Remove this comment to see the full error message
-        searchParams.get('per_page') || DEFAULT_PER_PAGE,
-        10
-      );
+      const { page, perPage } = getPageInfoFromSearchParams(searchParams);
       let queryParamString = `per_page=${perPage}&page=${page}`;
 
-      Object.keys(parametersToAlwaysFilterBy).forEach((paramName) => {
+      Object.keys(parametersToAlwaysFilterBy).forEach((paramName: string) => {
         // @ts-expect-error TS(7053) FIXME: Element implicitly has an 'any' type because expre... Remove this comment to see the full error message
         const functionToCall = parametersToAlwaysFilterBy[paramName];
         const searchParamValue = searchParams.get(paramName);
@@ -81,8 +74,7 @@ export default function ProcessInstanceList() {
         queryParamString += `&process_status=${searchParams.get(
           'process_status'
         )}`;
-        // @ts-expect-error TS(2345) FIXME: Argument of type 'string | null' is not assignable... Remove this comment to see the full error message
-        setProcessStatus(searchParams.get('process_status'));
+        setProcessStatus(searchParams.get('process_status') || '');
       }
 
       HttpService.makeCallToBackend({
@@ -119,12 +111,7 @@ export default function ProcessInstanceList() {
 
   const handleFilter = (event: any) => {
     event.preventDefault();
-    const page = searchParams.get('page') || DEFAULT_PAGE;
-    const perPage = parseInt(
-      // @ts-expect-error TS(2345) FIXME: Argument of type 'string | 50' is not assignable t... Remove this comment to see the full error message
-      searchParams.get('per_page') || DEFAULT_PER_PAGE,
-      10
-    );
+    const { page, perPage } = getPageInfoFromSearchParams(searchParams);
     let queryParamString = `per_page=${perPage}&page=${page}`;
 
     if (isTrueComparison(startFrom, '>', startTill)) {
@@ -312,20 +299,13 @@ export default function ProcessInstanceList() {
   };
 
   if (pagination) {
-    const perPage = parseInt(
-      // @ts-expect-error TS(2345) FIXME: Argument of type 'string | 50' is not assignable t... Remove this comment to see the full error message
-      searchParams.get('per_page') || DEFAULT_PER_PAGE,
-      10
-    );
-    // @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 { page, perPage } = getPageInfoFromSearchParams(searchParams);
     return (
       <main>
         <ProcessBreadcrumb
           processModelId={params.process_model_id}
           processGroupId={params.process_group_id}
-          // @ts-expect-error TS(2322) FIXME: Type 'string' is not assignable to type 'boolean |... Remove this comment to see the full error message
-          linkProcessModel="true"
+          linkProcessModel
         />
         <h2>Process Instances for {params.process_model_id}</h2>
         {filterOptions()}
@@ -333,7 +313,6 @@ export default function ProcessInstanceList() {
           page={page}
           perPage={perPage}
           pagination={pagination}
-          // @ts-expect-error TS(2322) FIXME: Type 'Element' is not assignable to type 'string'.
           tableToDisplay={buildTable()}
           queryParamString={getSearchParamsAsQueryString()}
           path={`/admin/process-models/${params.process_group_id}/${params.process_model_id}/process-instances`}
@@ -341,4 +320,6 @@ export default function ProcessInstanceList() {
       </main>
     );
   }
+
+  return null;
 }
diff --git a/src/routes/ProcessInstanceReportList.tsx b/src/routes/ProcessInstanceReportList.tsx
index a4fd92b..2d12983 100644
--- a/src/routes/ProcessInstanceReportList.tsx
+++ b/src/routes/ProcessInstanceReportList.tsx
@@ -47,8 +47,7 @@ export default function ProcessInstanceReportList() {
       <ProcessBreadcrumb
         processGroupId={params.process_group_id}
         processModelId={params.process_model_id}
-        // @ts-expect-error TS(2322) FIXME: Type 'string' is not assignable to type 'boolean |... Remove this comment to see the full error message
-        linkProcessModel="true"
+        linkProcessModel
       />
       <h2>Reports for Process Model: {params.process_model_id}</h2>
       <Button
diff --git a/src/routes/ProcessInstanceReportShow.tsx b/src/routes/ProcessInstanceReportShow.tsx
index 9615f08..a006d4b 100644
--- a/src/routes/ProcessInstanceReportShow.tsx
+++ b/src/routes/ProcessInstanceReportShow.tsx
@@ -4,10 +4,9 @@ import { useParams, useSearchParams } from 'react-router-dom';
 import { Button, Table } from 'react-bootstrap';
 import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
 
-import PaginationForTable, {
-  DEFAULT_PAGE,
-} from '../components/PaginationForTable';
+import PaginationForTable from '../components/PaginationForTable';
 import HttpService from '../services/HttpService';
+import { getPageInfoFromSearchParams } from '../helpers';
 
 const PER_PAGE_FOR_PROCESS_INSTANCE_REPORT = 500;
 
@@ -28,11 +27,9 @@ export default function ProcessInstanceReport() {
     };
 
     function getProcessInstances() {
-      const page = searchParams.get('page') || DEFAULT_PAGE;
-      const perPage = parseInt(
-        // @ts-expect-error TS(2345) FIXME: Argument of type 'string | 50' is not assignable t... Remove this comment to see the full error message
-        searchParams.get('per_page') || PER_PAGE_FOR_PROCESS_INSTANCE_REPORT,
-        10
+      const { page, perPage } = getPageInfoFromSearchParams(
+        searchParams,
+        PER_PAGE_FOR_PROCESS_INSTANCE_REPORT
       );
       let query = `?page=${page}&per_page=${perPage}`;
       searchParams.forEach((value, key) => {
@@ -71,20 +68,16 @@ export default function ProcessInstanceReport() {
   };
 
   if (pagination) {
-    const perPage = parseInt(
-      // @ts-expect-error TS(2345) FIXME: Argument of type 'string | 50' is not assignable t... Remove this comment to see the full error message
-      searchParams.get('per_page') || PER_PAGE_FOR_PROCESS_INSTANCE_REPORT,
-      10
+    const { page, perPage } = getPageInfoFromSearchParams(
+      searchParams,
+      PER_PAGE_FOR_PROCESS_INSTANCE_REPORT
     );
-    // @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);
     return (
       <main>
         <ProcessBreadcrumb
           processModelId={params.process_model_id}
           processGroupId={params.process_group_id}
-          // @ts-expect-error TS(2322) FIXME: Type 'string' is not assignable to type 'boolean |... Remove this comment to see the full error message
-          linkProcessModel="true"
+          linkProcessModel
         />
         <h2>Process Instance Report: {params.report_identifier}</h2>
         <Button
@@ -96,11 +89,11 @@ export default function ProcessInstanceReport() {
           page={page}
           perPage={perPage}
           pagination={pagination}
-          // @ts-expect-error TS(2322) FIXME: Type 'Element' is not assignable to type 'string'.
           tableToDisplay={buildTable()}
           path={`/admin/process-models/${params.process_group_id}/${params.process_model_id}/process-instances/report`}
         />
       </main>
     );
   }
+  return null;
 }
diff --git a/src/routes/ProcessInstanceShow.tsx b/src/routes/ProcessInstanceShow.tsx
index 6aad504..df54a5f 100644
--- a/src/routes/ProcessInstanceShow.tsx
+++ b/src/routes/ProcessInstanceShow.tsx
@@ -108,8 +108,7 @@ export default function ProcessInstanceShow() {
         <ProcessBreadcrumb
           processModelId={params.process_model_id}
           processGroupId={params.process_group_id}
-          // @ts-expect-error TS(2322) FIXME: Type 'string' is not assignable to type 'boolean |... Remove this comment to see the full error message
-          linkProcessModel="true"
+          linkProcessModel
         />
         <Stack direction="horizontal" gap={3}>
           <h2>Process Instance Id: {processInstanceToUse.id}</h2>
@@ -136,4 +135,5 @@ export default function ProcessInstanceShow() {
       </main>
     );
   }
+  return null;
 }
diff --git a/src/routes/ProcessModelEdit.tsx b/src/routes/ProcessModelEdit.tsx
index 113c743..b0bc466 100644
--- a/src/routes/ProcessModelEdit.tsx
+++ b/src/routes/ProcessModelEdit.tsx
@@ -32,32 +32,27 @@ export default function ProcessModelEdit() {
   };
 
   const updateProcessModel = (event: any) => {
+    const processModelToUse = processModel as any;
     event.preventDefault();
     HttpService.makeCallToBackend({
       path: `/${processModelPath}`,
       successCallback: navigateToProcessModel,
       httpMethod: 'PUT',
       postBody: {
-        // @ts-expect-error TS(2531) FIXME: Object is possibly 'null'.
-        id: processModel.id,
+        id: processModelToUse.id,
         display_name: displayName,
-        // @ts-expect-error TS(2531) FIXME: Object is possibly 'null'.
-        description: processModel.description,
-        // @ts-expect-error TS(2531) FIXME: Object is possibly 'null'.
-        process_group_id: processModel.process_group_id,
-        // @ts-expect-error TS(2531) FIXME: Object is possibly 'null'.
-        is_master_spec: processModel.is_master_spec,
-        // @ts-expect-error TS(2531) FIXME: Object is possibly 'null'.
-        standalone: processModel.standalone,
-        // @ts-expect-error TS(2531) FIXME: Object is possibly 'null'.
-        library: processModel.library,
+        description: processModelToUse.description,
+        process_group_id: processModelToUse.process_group_id,
+        is_master_spec: processModelToUse.is_master_spec,
+        standalone: processModelToUse.standalone,
+        library: processModelToUse.library,
       },
     });
   };
 
   const deleteProcessModel = () => {
-    // @ts-expect-error TS(2531) FIXME: Object is possibly 'null'.
-    const processModelShowPath = `/process-models/${processModel.process_group_id}/${processModel.id}`;
+    const processModelToUse = processModel as any;
+    const processModelShowPath = `/process-models/${processModelToUse.process_group_id}/${processModelToUse.id}`;
     HttpService.makeCallToBackend({
       path: `${processModelShowPath}`,
       successCallback: navigateToProcessModels,
@@ -97,4 +92,5 @@ export default function ProcessModelEdit() {
       </main>
     );
   }
+  return null;
 }
diff --git a/src/routes/ProcessModelEditDiagram.tsx b/src/routes/ProcessModelEditDiagram.tsx
index b40187a..a98076e 100644
--- a/src/routes/ProcessModelEditDiagram.tsx
+++ b/src/routes/ProcessModelEditDiagram.tsx
@@ -136,8 +136,7 @@ export default function ProcessModelEditDiagram() {
   };
   const handleEditorChange = (value: any) => {
     setScriptText(value);
-    // @ts-expect-error TS(2531) FIXME: Object is possibly 'null'.
-    scriptModeling.updateProperties(scriptElement, {
+    (scriptModeling as any).updateProperties(scriptElement, {
       scriptFormat: 'python',
       script: value,
     });
@@ -180,7 +179,6 @@ export default function ProcessModelEditDiagram() {
           processModelId={params.process_model_id || ''}
           processGroupId={params.process_group_id || ''}
           saveDiagram={saveDiagram}
-          // @ts-expect-error TS(2322) FIXME: Type 'null' is not assignable to type 'string | un... Remove this comment to see the full error message
           diagramXML={bpmnXmlForDiagramRendering}
           fileName={processModelFile ? (processModelFile as any).name : null}
           diagramType="dmn"
@@ -192,7 +190,6 @@ export default function ProcessModelEditDiagram() {
         processModelId={params.process_model_id || ''}
         processGroupId={params.process_group_id || ''}
         saveDiagram={saveDiagram}
-        // @ts-expect-error TS(2322) FIXME: Type 'null' is not assignable to type 'string | un... Remove this comment to see the full error message
         diagramXML={bpmnXmlForDiagramRendering}
         fileName={processModelFile ? (processModelFile as any).name : null}
         diagramType="bpmn"
@@ -208,8 +205,7 @@ export default function ProcessModelEditDiagram() {
         <ProcessBreadcrumb
           processGroupId={params.process_group_id}
           processModelId={params.process_model_id}
-          // @ts-expect-error TS(2322) FIXME: Type 'string' is not assignable to type 'boolean |... Remove this comment to see the full error message
-          linkProcessModel="true"
+          linkProcessModel
         />
         <h2>
           Process Model File
@@ -223,4 +219,5 @@ export default function ProcessModelEditDiagram() {
       </main>
     );
   }
+  return null;
 }
diff --git a/src/routes/ProcessModelShow.tsx b/src/routes/ProcessModelShow.tsx
index 49156f0..4e9cdf7 100644
--- a/src/routes/ProcessModelShow.tsx
+++ b/src/routes/ProcessModelShow.tsx
@@ -39,9 +39,8 @@ export default function ProcessModelShow() {
     });
   };
 
-  let processInstanceResultTag = '';
+  let processInstanceResultTag = null;
   if (processInstanceResult) {
-    // @ts-expect-error TS(2322) FIXME: Type 'Element' is not assignable to type 'string'.
     processInstanceResultTag = (
       <pre>
         {(processInstanceResult as any).status}:{' '}
@@ -193,4 +192,5 @@ export default function ProcessModelShow() {
       </main>
     );
   }
+  return null;
 }
diff --git a/src/routes/TaskList.tsx b/src/routes/TaskList.tsx
index cb7f6e8..2f09703 100644
--- a/src/routes/TaskList.tsx
+++ b/src/routes/TaskList.tsx
@@ -1,10 +1,8 @@
 import { useEffect, useState } from 'react';
 import { Button, Table } from 'react-bootstrap';
 import { Link, useSearchParams } from 'react-router-dom';
-import PaginationForTable, {
-  DEFAULT_PER_PAGE,
-  DEFAULT_PAGE,
-} from '../components/PaginationForTable';
+import PaginationForTable from '../components/PaginationForTable';
+import { getPageInfoFromSearchParams } from '../helpers';
 import HttpService from '../services/HttpService';
 
 export default function TaskList() {
@@ -13,14 +11,7 @@ export default function TaskList() {
   const [pagination, setPagination] = useState(null);
 
   useEffect(() => {
-    const page = parseInt(
-      searchParams.get('page') || DEFAULT_PAGE.toString(),
-      10
-    );
-    const perPage = parseInt(
-      searchParams.get('per_page') || DEFAULT_PER_PAGE.toString(),
-      10
-    );
+    const { page, perPage } = getPageInfoFromSearchParams(searchParams);
     const setTasksFromResult = (result: any) => {
       setTasks(result.results);
       setPagination(result.pagination);
@@ -66,14 +57,7 @@ export default function TaskList() {
   };
 
   if (pagination) {
-    const perPage = parseInt(
-      searchParams.get('per_page') || DEFAULT_PER_PAGE.toString(),
-      10
-    );
-    const page = parseInt(
-      searchParams.get('page') || DEFAULT_PAGE.toString(),
-      10
-    );
+    const { page, perPage } = getPageInfoFromSearchParams(searchParams);
     return (
       <main>
         <h2>Tasks</h2>
@@ -81,7 +65,6 @@ export default function TaskList() {
           page={page}
           perPage={perPage}
           pagination={pagination}
-          // @ts-expect-error TS(2322) FIXME: Type 'Element' is not assignable to type 'string'.
           tableToDisplay={buildTable()}
           path="/tasks"
         />
diff --git a/src/services/UserService.ts b/src/services/UserService.ts
index 836f13d..89d3e97 100644
--- a/src/services/UserService.ts
+++ b/src/services/UserService.ts
@@ -9,11 +9,13 @@ import { BACKEND_BASE_URL } from '../config';
 // Some explanation:
 // https://dev.to/nilanth/how-to-secure-jwt-in-a-single-page-application-cko
 
-// to trim off any query params
-const currentLocation = `${window.location.origin}${window.location.pathname}`;
+const getCurrentLocation = () => {
+  // to trim off any query params
+  return `${window.location.origin}${window.location.pathname}`;
+};
 
 const doLogin = () => {
-  const url = `${BACKEND_BASE_URL}/login?redirect_url=${currentLocation}`;
+  const url = `${BACKEND_BASE_URL}/login?redirect_url=${getCurrentLocation()}`;
   window.location.href = url;
 };
 const getIdToken = () => {
@@ -51,7 +53,7 @@ const getAuthTokenFromParams = () => {
       localStorage.setItem('jwtIdToken', idToken);
     }
     // to remove token query param
-    window.location.href = currentLocation;
+    window.location.href = getCurrentLocation();
   } else if (!isLoggedIn()) {
     doLogin();
   }