Rearchitect client project structure

client/src/App.tsx

@@ -1,14 +1,14 @@
-import ErrorBoundary from 'components/ErrorBoundary';
+import { ErrorBoundary } from 'components/ErrorBoundary';
 import { HtCard } from 'components/Ht';
 import { Sidebar, TopNav } from 'components/Nav';
-import PrivateRoute from 'components/PrivateRoute';
-import About from 'features/help';
-import Home from 'features/home';
-import Login from 'features/login';
-import Manifest from 'features/manifest';
-import Notifications from 'features/notifications';
-import Profile from 'features/profile';
-import Sites from 'features/site';
+import { PrivateRoute } from 'components/PrivateRoute';
+import { About } from 'features/help';
+import { Home } from 'features/home';
+import { Login } from 'features/login';
+import { Manifest } from 'features/manifest';
+import { Notifications } from 'features/notifications';
+import { Profile } from 'features/profile';
+import { Sites } from 'features/haztrakSite';
 import React, { ReactElement } from 'react';
 import { Button, Container } from 'react-bootstrap';
 import { Route, Routes, useNavigate } from 'react-router-dom';

client/src/components/ManifestForm/AdditionalInfo/AdditionalInfoForm.tsx → client/src/components/AdditionalInfo/AdditionalInfoForm.tsx

@@ -5,7 +5,7 @@ import React from 'react';
 import { Button, Col, Form, Row } from 'react-bootstrap';
 import { useFieldArray, useFormContext } from 'react-hook-form';
 import { Manifest } from 'types/manifest';
