Merge branch '38-register-user' of github.com:sfbrigade/sf-lifeline i…

…nto 38-register-user

client/package.json

@@ -15,6 +15,7 @@
   "dependencies": {
     "@mantine/core": "^7.5.3",
     "@mantine/hooks": "^7.5.3",
+    "@tanstack/react-query": "^5.18.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.22.1"

client/src/App.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+import { Routes, Route } from 'react-router-dom';
 import Index from './pages';
 import Login from './pages/login';
 import NavBar from './components/NavBar';
@@ -8,12 +8,10 @@ function App() {
   return (
     <>
       <NavBar />
-      <Router>
-        <Routes>
-          <Route path="/" element={<Index />} />
-          <Route path="/login" element={<Login />} />
-        </Routes>
-      </Router>
+      <Routes>
+        <Route path="/" element={<Index />} />
+        <Route path="/login" element={<Login />} />
+      </Routes>
     </>
   );
 }

client/src/main.jsx

@@ -1,16 +1,24 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import App from './App.jsx';
 import './index.css';
 import '@mantine/core/styles.css';
 import { theme } from './theme';
 
 import { MantineProvider } from '@mantine/core';
 
+const queryClient = new QueryClient({});
+
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
-    <MantineProvider theme={theme}>
-      <App />
-    </MantineProvider>
+    <QueryClientProvider client={queryClient}>
+      <BrowserRouter>
+        <MantineProvider theme={theme}>
+          <App />
+        </MantineProvider>
+      </BrowserRouter>
+    </QueryClientProvider>
   </React.StrictMode>,
 );

client/src/pages/index.jsx

@@ -1,6 +1,23 @@
 import React from 'react';
+import { useQuery } from '@tanstack/react-query';
 
 function Index() {
+  const { isFetching, error } = useQuery({
+    queryKey: ['users'],
+    queryFn: () =>
+      fetch('/api/v1/users').then((res) => {
+        return res.json();
+      }),
+  });
+
+  if (isFetching) {
+    return <main>Index is loading</main>;
+  }
+
+  if (error) {
+    return <main>Index fetch failed</main>;
+  }
+
   return <main>Index is working</main>;
 }