@@ -25,15 +24,10 @@ export function ManifestDetails() {
);
}
- return loading ? (
+ return isLoading ? (
Something went wrong
diff --git a/client/src/features/NewManifest/NewManifest.spec.tsx b/client/src/features/NewManifest/NewManifest.spec.tsx
index db68e7dbe..b74e56df8 100644
--- a/client/src/features/NewManifest/NewManifest.spec.tsx
+++ b/client/src/features/NewManifest/NewManifest.spec.tsx
@@ -1,86 +1,58 @@
import '@testing-library/jest-dom';
import userEvent from '@testing-library/user-event';
import { NewManifest } from 'features/NewManifest/NewManifest';
+import { http, HttpResponse } from 'msw';
+import { setupServer } from 'msw/node';
import React from 'react';
-import { renderWithProviders, screen } from 'test-utils';
-import { createMockRcrainfoPermissions, createMockSite } from 'test-utils/fixtures';
-import { describe, expect, test } from 'vitest';
+import { HaztrakProfileResponse } from 'store/userSlice/user.slice';
+import { cleanup, renderWithProviders, screen } from 'test-utils';
+import { createMockSite } from 'test-utils/fixtures';
+import { userApiMocks } from 'test-utils/mock';
+import { API_BASE_URL } from 'test-utils/mock/htApiMocks';
+import { afterAll, afterEach, beforeAll, describe, expect, test } from 'vitest';
+
+const mySiteId = 'VATESTGEN001';
+const mySiteName = 'My Site';
+const mySite = createMockSite({
+ name: mySiteName,
+ // @ts-ignore
+ handler: { epaSiteId: mySiteId, siteType: 'Tsdf' },
+});
+
+const mockProfile: HaztrakProfileResponse = {
+ user: 'testuser1',
+ sites: [{ site: mySite, eManifest: 'viewer' }],
+ org: {
+ name: 'my org',
+ rcrainfoIntegrated: true,
+ id: '1234',
+ },
+};
+
+const server = setupServer(...userApiMocks);
+server.use(
+ http.get(`${API_BASE_URL}/api/user/profile`, () => {
+ return HttpResponse.json({ ...mockProfile }, { status: 200 });
+ })
+);
+afterEach(() => {
+ cleanup();
+});
+beforeAll(() => server.listen());
+afterAll(() => server.close()); // Disable API mocking after the tests are done.
describe('NewManifest', () => {
- test('renders', () => {
- const mySiteId = 'VATESTGEN001';
- const mySiteName = 'My Site';
- const mySite = createMockSite({
- name: mySiteName,
- // @ts-ignore
- handler: { epaSiteId: mySiteId, siteType: 'Tsdf' },
- });
- renderWithProviders(
, {
- preloadedState: {
- profile: {
- user: 'testuser1',
- sites: { VATESTGEN001: { ...mySite, permissions: { eManifest: 'viewer' } } },
- rcrainfoProfile: {
- user: 'username',
- phoneNumber: '1231231234',
- apiUser: false,
- rcraSites: {
- VATESTGEN001: {
- epaSiteId: mySiteId,
- permissions: createMockRcrainfoPermissions(),
- },
- },
- },
- },
- },
- });
+ test('renders', async () => {
+ renderWithProviders(
);
expect(screen.getByRole('combobox', { name: /site Role/i })).toBeInTheDocument();
});
test('site type is initially disabled', () => {
- const mySiteId = 'VATESTGEN001';
- const mySiteName = 'My Site';
- const mySite = createMockSite({
- name: mySiteName,
- // @ts-ignore
- handler: { epaSiteId: mySiteId, siteType: 'Tsdf' },
- });
- renderWithProviders(
, {
- preloadedState: {
- profile: {
- user: 'testuser1',
- rcrainfoProfile: {
- user: 'username',
- phoneNumber: '1231231234',
- apiUser: false,
- rcraSites: {
- VATESTGEN001: {
- epaSiteId: mySiteId,
- permissions: createMockRcrainfoPermissions(),
- },
- },
- },
- },
- },
- });
+ renderWithProviders(
);
const siteRole = screen.getByRole('combobox', { name: /site Role/i });
expect(siteRole).toBeDisabled();
});
test('site type is not disabled after selecting a site', async () => {
- const mySiteId = 'VATESTGEN001';
- const mySiteName = 'My Site';
- const mySite = createMockSite({
- name: mySiteName,
- // @ts-ignore
- handler: { epaSiteId: mySiteId, siteType: 'Tsdf' },
- });
- renderWithProviders(
, {
- preloadedState: {
- profile: {
- user: 'testuser1',
- sites: { VATESTGEN001: { ...mySite, permissions: { eManifest: 'viewer' } } },
- },
- },
- });
+ renderWithProviders(
);
const siteSelection = screen.getByRole('combobox', { name: /site select/i });
await userEvent.click(siteSelection);
await userEvent.keyboard('{enter}');
diff --git a/client/src/features/NewManifest/NewManifest.tsx b/client/src/features/NewManifest/NewManifest.tsx
index ddfe74583..f283ca3c9 100644
--- a/client/src/features/NewManifest/NewManifest.tsx
+++ b/client/src/features/NewManifest/NewManifest.tsx
@@ -1,14 +1,15 @@
+import { createSelector } from '@reduxjs/toolkit';
import { Manifest, ManifestForm } from 'components/Manifest';
import { RcraSiteType } from 'components/Manifest/manifestSchema';
import { SiteSelect, SiteTypeSelect } from 'components/Manifest/SiteSelect';
import { RcraSite } from 'components/RcraSite';
-import { HtCard } from 'components/UI';
+import { HtCard, HtSpinner } from 'components/UI';
import { useTitle } from 'hooks';
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
import { Col, Container, Form } from 'react-bootstrap';
import { useForm } from 'react-hook-form';
import { useParams } from 'react-router-dom';
-import { siteByEpaIdSelector, useAppSelector } from 'store';
+import { useGetProfileQuery } from 'store';
/**
* NewManifest component allows a user to create a new electronic manifest.
@@ -21,7 +22,23 @@ export function NewManifest() {
useTitle('New Manifest');
const { control } = useForm();
const { siteId } = useParams();
- const rcraSite = useAppSelector(siteByEpaIdSelector(siteId));
+
+ const selectBySiteId = useMemo(() => {
+ return createSelector(
+ (res) => res.data,
+ (res, siteId) => siteId,
+ (data, siteId) => {
+ return data?.sites[siteId]?.handler ?? undefined;
+ }
+ );
+ }, []);
+
+ const { rcraSite, isLoading } = useGetProfileQuery(undefined, {
+ selectFromResult: (result) => ({
+ ...result,
+ rcraSite: selectBySiteId(result, siteId),
+ }),
+ });
const [manifestingSite, setManifestingSite] = useState
(rcraSite);
const [selectedSiteType, setSelectedSiteType] = useState(
rcraSite?.siteType === 'Generator' ? rcraSite.siteType : undefined
@@ -30,6 +47,8 @@ export function NewManifest() {
rcraSite?.siteType
);
+ if (isLoading && siteId) return ;
+
const handleSiteChange = (site: any) => {
setManifestingSite(site);
setManifestingSiteType(site.siteType);
diff --git a/client/src/features/Profile/Profile.tsx b/client/src/features/Profile/Profile.tsx
index c58c1598f..93539c8f8 100644
--- a/client/src/features/Profile/Profile.tsx
+++ b/client/src/features/Profile/Profile.tsx
@@ -1,18 +1,11 @@
import { UserOrg } from 'components/Org';
import { RcraProfile } from 'components/RcraProfile';
-import { HtCard } from 'components/UI';
+import { HtCard, HtSpinner } from 'components/UI';
import { UserInfoForm } from 'components/User';
import { useTitle } from 'hooks';
-import React, { ReactElement, useEffect } from 'react';
+import React, { ReactElement } from 'react';
import { Col, Container, Row } from 'react-bootstrap';
-import {
- getRcraProfile,
- HaztrakUser,
- selectHaztrakProfile,
- selectUser,
- useAppDispatch,
- useAppSelector,
-} from 'store';
+import { useGetProfileQuery, useGetRcrainfoProfileQuery, useGetUserQuery } from 'store';
/**
* Display user profile, including their Haztrak information, their organization,
@@ -20,19 +13,16 @@ import {
* @constructor
*/
export function Profile(): ReactElement {
- const dispatch = useAppDispatch();
- const profile = useAppSelector(selectHaztrakProfile);
- const user: HaztrakUser | undefined = useAppSelector(selectUser);
+ const { data: profile, isLoading: profileLoading } = useGetProfileQuery();
+ const { data: user, isLoading: userLoading } = useGetUserQuery();
+ const { data: rcrainfoProfile } = useGetRcrainfoProfileQuery('testuser1');
+ const isLoading = profileLoading || userLoading;
useTitle('Profile');
- if (!user) {
- return loading...
;
+ if (isLoading ?? !user ?? !profile) {
+ return ;
}
- useEffect(() => {
- dispatch(getRcraProfile());
- }, [profile.user]);
-
return (
<>
@@ -49,7 +39,7 @@ export function Profile(): ReactElement {
- {profile.org && }
+ {profile && }
@@ -57,7 +47,7 @@ export function Profile(): ReactElement {
- {profile.rcrainfoProfile && }
+ {rcrainfoProfile && }
diff --git a/client/src/features/SiteList/SiteList.spec.tsx b/client/src/features/SiteList/SiteList.spec.tsx
index 54fb6d0db..028237f0d 100644
--- a/client/src/features/SiteList/SiteList.spec.tsx
+++ b/client/src/features/SiteList/SiteList.spec.tsx
@@ -3,7 +3,8 @@ import { setupServer } from 'msw/node';
import React from 'react';
import { renderWithProviders, screen } from 'test-utils';
import { createMockHandler, createMockSite } from 'test-utils/fixtures/mockHandler';
-import { afterAll, afterEach, beforeAll, describe, expect, test } from 'vitest';
+import { htApiMocks, userApiMocks } from 'test-utils/mock';
+import { afterAll, beforeAll, describe, expect, test } from 'vitest';
import { SiteList } from './SiteList';
const mockHandler1 = createMockHandler({ epaSiteId: 'VAT987654321' });
@@ -12,11 +13,7 @@ const mockSites = [
createMockSite({ handler: mockHandler1 }),
createMockSite({ handler: mockHandler2 }),
];
-const server = setupServer(
- http.get(`${import.meta.env.VITE_HT_API_URL}/api/site`, (info) => {
- return HttpResponse.json(mockSites, { status: 200 });
- })
-);
+const server = setupServer(...userApiMocks, ...htApiMocks);
// pre-/post-test hooks
beforeAll(() => server.listen());
@@ -26,11 +23,14 @@ describe('SiteList component', () => {
test('renders', () => {
renderWithProviders(, {});
});
- test('fetches displays all sites a user has access to', async () => {
- // Act
+ test('displays all sites a user has access to', async () => {
+ server.use(
+ http.get(`${import.meta.env.VITE_HT_API_URL}/api/site`, (info) => {
+ return HttpResponse.json(mockSites, { status: 200 });
+ })
+ );
renderWithProviders();
let numIds = await screen.findAllByRole('listitem');
- // Assert
expect(numIds.length).toEqual(mockSites.length);
});
});
diff --git a/client/src/hooks/index.ts b/client/src/hooks/index.ts
index 60c17db15..2a9292a7c 100644
--- a/client/src/hooks/index.ts
+++ b/client/src/hooks/index.ts
@@ -1,6 +1,3 @@
-import { useHtApi } from './useHtAPI/useHtApi';
-import { usePagination } from './usePagination/usePagination';
-import { useProgressTracker } from './useProgressTracker/useProgressTracker';
-import { useTitle } from './useTitle/useTitle';
-
-export { usePagination, useTitle, useHtApi, useProgressTracker };
+export { usePagination } from './usePagination/usePagination';
+export { useProgressTracker } from './useProgressTracker/useProgressTracker';
+export { useTitle } from './useTitle/useTitle';
diff --git a/client/src/hooks/useHtAPI/useHtApi.spec.tsx b/client/src/hooks/useHtAPI/useHtApi.spec.tsx
deleted file mode 100644
index e62832880..000000000
--- a/client/src/hooks/useHtAPI/useHtApi.spec.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import '@testing-library/jest-dom';
-import { cleanup } from '@testing-library/react';
-import { useHtApi } from 'hooks';
-import { http, HttpResponse } from 'msw';
-import { setupServer } from 'msw/node';
-import React from 'react';
-import { render, renderWithProviders, screen } from 'test-utils';
-import { afterAll, afterEach, beforeAll, describe, expect, test, vi } from 'vitest';
-
-interface exampleData {
- foo: string;
- bar: string;
-}
-
-interface exampleProps {
- url: string;
-}
-
-function TestComponent({ url }: exampleProps) {
- const [data, loading, error] = useHtApi(url);
- if (error) {
- return (
- <>
- {error.message}
-
- );
- } else {
- return <>{loading ? loading
: {data?.foo}
};
- }
-}
-
-/**
- * mock Rest API
- */
-const API_BASE_URL = import.meta.env.VITE_HT_API_URL;
-export const testURL = [
- http.get(`${API_BASE_URL}/api/test/url`, (info) => {
- return HttpResponse.json(
- {
- foo: 'foo',
- bar: 'bar',
- },
- { status: 200 }
- );
- }),
- http.get(`${API_BASE_URL}/api/bad/url`, (info) => {
- return HttpResponse.json(
- {
- error: {
- message: 'resource not found',
- },
- },
- { status: 404 }
- );
- }),
-];
-
-const server = setupServer(...testURL);
-
-beforeAll(() => server.listen()); // setup mock http server
-afterEach(() => {
- server.resetHandlers();
- cleanup();
- vi.resetAllMocks();
-});
-afterAll(() => server.close()); // Disable API mocking after the tests are done.
-
-afterEach(() => {
- cleanup();
- vi.resetAllMocks();
-});
-
-describe('useHtAPI', () => {
- test('initially sets loading to true', () => {
- render();
- expect(screen.getByText(/loading/i)).toBeInTheDocument();
- });
- test('sets data to the response body', async () => {
- renderWithProviders();
- expect(await screen.findByText(/foo/i)).toBeInTheDocument();
- });
- test('sets the error for bad requests', async () => {
- renderWithProviders();
- expect(await screen.findByText(/404/i)).toBeInTheDocument();
- });
-});
diff --git a/client/src/hooks/useHtAPI/useHtApi.tsx b/client/src/hooks/useHtAPI/useHtApi.tsx
deleted file mode 100644
index 728fa49e2..000000000
--- a/client/src/hooks/useHtAPI/useHtApi.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { useEffect, useState } from 'react';
-import { htApi } from 'services';
-
-/**
- * Hook for retrieving data from the haztrak http server
- *
- * @description
- * Easy abstraction for GET request from the haztrak http server. Currently,
- * does not support other http methods since those situations tend to require
- * more thought.
- *
- * @param url {string}
- * @return array {[data, loading, error]}
- *
- * @example
- * const [data, loading , error ] = useHtApi(`/api/resource/path/${id}`)
- */
-export function useHtApi(url: string) {
- const [data, setData] = useState(undefined);
- const [loading, setLoading] = useState(true);
- const [error, setError] = useState(undefined);
-
- useEffect(() => {
- if (!url) return;
- htApi
- .get(url)
- .then((response) => setData(response.data))
- .then(() => setLoading(false))
- .catch(setError);
- }, [url]);
-
- return [data, loading, error] as const;
-}
diff --git a/client/src/services/APIs/UserApi.ts b/client/src/services/APIs/UserApi.ts
deleted file mode 100644
index 67804a049..000000000
--- a/client/src/services/APIs/UserApi.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import { AxiosResponse } from 'axios';
-import { HaztrakSite } from 'components/HaztrakSite';
-import { HaztrakModulePermissions, HaztrakUser, RcrainfoProfile, RcrainfoProfileSite } from 'store';
-import { htApi } from './htApi';
-
-interface HaztrakOrgResponse {
- id: string;
- name: string;
- rcrainfoIntegrated: boolean;
-}
-
-interface HaztrakProfileResponse {
- user: string;
- sites: Array<{
- site: HaztrakSite;
- eManifest: HaztrakModulePermissions;
- }>;
- org?: HaztrakOrgResponse;
-}
-
-interface RcrainfoProfileResponse extends RcrainfoProfile> {}
-
-export const UserApi = {
- /** Fetch the user's Haztrak profile from the Haztrak API*/
- getUserProfile: async (): Promise> => {
- return await htApi.get('/profile');
- },
-
- /** Fetch Haztrak user from server*/
- getUser: async (): Promise> => {
- return await htApi.get('/user');
- },
-
- /** Fetch Haztrak user from server*/
- updateUser: async (data: Partial): Promise> => {
- return await htApi.put('/user', data);
- },
-
- /** Fetch the user's RCRAInfo profile from the Haztrak API*/
- getRcrainfoProfile: async (username: string): Promise> => {
- return await htApi.get(`/rcra/profile/${username}`);
- },
-
- /** Update user's RCRAInfo Profile information such username, api ID & key*/
- updateRcrainfoProfile: async ({
- username,
- data,
- }: {
- username: string;
- data: any;
- }): Promise> => {
- return await htApi.put(`/rcra/profile/${username}`, data);
- },
-
- /** Launch task to pull user's site/module permissions (RCRAInfo profile) from RCRAInfo*/
- syncRcrainfoProfile: async (): Promise> => {
- return await htApi.get(`rcra/profile/sync`);
- },
-};
diff --git a/client/src/services/index.ts b/client/src/services/index.ts
index 27aba813c..131e298ef 100644
--- a/client/src/services/index.ts
+++ b/client/src/services/index.ts
@@ -1,3 +1,2 @@
export { htApi } from 'services/APIs/htApi';
-export { UserApi } from 'services/APIs/UserApi';
export { manifest } from 'services/manifest/manifest';
diff --git a/client/src/store/authSlice/auth.slice.spec.tsx b/client/src/store/authSlice/auth.slice.spec.tsx
new file mode 100644
index 000000000..2ee8c01fe
--- /dev/null
+++ b/client/src/store/authSlice/auth.slice.spec.tsx
@@ -0,0 +1,86 @@
+import '@testing-library/jest-dom';
+import userEvent from '@testing-library/user-event';
+import {
+ removeCredentials,
+ selectAuthenticated,
+ setCredentials,
+ useAppDispatch,
+ useAppSelector,
+} from 'store';
+import { renderWithProviders, screen } from 'test-utils';
+import { afterEach, describe, expect, test, vi } from 'vitest';
+
+const getItemSpy = vi.spyOn(Storage.prototype, 'getItem');
+const setItemSpy = vi.spyOn(Storage.prototype, 'setItem');
+const removeItemSpy = vi.spyOn(Storage.prototype, 'removeItem');
+
+afterEach(() => {
+ getItemSpy.mockClear();
+ setItemSpy.mockClear();
+ removeItemSpy.mockClear();
+});
+
+const TestComponent = () => {
+ const dispatch = useAppDispatch();
+ const isAuthenticated = useAppSelector(selectAuthenticated);
+ return (
+
+
Test
+
{isAuthenticated ? 'authenticated' : 'unauthenticated'}
+
+
+
+
+
{rcraSite?.epaSiteId}
-
- );
-}
-
-describe('RcraProfileSlice selectors', () => {
- test('Retrieve RcraProfileSite by EPA ID', () => {
- const mySite = createMockSite();
- renderWithProviders(, {
- preloadedState: {
- profile: {
- user: 'testuser1',
- sites: { VATESTGEN001: { ...mySite, permissions: { eManifest: 'viewer' } } },
- rcrainfoProfile: {
- user: 'username',
- phoneNumber: '1231231234',
- apiUser: false,
- rcraSites: {
- VATESTGEN001: {
- epaSiteId: mySite.handler.epaSiteId,
- permissions: createMockRcrainfoPermissions(),
- },
- },
- },
- },
- },
- });
- expect(screen.getByText(mySite.handler.epaSiteId)).toBeInTheDocument();
- });
- test('retrieve all RcraProfileSites', () => {
- const mySite = createMockSite();
- const TestComp = () => {
- const myRcraSite = useAppSelector(selectRcrainfoSites);
- return (
- <>
- {myRcraSite ? Object.keys(myRcraSite).length : 'not defined'}
- {myRcraSite
- ? myRcraSite.map((site, index) => (
- {site.epaSiteId}
- ))
- : 'not defined'}
-
- );
- };
- renderWithProviders(, {
- preloadedState: {
- profile: {
- user: 'testuser1',
- rcrainfoProfile: {
- user: 'username',
- phoneNumber: '1231231234',
- apiUser: false,
- rcraSites: {
- VATESTGEN001: {
- epaSiteId: mySite.handler.epaSiteId,
- permissions: createMockRcrainfoPermissions(),
- },
- VATEST00001: {
- epaSiteId: mySite.handler.epaSiteId,
- permissions: createMockRcrainfoPermissions(),
- },
- },
- },
- },
- },
- });
- expect(screen.getByText('2')).toBeInTheDocument();
- expect(screen.queryByText(/Not Defined/i)).not.toBeInTheDocument();
- });
-});
diff --git a/client/src/store/profileSlice/profile.slice.ts b/client/src/store/profileSlice/profile.slice.ts
deleted file mode 100644
index b7594b012..000000000
--- a/client/src/store/profileSlice/profile.slice.ts
+++ /dev/null
@@ -1,238 +0,0 @@
-/**
- * A user's RcraProfile slice encapsulates our logic related what actions and data a user
- * has access to for each EPA site ID.
- */
-import { createAsyncThunk, createSelector, createSlice, PayloadAction } from '@reduxjs/toolkit';
-import { HaztrakSite } from 'components/HaztrakSite';
-import { RcraSite } from 'components/RcraSite';
-import { UserApi } from 'services';
-import { RootState } from 'store';
-
-/**The user's RCRAInfo account data stored in the Redux store*/
-export interface ProfileSlice {
- user: string | undefined;
- rcrainfoProfile?: RcrainfoProfile>;
- sites?: Record;
- org?: HaztrakProfileOrg | null;
- loading?: boolean;
- error?: string;
-}
-
-export interface HaztrakProfileOrg {
- id: string;
- name: string;
- rcrainfoIntegrated: boolean;
-}
-
-/** A site a user has access to in RCRAInfo and their module permissions */
-export interface RcrainfoProfileSite {
- epaSiteId: string;
- permissions: RcrainfoSitePermissions;
-}
-
-export interface HaztrakProfileSite extends HaztrakSite {
- permissions: HaztrakSitePermissions;
-}
-
-export type HaztrakModulePermissions = 'viewer' | 'editor' | 'signer';
-
-export interface HaztrakSitePermissions {
- eManifest: HaztrakModulePermissions;
-}
-
-export interface RcrainfoProfileState
- extends RcrainfoProfile> {}
-
-export interface RcrainfoProfile {
- user: string;
- rcraAPIID?: string;
- rcraUsername?: string;
- rcraAPIKey?: string;
- apiUser?: boolean;
- rcraSites?: T;
- phoneNumber?: string;
- isLoading?: boolean;
- error?: string;
-}
-
-export interface RcrainfoSitePermissions {
- siteManagement: boolean;
- annualReport: string;
- biennialReport: string;
- eManifest: string;
- WIETS: string;
- myRCRAid: string;
-}
-
-/**initial, state of a user's RcraProfile.*/
-const initialState: ProfileSlice = {
- user: undefined,
- rcrainfoProfile: undefined,
- sites: undefined,
- loading: false,
- error: undefined,
-};
-
-/**Retrieves a user's profile from the server.*/
-export const getHaztrakProfile = createAsyncThunk('profile/getHaztrakProfile', async () => {
- const { data } = await UserApi.getUserProfile();
- const sites = data.sites.reduce((obj, site) => {
- return {
- ...obj,
- [site.site.handler.epaSiteId]: {
- ...site.site,
- permissions: { eManifest: site.eManifest },
- },
- };
- }, {});
- return {
- user: data.user,
- org: data.org,
- sites: sites,
- } as ProfileSlice;
-});
-
-/**Retrieves a user's RcrainfoProfile, if it exists, from the server.*/
-export const getRcraProfile = createAsyncThunk(
- 'profile/getRcrainfoProfile',
- async (arg, thunkAPI) => {
- const state = thunkAPI.getState() as RootState;
- const username = state.auth.user?.username;
- if (!username) {
- throw new Error('User is not logged in');
- }
- const { data } = await UserApi.getRcrainfoProfile(username);
- const { rcraSites, ...rest } = data;
- return {
- rcrainfoProfile: {
- ...rest,
- rcraSites: rcraSites?.reduce((obj, site) => {
- return {
- ...obj,
- [site.epaSiteId]: { epaSiteId: site.epaSiteId, permissions: site.permissions },
- };
- }, {}),
- },
- } as ProfileSlice;
- }
-);
-
-const profileSlice = createSlice({
- name: 'profile',
- initialState,
- reducers: {
- updateProfile: (state: ProfileSlice, action: PayloadAction) => {
- return {
- ...state,
- ...action.payload,
- };
- },
- },
- extraReducers: (builder) => {
- builder
- .addCase(getHaztrakProfile.pending, (state) => {
- return {
- ...state,
- loading: true,
- error: undefined,
- };
- })
- .addCase(getHaztrakProfile.fulfilled, (state, action) => {
- return {
- ...state,
- ...action.payload,
- loading: false,
- error: undefined,
- };
- })
- .addCase(getHaztrakProfile.rejected, (state) => {
- state.loading = false;
- state.error = 'error';
- return state;
- })
- .addCase(getRcraProfile.pending, (state) => {
- return {
- ...state,
- loading: true,
- error: undefined,
- };
- })
- .addCase(getRcraProfile.fulfilled, (state, action) => {
- return {
- ...state,
- ...action.payload,
- loading: false,
- error: undefined,
- };
- })
- .addCase(getRcraProfile.rejected, (state, action) => {
- state.loading = false;
- // @ts-ignore
- state.error = action.payload.error;
- return state;
- });
- },
-});
-
-/** Retrieve a Haztrak site from the users Profile by the site's EPA ID number */
-export const siteByEpaIdSelector = (
- epaId: string | undefined
-): ((state: RootState) => RcraSite | undefined) =>
- createSelector(
- (state: { profile: ProfileSlice }) => state.profile.sites,
- (sites: Record | undefined) => {
- if (!sites) return undefined;
-
- const siteId = Object.keys(sites).find((key) => sites[key]?.handler.epaSiteId === epaId);
- if (!siteId) return undefined;
-
- const sitePermissions = sites[siteId];
- if (!sitePermissions) return undefined;
-
- return sitePermissions.handler;
- }
- );
-
-/** Get all sites a user has access to their Haztrak Profile*/
-export const selectHaztrakSites = createSelector(
- (state: { profile: ProfileSlice }) => state.profile.sites,
- (sites: Record | undefined) => {
- if (!sites) return undefined;
-
- return Object.values(sites).map((site) => site);
- }
-);
-
-/** Get all sites a user has access to their Haztrak Profile*/
-export const selectHaztrakSiteEpaIds = createSelector(
- (state: { profile: ProfileSlice }) => state.profile.sites,
- (sites: Record | undefined) => {
- if (!sites) return [];
- return Object.values(sites).map((site) => site.handler.epaSiteId);
- }
-);
-
-/** select all RCRAInfo sites a user has access to from their RCRAInfo Profile if they're updated it*/
-export const selectRcrainfoSites = createSelector(
- (state: { profile: ProfileSlice }) => state.profile.rcrainfoProfile?.rcraSites,
- (rcraSites: Record | undefined) => {
- if (!rcraSites) return undefined;
-
- return Object.values(rcraSites).map((site) => site);
- }
-);
-
-/** Retrieve a user's RcraProfile from the Redux store. */
-export const selectRcraProfile = createSelector(
- (state: RootState) => state,
- (state: RootState) => state.profile.rcrainfoProfile
-);
-
-/** Retrieve a user's HaztrakProfile from the Redux store. */
-export const selectHaztrakProfile = createSelector(
- (state: RootState) => state,
- (state: RootState) => state.profile
-);
-
-export default profileSlice.reducer;
-export const { updateProfile } = profileSlice.actions;
diff --git a/client/src/store/rootStore.ts b/client/src/store/rootStore.ts
index e531ba5e5..8a80e7aeb 100644
--- a/client/src/store/rootStore.ts
+++ b/client/src/store/rootStore.ts
@@ -1,14 +1,12 @@
import { combineReducers, configureStore } from '@reduxjs/toolkit';
-import userReducers, { login } from './authSlice/auth.slice';
+import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
+import authReducers from 'store/authSlice/auth.slice';
+import { haztrakApi } from 'store/htApi.slice';
import errorReducers from './errorSlice/error.slice';
-import { haztrakApi } from './haztrakApiSlice';
import notificationReducers from './notificationSlice/notification.slice';
-import profileReducers from './profileSlice/profile.slice';
-import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
const rootReducer = combineReducers({
- auth: userReducers,
- profile: profileReducers,
+ auth: authReducers,
error: errorReducers,
notifications: notificationReducers,
[haztrakApi.reducerPath]: haztrakApi.reducer,
@@ -30,4 +28,4 @@ export const useAppSelector: TypedUseSelectorHook = useSelector;
export type AppDispatch = typeof rootStore.dispatch;
export type RootState = ReturnType;
export type AppStore = ReturnType;
-export { rootStore, login, setupStore };
+export { rootStore, setupStore };
diff --git a/client/src/store/userSlice/user.slice.spec.tsx b/client/src/store/userSlice/user.slice.spec.tsx
new file mode 100644
index 000000000..40fd90705
--- /dev/null
+++ b/client/src/store/userSlice/user.slice.spec.tsx
@@ -0,0 +1,60 @@
+import '@testing-library/jest-dom';
+import { waitFor } from '@testing-library/react';
+import { setupServer } from 'msw/node';
+import { useEffect, useState } from 'react';
+import { useGetUserQuery, useUpdateUserMutation } from 'store';
+import { cleanup, renderWithProviders, screen } from 'test-utils';
+import { userApiMocks } from 'test-utils/mock';
+import { afterAll, afterEach, beforeAll, describe, expect, test } from 'vitest';
+
+const server = setupServer(...userApiMocks);
+afterEach(() => {
+ cleanup();
+});
+beforeAll(() => server.listen());
+afterAll(() => server.close());
+
+const UserQueryComponent = () => {
+ const [fetchCount, setFetchCount] = useState(0);
+ const { data, error, isLoading, isFetching } = useGetUserQuery();
+ const [updateUser, results] = useUpdateUserMutation();
+
+ useEffect(() => {
+ if (isFetching) setFetchCount(fetchCount + 1);
+ }, [isFetching]);
+
+ if (isLoading || isFetching) {
+ return Loading
;
+ }
+ if (error) {
+ return Error
;
+ }
+ if (data) {
+ return (
+
+
Data
+
username: {data.username}
+
email: {data.email}
+
fetchCount: {fetchCount}
+
+
+
+