-import { WasteLine } from 'types/wasteLine';
+import { WasteLine } from 'components/Manifest/WasteLine';
 
 interface AdditionalFormProps {
   readOnly?: boolean;
@@ -14,7 +14,7 @@ interface AdditionalFormProps {
 // ToDo: this is POC source, clean up work appreciated
 //  see this example from react-hook-form
 //  https://codesandbox.io/s/6j1760jkjk
-function AdditionalInfoForm({ readOnly }: AdditionalFormProps) {
+export function AdditionalInfoForm({ readOnly }: AdditionalFormProps) {
   const { register, control } = useFormContext<Manifest | WasteLine>();
   const { fields, append, remove } = useFieldArray<Manifest | WasteLine, 'additionalInfo.comments'>(
     {
@@ -129,5 +129,3 @@ function AdditionalInfoForm({ readOnly }: AdditionalFormProps) {
     </>
   );
 }
-
-export default AdditionalInfoForm;

client/src/components/ManifestForm/AdditionalInfo/AdditionalinfoForm.spec.tsx → client/src/components/AdditionalInfo/AdditionalinfoForm.spec.tsx

@@ -2,7 +2,7 @@ import '@testing-library/jest-dom';
 import { fireEvent } from '@testing-library/react';
 import React from 'react';
 import { cleanup, renderWithProviders, screen } from 'test-utils';
-import AdditionalInfoForm from './AdditionalInfoForm';
+import { AdditionalInfoForm } from 'components/AdditionalInfo/AdditionalInfoForm';
 
 afterEach(() => {
   cleanup();

client/src/components/AdditionalInfo/index.ts

@@ -0,0 +1,5 @@
+import { AdditionalInfoForm } from './AdditionalInfoForm';
+import { AdditionalInfo, AdditionalInfoComment } from './additionalInfoSchema';
+
+export { AdditionalInfoForm };
+export type { AdditionalInfo, AdditionalInfoComment };

client/src/components/ErrorBoundary/ErrorBoundary.tsx

@@ -10,7 +10,7 @@ interface State {
   error?: Error;
 }
 
-class ErrorBoundary extends Component<Props, State> {
+export class ErrorBoundary extends Component<Props, State> {
   public state: State = {
     hasError: false,
     error: undefined,
@@ -56,5 +56,3 @@ class ErrorBoundary extends Component<Props, State> {
     return this.props.children;
   }
 }
-
-export default ErrorBoundary;

client/src/components/ErrorBoundary/index.ts

@@ -1,3 +1,3 @@
-import ErrorBoundary from './ErrorBoundary';
+import { ErrorBoundary } from './ErrorBoundary';
 
-export default ErrorBoundary;
+export { ErrorBoundary };

client/src/components/HaztrakSite/SiteTable.tsx

@@ -0,0 +1,50 @@
+import { Table } from 'react-bootstrap';
+import { HtTooltip } from 'components/Ht';
+import { Link } from 'react-router-dom';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faEye, faFileLines } from '@fortawesome/free-solid-svg-icons';
+import React from 'react';
+import { HaztrakSite } from 'components/HaztrakSite/haztrakSiteSchema';
+
+interface HtSiteTableProps {
+  sitesData: Array<HaztrakSite>;
+}
+
+export function HtSiteTable({ sitesData }: HtSiteTableProps) {
+  return (
+    <Table striped hover>
+      <thead>
+        <tr>
+          <th>Site Alias</th>
+          <th>EPA ID number</th>
+          <th className="d-grid justify-content-center">Actions</th>
+        </tr>
+      </thead>
+      <tbody>
+        {sitesData.map((site, i) => {
+          return (
+            <tr key={i}>
+              <td>{site.name}</td>
+              <td>{site.handler.epaSiteId}</td>
+              <td className="d-flex justify-content-evenly">
+                <HtTooltip text={`${site.name} Details`}>
+                  <Link to={`/site/${site.handler.epaSiteId}`} aria-label={`${site.name}Details`}>
+                    <FontAwesomeIcon icon={faEye} />
+                  </Link>
+                </HtTooltip>
+                <HtTooltip text={`${site.name}'s manifest`}>
+                  <Link
+                    to={`/site/${site.handler.epaSiteId}/manifest`}
+                    aria-label={`${site.name}Manifests`}
+                  >
+                    <FontAwesomeIcon icon={faFileLines} />
+                  </Link>
+                </HtTooltip>
+              </td>
+            </tr>
+          );
+        })}
+      </tbody>
+    </Table>
+  );
+}

client/src/components/HaztrakSite/haztrakSiteSchema.ts

@@ -0,0 +1,15 @@
+import { z } from 'zod';
+import { rcraSite } from 'components/RcraSite';
+
+const haztrakSiteSchema = z.object({
+  name: z.string(),
+  handler: rcraSite,
+});
+
+/**
+ *  The Haztrak Site type encapsulates the RCRA site model as well as other details specific to
+ *  that site. It is not directly associated with the EPA RCRAInfo system
+ *  directly and can be extended as needed. For example, Haztrak users are given permission to
+ *  haztrak sites, not RCRA sites.
+ */
+export type HaztrakSite = z.infer<typeof haztrakSiteSchema>;

client/src/components/HaztrakSite/index.ts

@@ -0,0 +1,5 @@
+import { HtSiteTable } from './SiteTable';
+import { HaztrakSite } from './haztrakSiteSchema';
+
+export { HtSiteTable };
+export type { HaztrakSite };

client/src/components/Ht/HtButton.tsx

@@ -12,7 +12,7 @@ interface HtButtonProps extends ButtonProps {
  * to easily control alignment
  * @constructor
  */
-function HtButton(props: HtButtonProps) {
+export function HtButton(props: HtButtonProps) {
   const align = props.align || 'center';
   return (
     <Col className={`text-${align}`}>
@@ -22,5 +22,3 @@ function HtButton(props: HtButtonProps) {
     </Col>
   );
 }
-
-export default HtButton;

client/src/components/Ht/HtCard/HtCard.spec.tsx

@@ -1,7 +1,7 @@
 import '@testing-library/jest-dom';
 import React from 'react';
 import { cleanup, render, screen } from 'test-utils';
-import HtCard from 'components/Ht/HtCard/HtCard';
+import { HtCard } from 'components/Ht';
 
 afterEach(() => {
   cleanup();

client/src/components/Ht/HtCard/HtCard.tsx

@@ -1,5 +1,5 @@
-import ErrorBoundary from 'components/ErrorBoundary';
-import HtSpinner from 'components/Ht/HtSpinner';
+import { ErrorBoundary } from 'components/ErrorBoundary';
+import { HtSpinner } from 'components/Ht';
 import React, { ReactElement } from 'react';
 import { Card, CardProps } from 'react-bootstrap';
 
@@ -23,7 +23,7 @@ interface SpinnerProps extends CardProps {
  *   <HtCard.Footer>submit button here<HtCard.Footer>
  * </HtCard>
  */
-function HtCard(props: CardProps): ReactElement {
+export function HtCard(props: CardProps): ReactElement {
   const baseAttributes = `my-3 shadow-lg bg-light rounded ${props.className}`;
   const classAttributes =
     props.border || props.className?.includes('border')
@@ -110,5 +110,3 @@ HtCard.Body = function (props: CardProps): ReactElement {
 HtCard.Spinner = function ({ message, className }: SpinnerProps): ReactElement {
   return <HtSpinner message={message} className={className} />;
 };
-
-export default HtCard;

client/src/components/Ht/HtCard/index.ts

@@ -1,3 +1,3 @@
-import HtCard from 'components/Ht/HtCard/HtCard';
+import { HtCard } from 'components/Ht/HtCard/HtCard';
 
-export default HtCard;
+export { HtCard };

client/src/components/Ht/HtDropdown.tsx

@@ -26,7 +26,7 @@ interface Props {
  *            ]}
  * />
  */
-function HtDropdown({ keyName, links }: Props): ReactElement {
+export function HtDropdown({ keyName, links }: Props): ReactElement {
   return (
     <Dropdown>
       <Dropdown.Toggle className="bg-transparent ht-ellipsis shadow-none">
@@ -44,5 +44,3 @@ function HtDropdown({ keyName, links }: Props): ReactElement {
     </Dropdown>
   );
 }
-
-export default HtDropdown;

client/src/components/Ht/HtForm.tsx

@@ -10,7 +10,7 @@ import {
   InputGroupProps,
 } from 'react-bootstrap';
 
-function HtForm(props: FormProps): ReactElement {
+export function HtForm(props: FormProps): ReactElement {
   return <Form {...props}>{props.children}</Form>;
 }
 
@@ -67,5 +67,3 @@ HtForm.Switch = React.forwardRef<HTMLInputElement, FormCheckProps>(
     );
   }
 );
-
-export default HtForm;

client/src/components/Ht/HtModal/HtModal.spec.tsx

@@ -1,7 +1,7 @@
 import '@testing-library/jest-dom';
 import React from 'react';
 import { cleanup, render, screen } from 'test-utils';
-import HtModal from 'components/Ht/HtModal/HtModal';
+import { HtModal } from 'components/Ht';
 
 afterEach(() => {
   cleanup();

client/src/components/Ht/HtModal/HtModal.tsx

@@ -33,7 +33,7 @@ interface HtModalHeaderProps extends ModalHeaderProps {
  *  <HtModal.Title title='sample title' />
  * </HtModal>
  */
-function HtModal({
+export function HtModal({
   showModal,
   handleClose,
   className,
@@ -99,5 +99,3 @@ HtModal.Body = function (props: ModalProps): ReactElement {
 HtModal.Footer = function (props: ModalProps): ReactElement {
   return <ModalFooter {...props}>{props.children}</ModalFooter>;
 };
-
-export default HtModal;

client/src/components/Ht/HtModal/index.ts

@@ -1,3 +1,3 @@
-import HtModal from 'components/Ht/HtModal/HtModal';
+import { HtModal } from 'components/Ht/HtModal/HtModal';
 
-export default HtModal;
+export { HtModal };

client/src/components/Ht/HtPaginate/HtPaginate.spec.tsx

@@ -1,5 +1,5 @@
 import '@testing-library/jest-dom';
-import { HtPaginate } from 'components/Ht/index';
+import { HtPaginate } from 'components/Ht';
 import React from 'react';
 import { cleanup, render, screen } from 'test-utils';
 

client/src/components/Ht/HtPaginate/HtPaginate.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import usePagination from 'hooks/usePagination';
+import { usePagination } from 'hooks/usePagination';
 import { Pagination } from 'react-bootstrap';
 
 /**
@@ -32,7 +32,7 @@ interface HtPaginateProps extends usePaginationProps {
  * defaults to 9)
  * @constructor
  */
-function HtPaginate({
+export function HtPaginate({
   totalCount,
   currentPage,
   onPageChange,
@@ -97,5 +97,3 @@ function HtPaginate({
     </div>
   );
 }
-
-export default HtPaginate;

client/src/components/Ht/HtPaginate/index.ts

@@ -1,3 +1,3 @@
-import HtPaginate from './HtPaginate';
+import { HtPaginate } from './HtPaginate';
 
-export default HtPaginate;
+export { HtPaginate };

client/src/components/Ht/HtSpinner.tsx

@@ -7,7 +7,7 @@ interface SpinnerProps {
   className?: string;
 }
 
-function HtSpinner({ message, className }: SpinnerProps): ReactElement {
+export function HtSpinner({ message, className }: SpinnerProps): ReactElement {
   return (
     <>
       <p
@@ -19,5 +19,3 @@ function HtSpinner({ message, className }: SpinnerProps): ReactElement {
     </>
   );
 }
-
-export default HtSpinner;

client/src/components/Ht/HtTooltip/HtTooltip.spec.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { cleanup, fireEvent, render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import HtTooltip from 'components/Ht/HtTooltip/index';
+import { HtTooltip } from 'components/Ht';
 
 afterEach(() => {
   cleanup();

client/src/components/Ht/HtTooltip/HtTooltip.tsx

@@ -14,7 +14,7 @@ interface HtToolTipProps extends TooltipProps {
 // renderTooltip function passed to OverlayTrigger's overlay property
 const renderTooltip = (text: string) => <Tooltip>{text}</Tooltip>;
 
-function HtTooltip(props: HtToolTipProps): ReactElement {
+export function HtTooltip(props: HtToolTipProps): ReactElement {
   // create copy of props intended for the OverlayTrigger
   const overlayProps = (({ text, children, ...props }: HtToolTipProps) => props)(props);
   return (
@@ -37,13 +37,10 @@ interface InfoTooltipProps {
  * that explains that this Field is set by EPA's RCRAInfo.
  * @constructor
  */
-function InfoIconTooltip({ message }: InfoTooltipProps) {
+export function InfoIconTooltip({ message }: InfoTooltipProps) {
   return (
     <HtTooltip text={message}>
       <FontAwesomeIcon icon={faInfoCircle} size={'1x'} className={'pb-1 text-muted'} />
     </HtTooltip>
   );
 }
-
-export default HtTooltip;
-export { InfoIconTooltip };

client/src/components/Ht/HtTooltip/index.ts

@@ -1,4 +1,3 @@
-import HtTooltip, { InfoIconTooltip } from 'components/Ht/HtTooltip/HtTooltip';
+import { HtTooltip, InfoIconTooltip } from './HtTooltip';
 
-export default HtTooltip;
-export { InfoIconTooltip };
+export { InfoIconTooltip, HtTooltip };

client/src/components/Ht/README.md

@@ -1,9 +1,6 @@
 # HT
 
-This directory contains a number of UI components that wrap around lower level components to provide default styling or
-functionality.
-
-## Overview
+This directory contains a number of wrapper UI components to provide default styling or
 
 Most of what you'll find here are Bootstrap styled components with some default
 styling and UI functionality. Components should be flexible enough to work in