Replace Recoil with Jotai for global state management

README.md

@@ -6,7 +6,7 @@ The goal of this project is to provide a React with TypeScript starter applicati
 - Platform: [React](https://react.dev/) with [TypeScript](https://www.typescriptlang.org/)
 - Component Library: [Comet Component Library](https://github.com/MetroStar/comet)
 - Data Visualization: [Victory Charts](https://formidable.com/open-source/victory/)
-- State Management: [Recoil](https://recoiljs.org/)
+- State Management: [Jotai](https://jotai.org/)
 - Form Validation: [React Hook Form](https://react-hook-form.com/)
 - Unit Testing: [Vitest](https://vitest.dev/) with [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/)
 - Code Analysis: [ESLint](https://eslint.org/)

package.json

@@ -39,13 +39,13 @@
     "@uswds/uswds": "3.10.0",
     "axios": "1.7.9",
     "axios-mock-adapter": "2.1.0",
+    "jotai": "2.10.4",
     "oidc-client-ts": "^3.1.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-hook-form": "7.54.1",
     "react-oidc-context": "^3.2.0",
-    "react-router-dom": "7.0.2",
-    "recoil": "0.7.7"
+    "react-router-dom": "7.0.2"
   },
   "devDependencies": {
     "@eslint/js": "^9.17.0",

src/components/header/header.test.tsx

@@ -2,20 +2,20 @@ import { act, fireEvent, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { BrowserRouter } from 'react-router-dom';
 
+import { Provider } from 'jotai';
 import { AuthProvider } from 'react-oidc-context';
-import { RecoilRoot } from 'recoil';
 import * as useAuthMock from '../../hooks/use-auth';
 import { User } from '../../types/user';
 import { Header } from './header';
 
 describe('Header', () => {
   const headerComponent = (
     <AuthProvider>
-      <RecoilRoot>
+      <Provider>
         <BrowserRouter>
           <Header />
         </BrowserRouter>
-      </RecoilRoot>
+      </Provider>
     </AuthProvider>
   );
 

src/components/protected-route/protected-route.test.tsx

@@ -1,19 +1,19 @@
 import { User } from '@src/types/user';
 import { act, render } from '@testing-library/react';
+import { Provider } from 'jotai';
 import { AuthProvider } from 'react-oidc-context';
 import { BrowserRouter } from 'react-router-dom';
-import { RecoilRoot } from 'recoil';
 import * as useAuthMock from '../../hooks/use-auth';
 import { ProtectedRoute } from './protected-route';
 
 describe('ProtectedRoute', () => {
   const wrapperComponent = (
     <AuthProvider>
-      <RecoilRoot>
+      <Provider>
         <BrowserRouter>
           <ProtectedRoute />
         </BrowserRouter>
-      </RecoilRoot>
+      </Provider>
     </AuthProvider>
   );
 

src/hooks/use-auth-sso.test.tsx

@@ -1,5 +1,5 @@
 import { act, renderHook } from '@testing-library/react';
-import { RecoilRoot } from 'recoil';
+import { Provider } from 'jotai';
 import useAuth from './use-auth'; // Import your useAuth function
 
 interface ContextWrapperProps {
@@ -24,7 +24,7 @@ describe('useAuth', () => {
   });
 
   const contextWrapper = ({ children }: ContextWrapperProps) => (
-    <RecoilRoot>{children}</RecoilRoot>
+    <Provider>{children}</Provider>
   );
 
   it('should set isSignedIn to true when authenticated with sso', async () => {

src/hooks/use-auth.test.tsx

@@ -1,7 +1,7 @@
 import keycloak from '@src/utils/keycloak';
 import { act, renderHook } from '@testing-library/react';
+import { Provider } from 'jotai';
 import { AuthProvider } from 'react-oidc-context';
-import { RecoilRoot } from 'recoil';
 import useAuth from './use-auth';
 
 interface ContextWrapperProps {
@@ -16,7 +16,7 @@ describe('useAuth', () => {
 
   const contextWrapper = ({ children }: ContextWrapperProps) => (
     <AuthProvider {...keycloak}>
-      <RecoilRoot>{children}</RecoilRoot>
+      <Provider>{children}</Provider>
     </AuthProvider>
   );
 

src/hooks/use-auth.ts

@@ -1,19 +1,19 @@
 import { getSignInRedirectUrl } from '@src/utils/auth';
+import { useAtom } from 'jotai';
 import { useEffect, useState } from 'react';
 import { useAuth as useKeycloakAuth } from 'react-oidc-context';
-import { useRecoilState } from 'recoil';
 import { userData } from '../data/user';
 import { currentUserState, signedInState } from '../store';
 import { User } from '../types/user';
 
 const useAuth = () => {
   const auth = useKeycloakAuth();
-  const [isSignedIn, setIsSignedIn] = useRecoilState<boolean>(signedInState);
+  const [isSignedIn, setIsSignedIn] = useAtom<boolean>(signedInState);
   const [isLoading, setIsLoading] = useState<boolean>(true);
   const [error, setError] = useState<string | null>();
-  const [currentUserData, setCurrentUserData] = useRecoilState<
-    User | undefined
-  >(currentUserState);
+  const [currentUserData, setCurrentUserData] = useAtom<User | undefined>(
+    currentUserState,
+  );
 
   /* TODO: Uncomment for interacting with own API, no need to send tokens to external public API */
   // useEffect(() => {

src/main.tsx

@@ -1,8 +1,8 @@
+import { Provider } from 'jotai';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { AuthProvider } from 'react-oidc-context';
 import { BrowserRouter } from 'react-router-dom';
-import { RecoilRoot } from 'recoil';
 import { App } from './App.tsx';
 import './styles.scss';
 import keycloak from './utils/keycloak.ts';
@@ -11,9 +11,9 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <BrowserRouter basename={process.env.APP_BASE_URL}>
       <AuthProvider {...keycloak}>
-        <RecoilRoot>
+        <Provider>
           <App />
-        </RecoilRoot>
+        </Provider>
       </AuthProvider>
     </BrowserRouter>
   </React.StrictMode>,

src/pages/dashboard/dashboard-bar-chart/dashboard-bar-chart.test.tsx

@@ -1,17 +1,17 @@
 import { mockData } from '@src/data/spacecraft';
 import { act, render } from '@testing-library/react';
+import { Provider } from 'jotai';
 import { BrowserRouter } from 'react-router-dom';
-import { RecoilRoot } from 'recoil';
 import { DashboardBarChart } from './dashboard-bar-chart';
 
 describe('DashboardBarChart', () => {
   test('should render successfully', async () => {
     const { baseElement } = render(
-      <RecoilRoot>
+      <Provider>
         <BrowserRouter>
           <DashboardBarChart items={mockData.items} />
         </BrowserRouter>
-      </RecoilRoot>,
+      </Provider>,
     );
     await act(async () => {
       expect(baseElement).toBeTruthy();

src/pages/dashboard/dashboard-pie-chart/dashboard-pie-chart.test.tsx

@@ -1,17 +1,17 @@
 import { mockData } from '@src/data/spacecraft';
 import { act, render } from '@testing-library/react';
+import { Provider } from 'jotai';
 import { BrowserRouter } from 'react-router-dom';
-import { RecoilRoot } from 'recoil';
 import { DashboardPieChart } from './dashboard-pie-chart';
 
 describe('DashboardPieChart', () => {
   test('should render successfully', async () => {
     const { baseElement } = render(
-      <RecoilRoot>
+      <Provider>
         <BrowserRouter>
           <DashboardPieChart items={mockData.items} />
         </BrowserRouter>
-      </RecoilRoot>,
+      </Provider>,
     );
     await act(async () => {
       expect(baseElement).toBeTruthy();

src/pages/dashboard/dashboard-table/dashboard-table.test.tsx

@@ -1,28 +1,28 @@
 import { mockData } from '@src/data/spacecraft';
 import { act, render } from '@testing-library/react';
+import { Provider } from 'jotai';
 import { BrowserRouter } from 'react-router-dom';
-import { RecoilRoot } from 'recoil';
 import { DashboardTable } from './dashboard-table';
 
 describe('DashboardTable', () => {
   test('should render successfully', () => {
     const { baseElement } = render(
-      <RecoilRoot>
+      <Provider>
         <BrowserRouter>
           <DashboardTable items={[]} />
         </BrowserRouter>
-      </RecoilRoot>,
+      </Provider>,
     );
     expect(baseElement).toBeTruthy();
   });
 
   test('should render with mock data', async () => {
     const { baseElement } = render(
-      <RecoilRoot>
+      <Provider>
         <BrowserRouter>
           <DashboardTable items={mockData.items} />
         </BrowserRouter>
-      </RecoilRoot>,
+      </Provider>,
     );
     await act(async () => {
       expect(baseElement).toBeTruthy();

src/pages/dashboard/dashboard.test.tsx

@@ -3,9 +3,9 @@ import axios from '@src/utils/axios';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { act, render } from '@testing-library/react';
 import MockAdapter from 'axios-mock-adapter';
+import { Provider } from 'jotai';
 import { AuthProvider } from 'react-oidc-context';
 import { BrowserRouter } from 'react-router-dom';
-import { RecoilRoot } from 'recoil';
 import * as useAuthMock from '../../hooks/use-auth';
 import { User } from '../../types/user';
 import { Dashboard } from './dashboard';
@@ -20,13 +20,13 @@ describe('Dashboard', () => {
   });
   const componentWrapper = (
     <AuthProvider>
-      <RecoilRoot>
+      <Provider>
         <BrowserRouter>
           <QueryClientProvider client={queryClient}>
             <Dashboard />
           </QueryClientProvider>
         </BrowserRouter>
-      </RecoilRoot>
+      </Provider>
     </AuthProvider>
   );
 

src/pages/details/details.test.tsx

@@ -3,9 +3,9 @@ import axios from '@src/utils/axios';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { render, waitFor } from '@testing-library/react';
 import MockAdapter from 'axios-mock-adapter';
+import { Provider } from 'jotai';
 import { AuthProvider } from 'react-oidc-context';
 import { BrowserRouter } from 'react-router-dom';
-import { RecoilRoot } from 'recoil';
 import * as useAuthMock from '../../hooks/use-auth';
 import { User } from '../../types/user';
 import { Details } from './details';
@@ -30,13 +30,13 @@ describe('Details', () => {
   });
   const componentWrapper = (
     <AuthProvider>
-      <RecoilRoot>
+      <Provider>
         <BrowserRouter>
           <QueryClientProvider client={queryClient}>
             <Details />
           </QueryClientProvider>
         </BrowserRouter>
-      </RecoilRoot>
+      </Provider>
     </AuthProvider>
   );