Refactor client side services

client/src/App.tsx

@@ -1,12 +1,16 @@
 import { ErrorBoundary } from 'components/ErrorBoundary';
 import React, { ReactElement, useEffect } from 'react';
-import { RouterProvider, useNavigate } from 'react-router-dom';
+import { RouterProvider } from 'react-router-dom';
 import { router } from 'routes';
-import { useAppDispatch, useAppSelector } from 'store';
-import { getRcraProfile, selectRcraProfile } from 'store/profileSlice';
-import { getHaztrakProfile } from 'store/profileSlice/profile.slice';
-import { selectUserName } from 'store/userSlice';
-import { getHaztrakUser } from 'store/userSlice/user.slice';
+import {
+  getHaztrakProfile,
+  getHaztrakUser,
+  getRcraProfile,
+  selectRcraProfile,
+  selectUserName,
+  useAppDispatch,
+  useAppSelector,
+} from 'store';
 import './App.scss';
 
 function App(): ReactElement {

client/src/components/Layout/PrivateRoute.tsx

@@ -1,7 +1,6 @@
 import React, { ReactElement } from 'react';
 import { Navigate } from 'react-router-dom';
-import { useAppSelector } from 'store';
-import { selectUserName } from 'store/userSlice';
+import { selectUserName, useAppSelector } from 'store';
 
 interface Props {
   children: any;

client/src/components/Layout/Sidebar.spec.tsx

@@ -13,7 +13,7 @@ describe('Sidebar', () => {
     const username = 'testuser1';
     renderWithProviders(<Sidebar />, {
       preloadedState: {
-        user: {
+        auth: {
           user: { username: username, isLoading: false },
           token: 'fakeToken',
           loading: false,

client/src/components/Layout/Sidebar.tsx

@@ -30,7 +30,7 @@ export function Sidebar(): ReactElement | null {
   const [helpNav, setHelpNav] = useState(false);
   const [mtnNav, setMtnNav] = useState(false);
 
-  const authUser = useSelector((state: RootState) => state.user.user);
+  const authUser = useSelector((state: RootState) => state.auth.user);
   if (!authUser) return null;
 
   return (

client/src/components/Layout/TopNav.spec.tsx

@@ -13,7 +13,7 @@ describe('TopNav', () => {
     const username = 'testuser1';
     renderWithProviders(<TopNav />, {
       preloadedState: {
-        user: {
+        auth: {
           user: { username: username, isLoading: false },
           token: 'fakeToken',
           loading: false,

client/src/components/Layout/TopNav.tsx

@@ -9,7 +9,7 @@ import { faArrowRightFromBracket, faBars, faGear, faUser } from '@fortawesome/fr
 import logo from 'assets/haztrak-logos/haztrak-logo-zip-file/svg/logo-no-background.svg';
 
 export function TopNav() {
-  const authUser = useSelector((state: RootState) => state.user.user);
+  const authUser = useSelector((state: RootState) => state.auth.user);
   const dispatch = useDispatch();
   const navigation = useNavigate();
   const logout = () => {

client/src/components/Manifest/Address/AddressForm.tsx

@@ -1,5 +1,5 @@
 import { GeneratorAddress } from 'components/Manifest/Address/GeneratorAddress';
-import React, { useContext } from 'react';
+import React from 'react';
 
 interface Props {
   addressType: 'siteAddress' | 'mailingAddress';

client/src/components/Manifest/Handler/HandlerSearchForm.tsx

@@ -12,8 +12,7 @@ import {
   useFormContext,
 } from 'react-hook-form';
 import Select from 'react-select';
-import { useAppDispatch } from 'store';
-import { siteApi } from 'store/site.slice';
+import { haztrakApi, useAppDispatch } from 'store';
 
 interface Props {
   handleClose: () => void;
@@ -78,7 +77,7 @@ export function HandlerSearchForm({
     if (value.length >= 5) {
       setRcrainfoSitesLoading(true);
       const rcrainfoSites = await dispatch(
-        siteApi.endpoints?.searchRcrainfoSites.initiate({
+        haztrakApi.endpoints?.searchRcrainfoSites.initiate({
           siteType: handlerType,
           siteId: value,
         })
@@ -89,7 +88,7 @@ export function HandlerSearchForm({
           variant: 'danger',
         });
         const knownRcraSites = await dispatch(
-          siteApi.endpoints?.searchRcraSites.initiate({
+          haztrakApi.endpoints?.searchRcraSites.initiate({
             siteType: handlerType,
             siteId: value,
           })

client/src/components/Manifest/ManifestForm.tsx

@@ -9,9 +9,8 @@ import React, { createContext, useState } from 'react';
 import { Alert, Button, Col, Form, Row } from 'react-bootstrap';
 import { FormProvider, SubmitHandler, useFieldArray, useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
-import { htApi } from 'services';
+import { manifestApi } from 'services/manifestApi';
 import { addNotification, useAppDispatch } from 'store';
-import { TaskStatus } from 'store/task.slice';
 import { ContactForm, PhoneForm } from './Contact';
 import { AddHandler, GeneratorForm, Handler } from './Handler';
 import { Manifest, manifestSchema, ManifestStatus } from './manifestSchema';
@@ -95,14 +94,13 @@ export function ManifestForm({
 
   const onSubmit: SubmitHandler<Manifest> = (data: Manifest) => {
     console.log('Manifest Submitted', data);
-    htApi
-      .post<TaskStatus | Manifest>('/rcra/manifest', data)
+    manifestApi
+      .createManifest(data)
       .then((response) => {
         return response;
       })
       .then((r) => {
         if ('manifestTrackingNumber' in r.data) {
-          console.log("congratulations! it's a manifest!");
           navigate(`/manifest/${r.data.manifestTrackingNumber}/view`);
         }
         if ('taskId' in r.data) {
@@ -116,7 +114,6 @@ export function ManifestForm({
               }
             )
           );
-          console.log('r', r);
           setTaskId(r.data.taskId);
           toggleShowUpdatingRcra();
         }

client/src/components/Manifest/QuickerSign/QuickerSignForm.tsx

@@ -1,6 +1,6 @@
 import { faFileSignature } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { AxiosError, AxiosResponse } from 'axios';
+import { AxiosError } from 'axios';
 import { HtForm } from 'components/Ht';
 import { Handler, RcraSiteType } from 'components/Manifest/manifestSchema';
 import { QuickerSignature } from 'components/Manifest/QuickerSign/quickerSignSchema';
@@ -9,9 +9,8 @@ import React from 'react';
 import { Button, Col, Container, Form, ListGroup, Row } from 'react-bootstrap';
 import { SubmitHandler, useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
-import { htApi } from 'services';
-import { addNotification, useAppDispatch, useAppSelector } from 'store';
-import { selectUserName } from 'store/userSlice';
+import { manifestApi } from 'services/manifestApi';
+import { addNotification, selectUserName, useAppDispatch, useAppSelector } from 'store';
 
 interface QuickerSignProps {
   mtn: Array<string>;
@@ -58,14 +57,14 @@ export function QuickerSignForm({ mtn, mtnHandler, handleClose, siteType }: Quic
         transporterOrder: mtnHandler.order,
       };
     }
-    htApi
-      .post('rcra/manifest/sign', signature)
-      .then((response: AxiosResponse) => {
+    manifestApi
+      .createQuickSignature(signature)
+      .then((response) => {
         dispatch(
           addNotification({
-            uniqueId: response.data.task,
+            uniqueId: response.data.taskId,
             createdDate: new Date().toISOString(),
-            message: `e-Manifest electronic signature task started. Task ID: ${response.data.task}`,
+            message: `e-Manifest electronic signature task started. Task ID: ${response.data.taskId}`,
             status: 'Info',
             read: false,
             timeout: 5000,

client/src/components/Manifest/SiteSelect/SiteSelect.tsx

@@ -3,8 +3,7 @@ import { RcraSite } from 'components/RcraSite';
 import React from 'react';
 import { Control, Controller } from 'react-hook-form';
 import Select from 'react-select';
-import { useAppSelector } from 'store';
-import { selectHaztrakSites, selectRcrainfoSites } from 'store/profileSlice/profile.slice';
+import { selectHaztrakSites, useAppSelector } from 'store';
 
 interface SiteSelectProps<T> {
   control: Control;

client/src/components/Manifest/UpdateRcra/UpdateRcra.tsx

@@ -2,7 +2,7 @@ import { HtSpinner } from 'components/Ht';
 import React from 'react';
 import { Toast, ToastContainer } from 'react-bootstrap';
 import { Navigate } from 'react-router-dom';
-import { useGetTaskStatusQuery } from 'store/task.slice';
+import { useGetTaskStatusQuery } from 'store';
 
 interface UpdateRcraProps {
   taskId: string;

client/src/components/Manifest/WasteLine/DotIdSelect.tsx

@@ -2,8 +2,7 @@ import { WasteLine } from 'components/Manifest/WasteLine/wasteLineSchema';
 import React from 'react';
 import { Controller, useFormContext } from 'react-hook-form';
 import AsyncSelect from 'react-select/async';
-import { useAppDispatch } from 'store';
-import { wasteCodeApi } from 'store/wasteCode.slice';
+import { haztrakApi, useAppDispatch } from 'store';
 
 interface DotIdOption {
   label: string;
@@ -22,7 +21,7 @@ export function DotIdSelect() {
    * @param inputValue
    */
   const getDotIdNumbers = async (inputValue: string) => {
-    const response = await dispatch(wasteCodeApi.endpoints.getDotIdNumbers.initiate(inputValue));
+    const response = await dispatch(haztrakApi.endpoints.getDotIdNumbers.initiate(inputValue));
     if (response.data) {
       return response.data.map((dotIdNumber) => {
         return { label: dotIdNumber, value: dotIdNumber } as DotIdOption;

client/src/components/Manifest/WasteLine/HazardousWasteForm/HazardousWasteForm.tsx

@@ -6,7 +6,7 @@ import React, { useContext } from 'react';
 import { Col, Row } from 'react-bootstrap';
 import { Controller, useFormContext } from 'react-hook-form';
 import Select, { components, GroupBase, MultiValueProps, StylesConfig } from 'react-select';
-import { useGetFedWasteCodesQuery } from 'store/wasteCode.slice';
+import { useGetFedWasteCodesQuery } from 'store';
 import { ErrorMessage } from '@hookform/error-message';
 
 interface HazardousWasteFormProps {

client/src/components/Manifest/WasteLine/HazardousWasteForm/StateWasteCodeSelect.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Controller, useFormContext } from 'react-hook-form';
 import Select, { components } from 'react-select';
-import { useGetStateWasteCodesQuery } from 'store/wasteCode.slice';
+import { useGetStateWasteCodesQuery } from 'store';
 
 interface StateWasteCodeSelectProps {
   stateId?: string;

client/src/components/Notification/NotificationBtn.tsx

@@ -1,10 +1,9 @@
+import { faEnvelope } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React from 'react';
 import { Badge, Button } from 'react-bootstrap';
 import { Link } from 'react-router-dom';
-import { useAppSelector } from 'store';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faEnvelope } from '@fortawesome/free-solid-svg-icons';
-import { selectNotifications } from 'store/notificationSlice';
+import { selectNotifications, useAppSelector } from 'store';
 
 export function NotificationBtn() {
   const notifications = useAppSelector(selectNotifications);

client/src/components/Notification/NotificationRow.tsx

@@ -2,9 +2,7 @@ import { faCircleNotch, faTrash } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React from 'react';
 import { Button } from 'react-bootstrap';
-import { removeNotification, useAppDispatch } from 'store';
-import { HtNotification } from 'store/notificationSlice/notification.slice';
-import { useGetTaskStatusQuery } from 'store/task.slice';
+import { HtNotification, removeNotification, useAppDispatch, useGetTaskStatusQuery } from 'store';
 
 interface NotificationRowProps {
   notification: HtNotification;

client/src/components/RcraProfile/RcraProfile.tsx

@@ -1,15 +1,20 @@
 import { zodResolver } from '@hookform/resolvers/zod';
 import { RcraApiUserBtn } from 'components/buttons';
-import { HtForm } from 'components/Ht';
+import { HtForm, HtSpinner } from 'components/Ht';
 import React, { useState } from 'react';
 import { Button, Col, Container, Form, Row, Table } from 'react-bootstrap';
 import { useForm } from 'react-hook-form';
 import { Link } from 'react-router-dom';
-import { htApi } from 'services';
-import { HtApi } from 'services/htApi';
-import { addNotification, useAppDispatch, useAppSelector } from 'store';
-import { getRcraProfile, updateProfile } from 'store/profileSlice';
-import { RcrainfoProfileState, selectHaztrakSites } from 'store/profileSlice/profile.slice';
+import { UserApi } from 'services';
+import {
+  addNotification,
+  getRcraProfile,
+  RcrainfoProfileState,
+  selectHaztrakSites,
+  updateProfile,
+  useAppDispatch,
+  useAppSelector,
+} from 'store';
 import { z } from 'zod';
 
 interface ProfileViewProps {
@@ -28,7 +33,7 @@ export function RcraProfile({ profile }: ProfileViewProps) {
   const [editable, setEditable] = useState(false);
   const [profileLoading, setProfileLoading] = useState(false);
   const userSites = useAppSelector(selectHaztrakSites);
-  const { rcraSites, loading, ...formValues } = profile;
+  const { rcraSites, isLoading, ...formValues } = profile;
   const dispatch = useAppDispatch();
 
   const {
@@ -48,8 +53,7 @@ export function RcraProfile({ profile }: ProfileViewProps) {
   const onSubmit = (data: RcraProfileForm) => {
     setProfileLoading(!profileLoading);
     setEditable(!editable);
-    htApi
-      .put(`/rcra/profile/${profile.user}`, data)
+    UserApi.updateRcrainfoProfile({ username: profile.user, data: data })
       .then((r) => {
         dispatch(updateProfile(r.data));
       })
@@ -58,6 +62,14 @@ export function RcraProfile({ profile }: ProfileViewProps) {
       .catch((r) => console.error(r));
   };
 
+  if (profile.isLoading) {
+    return (
+      <Container>
+        <HtSpinner />
+      </Container>
+    );
+  }
+
   return (
     <>
       <HtForm onSubmit={handleSubmit(onSubmit)}>
@@ -186,8 +198,8 @@ export function RcraProfile({ profile }: ProfileViewProps) {
           className="mx-2"
           variant="primary"
           onClick={() => {
-            HtApi.syncRcrainfoProfile()
-              .then((data) => {
+            UserApi.syncRcrainfoProfile()
+              .then(({ data }) => {
                 dispatch(
                   addNotification({
                     uniqueId: data.taskId,

client/src/components/UserProfile/SitePermissions.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Table } from 'react-bootstrap';
 import { Link } from 'react-router-dom';
-import { HaztrakProfileSite } from 'store/profileSlice/profile.slice';
+import { HaztrakProfileSite } from 'store';
 
 interface SitePermissionsProps {
   sites?: Record<string, HaztrakProfileSite>;

client/src/components/UserProfile/UserProfile.spec.tsx

@@ -5,10 +5,10 @@ import { UserProfile } from 'components/UserProfile/UserProfile';
 import { rest } from 'msw';
 import { setupServer } from 'msw/node';
 import React from 'react';
-import { HaztrakUser } from 'store/userSlice/user.slice';
+import { HaztrakUser, ProfileState } from 'store';
 import { renderWithProviders, screen } from 'test-utils';
 import { API_BASE_URL } from 'test-utils/mock/handlers';
-import { vi, beforeAll, afterAll, afterEach, describe, test, expect } from 'vitest';
+import { afterAll, afterEach, beforeAll, describe, expect, test, vi } from 'vitest';
 
 const DEFAULT_USER: HaztrakUser = {
   username: 'test',
@@ -41,7 +41,10 @@ describe('UserProfile', () => {
       username: 'test',
       firstName: 'David',
     };
-    renderWithProviders(<UserProfile user={user} />, {});
+    const profile: ProfileState = {
+      user: 'test',
+    };
+    renderWithProviders(<UserProfile user={user} profile={profile} />, {});
     expect(screen.getByRole('textbox', { name: 'First Name' })).toHaveValue(user.firstName);
     expect(screen.getByText(user.username)).toBeInTheDocument();
   });
@@ -51,7 +54,10 @@ describe('UserProfile', () => {
     const user: HaztrakUser = {
       ...DEFAULT_USER,
     };
-    renderWithProviders(<UserProfile user={user} />, {});
+    const profile: ProfileState = {
+      user: 'test',
+    };
+    renderWithProviders(<UserProfile user={user} profile={profile} />, {});
     const editButton = screen.getByRole('button', { name: 'Edit' });
     const emailTextBox = screen.getByRole('textbox', { name: 'Email' });
     // Act