Merge pull request #5 from DiSSCo/ReferenceCollectionsLook

Add Reference collections look, make filters function and add experti…

src/App.css

@@ -50,7 +50,7 @@ code {
 a {
   margin: 0 !important;
   padding: 0 !important;
-  color: inherit !important;
+  color: inherit;
   text-decoration: none !important;
 }
 
@@ -178,6 +178,11 @@ p {
   background: linear-gradient(180deg, rgba(249, 250, 252, 1) 10%, rgba(255, 238, 227, 1) 30%, rgba(255, 210, 178, 1) 60%, rgba(255, 238, 227, 1) 95%, rgba(249, 246, 244, 1) 100%);
 }
 
+.gradient-secondary {
+  background: rgb(249, 250, 252);
+  background: linear-gradient(180deg, rgba(249, 250, 252, 1) 10%, rgba(236, 248, 244, 1) 30%, rgba(198, 235, 222, 1) 60%, rgba(236, 248, 244, 1) 95%, rgba(249, 246, 244, 1) 100%);
+}
+
 /* Border */
 .b-primary {
   border: 1px solid var(--primary);

src/api/taxonomicService/GetTaxonomicServices.ts

@@ -11,16 +11,16 @@ import ReferenceCollection from 'sources/mock/ReferenceCollection.json';
  * @param pageNumber The number of the current page of records
  * @returns An array of Taxonomic Service instances or an empty array
  */
-const GetTaxonomicServices = async ({ pageNumber }: { pageNumber: number }) => {
-    const pageSize: number = 12;
+const GetTaxonomicServices = async ({ pageNumber, pageSize, searchFilters }: { pageNumber: number, pageSize: number, searchFilters: { [searchFilter: string]: string } }) => {
+    /* Base variables */
     let taxonomicServices: TaxonomicService[] = [];
     let links: Dict = {};
 
     try {
         let result: { data: JSONResultArray } = {
             data: {
                 data: [
-                    { ...AcceptedTaxonomicService.data },
+                    ...searchFilters?.taxonomicServiceType !== 'referenceCollection' ? [{ ...AcceptedTaxonomicService.data }] : [],
                     { ...ReferenceCollection.data }
                 ],
                 links: {

src/app/Hooks.ts

@@ -1,5 +1,6 @@
 /* Import Dependencies */
 import { useEffect, useState } from 'react';
+import { useSearchParams } from 'react-router-dom';
 import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
 
 /* Import Types */
@@ -66,14 +67,26 @@ const useFetch = () => {
  * Paginator Hook for handling pagination with fetch requests and page numbers
  * @returns Instance of hook
  */
-const usePaginator = ({ Method, Handler, key, currentRecords }: { Method: Function, Handler: Function, key?: string, currentRecords?: Dict[] }) => {
+const usePaginator = ({ Method, Handler, pageSize, key, allowSearchParams = false, currentRecords }:
+    { Method: Function, Handler: Function, pageSize: number, key?: string, allowSearchParams: boolean, currentRecords?: Dict[] }
+) => {
+    /* Hooks */
+    const [searchParams] = useSearchParams();
+
     /* Base variables */
     const [records, setRecords] = useState<Dict[]>(currentRecords ?? []);
     const [links, setLinks] = useState<Dict>({});
     const [pageNumber, setPageNumber] = useState<number>(1);
-    const pageSize: number = 12;
     const [loading, setLoading] = useState<boolean>(false);
 
+    /* Get search filters from search params */
+    const searchFilters = [...searchParams.entries()].reduce((filtersObject, [key, value]) => {
+        return {
+            ...filtersObject,
+            [key]: value
+        }
+    }, {});
+
     const Next = () => {
         if ('next' in links) {
             setPageNumber(pageNumber + 1);
@@ -101,7 +114,7 @@ const usePaginator = ({ Method, Handler, key, currentRecords }: { Method: Functi
         setTimeout(() => {
             /* Fetch data */
             (async () => {
-                const result = await Method({ pageNumber, pageSize });
+                const result = await Method({ pageNumber, pageSize, ...(allowSearchParams && { searchFilters }) });
 
                 if (result) {
                     if (result?.links) {

src/app/Routes.tsx

@@ -6,6 +6,8 @@ import Home from "components/home/Home";
 import Search from "components/search/Search";
 import TaxonomicService from "components/taxonomicService/TaxonomicService";
 import TaxonomicServiceForm from "components/taxonomicService/TaxonomicServiceForm";
+import Expertise from "components/expertise/Expertise";
+import NotFound404 from "components/general/NotFound404/NotFound404";
 
 
 /* Routes for application */
@@ -16,7 +18,11 @@ const routes = [
     <Route key="search" path="/search" element={<Search />} />,
     /* Taxonomic Service */
     <Route key="taxonomicService" path="/ts/:prefix/:suffix/:version?" element={<TaxonomicService />} />,
-    <Route key="taxonomicService/add" path="/ts/add" element={<TaxonomicServiceForm />} />
+    <Route key="taxonomicService/add" path="/ts/add" element={<TaxonomicServiceForm />} />,
+    /* Expertise */
+    <Route key="expertise" path="/expertise" element={<Expertise />} />,
+    /* 404 */
+    <Route key="404" path="*" element={<NotFound404 />} />
 ];
 
 

src/components/expertise/Expertise.tsx

@@ -0,0 +1,34 @@
+/* Import Dependencies */
+import { Container, Row, Col } from 'react-bootstrap';
+
+/* Import Components */
+import Header from 'components/general/header/Header';
+import Footer from 'components/general/footer/Footer';
+
+
+/**
+ * Component that renders the Expertise page
+ * @returns JSX Component
+ */
+const Expertise = () => {
+    return (
+        <div className="h-100 d-flex flex-column">
+            {/* Render Header */}
+            <Header />
+
+            {/* Expertise page body */}
+            <Container fluid className="flex-grow-1 overflow-hidden">
+                <Row className="h-100">
+                    <Col className="d-flex flex-column justify-content-center align-items-center">
+                        <p className="fs-2 fw-lightBold">This page will be implemented later this year</p>
+                    </Col>
+                </Row>
+            </Container>
+
+            {/* Render Footer */}
+            <Footer />
+        </div>
+    );
+}
+
+export default Expertise;

src/components/general/NotFound404/NotFound404.tsx

@@ -0,0 +1,40 @@
+/* Import Dependencies */
+import { Container, Row, Col } from 'react-bootstrap';
+import { Link } from 'react-router-dom';
+
+/* Import Components */
+import Header from '../header/Header';
+import Footer from '../footer/Footer';
+
+
+const NotFound404 = () => {
+    return (
+        <div className="h-100 d-flex flex-column">
+            {/* Render header */}
+            <Header />
+
+            {/* Render not found 404 page */}
+            <Container fluid className="flex-grow-1">
+                <Row className="h-100">
+                    <Col className="d-flex flex-column justify-content-center align-items-center">
+                        <p className="fs-2 fw-lightBold">404 - Page not found</p>
+                        <p className="mt-3">Looks like the taxonomic tree ends here...</p>
+                        <p>
+                            Please try again or
+                            <Link to="/"
+                                className="tc-primary"
+                            >
+                                {` go back to home`}
+                            </Link>
+                        </p>
+                    </Col>
+                </Row>
+            </Container>
+
+            {/* Render footer */}
+            <Footer />
+        </div>
+    );
+};
+
+export default NotFound404;

src/components/general/buttons/Button.tsx

@@ -1,33 +1,44 @@
+/* Import Dependencies */
+import classNames from 'classnames';
+
 /* Import Styles */
 import styles from './buttons.module.scss';
 
 
 /* Props Type */
 interface Props {
-    children?: string,
+    children?: string | JSX.Element,
     type: 'button' | 'submit',
-    variant: 'primary' | 'secondary',
-    OnClick: Function
+    variant: 'primary' | 'secondary' | 'blank',
+    className?: string,
+    OnClick?: Function
 };
 
 
 /** Component that renders a custom button according to the appliation's style
     * @param children String to be placed in button
     * @param type The type of the button, e.g. 'button' or 'submit'
     * @param variant The variant of the button, impacts styling
+    * @param className Additional class names to be added to the button
     * @param OnClick The event to be fired when clicking on the button
 */
 const Button = (props: Props) => {
-    const { children, type, variant, OnClick } = props;
+    const { children, type, variant, className, OnClick } = props;
+
+    /* ClassNames */
+    const buttonClass = classNames({
+        'px-4 py-2': variant !== 'blank',
+        [`${className}`]: className
+    });
 
     return (
         <button type={type}
-            className={`${styles[variant]} fs-4 fw-bold px-3 py-2 b-none`}
-            onClick={() => OnClick()}
+            className={`${styles.button} ${styles[variant]} ${buttonClass} fs-4 fw-bold b-none br-round`}
+            onClick={() => OnClick?.()}
         >
             {children}
         </button>
     );
-}
+};
 
 export default Button;

src/components/general/buttons/buttons.module.scss

@@ -1,10 +1,22 @@
+/* Custom styling for a custom button component */
+.button {
+    background-color: transparent;
+    transition: 0.3s;
+    color: inherit;
+}
+
+.button:hover {
+    filter: brightness(130%);
+}
+
+
 /* Primary variant */
 .primary {
     background-color: var(--primary);
-    color: white;
-    transition: 0.4s;
+    color: white;   
 }
 
-.primary:hover {
-    filter: brightness(130%);
+.secondary {
+    background-color: var(--secondary);
+    color: white;
 }

src/components/home/Home.tsx

@@ -65,15 +65,15 @@ const Home = () => {
                                         <HomeCategory title="Reference Collections"
                                             subTitle="Go explore"
                                             count={84}
-                                            link="/search"
+                                            link="/search?taxonomicServiceType=referenceCollection"
                                             color="secondary"
                                         />
                                     </Col>
                                     <Col lg={{ span: 4 }}>
                                         <HomeCategory title="Expertise Taxonomists"
                                             subTitle="Go engage"
                                             count={113}
-                                            link="/"
+                                            link="/expertise"
                                             color="tertiary"
                                         />
                                     </Col>

src/components/search/Search.tsx

@@ -1,5 +1,7 @@
 /* Import Dependencies */
+import classNames from 'classnames';
 import { Container, Row, Col } from 'react-bootstrap';
+import { useSearchParams } from 'react-router-dom';
 
 /* Import Hooks */
 import { usePaginator, useAppSelector, useAppDispatch } from 'app/Hooks';
@@ -29,6 +31,7 @@ import { Button, Spinner } from 'components/general/CustomComponents';
 const Search = () => {
     /* Hooks */
     const dispatch = useAppDispatch();
+    const [searchParams] = useSearchParams();
 
     /* Base variables */
     const taxonomicServices = useAppSelector(getTaxonomicServices);
@@ -39,17 +42,25 @@ const Search = () => {
             /* On receivel of a new page with records, add them to the total */
             dispatch(setTaxonomicServices([...taxonomicServices, ...newTaxonomicServices]));
         },
+        pageSize: 12,
         key: 'taxonomicServices',
+        allowSearchParams: true,
         currentRecords: taxonomicServices
     });
 
+    /* ClassNames */
+    const mainBodyClass = classNames({
+        'gradient-primary': true,
+        'gradient-secondary': searchParams.get('taxonomicServiceType') === 'referenceCollection'
+    });
+
     return (
         <div className="h-100 d-flex flex-column">
             {/* Render Header */}
             <Header />
 
             {/* Home page Body */}
-            <Container fluid className="flex-grow-1 gradient-primary overflow-hidden">
+            <Container fluid className={`${mainBodyClass} flex-grow-1 overflow-hidden tr-smooth`}>
                 <Row className="h-100">
                     <Col lg={{ span: 10, offset: 1 }}
                         className="h-100 d-flex flex-column pt-5"
@@ -86,7 +97,7 @@ const Search = () => {
                                     <Col className="d-flex justify-content-center">
                                         {!paginator.loading ?
                                             <Button type="button"
-                                                variant="primary"
+                                                variant={searchParams.get('taxonomicServiceType') === 'referenceCollection' ? 'secondary' : 'primary'}
                                                 OnClick={() => paginator.Next()}
                                             >
                                                 Load more

src/components/search/components/Filter.tsx

@@ -12,17 +12,19 @@ import { Dropdown, DatePicker } from 'components/general/FormComponents';
 type Props = {
     filter: FilterType,
     currentValue?: string | number | boolean | Date,
-    SetFilterValue: Function
+    SetFilterValue: Function,
+    SubmitForm: Function
 };
 
 
 /** Component that renders a filter based upon the provided filter type
     * @param filter The filter object holding a name, type and possible other properties
     * @param currentValue The current value chosen for the filter
     * @param SetFilterValue Function to set the filter value when changed
+    * @param SubmitForm Function to submit the form
 */
 const Filter = (props: Props) => {
-    const { filter, currentValue, SetFilterValue } = props;
+    const { filter, currentValue, SetFilterValue, SubmitForm } = props;
 
     switch (filter.type) {
         case 'select':
@@ -38,7 +40,10 @@ const Filter = (props: Props) => {
                     styles={{
                         color: '#FF8E3E'
                     }}
-                    OnChange={(item: DropdownItem) => SetFilterValue(item.value)}
+                    OnChange={(item: DropdownItem) => {
+                        SetFilterValue(item.value);
+                        SubmitForm();
+                    }}
                 />
             }
             return <> </>;