task/wg-199-react-query-initial-setup (#185)

react/package.json

@@ -25,6 +25,7 @@
         "@reduxjs/toolkit": "^1.8.4",
         "@testing-library/react": "^13.4.0",
         "@types/leaflet.markercluster": "^1.5.1",
+        "axios": "^1.6.2",
         "eslint-config-prettier": "^8.5.0",
         "eslint-plugin-jsx-a11y": "^6.6.1",
         "eslint-plugin-prettier": "^4.2.1",
@@ -34,6 +35,7 @@
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-leaflet": "^4.2.0",
+        "react-query": "^3.39.3",
         "react-redux": "^8.0.2",
         "react-router-dom": "^6.3.0"
     },

react/src/hooks/index.ts

@@ -0,0 +1 @@
+export { default as useProjects } from './projects/useProjects';

react/src/hooks/projects/useProjects.ts

@@ -0,0 +1,14 @@
+import { UseQueryResult } from 'react-query';
+import { Project } from '../../types';
+import { useGet } from '../../requests';
+
+const useProjects = (): UseQueryResult<Project[]> => {
+  const query = useGet<Project[]>({
+    endpoint: '/projects/',
+    key: ['projects'],
+    baseUrl: 'https://agave.designsafe-ci.org/geo/v2',
+  });
+  return query;
+};
+
+export default useProjects;

react/src/index.tsx

@@ -1,14 +1,19 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+import { QueryClient, QueryClientProvider } from 'react-query';
 import App from './AppRouter';
 import './index.css';
 import store from './redux/store';
 import { Provider } from 'react-redux';
 
+const queryClient = new QueryClient();
+
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
     <Provider store={store}>
-      <App />
+      <QueryClientProvider client={queryClient}>
+        <App />
+      </QueryClientProvider>
     </Provider>
   </React.StrictMode>
 );

react/src/pages/Login/Login.test.tsx

@@ -3,13 +3,17 @@ import { render, waitFor } from '@testing-library/react';
 import Login from './Login';
 import { Provider } from 'react-redux';
 import store from '../../redux/store';
+import { QueryClientProvider } from 'react-query';
+import { testQueryClient } from '../../testUtil';
 import { MemoryRouter } from 'react-router';
 
 test('renders login', async () => {
   const { getByText } = render(
     <Provider store={store}>
       <MemoryRouter>
-        <Login />
+        <QueryClientProvider client={testQueryClient}>
+          <Login />
+        </QueryClientProvider>
       </MemoryRouter>
     </Provider>
   );

react/src/pages/MainMenu/MainMenu.test.tsx

@@ -1,13 +1,17 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import MainMenu from './MainMenu';
+import { QueryClientProvider } from 'react-query';
+import { testQueryClient } from '../../testUtil';
 import { Provider } from 'react-redux';
 import store from '../../redux/store';
 
 test('renders menu', () => {
   const { getByText } = render(
     <Provider store={store}>
-      <MainMenu />
+      <QueryClientProvider client={testQueryClient}>
+        <MainMenu />
+      </QueryClientProvider>
     </Provider>
   );
   expect(getByText(/Main Menu/)).toBeDefined();