django-allauth and transition server state to RTK query

client/src/App.tsx

@@ -1,36 +1,21 @@
 import { ErrorBoundary } from 'components/Error';
 import { Notifications } from 'components/Notifications/Notifications';
 import { HtSpinner } from 'components/UI';
-import React, { ReactElement, Suspense, useEffect } from 'react';
+import React, { ReactElement, Suspense } from 'react';
 import { Container } from 'react-bootstrap';
 import { RouterProvider } from 'react-router-dom';
 import { ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import { router } from 'routes';
-import {
-  getHaztrakProfile,
-  getHaztrakUser,
-  getRcraProfile,
-  selectHaztrakProfile,
-  selectUserName,
-  useAppDispatch,
-  useAppSelector,
-} from 'store';
 import './App.scss';
 
-function App(): ReactElement {
-  const userName = useAppSelector(selectUserName);
-  const profile = useAppSelector(selectHaztrakProfile);
-  const dispatch = useAppDispatch();
-
-  useEffect(() => {
-    if (userName) {
-      dispatch(getRcraProfile());
-      dispatch(getHaztrakUser());
-      dispatch(getHaztrakProfile());
-    }
-  }, [profile.user]);
+const GlobalSpinner = () => (
+  <Container fluid className="d-flex justify-content-center align-items-center vh-100">
+    <HtSpinner size="6x" className="my-auto" />
+  </Container>
+);
 
+function App(): ReactElement {
   return (
     <ErrorBoundary>
       <ToastContainer
@@ -43,13 +28,7 @@ function App(): ReactElement {
         limit={3}
       />
       <Notifications />
-      <Suspense
-        fallback={
-          <Container fluid className="d-flex justify-content-center align-items-center vh-100">
-            <HtSpinner size="6x" className="my-auto" />
-          </Container>
-        }
-      >
+      <Suspense fallback={<GlobalSpinner />}>
         <RouterProvider router={router} />
       </Suspense>
     </ErrorBoundary>

client/src/components/Auth/LoginForm.tsx

@@ -1,10 +1,16 @@
 import { zodResolver } from '@hookform/resolvers/zod';
-import { HtForm } from 'components/UI';
-import React, { useEffect } from 'react';
+import { HtForm, HtSpinner } from 'components/UI';
+import React, { useEffect, useState } from 'react';
 import { FloatingLabel, Form } from 'react-bootstrap';
 import { useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
-import { login, selectUserState, useAppDispatch, useAppSelector } from 'store';
+import {
+  selectAuthenticated,
+  setCredentials,
+  useAppDispatch,
+  useAppSelector,
+  useLoginMutation,
+} from 'store';
 import { z } from 'zod';
 
 const loginSchema = z.object({
@@ -15,7 +21,9 @@ const loginSchema = z.object({
 type LoginSchema = z.infer<typeof loginSchema>;
 
 export function LoginForm() {
-  const userState = useAppSelector(selectUserState);
+  const isAuthenticated = useAppSelector(selectAuthenticated);
+  const [login, { error, isLoading }] = useLoginMutation();
+  const [loginError, setLoginError] = useState<string | undefined>(undefined);
   const navigation = useNavigate();
   const dispatch = useAppDispatch();
   const {
@@ -25,16 +33,30 @@ export function LoginForm() {
   } = useForm<LoginSchema>({ resolver: zodResolver(loginSchema) });
 
   useEffect(() => {
-    // redirect to home if already logged in
-    if (userState.user?.username) {
+    if (isAuthenticated) {
       navigation('/');
     }
-  }, [userState.user?.username]);
+  }, [isAuthenticated]);
 
-  function onSubmit({ username, password }: LoginSchema) {
-    return dispatch(login({ username, password }));
+  async function onSubmit({ username, password }: LoginSchema) {
+    try {
+      const response = await login({ username, password }).unwrap();
+      if (response) {
+        dispatch(setCredentials({ token: response.key }));
+      } else {
+        setLoginError('something went wrong');
+      }
+    } catch (error) {
+      setLoginError('unable to log in with the provided credentials');
+    }
   }
 
+  useEffect(() => {
+    if (error) {
+      setLoginError('Error logging in');
+    }
+  }, [error]);
+
   return (
     <HtForm onSubmit={handleSubmit(onSubmit)}>
       <HtForm.Group>
@@ -60,12 +82,10 @@ export function LoginForm() {
         <div className="invalid-feedback">{errors.password?.message}</div>
       </HtForm.Group>
       <button type="submit" disabled={isSubmitting} className="btn btn-primary m-2">
-        {isSubmitting && <span className="spinner-border spinner-border-sm mr-1" />}
-        Login
+        <span>Login </span>
+        {isLoading && <HtSpinner size="lg" className="text-reset" />}
       </button>
-      {userState.error && (
-        <div className="alert alert-danger mt-3 mb-0">{String(userState.error)}</div>
-      )}
+      {loginError && <div className="alert alert-danger mt-3 mb-0">{loginError}</div>}
     </HtForm>
   );
 }

client/src/components/Layout/PrivateRoute.tsx

@@ -1,22 +1,16 @@
 import React, { ReactElement } from 'react';
 import { Navigate } from 'react-router-dom';
-import { selectUserName, useAppSelector } from 'store';
+import { selectAuthenticated, useAppSelector } from 'store';
 
 interface Props {
   children: any;
 }
 
-/**
- * Wraps around Route component to redirect to og in if not authenticated user
- * @param { children } Route to wrap around
- * @constructor
- */
+/** Redirect to the login if user is not authenticated*/
 export function PrivateRoute({ children }: Props): ReactElement {
-  const authUser = useAppSelector(selectUserName);
+  const authUser = useAppSelector(selectAuthenticated);
   if (!authUser) {
-    // not logged in so redirect to login page with the return url
     return <Navigate to="/login" />;
   }
-  // authorized so return child components
   return children;
 }

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

@@ -1,24 +1,25 @@
+import logo from '/assets/img/haztrak-logos/haztrak-logo-zip-file/svg/logo-no-background.svg';
 import { faArrowRightFromBracket, faBars, faGear, faUser } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import logo from '/assets/img/haztrak-logos/haztrak-logo-zip-file/svg/logo-no-background.svg';
 import { NavContext, NavContextProps } from 'components/Layout/Root';
 import React, { useContext } from 'react';
 import { Button, Dropdown } from 'react-bootstrap';
 import { useDispatch, useSelector } from 'react-redux';
 import { Link, useNavigate } from 'react-router-dom';
-import { RootState } from 'store';
-import { logout } from 'store/authSlice/auth.slice';
+import { removeCredentials, selectAuthenticated } from 'store';
 
 export function TopNav() {
   const { showSidebar, setShowSidebar } = useContext<NavContextProps>(NavContext);
-  const authUser = useSelector((state: RootState) => state.auth.user);
+  const isAuthenticated = useSelector(selectAuthenticated);
   const dispatch = useDispatch();
   const navigation = useNavigate();
+
+  if (!isAuthenticated) return null;
+
   const handleLogout = () => {
-    dispatch(logout());
+    dispatch(removeCredentials());
     navigation('/login');
   };
-  if (!authUser) return null;
 
   const toggleSidebar = () => {
     setShowSidebar(!showSidebar);

client/src/components/Manifest/Buttons/ManifestFABs.spec.tsx → client/src/components/Manifest/Actions/ManifestFABs.spec.tsx

@@ -1,10 +1,10 @@
 import '@testing-library/jest-dom';
-import { ManifestFABs } from 'components/Manifest/Buttons/ManifestFABs';
+import { ManifestFABs } from 'components/Manifest/Actions/ManifestFABs';
+import { ManifestContext } from 'components/Manifest/ManifestForm';
+import { ManifestStatus } from 'components/Manifest/manifestSchema';
 import React from 'react';
 import { cleanup, renderWithProviders, screen } from 'test-utils';
 import { afterEach, describe, expect, test } from 'vitest';
-import { ManifestContext } from 'components/Manifest/ManifestForm';
-import { ManifestStatus } from 'components/Manifest/manifestSchema';
 
 const TestComponent = ({
   status,

client/src/components/Manifest/Buttons/ManifestFABs.tsx → client/src/components/Manifest/Actions/ManifestFABs.tsx

@@ -1,5 +1,5 @@
-import { ManifestEditBtn } from 'components/Manifest/Buttons/ManifestEditBtn';
-import { ManifestSaveBtn } from 'components/Manifest/Buttons/ManifestSaveBtn';
+import { ManifestEditBtn } from 'components/Manifest/Actions/ManifestEditBtn';
+import { ManifestSaveBtn } from 'components/Manifest/Actions/ManifestSaveBtn';
 import { ManifestContext } from 'components/Manifest/ManifestForm';
 import { QuickSignBtn } from 'components/Manifest/QuickerSign';
 import { FloatingActionBtn } from 'components/UI';

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

@@ -1,36 +1,51 @@
+import userEvent from '@testing-library/user-event';
+import { http, HttpResponse } from 'msw';
+import { setupServer } from 'msw/node';
 import React from 'react';
 import '@testing-library/jest-dom';
-import { HandlerSearchForm } from './HandlerSearchForm';
+import { HaztrakProfileResponse } from 'store/userSlice/user.slice';
 import { cleanup, renderWithProviders, screen } from 'test-utils';
-import { afterAll, afterEach, beforeAll, describe, expect, test } from 'vitest';
 import { createMockRcrainfoSite } from 'test-utils/fixtures';
-import { setupServer } from 'msw/node';
-import { http, HttpResponse } from 'msw';
-import { API_BASE_URL } from 'test-utils/mock/handlers';
-import userEvent from '@testing-library/user-event';
+import { userApiMocks } from 'test-utils/mock';
+import { API_BASE_URL } from 'test-utils/mock/htApiMocks';
+import { afterAll, afterEach, beforeAll, describe, expect, test } from 'vitest';
+import { HandlerSearchForm } from './HandlerSearchForm';
 
 const mockRcraSite1Id = 'VATEST111111111';
 const mockRcraSite2Id = 'VATEST222222222';
 const mockRcrainfoSite1Id = 'VATEST333333333';
 const mockRcrainfoSite2Id = 'VATEST444444444';
 
+const mockProfile: HaztrakProfileResponse = {
+  user: 'testuser1',
+  sites: [],
+  org: {
+    name: 'my org',
+    rcrainfoIntegrated: true,
+    id: '1234',
+  },
+};
+
 const mockRcrainfoSite1 = createMockRcrainfoSite({ epaSiteId: mockRcrainfoSite1Id });
 const mockRcrainfoSite2 = createMockRcrainfoSite({ epaSiteId: mockRcrainfoSite2Id });
 const mockRcraSite1 = createMockRcrainfoSite({ epaSiteId: mockRcraSite1Id });
 const mockRcraSite2 = createMockRcrainfoSite({ epaSiteId: mockRcraSite2Id });
-export const testURL = [
-  http.get(`${API_BASE_URL}/api/site/search`, (info) => {
+export const mockHandlerSearches = [
+  http.get(`${API_BASE_URL}/api/site/search`, () => {
     return HttpResponse.json([mockRcraSite1, mockRcraSite2], { status: 200 });
   }),
-  http.get(`${API_BASE_URL}/api/rcra/handler/search`, (info) => {
+  http.get(`${API_BASE_URL}/api/rcra/handler/search`, () => {
     return HttpResponse.json([mockRcrainfoSite1, mockRcrainfoSite2], { status: 200 });
   }),
-  http.post(`${API_BASE_URL}/api/rcra/handler/search`, (info) => {
+  http.get(`${API_BASE_URL}/api/user/profile`, () => {
+    return HttpResponse.json({ ...mockProfile }, { status: 200 });
+  }),
+  http.post(`${API_BASE_URL}/api/rcra/handler/search`, () => {
     return HttpResponse.json([mockRcrainfoSite1, mockRcrainfoSite2], { status: 200 });
   }),
 ];
 
-const server = setupServer(...testURL);
+const server = setupServer(...userApiMocks, ...mockHandlerSearches);
 afterEach(() => {
   cleanup();
 });
@@ -46,19 +61,7 @@ describe('HandlerSearchForm', () => {
   });
   test('retrieves rcra sites from haztrak and RCRAInfo', async () => {
     renderWithProviders(
-      <HandlerSearchForm handleClose={() => undefined} handlerType="generator" />,
-      {
-        preloadedState: {
-          profile: {
-            user: 'testuser1',
-            org: {
-              name: 'my org',
-              rcrainfoIntegrated: true,
-              id: '1234',
-            },
-          },
-        },
-      }
+      <HandlerSearchForm handleClose={() => undefined} handlerType="generator" />
     );
     const epaId = screen.getByRole('combobox');
     await userEvent.type(epaId, 'VATEST');
@@ -68,20 +71,19 @@ describe('HandlerSearchForm', () => {
     expect(await screen.findByText(new RegExp(mockRcrainfoSite2Id, 'i'))).toBeInTheDocument();
   });
   test('retrieves rcra sites from haztrak if org not rcrainfo integrated', async () => {
-    renderWithProviders(
-      <HandlerSearchForm handleClose={() => undefined} handlerType="generator" />,
-      {
-        preloadedState: {
-          profile: {
-            user: 'testuser1',
-            org: {
-              name: 'my org',
-              rcrainfoIntegrated: false,
-              id: '1234',
-            },
+    server.use(
+      http.get(`${API_BASE_URL}/api/user/profile`, () => {
+        return HttpResponse.json(
+          {
+            ...mockProfile,
+            org: { rcrainfoIntegrated: false },
           },
-        },
-      }
+          { status: 200 }
+        );
+      })
+    );
+    renderWithProviders(
+      <HandlerSearchForm handleClose={() => undefined} handlerType="generator" />
     );
     const epaId = screen.getByRole('combobox');
     await userEvent.type(epaId, 'VATEST');

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

@@ -1,3 +1,4 @@
+import { RcrainfoSiteSearchBadge } from 'components/Manifest/Handler/Search/RcrainfoSiteSearchBadge';
 import { ManifestContext, ManifestContextType } from 'components/Manifest/ManifestForm';
 import { Manifest, SiteType, Transporter } from 'components/Manifest/manifestSchema';
 import { RcraSite } from 'components/RcraSite';
@@ -12,13 +13,7 @@ import {
   useFormContext,
 } from 'react-hook-form';
 import Select from 'react-select';
-import {
-  selectHaztrakProfile,
-  useAppSelector,
-  useSearchRcrainfoSitesQuery,
-  useSearchRcraSitesQuery,
-} from 'store';
-import { RcrainfoSiteSearchBadge } from 'components/Manifest/Handler/Search/RcrainfoSiteSearchBadge';
+import { useGetProfileQuery, useSearchRcrainfoSitesQuery, useSearchRcraSitesQuery } from 'store';
 
 interface Props {
   handleClose: () => void;
@@ -42,9 +37,13 @@ export function HandlerSearchForm({
   const manifestMethods = useFormContext<Manifest>();
   const [inputValue, setInputValue] = useState<string>('');
   const [selectedHandler, setSelectedHandler] = useState<RcraSite | null>(null);
-  const { org } = useAppSelector(selectHaztrakProfile);
+  const { org } = useGetProfileQuery(undefined, {
+    selectFromResult: ({ data }) => {
+      return { org: data?.org };
+    },
+  });
   const [skip, setSkip] = useState<boolean>(true);
-  const { data, error, isLoading } = useSearchRcraSitesQuery(
+  const { data } = useSearchRcraSitesQuery(
     {
       siteType: handlerType,
       siteId: inputValue,