migrate to axios and fix error messages (#421)

* migrate to axios and fix error messages * Update application/frontend/src/pages/Deeplink/Deeplink.tsx Co-authored-by: John Harvey <[email protected]> Signed-off-by: Spyros <[email protected]> --------- Signed-off-by: Spyros <[email protected]> Co-authored-by: John Harvey <[email protected]>
OWASP · Oct 6, 2023 · b4d4882 · b4d4882
1 parent 257ea3f
commit b4d4882
Show file tree

Hide file tree

Showing 11 changed files with 152 additions and 117 deletions.
diff --git a/application/frontend/src/components/LoadingAndErrorIndicator/LoadingAndErrorIndicator.tsx b/application/frontend/src/components/LoadingAndErrorIndicator/LoadingAndErrorIndicator.tsx
@@ -10,6 +10,8 @@ export const LoadingAndErrorIndicator: FunctionComponent<LoadingAndErrorIndicato
   loading,
   error,
 }) => {
+  console.log(loading);
+  console.log(error);
   return (
     <>
       {loading && <Loader inline="centered" size="huge" active={loading} />}

diff --git a/application/frontend/src/pages/BrowseRootCres/browseRootCres.tsx b/application/frontend/src/pages/BrowseRootCres/browseRootCres.tsx
@@ -1,8 +1,7 @@
 import './browseRootCres.scss';
 
+import axios from 'axios';
 import React, { useContext, useEffect, useMemo, useState } from 'react';
-import { useQuery } from 'react-query';
-import { useParams } from 'react-router-dom';
 
 import { DocumentNode } from '../../components/DocumentNode';
 import { ClearFilterButton, FilterButton } from '../../components/FilterButton/FilterButton';
@@ -17,30 +16,29 @@ export const BrowseRootCres = () => {
   const { apiUrl } = useEnvironment();
   const [loading, setLoading] = useState<boolean>(false);
   const [display, setDisplay] = useState<Document[]>();
-  const { error, data, refetch } = useQuery<{ data: Document }, string>(
-    'cre',
-    () =>
-      fetch(`${apiUrl}/root_cres`)
-        .then((res) => res.json())
-        .then((resjson) => {
-          setDisplay(resjson.data);
-          return resjson;
-        }),
-    {
-      retry: false,
-      enabled: false,
-      onSettled: () => {
-        setLoading(false);
-      },
-    }
-  );
+  const [error, setError] = useState<string | Object | null>(null);
 
   useEffect(() => {
-    window.scrollTo(0, 0);
     setLoading(true);
-    refetch();
-  }, []);
+    window.scrollTo(0, 0);
 
+    axios
+      .get(`${apiUrl}/root_cres`)
+      .then(function (response) {
+        setError(null);
+        setDisplay(response?.data?.data);
+      })
+      .catch(function (axiosError) {
+        if (axiosError.response.status === 404) {
+          setError('Standard does not exist in the DB, please check your search parameters');
+        } else {
+          setError(axiosError.response);
+        }
+      })
+      .finally(() => {
+        setLoading(false);
+      });
+  }, []);
   return (
     <div className="cre-page">
       <h1 className="standard-page__heading">Root CREs:</h1>

diff --git a/application/frontend/src/pages/CommonRequirementEnumeration/CommonRequirementEnumeration.tsx b/application/frontend/src/pages/CommonRequirementEnumeration/CommonRequirementEnumeration.tsx
@@ -1,7 +1,7 @@
 import './commonRequirementEnumeration.scss';
 
-import React, { useContext, useEffect, useMemo, useState } from 'react';
-import { useQuery } from 'react-query';
+import axios from 'axios';
+import React, { useEffect, useMemo, useState } from 'react';
 import { useParams } from 'react-router-dom';
 
 import { DocumentNode } from '../../components/DocumentNode';
@@ -17,27 +17,32 @@ export const CommonRequirementEnumeration = () => {
   const { id } = useParams();
   const { apiUrl } = useEnvironment();
   const [loading, setLoading] = useState<boolean>(false);
-  const globalState = useContext(filterContext);
-
-  const { error, data, refetch } = useQuery<{ data: Document }, string>(
-    'cre',
-    () => fetch(`${apiUrl}/id/${id}`).then((res) => res.json()),
-    {
-      retry: false,
-      enabled: false,
-      onSettled: () => {
-        setLoading(false);
-      },
-    }
-  );
+  const [error, setError] = useState<string | Object | null>(null);
+  const [data, setData] = useState<Document | null>();
 
   useEffect(() => {
-    window.scrollTo(0, 0);
     setLoading(true);
-    refetch();
+    window.scrollTo(0, 0);
+
+    axios
+      .get(`${apiUrl}/id/${id}`)
+      .then(function (response) {
+        setError(null);
+        setData(response?.data?.data);
+      })
+      .catch(function (axiosError) {
+        if (axiosError.response.status === 404) {
+          setError('CRE does not exist in the DB, please check your search parameters');
+        } else {
+          setError(axiosError.response);
+        }
+      })
+      .finally(() => {
+        setLoading(false);
+      });
   }, [id]);
 
-  const cre = data?.data;
+  const cre = data;
   let filteredCRE;
   if (cre != undefined) {
     filteredCRE = applyFilters(JSON.parse(JSON.stringify(cre))); // dirty deepcopy

diff --git a/application/frontend/src/pages/Deeplink/Deeplink.tsx b/application/frontend/src/pages/Deeplink/Deeplink.tsx
@@ -1,5 +1,5 @@
+import axios from 'axios';
 import React, { useEffect, useState } from 'react';
-import { useQuery } from 'react-query';
 import { useLocation, useParams } from 'react-router-dom';
 
 import { LoadingAndErrorIndicator } from '../../components/LoadingAndErrorIndicator';
@@ -10,6 +10,8 @@ export const Deeplink = () => {
   let { type, nodeName, section, subsection, tooltype, sectionID } = useParams();
   const { apiUrl } = useEnvironment();
   const [loading, setLoading] = useState<boolean>(false);
+  const [error, setError] = useState<string | Object | null>(null);
+  const [data, setData] = useState<Document[] | null>();
   const search = useLocation().search;
   section = section ? section : new URLSearchParams(search).get('section');
   subsection = subsection ? subsection : new URLSearchParams(search).get('subsection');
@@ -27,25 +29,28 @@ export const Deeplink = () => {
     (tooltype != null ? `tooltype=${tooltype}&` : '') +
     (sectionID != null ? `sectionID=${sectionID}&` : '');
 
-  const { error, data, refetch } = useQuery<{ standards: Document[] }, string>(
-    'deeplink',
-    () => fetch(url).then((res) => res.json()),
-    {
-      retry: false,
-      enabled: false,
-      onSettled: () => {
-        setLoading(false);
-      },
-    }
-  );
   useEffect(() => {
     window.scrollTo(0, 0);
     setLoading(true);
-    refetch();
+    axios
+      .get(url)
+      .then(function (response) {
+        setError(null);
+        setData(response.data?.standard);
+      })
+      .catch(function (axiosError) {
+        if (axiosError.response.status === 404) {
+          setError('Standard does not exist, please check your search parameters');
+        } else {
+          setError(axiosError.response);
+        }
+      })
+      .finally(() => {
+        setLoading(false);
+      });
   }, [type, nodeName]);
-  // const { error, data, } = useQuery<{ standards: Document[]; }, string>('deeplink', () => fetch(url).then((res) => res.json()), {});
 
-  const documents = data?.standards || [];
+  const documents = data || [];
   return (
     <>
       <div className="standard-page">

diff --git a/application/frontend/src/pages/Graph/Graph.tsx b/application/frontend/src/pages/Graph/Graph.tsx
@@ -1,3 +1,4 @@
+import axios from 'axios';
 import Elk, { ElkEdge, ElkNode, ElkPort, ElkPrimitiveEdge } from 'elkjs';
 import React, { useEffect, useState } from 'react';
 import ReactFlow, {
@@ -14,7 +15,6 @@ import ReactFlow, {
   isNode,
   removeElements,
 } from 'react-flow-renderer';
-import { useQuery } from 'react-query';
 import { useParams } from 'react-router-dom';
 import { FlowNode } from 'typescript';
 
@@ -94,22 +94,29 @@ export const Graph = () => {
   const { id } = useParams();
   const { apiUrl } = useEnvironment();
   const [loading, setLoading] = useState<boolean>(true);
+  const [error, setError] = useState<string | Object | null>(null);
+  const [data, setData] = useState<Document | null>();
 
-  const { error, data, refetch } = useQuery<{ data: Document }, string>(
-    'cre',
-    () => fetch(`${apiUrl}/id/${id}`).then((res) => res.json()),
-    {
-      retry: false,
-      enabled: false,
-      onSettled: () => {
-        setLoading(false);
-      },
-    }
-  );
   useEffect(() => {
-    window.scrollTo(0, 0);
     setLoading(true);
-    refetch();
+    window.scrollTo(0, 0);
+
+    axios
+      .get(`${apiUrl}/id/${id}`)
+      .then(function (response) {
+        setError(null);
+        setData(response?.data?.data);
+      })
+      .catch(function (axiosError) {
+        if (axiosError.response.status === 404) {
+          setError('CRE does not exist in the DB, please check your search parameters');
+        } else {
+          setError(axiosError.response);
+        }
+      })
+      .finally(() => {
+        setLoading(false);
+      });
   }, [id]);
 
   const [layout, setLayout] = useState<(Node<ReactFlowNode> | Edge<ReactFlowNode>)[]>();
@@ -119,7 +126,7 @@ export const Graph = () => {
       if (data) {
         console.log('flow running:', id);
 
-        let cre = data.data;
+        let cre = data;
         let graph = documentToReactFlowNode(cre);
         const els = await createGraphLayoutElk(graph.nodes, graph.edges);
         setLayout(els);

diff --git a/application/frontend/src/pages/Search/SearchName.tsx b/application/frontend/src/pages/Search/SearchName.tsx
@@ -16,7 +16,7 @@ export const SearchName = () => {
   const { apiUrl } = useEnvironment();
   const [loading, setLoading] = useState<boolean>(false);
   const [documents, setDocuments] = useState<Document[]>([]);
-  const [error, setError] = useState<string | null>(null);
+  const [error, setError] = useState<string | Object | null>(null);
 
   useEffect(() => {
     setLoading(true);
@@ -27,9 +27,13 @@ export const SearchName = () => {
         setDocuments(response.data);
       })
       .catch(function (axiosError) {
-        // TODO: backend errors if no matches, shoudl return
+        // TODO: backend errors if no matches, should return
         //       proper error instead.
-        setError(axiosError);
+        if (axiosError.response.status === 404) {
+          setError('No results match your search term');
+        } else {
+          setError(axiosError.response);
+        }
       })
       .finally(() => {
         setLoading(false);

diff --git a/application/frontend/src/pages/Search/components/SearchBar.tsx b/application/frontend/src/pages/Search/components/SearchBar.tsx
@@ -45,7 +45,7 @@ export const SearchBar = () => {
               });
             }}
             label={
-              <Button primary onSubmit={onSubmit}>
+              <Button id="SearchButton" primary onSubmit={onSubmit}>
                 <Icon name="search" />
                 Search
               </Button>

diff --git a/application/frontend/src/pages/Standard/Standard.tsx b/application/frontend/src/pages/Standard/Standard.tsx
@@ -1,50 +1,58 @@
 import './standard.scss';
 
+import axios from 'axios';
 import React, { useEffect, useState } from 'react';
-import { useQuery } from 'react-query';
 import { useLocation, useParams } from 'react-router-dom';
 import { Pagination } from 'semantic-ui-react';
 
 import { DocumentNode } from '../../components/DocumentNode';
 import { LoadingAndErrorIndicator } from '../../components/LoadingAndErrorIndicator';
 import { useEnvironment } from '../../hooks';
-import { Document } from '../../types';
+import { Document, PaginatedResponse } from '../../types';
 import { getDocumentDisplayName } from '../../utils/document';
 
 export const Standard = () => {
   let { type, id } = useParams();
   const { apiUrl } = useEnvironment();
   const [page, setPage] = useState<number>(1);
   const [loading, setLoading] = useState<boolean>(false);
+  const [err, setErr] = useState<string | Object | null>(null);
+  const [data, setData] = useState<PaginatedResponse | null>();
+
   if (!type) {
     type = 'standard';
   }
-  const { error, data, refetch } = useQuery<
-    { standards: Document[]; total_pages: number; page: number },
-    string
-  >('standard', () => fetch(`${apiUrl}/${type}/${id}?page=${page}`).then((res) => res.json()), {
-    retry: false,
-    enabled: false,
-    onSettled: () => {
-      setLoading(false);
-    },
-  });
 
   useEffect(() => {
     window.scrollTo(0, 0);
     setLoading(true);
-    refetch();
-  }, [page, id]);
+    axios
+      .get(`${apiUrl}/${type}/${id}?page=${page}`)
+      .then(function (response) {
+        setErr(null);
+        setData(response.data);
+      })
+      .catch(function (axiosError) {
+        if (axiosError.response.status === 404) {
+          setErr('Standard does not exist, please check your search parameters');
+        } else {
+          setErr(axiosError.response);
+        }
+      })
+      .finally(() => {
+        setLoading(false);
+      });
+  }, [id, type, page]);
 
   const documents = data?.standards || [];
 
   return (
     <>
       <div className="standard-page">
         <h4 className="standard-page__heading">{id}</h4>
-        <LoadingAndErrorIndicator loading={loading} error={error} />
+        <LoadingAndErrorIndicator loading={loading} error={err} />
         {!loading &&
-          !error &&
+          !err &&
           documents
             .sort((a, b) => getDocumentDisplayName(a).localeCompare(getDocumentDisplayName(b)))
             .map((standard, i) => (