[WIFI-11223] Updated to latest react-query

Signed-off-by: Charles <charles.bourque96@gmail.com>

package.json

@@ -47,7 +47,7 @@
     "react-fast-compare": "^3.2.0",
     "react-i18next": "^11.18.6",
     "react-masonry-css": "^1.0.16",
-    "react-query": "^3.39.2",
+    "@tanstack/react-query": "^4.12.0",
     "react-router-dom": "^6.4.2",
     "react-table": "^7.8.0",
     "source-map-explorer": "^2.5.3",

src/App.tsx

@@ -1,6 +1,6 @@
 import React, { Suspense } from 'react';
 import { Spinner } from '@chakra-ui/react';
-import { QueryClientProvider, QueryClient } from 'react-query';
+import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
 import { HashRouter } from 'react-router-dom';
 import { AuthProvider } from 'contexts/AuthProvider';
 import { ControllerSocketProvider } from 'contexts/ControllerSocketProvider';

src/components/DataTables/DataTable/index.tsx

@@ -36,8 +36,8 @@ import {
   TableInstance,
 } from 'react-table';
 import { v4 as uuid } from 'uuid';
-import { LoadingOverlay } from 'components/LoadingOverlay';
 import SortIcon from './SortIcon';
+import { LoadingOverlay } from 'components/LoadingOverlay';
 import { Column, PageInfo } from 'models/Table';
 
 const defaultProps = {

src/components/Modals/WifiScanModal/index.tsx

@@ -57,7 +57,7 @@ export const WifiScanModal = ({ modalProps: { isOpen, onClose }, serialNumber }:
     if (isOpen) resetData();
   }, [isOpen]);
   return (
-    <Modal onClose={closeModal} isOpen={isOpen} size="xl" scrollBehavior="inside">
+    (<Modal onClose={closeModal} isOpen={isOpen} size="xl" scrollBehavior="inside">
       <ModalOverlay />
       <ModalContent maxWidth={{ sm: '600px', md: '700px', lg: '800px', xl: '50%' }}>
         <ModalHeader
@@ -66,7 +66,7 @@ export const WifiScanModal = ({ modalProps: { isOpen, onClose }, serialNumber }:
             <>
               {csvData ? (
                 // @ts-ignore
-                <CSVLink
+                (<CSVLink
                   filename={`wifi_scan_${serialNumber}_${dateForFilename(new Date().getTime() / 1000)}.csv`}
                   data={csvData as object[]}
                 >
@@ -77,7 +77,7 @@ export const WifiScanModal = ({ modalProps: { isOpen, onClose }, serialNumber }:
                     label={t('common.download')}
                     onClick={() => {}}
                   />
-                </CSVLink>
+                </CSVLink>)
               ) : (
                 <ResponsiveButton
                   color="gray"
@@ -118,6 +118,6 @@ export const WifiScanModal = ({ modalProps: { isOpen, onClose }, serialNumber }:
         confirm={closeCancelAndForm}
         cancel={closeConfirm}
       />
-    </Modal>
+    </Modal>)
   );
 };

src/contexts/AuthProvider/utils.ts

@@ -1,5 +1,5 @@
+import { useQuery } from '@tanstack/react-query';
 import axios from 'axios';
-import { useQuery } from 'react-query';
 import { axiosProv } from 'constants/axiosInstances';
 import { User } from 'models/User';
 

src/contexts/ControllerSocketProvider/index.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useMemo } from 'react';
-import { QueryClient, useQueryClient } from 'react-query';
+import { QueryClient, useQueryClient } from '@tanstack/react-query';
 import { useControllerStore } from './useStore';
 import { SerialSearchMessage, WebSocketInitialMessage, WebSocketNotification } from './utils';
 import { axiosGw, axiosSec } from 'constants/axiosInstances';

src/hooks/Network/Account.ts

@@ -1,8 +1,8 @@
 import { Dispatch, SetStateAction } from 'react';
 import { useToast } from '@chakra-ui/react';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { AxiosError } from 'axios';
 import { useTranslation } from 'react-i18next';
-import { useMutation, useQuery, useQueryClient } from 'react-query';
 import { v4 as uuid } from 'uuid';
 import { User } from '../../models/User';
 import { axiosSec } from 'constants/axiosInstances';

src/hooks/Network/Blacklist.ts

@@ -1,5 +1,5 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { AxiosError } from 'axios';
-import { useMutation, useQuery, useQueryClient } from 'react-query';
 import { axiosGw } from 'constants/axiosInstances';
 import { PageInfo } from 'models/Table';
 

src/hooks/Network/Commands.ts

@@ -1,5 +1,5 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { AxiosError } from 'axios';
-import { useMutation, useQuery, useQueryClient } from 'react-query';
 import { axiosGw } from 'constants/axiosInstances';
 
 export type DeviceCommandHistory = {

src/hooks/Network/Controller.ts

@@ -1,4 +1,4 @@
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 import { axiosGw } from 'constants/axiosInstances';
 
 export type ControllerDashboardAssociations = {

src/hooks/Network/DefaultConfigurations.ts

@@ -1,5 +1,5 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { AxiosError } from 'axios';
-import { useMutation, useQuery, useQueryClient } from 'react-query';
 import { axiosGw } from 'constants/axiosInstances';
 import { useEndpointStatus } from 'hooks/useEndpointStatus';
 import { DeviceConfiguration } from 'models/Device';

src/hooks/Network/DeviceLogs.ts

@@ -1,5 +1,5 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { AxiosError } from 'axios';
-import { useMutation, useQuery, useQueryClient } from 'react-query';
 import { axiosGw } from 'constants/axiosInstances';
 
 export type DeviceLog = {

src/hooks/Network/DeviceTypes.ts

@@ -1,4 +1,4 @@
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 import { axiosFms } from 'constants/axiosInstances';
 
 const useGetDeviceTypes = () =>

src/hooks/Network/Devices.ts

@@ -1,7 +1,7 @@
 import { useToast } from '@chakra-ui/react';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { AxiosError } from 'axios';
 import { useTranslation } from 'react-i18next';
-import { useMutation, useQuery, useQueryClient } from 'react-query';
 import { v4 as uuid } from 'uuid';
 import { axiosGw } from 'constants/axiosInstances';
 import { useAuth } from 'contexts/AuthProvider';

src/hooks/Network/Endpoints.ts

@@ -1,7 +1,7 @@
 import { useToast } from '@chakra-ui/react';
+import { useQuery } from '@tanstack/react-query';
 import { AxiosError } from 'axios';
 import { useTranslation } from 'react-i18next';
-import { useQuery } from 'react-query';
 import { axiosGw, axiosProv, axiosSec } from 'constants/axiosInstances';
 
 export type EndpointApiResponse = {

src/hooks/Network/Firmware.ts

@@ -1,7 +1,7 @@
 import { useToast } from '@chakra-ui/react';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { AxiosError } from 'axios';
 import { useTranslation } from 'react-i18next';
-import { useMutation, useQuery, useQueryClient } from 'react-query';
 import { v4 as uuid } from 'uuid';
 import { axiosFms, axiosGw } from 'constants/axiosInstances';
 import { Firmware } from 'models/Firmware';

src/hooks/Network/GoogleAuthenticator.ts

@@ -1,8 +1,8 @@
 import { Buffer } from 'buffer';
 import { useToast } from '@chakra-ui/react';
+import { useMutation, useQuery } from '@tanstack/react-query';
 import { AxiosError } from 'axios';
 import { useTranslation } from 'react-i18next';
-import { useMutation, useQuery } from 'react-query';
 import { axiosSec } from 'constants/axiosInstances';
 
 export const useGetGoogleAuthenticatorQrCode = () => {

src/hooks/Network/HealthChecks.ts

@@ -1,5 +1,5 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { AxiosError } from 'axios';
-import { useMutation, useQuery, useQueryClient } from 'react-query';
 import { axiosGw } from 'constants/axiosInstances';
 
 export type HealthCheck = {

src/hooks/Network/Inventory.ts

@@ -1,6 +1,6 @@
 /* eslint-disable import/prefer-default-export */
+import { useQuery } from '@tanstack/react-query';
 import { AxiosError } from 'axios';
-import { useQuery } from 'react-query';
 import { axiosProv } from 'constants/axiosInstances';
 import { Note } from 'models/Note';
 

src/hooks/Network/Login.ts

@@ -1,7 +1,7 @@
 import { useToast } from '@chakra-ui/react';
+import { useMutation } from '@tanstack/react-query';
 import { AxiosError } from 'axios';
 import { useTranslation } from 'react-i18next';
-import { useMutation } from 'react-query';
 import { axiosSec } from 'constants/axiosInstances';
 
 export interface ChangePasswordRequest {

src/hooks/Network/Requirements.ts

@@ -1,4 +1,4 @@
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 import { axiosSec } from '../../constants/axiosInstances';
 
 // eslint-disable-next-line import/prefer-default-export

src/hooks/Network/Statistics.ts

@@ -1,6 +1,6 @@
 /* eslint-disable import/prefer-default-export */
+import { useQuery } from '@tanstack/react-query';
 import { AxiosError } from 'axios';
-import { useQuery } from 'react-query';
 import { axiosGw } from 'constants/axiosInstances';
 
 type DeviceInterfaceStatistics = {

src/hooks/Network/System.ts

@@ -1,8 +1,8 @@
 import { useToast } from '@chakra-ui/react';
+import { useMutation, useQuery } from '@tanstack/react-query';
 import { AxiosError } from 'axios';
 import * as axios from 'axios';
 import { useTranslation } from 'react-i18next';
-import { useMutation, useQuery } from 'react-query';
 
 type System = {
   UI?: string;

src/hooks/Network/Telemetry.ts

@@ -1,7 +1,7 @@
 import React, { useRef, useState } from 'react';
 import { useToast } from '@chakra-ui/react';
+import { useMutation } from '@tanstack/react-query';
 import { useTranslation } from 'react-i18next';
-import { useMutation } from 'react-query';
 import { axiosGw } from 'constants/axiosInstances';
 import { useAuth } from 'contexts/AuthProvider';
 

src/hooks/Network/Trace.ts

@@ -1,6 +1,6 @@
 import { useToast } from '@chakra-ui/react';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { useTranslation } from 'react-i18next';
-import { useMutation, useQuery, useQueryClient } from 'react-query';
 import { axiosGw } from 'constants/axiosInstances';
 
 export type TraceResponse = {

src/hooks/Network/Users.ts

@@ -1,7 +1,7 @@
 import { useToast } from '@chakra-ui/react';
+import { useMutation, useQuery } from '@tanstack/react-query';
 import { AxiosError } from 'axios';
 import { useTranslation } from 'react-i18next';
-import { useMutation, useQuery } from 'react-query';
 import { axiosSec } from 'constants/axiosInstances';
 import { User } from 'models/User';
 

src/hooks/useMutationResult.ts

@@ -1,8 +1,8 @@
 import { useCallback, useMemo } from 'react';
 import { useToast } from '@chakra-ui/react';
+import { useQueryClient } from '@tanstack/react-query';
 import { AxiosError } from 'axios';
 import { useTranslation } from 'react-i18next';
-import { useQueryClient } from 'react-query';
 import { v4 as uuid } from 'uuid';
 
 export type UseMutationResultProps = {

src/pages/Device/WifiAnalysis/index.tsx

@@ -125,7 +125,7 @@ const WifiAnalysisCard = ({ serialNumber }: Props) => {
   }, [parsedData]);
 
   return (
-    <Card mb={4}>
+    (<Card mb={4}>
       <CardHeader>
         <Flex w="100%">
           <Heading size="md" w="180px">
@@ -151,7 +151,7 @@ const WifiAnalysisCard = ({ serialNumber }: Props) => {
         <Box>
           {parsedData && parsedData[sliderIndex]?.associations[0]?.recorded !== undefined ? (
             // @ts-ignore
-            <FormattedDate date={parsedData[sliderIndex]?.associations[0]?.recorded} />
+            (<FormattedDate date={parsedData[sliderIndex]?.associations[0]?.recorded} />)
           ) : (
             '-'
           )}
@@ -161,7 +161,7 @@ const WifiAnalysisCard = ({ serialNumber }: Props) => {
           <WifiAnalysisAssocationsTable data={parsedData?.[sliderIndex]?.associations} ouis={ouiKeyValue} />
         </Box>
       </CardBody>
-    </Card>
+    </Card>)
   );
 };
 

src/pages/UsersPage/Table/CreateUserModal/index.jsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { AddIcon } from '@chakra-ui/icons';
 import { Button, useDisclosure, Modal, ModalOverlay, ModalContent, ModalBody } from '@chakra-ui/react';
+import { useMutation } from '@tanstack/react-query';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
-import { useMutation } from 'react-query';
 import CreateUserForm from './Form';
 import { CloseButton } from 'components/Buttons/CloseButton';
 import { SaveButton } from 'components/Buttons/SaveButton';

src/pages/UsersPage/Table/EditUserModal/index.jsx

@@ -10,9 +10,9 @@ import {
   useDisclosure,
   useBoolean,
 } from '@chakra-ui/react';
+import { useMutation } from '@tanstack/react-query';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
-import { useMutation } from 'react-query';
 import UpdateUserForm from './Form';
 import { CloseButton } from 'components/Buttons/CloseButton';
 import { EditButton } from 'components/Buttons/EditButton';

src/pages/UsersPage/Table/UserActions.jsx

@@ -17,10 +17,10 @@ import {
   useDisclosure,
   useToast,
 } from '@chakra-ui/react';
+import { useMutation } from '@tanstack/react-query';
 import { MagnifyingGlass, Trash } from 'phosphor-react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
-import { useMutation } from 'react-query';
 import { v4 as uuid } from 'uuid';
 import ActionsDropdown from './ActionsDropdown';
 import { axiosSec } from 'constants/axiosInstances';