beyondessential · hrazasalman · Sep 10, 2024 · Sep 2, 2024 · Sep 3, 2024 · Sep 4, 2024
diff --git a/packages/datatrak-web/package.json b/packages/datatrak-web/package.json
@@ -15,6 +15,8 @@
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "^4.0.0-alpha.57",
     "@material-ui/styles": "^4.9.10",
+    "@tanstack/react-query": "4.36.1",
+    "@testing-library/react-hooks": "^8.0.1",
     "@tupaia/expression-parser": "workspace:*",
     "@tupaia/types": "workspace:*",
     "@tupaia/ui-components": "workspace:*",
@@ -32,7 +34,6 @@
     "react-dom": "^16.13.1",
     "react-hook-form": "^6.15.1",
     "react-leaflet": "^3.2.1",
-    "react-query": "^3.39.3",
     "react-router": "6.3.0",
     "react-router-dom": "6.3.0",
     "styled-components": "^5.1.0",

diff --git a/packages/datatrak-web/src/AppProviders.tsx b/packages/datatrak-web/src/AppProviders.tsx
@@ -3,7 +3,7 @@
  * Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
  */
 import React, { ReactNode } from 'react';
-import { MutationCache, QueryCache, QueryClient, QueryClientProvider } from 'react-query';
+import { MutationCache, QueryCache, QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ThemeProvider as MuiThemeProvider, StylesProvider } from '@material-ui/core/styles';
 import CssBaseline from '@material-ui/core/CssBaseline';
 import { ThemeProvider } from 'styled-components';

