💄 Add ExportButton to search and Standard in FE

flowirtz · Feb 25, 2022 · fe8bf83 · fe8bf83
1 parent 9f8018f
commit fe8bf83
Show file tree

Hide file tree

Showing 4 changed files with 99 additions and 80 deletions.
diff --git a/application/frontend/src/components/ExportButton/export-button.tsx b/application/frontend/src/components/ExportButton/export-button.tsx
@@ -5,7 +5,7 @@ import { Loader } from 'semantic-ui-react';
 
 interface IExportButton {
   fetchURL: string;
-  fetchParams?: string[][];
+  fetchParams?: any;
 }
 
 const openURLInNewTab = (url: string): void => {

diff --git a/application/frontend/src/pages/Search/SearchName.tsx b/application/frontend/src/pages/Search/SearchName.tsx
@@ -1,16 +1,16 @@
+import axios from 'axios';
 import React, { useEffect, useMemo, useState } from 'react';
 import { useParams } from 'react-router-dom';
-import axios from 'axios';
 
-import { useEnvironment } from '../../hooks';
+import ExportButton from '../../components/ExportButton/export-button';
 import { LoadingAndErrorIndicator } from '../../components/LoadingAndErrorIndicator';
-import { groupBy } from '../../utils/document';
+import { useEnvironment } from '../../hooks';
 import { Document } from '../../types';
-
+import { groupBy } from '../../utils/document';
 import { SearchResults } from './components/SearchResults';
 
-const CRE = "CRE";
-const STANDARD = "Standard";
+const CRE = 'CRE';
+const STANDARD = 'Standard';
 
 export const SearchName = () => {
   const { searchTerm } = useParams();
@@ -19,42 +19,50 @@ export const SearchName = () => {
   const [documents, setDocuments] = useState<Document[]>([]);
   const [error, setError] = useState<string | null>(null);
 
+  const FETCH_URL = `${apiUrl}/text_search`;
+  const FETCH_PARAMS = { params: { text: searchTerm } };
+
   useEffect(() => {
     setLoading(true);
-    axios.get(`${apiUrl}/text_search`, {params: {text: searchTerm}})
-        .then(function (response) {
-            setError(null);
-            setDocuments(response.data);
-        })
-        .catch(function (axiosError) {
-            // TODO: backend errors if no matches, shoudl return
-            //       proper error instead.
-            setError(axiosError);
-        }).finally( () => {
-            setLoading(false);
-        });
+    axios
+      .get(FETCH_URL, FETCH_PARAMS)
+      .then(function (response) {
+        setError(null);
+        setDocuments(response.data);
+      })
+      .catch(function (axiosError) {
+        // TODO: backend errors if no matches, shoudl return
+        //       proper error instead.
+        setError(axiosError);
+      })
+      .finally(() => {
+        setLoading(false);
+      });
   }, [searchTerm]);
 
-  const groupedByType = groupBy(documents, doc => doc.doctype);
+  const groupedByType = groupBy(documents, (doc) => doc.doctype);
 
   return (
     <div className="cre-page">
-        <h1 className="standard-page__heading">
-            Results matching : <i>{searchTerm}</i>
-        </h1>
-        <LoadingAndErrorIndicator loading={loading} error={error} />
-        {!loading && !error &&
-            <div className="ui grid">
-                <div className="eight wide column">
-                    <h1 className="standard-page__heading">Related CRE's</h1>
-                    {groupedByType[CRE] && <SearchResults results={groupedByType[CRE]}/>}
-                </div>
-                <div className="eight wide column">
-                    <h1 className="standard-page__heading">Related Documents</h1>
-                    {groupedByType[STANDARD] && <SearchResults results={groupedByType[STANDARD]}/>}
-                </div>
-            </div>
-        }
+      <h1 className="standard-page__heading">
+        Results matching : <i>{searchTerm}</i>
+      </h1>
+      <LoadingAndErrorIndicator loading={loading} error={error} />
+      {!loading && !error && (
+        <div className="ui grid">
+          <div className="eight wide column">
+            <h1 className="standard-page__heading">
+              Related CRE's
+              <ExportButton fetchURL={FETCH_URL} fetchParams={FETCH_PARAMS} />
+            </h1>
+            {groupedByType[CRE] && <SearchResults results={groupedByType[CRE]} />}
+          </div>
+          <div className="eight wide column">
+            <h1 className="standard-page__heading">Related Documents</h1>
+            {groupedByType[STANDARD] && <SearchResults results={groupedByType[STANDARD]} />}
+          </div>
+        </div>
+      )}
     </div>
   );
 };
diff --git a/application/frontend/src/pages/Standard/Standard.tsx b/application/frontend/src/pages/Standard/Standard.tsx
@@ -2,10 +2,11 @@ import './standard.scss';
 
 import React, { useEffect, useState } from 'react';
 import { useQuery } from 'react-query';
-import { useParams, useLocation } from 'react-router-dom';
+import { useLocation, useParams } from 'react-router-dom';
 import { Pagination } from 'semantic-ui-react';
 
 import { DocumentNode } from '../../components/DocumentNode';
+import ExportButton from '../../components/ExportButton/export-button';
 import { LoadingAndErrorIndicator } from '../../components/LoadingAndErrorIndicator';
 import { useEnvironment } from '../../hooks';
 import { Document } from '../../types';
@@ -15,18 +16,20 @@ export const Standard = () => {
   const { apiUrl } = useEnvironment();
   const [page, setPage] = useState<number>(1);
   const [loading, setLoading] = useState<boolean>(false);
-  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);
-      },
-    }
-  );
+  if (!type) {
+    type = 'standard';
+  }
+  const FETCH_URL = `${apiUrl}/${type}/${id}?page=${page}`;
+  const { error, data, refetch } = useQuery<
+    { standards: Document[]; total_pages: number; page: number },
+    string
+  >('standard', () => fetch(FETCH_URL).then((res) => res.json()), {
+    retry: false,
+    enabled: false,
+    onSettled: () => {
+      setLoading(false);
+    },
+  });
 
   useEffect(() => {
     window.scrollTo(0, 0);
@@ -36,17 +39,19 @@ export const Standard = () => {
 
   const documents = data?.standards || [];
 
-
   return (
     <>
       <div className="standard-page">
-        <h4 className="standard-page__heading">{id}</h4>
+        <h4 className="standard-page__heading">
+          {id}
+          <ExportButton fetchURL={FETCH_URL} />
+        </h4>
         <LoadingAndErrorIndicator loading={loading} error={error} />
         {!loading &&
           !error &&
           documents.map((standard, i) => (
             <div key={i} className="accordion ui fluid styled standard-page__links-container">
-              <DocumentNode node={standard} linkType={"Standard"} />
+              <DocumentNode node={standard} linkType={'Standard'} />
             </div>
           ))}
         {data && data.total_pages > 0 && (

diff --git a/application/frontend/src/pages/Standard/StandardSection.tsx b/application/frontend/src/pages/Standard/StandardSection.tsx
@@ -1,70 +1,76 @@
 import './standard.scss';
 
-import React, { useEffect, useState, useMemo } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { useQuery } from 'react-query';
 import { useParams } from 'react-router-dom';
 import { Pagination } from 'semantic-ui-react';
 
 import { DocumentNode } from '../../components/DocumentNode';
+import ExportButton from '../../components/ExportButton/export-button';
 import { LoadingAndErrorIndicator } from '../../components/LoadingAndErrorIndicator';
+import { DOCUMENT_TYPE_NAMES } from '../../const';
 import { useEnvironment } from '../../hooks';
 import { Document } from '../../types';
 import { groupLinksByType } from '../../utils';
-import { DOCUMENT_TYPE_NAMES } from '../../const';
-
 
 export const StandardSection = () => {
   const { id, section } = useParams();
   const { apiUrl } = useEnvironment();
   const [page, setPage] = useState<number>(1);
   const [loading, setLoading] = useState<boolean>(false);
-  
+
   const getSectionParameter = (): string => {
     return section ? `&section=${encodeURIComponent(section)}` : '';
-  }
+  };
 
-  const { error, data, refetch } = useQuery<{ standards: Document[]; total_pages: number; page: number }, string>(
-    'standard section',
-    () => fetch(`${apiUrl}/standard/${id}?page=${page}${getSectionParameter()}`).then((res) => res.json()),
-    {
-      retry: false,
-      enabled: false,
-      onSettled: () => {
-        setLoading(false);
-      },
-    }
-  );
+  const FETCH_URL = `${apiUrl}/standard/${id}?page=${page}${getSectionParameter()}`;
+  const { error, data, refetch } = useQuery<
+    { standards: Document[]; total_pages: number; page: number },
+    string
+  >('standard section', () => fetch(FETCH_URL).then((res) => res.json()), {
+    retry: false,
+    enabled: false,
+    onSettled: () => {
+      setLoading(false);
+    },
+  });
 
   useEffect(() => {
     window.scrollTo(0, 0);
     setLoading(true);
     refetch();
   }, [page, id]);
 
-  const documents = data ?.standards || [];
+  const documents = data?.standards || [];
   const document = documents[0];
   const linksByType = useMemo(() => (document ? groupLinksByType(document) : {}), [document]);
 
   return (
     <>
       <div className="standard-page section-page">
-        <h4 className="standard-page__heading">{id}</h4>
+        <h4 className="standard-page__heading">
+          {id}
+          <ExportButton fetchURL={FETCH_URL} />
+        </h4>
         <h5 className="standard-page__sub-heading">Section: {document?.section}</h5>
-        { document && document.hyperlink &&
-            <>
-              <span>Reference: </span>
-              <a href={document?.hyperlink} target="_blank"> { document.hyperlink }</a>
-            </>
-          }
+        {document && document.hyperlink && (
+          <>
+            <span>Reference: </span>
+            <a href={document?.hyperlink} target="_blank">
+              {' '}
+              {document.hyperlink}
+            </a>
+          </>
+        )}
         <LoadingAndErrorIndicator loading={loading} error={error} />
-        {!loading &&
-          !error &&
+        {!loading && !error && (
           <div className="cre-page__links-container">
             {Object.keys(linksByType).length > 0 &&
               Object.entries(linksByType).map(([type, links]) => (
                 <div className="cre-page__links" key={type}>
                   <div className="cre-page__links-header">
-                    {document.doctype}: {document.name} - {document.section} <b>{DOCUMENT_TYPE_NAMES[type]}</b>:
+                    {document.doctype}: {document.name} - {document.section}{' '}
+                    <b>{DOCUMENT_TYPE_NAMES[type]}</b>:
                   </div>
                   {links.map((link, i) => (
                     <div key={i} className="accordion ui fluid styled cre-page__links-container">
@@ -74,7 +80,7 @@ export const StandardSection = () => {
                 </div>
               ))}
           </div>
-        }
+        )}
 
         {data && data.total_pages > 0 && (
           <div className="pagination-container">