Replace Recoil with Jotai for global state management

Fixes #371

Replace Recoil with Jotai for global state management.

* Update `package.json` to list `jotai` as a dependency and remove `recoil`.
* Update `README.md` to mention Jotai as the state management tool instead of Recoil.
* Replace `RecoilRoot` with `Provider` from Jotai in multiple test files such as `src/components/header/header.test.tsx`, `src/components/protected-route/protected-route.test.tsx`, `src/hooks/use-auth-sso.test.tsx`, `src/hooks/use-auth.test.tsx`, `src/main.tsx`, `src/pages/dashboard/dashboard-bar-chart/dashboard-bar-chart.test.tsx`, `src/pages/dashboard/dashboard-pie-chart/dashboard-pie-chart.test.tsx`, `src/pages/dashboard/dashboard-table/dashboard-table.test.tsx`, `src/pages/dashboard/dashboard.test.tsx`, `src/pages/details/details.test.tsx`, `src/pages/home/home.test.tsx`, `src/pages/search-results/search-results.test.tsx`, and `src/pages/sign-in/sign-in.test.tsx`.
* Update import statements for `Provider` from Jotai in the above-mentioned files.
* Replace `atom` with `atom` from Jotai in `src/store.ts` and update the import statement.
* Replace `useRecoilState` with `useAtom` from Jotai in `src/hooks/use-auth.ts` and update the import statement.

---

For more details, open the [Copilot Workspace session](https://copilot-workspace.githubnext.com/MetroStar/comet-starter/issues/371?shareId=XXXX-XXXX-XXXX-XXXX).

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/)

src/components/header/header.test.tsx

@@ -3,19 +3,19 @@ import userEvent from '@testing-library/user-event';
 import { BrowserRouter } from 'react-router-dom';
 
 import { AuthProvider } from 'react-oidc-context';
-import { RecoilRoot } from 'recoil';
+import { Provider } from 'jotai';
 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

@@ -2,18 +2,18 @@ import { User } from '@src/types/user';
 import { act, render } from '@testing-library/react';
 import { AuthProvider } from 'react-oidc-context';
 import { BrowserRouter } from 'react-router-dom';
-import { RecoilRoot } from 'recoil';
+import { Provider } from 'jotai';
 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 { AuthProvider } from 'react-oidc-context';
-import { RecoilRoot } from 'recoil';
+import { Provider } from 'jotai';
 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 { useEffect, useState } from 'react';
 import { useAuth as useKeycloakAuth } from 'react-oidc-context';
-import { useRecoilState } from 'recoil';
+import { useAtom } from 'jotai';
 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

@@ -2,7 +2,7 @@ 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 { Provider } from 'jotai';
 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 { BrowserRouter } from 'react-router-dom';
-import { RecoilRoot } from 'recoil';
+import { Provider } from 'jotai';
 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 { BrowserRouter } from 'react-router-dom';
-import { RecoilRoot } from 'recoil';
+import { Provider } from 'jotai';
 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 { BrowserRouter } from 'react-router-dom';
-import { RecoilRoot } from 'recoil';
+import { Provider } from 'jotai';
 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

@@ -5,7 +5,7 @@ import { act, render } from '@testing-library/react';
 import MockAdapter from 'axios-mock-adapter';
 import { AuthProvider } from 'react-oidc-context';
 import { BrowserRouter } from 'react-router-dom';
-import { RecoilRoot } from 'recoil';
+import { Provider } from 'jotai';
 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

@@ -5,7 +5,7 @@ import { render, waitFor } from '@testing-library/react';
 import MockAdapter from 'axios-mock-adapter';
 import { AuthProvider } from 'react-oidc-context';
 import { BrowserRouter } from 'react-router-dom';
-import { RecoilRoot } from 'recoil';
+import { Provider } from 'jotai';
 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>
   );
 

src/pages/home/home.test.tsx

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

src/pages/search-results/search-results.test.tsx

@@ -6,7 +6,7 @@ import { act, render } from '@testing-library/react';
 import MockAdapter from 'axios-mock-adapter';
 import { AuthProvider } from 'react-oidc-context';
 import { BrowserRouter } from 'react-router-dom';
-import { RecoilRoot } from 'recoil';
+import { Provider } from 'jotai';
 import * as useAuthMock from '../../hooks/use-auth';
 import { SearchResults } from './search-results';
 
@@ -21,13 +21,13 @@ describe('SearchResults', () => {
 
   const componentWrapper = (
     <AuthProvider>
-      <RecoilRoot>
+      <Provider>
         <BrowserRouter>
           <QueryClientProvider client={queryClient}>
             <SearchResults />
           </QueryClientProvider>
         </BrowserRouter>
-      </RecoilRoot>
+      </Provider>
     </AuthProvider>
   );
 

src/pages/sign-in/sign-in.test.tsx

@@ -3,19 +3,19 @@ import userEvent from '@testing-library/user-event';
 import { BrowserRouter } from 'react-router-dom';
 
 import { AuthProvider } from 'react-oidc-context';
-import { RecoilRoot } from 'recoil';
+import { Provider } from 'jotai';
 import * as useAuthMock from '../../hooks/use-auth';
 import { User } from '../../types/user';
 import { SignIn } from './sign-in';
 
 describe('SignIn', () => {
   const signInComponent = (
     <AuthProvider>
-      <RecoilRoot>
+      <Provider>
         <BrowserRouter>
           <SignIn />
         </BrowserRouter>
-      </RecoilRoot>
+      </Provider>
     </AuthProvider>
   );
 

src/store.ts

@@ -1,5 +1,5 @@
 import { User } from '@src/types/user';
-import { atom } from 'recoil';
+import { atom } from 'jotai';
 
 const signedInState = atom({
   key: 'signedIn',