diff --git a/packages/datatrak-web/src/__tests__/features/Reports/Reports.test.tsx b/packages/datatrak-web/src/__tests__/features/Reports/Reports.test.tsx
@@ -184,10 +184,10 @@ describe('Reports', () => {
     );
     renderComponent(<Reports />);
     await userEvent.click(await screen.findByPlaceholderText('Select survey...'));
-    await userEvent.click(screen.getByText('Basic clinic data - Demo Land'));
+    await userEvent.click(await screen.findByText('Basic clinic data - Demo Land'));
     await userEvent.click(await screen.findByLabelText('Country'));
-    await userEvent.click(screen.getByPlaceholderText('Select country...'));
-    await userEvent.click(screen.getByText('Demo Land'));
+    await userEvent.click(await screen.getByPlaceholderText('Select country...'));
+    await userEvent.click(await screen.findByText('Demo Land'));
 
     const submitButton = await screen.findByRole('button', { name: 'Export' });
 
@@ -217,10 +217,10 @@ describe('Reports', () => {
     );
     renderComponent(<Reports />);
     await userEvent.click(await screen.findByPlaceholderText('Select survey...'));
-    await userEvent.click(screen.getByText('Basic clinic data - Demo Land'));
+    await userEvent.click(await screen.findByText('Basic clinic data - Demo Land'));
     await userEvent.click(await screen.findByLabelText('Country'));
-    await userEvent.click(screen.getByPlaceholderText('Select country...'));
-    await userEvent.click(screen.getByText('Demo Land'));
+    await userEvent.click(await screen.getByPlaceholderText('Select country...'));
+    await userEvent.click(await screen.findByText('Demo Land'));
 
     const submitButton = await screen.findByRole('button', { name: 'Export' });
 
@@ -244,10 +244,10 @@ describe('Reports', () => {
     );
     renderComponent(<Reports />);
     await userEvent.click(await screen.findByPlaceholderText('Select survey...'));
-    await userEvent.click(screen.getByText('Basic clinic data - Demo Land'));
+    await userEvent.click(await screen.findByText('Basic clinic data - Demo Land'));
     await userEvent.click(await screen.findByLabelText('Country'));
-    await userEvent.click(screen.getByPlaceholderText('Select country...'));
-    await userEvent.click(screen.getByText('Demo Land'));
+    await userEvent.click(await screen.getByPlaceholderText('Select country...'));
+    await userEvent.click(await screen.findByText('Demo Land'));
 
     const submitButton = await screen.findByRole('button', { name: 'Export' });
 

diff --git a/packages/datatrak-web/src/__tests__/helpers/render.tsx b/packages/datatrak-web/src/__tests__/helpers/render.tsx
@@ -3,7 +3,7 @@
  *  Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
  */
 import React from 'react';
-import { UseMutationResult, QueryClient } from 'react-query';
+import { UseMutationResult, QueryClient } from '@tanstack/react-query';
 import { MemoryRouter, Routes as Router } from 'react-router-dom';
 import { renderHook } from '@testing-library/react-hooks';
 import '@testing-library/jest-dom';

diff --git a/packages/datatrak-web/src/api/CurrentUserContext.tsx b/packages/datatrak-web/src/api/CurrentUserContext.tsx
@@ -22,7 +22,7 @@ export const useCurrentUserContext = (): CurrentUserContextType => {
 export const CurrentUserContextProvider = ({ children }: { children: React.ReactNode }) => {
   const currentUserQuery = useUser();
 
-  if (currentUserQuery.isLoading) {
+  if (currentUserQuery.isLoading || currentUserQuery.isFetching) {
     return <FullPageLoader />;
   }
 

diff --git a/packages/datatrak-web/src/api/mutations/useEditUser.ts b/packages/datatrak-web/src/api/mutations/useEditUser.ts
@@ -3,7 +3,7 @@
  * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 
-import { useMutation, useQueryClient } from 'react-query';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { UserAccountDetails } from '../../types';
 import { put } from '../api';
 
@@ -41,10 +41,10 @@ export const useEditUser = (onSuccess?: () => void) => {
     },
     {
       onSuccess: (_, variables) => {
-        queryClient.invalidateQueries('getUser');
+        queryClient.invalidateQueries(['getUser']);
         // If the user changes their project, we need to invalidate the entity descendants query so that recent entities are updated if they change back to the previous project without refreshing the page
         if (variables.projectId) {
-          queryClient.invalidateQueries('entityDescendants');
+          queryClient.invalidateQueries(['entityDescendants']);
         }
         if (onSuccess) onSuccess();
       },

diff --git a/packages/datatrak-web/src/api/mutations/useExportSurveyResponses.ts b/packages/datatrak-web/src/api/mutations/useExportSurveyResponses.ts
@@ -3,7 +3,7 @@
  *  Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
  */
 
-import { useMutation } from 'react-query';
+import { useMutation } from '@tanstack/react-query';
 import axios from 'axios';
 import downloadJs from 'downloadjs';
 import { API_URL, timeout } from '../api';

diff --git a/packages/datatrak-web/src/api/mutations/useLogin.ts b/packages/datatrak-web/src/api/mutations/useLogin.ts
@@ -3,7 +3,7 @@
  *  Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
  */
 
-import { useMutation, useQueryClient } from 'react-query';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { gaEvent, useFromLocation } from '../../utils';
 import { useNavigate } from 'react-router-dom';
 import { post } from '../api';
@@ -35,15 +35,13 @@ export const useLogin = () => {
       },
       onSuccess: async ({ user }) => {
         await queryClient.invalidateQueries();
+        await queryClient.removeQueries();
+
         if (from) {
-          navigate(from, {
-            state: null,
-          });
+          navigate(from, { state: null });
         } else {
           const path = user.projectId ? ROUTES.HOME : ROUTES.PROJECT_SELECT;
-          navigate(path, {
-            state: from,
-          });
+          navigate(path, { state: from });
         }
       },
       meta: {

diff --git a/packages/datatrak-web/src/api/mutations/useLogout.ts b/packages/datatrak-web/src/api/mutations/useLogout.ts
@@ -3,13 +3,13 @@
  *  Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
  */
 
-import { useMutation, useQueryClient } from 'react-query';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { post } from '../api';
 
 export const useLogout = () => {
   const queryClient = useQueryClient();
 
-  return useMutation('logout', () => post('logout'), {
+  return useMutation(['logout'], () => post('logout'), {
     onSuccess: () => {
       queryClient.invalidateQueries();
     },

diff --git a/packages/datatrak-web/src/api/mutations/useOneTimeLogin.ts b/packages/datatrak-web/src/api/mutations/useOneTimeLogin.ts
@@ -3,7 +3,7 @@
  *  Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
  */
 
-import { useMutation, useQueryClient } from 'react-query';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { post } from '../api';
 
 type OneTimeLoginToken = string;

diff --git a/packages/datatrak-web/src/api/mutations/useRegister.ts b/packages/datatrak-web/src/api/mutations/useRegister.ts
@@ -3,7 +3,7 @@
  *  Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
  */
 
-import { useMutation } from 'react-query';
+import { useMutation } from '@tanstack/react-query';
 import { post } from '../api';
 
 // Todo: replace with request body type from backend

diff --git a/packages/datatrak-web/src/api/mutations/useRequestDeleteAccount.ts b/packages/datatrak-web/src/api/mutations/useRequestDeleteAccount.ts
@@ -3,7 +3,7 @@
  *  Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
  */
 
-import { useMutation } from 'react-query';
+import { useMutation } from '@tanstack/react-query';
 import { post } from '../api';
 import { useEditUser } from '.';
 

diff --git a/packages/datatrak-web/src/api/mutations/useRequestProjectAccess.ts b/packages/datatrak-web/src/api/mutations/useRequestProjectAccess.ts
@@ -3,7 +3,7 @@
  * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 
-import { useMutation, useQueryClient } from 'react-query';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { Country, Project } from '@tupaia/types';
 import { post } from '../api';
 

diff --git a/packages/datatrak-web/src/api/mutations/useRequestResetPassword.ts b/packages/datatrak-web/src/api/mutations/useRequestResetPassword.ts
@@ -3,7 +3,7 @@
  *  Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
  */
 
-import { useMutation } from 'react-query';
+import { useMutation } from '@tanstack/react-query';
 import { post } from '../api';
 
 type ResetPasswordParams = {

diff --git a/packages/datatrak-web/src/api/mutations/useResendVerificationEmail.ts b/packages/datatrak-web/src/api/mutations/useResendVerificationEmail.ts
@@ -3,7 +3,7 @@
  *  Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
  */
 
-import { useMutation } from 'react-query';
+import { useMutation } from '@tanstack/react-query';
 import { post } from '../api';
 
 type RequestBody = {

diff --git a/packages/datatrak-web/src/api/mutations/useResetPassword.ts b/packages/datatrak-web/src/api/mutations/useResetPassword.ts
@@ -3,7 +3,7 @@
  *  Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
  */
 
-import { useMutation } from 'react-query';
+import { useMutation } from '@tanstack/react-query';
 import { useLocation, useNavigate, useSearchParams } from 'react-router-dom';
 import { post } from '../api';
 import { PASSWORD_RESET_TOKEN_PARAM } from '../../constants';

diff --git a/packages/datatrak-web/src/api/mutations/useResubmitSurveyResponse.ts b/packages/datatrak-web/src/api/mutations/useResubmitSurveyResponse.ts
@@ -3,7 +3,7 @@
  *  Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 
-import { useMutation } from 'react-query';
+import { useMutation } from '@tanstack/react-query';
 import { generatePath, useNavigate, useParams } from 'react-router';
 import { post } from '../api';
 import { useSurveyResponse } from '../queries';

diff --git a/packages/datatrak-web/src/api/mutations/useSubmitSurveyResponse.ts b/packages/datatrak-web/src/api/mutations/useSubmitSurveyResponse.ts
@@ -3,7 +3,7 @@
  *  Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
  */
 
-import { useMutation, useQueryClient } from 'react-query';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { generatePath, useNavigate, useParams } from 'react-router';
 import { getBrowserTimeZone } from '@tupaia/utils';
 import { Coconut } from '../../components';
@@ -64,11 +64,11 @@ export const useSubmitSurveyResponse = () => {
         gaEvent('submit_survey_by_user', user.id!);
       },
       onSuccess: data => {
-        queryClient.invalidateQueries('surveyResponses');
-        queryClient.invalidateQueries('recentSurveys');
-        queryClient.invalidateQueries('rewards');
-        queryClient.invalidateQueries('leaderboard');
-        queryClient.invalidateQueries('entityDescendants'); // Refresh recent entities
+        queryClient.invalidateQueries(['surveyResponses']);
+        queryClient.invalidateQueries(['recentSurveys']);
+        queryClient.invalidateQueries(['rewards']);
+        queryClient.invalidateQueries(['leaderboard']);
+        queryClient.invalidateQueries(['entityDescendants']); // Refresh recent entities
 
         const createNewAutocompleteQuestions = surveyResponseData?.questions?.filter(
           question => question?.config?.autocomplete?.createNew,

diff --git a/packages/datatrak-web/src/api/mutations/useTupaiaRedirect.ts b/packages/datatrak-web/src/api/mutations/useTupaiaRedirect.ts
@@ -3,7 +3,7 @@
  * Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
  */
 
-import { useMutation } from 'react-query';
+import { useMutation } from '@tanstack/react-query';
 import { useCurrentUserContext } from '../CurrentUserContext';
 import { post } from '../api';
 

diff --git a/packages/datatrak-web/src/api/queries/useActivityFeed.ts b/packages/datatrak-web/src/api/queries/useActivityFeed.ts
@@ -3,7 +3,7 @@
  * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 
-import { useInfiniteQuery } from 'react-query';
+import { useInfiniteQuery } from '@tanstack/react-query';
 import { DatatrakWebActivityFeedRequest, Project } from '@tupaia/types';
 import { get } from '../api';
 import { useCurrentUserContext } from '..';

diff --git a/packages/datatrak-web/src/api/queries/useAutocompleteOptions.ts b/packages/datatrak-web/src/api/queries/useAutocompleteOptions.ts
@@ -3,7 +3,7 @@
  *  Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
  */
 
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 import { Option } from '@tupaia/types';
 import { get } from '../api';
 import { useSurveyForm } from '../../features';

diff --git a/packages/datatrak-web/src/api/queries/useCountryAccessList.ts b/packages/datatrak-web/src/api/queries/useCountryAccessList.ts
@@ -3,7 +3,7 @@
  * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 import { Project, ProjectCountryAccessListRequest } from '@tupaia/types';
 import { get } from '../api';
 

diff --git a/packages/datatrak-web/src/api/queries/useEntities.ts b/packages/datatrak-web/src/api/queries/useEntities.ts
@@ -2,7 +2,7 @@
  * Tupaia
  *  Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
  */
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 import { DatatrakWebEntitiesRequest } from '@tupaia/types';
 import { get } from '../api';
 

diff --git a/packages/datatrak-web/src/api/queries/useEntity.ts b/packages/datatrak-web/src/api/queries/useEntity.ts
@@ -2,7 +2,7 @@
  * Tupaia
  *  Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
  */
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 import { get } from '../api';
 
 export const useEntityByCode = (entityCode, options?) => {

diff --git a/packages/datatrak-web/src/api/queries/useLeaderboard.ts b/packages/datatrak-web/src/api/queries/useLeaderboard.ts
@@ -2,7 +2,7 @@
  * Tupaia
  *  Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
  */
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 import { DatatrakWebLeaderboardRequest, Project } from '@tupaia/types';
 import { get } from '../api';
 

diff --git a/packages/datatrak-web/src/api/queries/useProject.ts b/packages/datatrak-web/src/api/queries/useProject.ts
@@ -4,7 +4,7 @@
  *
  */
 
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 import { WebServerProjectRequest } from '@tupaia/types';
 import { get } from '../api';
 

diff --git a/packages/datatrak-web/src/api/queries/useProjectEntities.ts b/packages/datatrak-web/src/api/queries/useProjectEntities.ts
@@ -2,7 +2,7 @@
  * Tupaia
  *  Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
  */
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 import { DatatrakWebEntityDescendantsRequest } from '@tupaia/types';
 import { get } from '../api';
 

diff --git a/packages/datatrak-web/src/api/queries/useProjectSurveys.ts b/packages/datatrak-web/src/api/queries/useProjectSurveys.ts
@@ -3,7 +3,7 @@
  *  Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
  */
 
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 import { DatatrakWebSurveyRequest, Project } from '@tupaia/types';
 import { get } from '../api';
 import { Entity } from '../../types';

diff --git a/packages/datatrak-web/src/api/queries/useProjects.ts b/packages/datatrak-web/src/api/queries/useProjects.ts
@@ -3,10 +3,10 @@
  *  Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
  */
 
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 import { DatatrakWebProjectsRequest } from '@tupaia/types';
 import { get } from '../api';
 
 export const useProjects = () => {
-  return useQuery('projects', (): Promise<DatatrakWebProjectsRequest.ResBody> => get('projects'));
+  return useQuery(['projects'], (): Promise<DatatrakWebProjectsRequest.ResBody> => get('projects'));
 };
diff --git a/packages/datatrak-web/src/api/queries/useRecentSurveys.ts b/packages/datatrak-web/src/api/queries/useRecentSurveys.ts
@@ -2,7 +2,7 @@
  * Tupaia
  *  Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
  */
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 import { DatatrakWebRecentSurveysRequest, Project, UserAccount } from '@tupaia/types';
 import { get } from '../api';
 import { useCurrentUserContext } from '../CurrentUserContext';

diff --git a/packages/datatrak-web/src/api/queries/useSurvey.ts b/packages/datatrak-web/src/api/queries/useSurvey.ts
@@ -3,7 +3,7 @@
  *  Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
  */
 
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 import { DatatrakWebSurveyRequest } from '@tupaia/types';
 import { get } from '../api';
 

diff --git a/packages/datatrak-web/src/api/queries/useSurveyResponse.ts b/packages/datatrak-web/src/api/queries/useSurveyResponse.ts
@@ -2,7 +2,7 @@
  * Tupaia
  *  Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 import { useNavigate } from 'react-router';
 import { DatatrakWebSingleSurveyResponseRequest, QuestionType } from '@tupaia/types';
 import { get } from '../api';

diff --git a/packages/datatrak-web/src/api/queries/useSurveyResponses.ts b/packages/datatrak-web/src/api/queries/useSurveyResponses.ts
@@ -2,7 +2,7 @@
  * Tupaia
  *  Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
  */
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 import { DatatrakWebSurveyResponsesRequest, UserAccount, Project } from '@tupaia/types';
 import { useCurrentUserContext } from '../CurrentUserContext';
 import { get } from '../api';