From fe8bf83add235e87e0d297e0ad9f601603cf8d1c Mon Sep 17 00:00:00 2001 From: flowirtz <6052785+flowirtz@users.noreply.github.com> Date: Fri, 25 Feb 2022 11:30:02 +0000 Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Add=20ExportButton=20to=20search?= =?UTF-8?q?=20and=20Standard=20in=20FE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/ExportButton/export-button.tsx | 2 +- .../frontend/src/pages/Search/SearchName.tsx | 78 ++++++++++--------- .../frontend/src/pages/Standard/Standard.tsx | 37 +++++---- .../src/pages/Standard/StandardSection.tsx | 62 ++++++++------- 4 files changed, 99 insertions(+), 80 deletions(-) diff --git a/application/frontend/src/components/ExportButton/export-button.tsx b/application/frontend/src/components/ExportButton/export-button.tsx index 9811b995e..fe4f4e020 100644 --- 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 index b47a6f444..9082226f3 100644 --- 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([]); const [error, setError] = useState(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 (
-

- Results matching : {searchTerm} -

- - {!loading && !error && -
-
-

Related CRE's

- {groupedByType[CRE] && } -
-
-

Related Documents

- {groupedByType[STANDARD] && } -
-
- } +

+ Results matching : {searchTerm} +

+ + {!loading && !error && ( +
+
+

+ Related CRE's + +

+ {groupedByType[CRE] && } +
+
+

Related Documents

+ {groupedByType[STANDARD] && } +
+
+ )}
); }; diff --git a/application/frontend/src/pages/Standard/Standard.tsx b/application/frontend/src/pages/Standard/Standard.tsx index eb9033a28..9cf7abc8b 100644 --- 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(1); const [loading, setLoading] = useState(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 ( <>
-

{id}

+

+ {id} + +

{!loading && !error && documents.map((standard, i) => (
- +
))} {data && data.total_pages > 0 && ( diff --git a/application/frontend/src/pages/Standard/StandardSection.tsx b/application/frontend/src/pages/Standard/StandardSection.tsx index 3f4adb203..83979385d 100644 --- a/application/frontend/src/pages/Standard/StandardSection.tsx +++ b/application/frontend/src/pages/Standard/StandardSection.tsx @@ -1,39 +1,39 @@ 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(1); const [loading, setLoading] = useState(false); - + const getSectionParameter = (): string => { return section ? `§ion=${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); @@ -41,30 +41,36 @@ export const StandardSection = () => { refetch(); }, [page, id]); - const documents = data ?.standards || []; + const documents = data?.standards || []; const document = documents[0]; const linksByType = useMemo(() => (document ? groupLinksByType(document) : {}), [document]); return ( <>
-

{id}

+

+ {id} + +

Section: {document?.section}
- { document && document.hyperlink && - <> - Reference: - { document.hyperlink } - - } + {document && document.hyperlink && ( + <> + Reference: + + {' '} + {document.hyperlink} + + + )} - {!loading && - !error && + {!loading && !error && (
{Object.keys(linksByType).length > 0 && Object.entries(linksByType).map(([type, links]) => (
- {document.doctype}: {document.name} - {document.section} {DOCUMENT_TYPE_NAMES[type]}: + {document.doctype}: {document.name} - {document.section}{' '} + {DOCUMENT_TYPE_NAMES[type]}:
{links.map((link, i) => (
@@ -74,7 +80,7 @@ export const StandardSection = () => {
))}
- } + )} {data && data.total_pages > 0 && (