chore: udpate react, downshift and routing

packages/admin-ui/src/pages/Authentication/Input2FAState.jsx

@@ -1,7 +1,7 @@
 import { useMutation, useLazyQuery, gql } from '@apollo/client'
 import { Form, Formik } from 'formik'
 import React, { useContext, useState } from 'react'
-import { useHistory } from 'react-router-dom'
+import { useLocation } from 'wouter'
 import { TL1, P } from '../../components/typography'
 
 import AppContext from '../../AppContext'
@@ -37,7 +37,7 @@ const GET_USER_DATA = gql`
 `
 
 const Input2FAState = ({ state, dispatch }) => {
-  const history = useHistory()
+  const [, navigate] = useLocation()
   const { setUserData } = useContext(AppContext)
 
   const [invalidToken, setInvalidToken] = useState(false)
@@ -45,7 +45,7 @@ const Input2FAState = ({ state, dispatch }) => {
   const [getUserData, { error: queryError }] = useLazyQuery(GET_USER_DATA, {
     onCompleted: ({ userData }) => {
       setUserData(userData)
-      history.push('/')
+      navigate('/')
     },
   })
 

packages/admin-ui/src/pages/Authentication/InputFIDOState.jsx

@@ -2,7 +2,7 @@ import { useMutation, useLazyQuery, gql } from '@apollo/client'
 import { startAssertion } from '@simplewebauthn/browser'
 import { Field, Form, Formik } from 'formik'
 import React, { useState, useContext } from 'react'
-import { useHistory } from 'react-router-dom'
+import { useLocation } from 'wouter'
 import { H2, Label2, P } from '../../components/typography'
 import * as Yup from 'yup'
 
@@ -61,7 +61,7 @@ const InputFIDOState = ({ state, strategy }) => {
     }
   `
 
-  const history = useHistory()
+  const [, navigate] = useLocation()
   const { setUserData } = useContext(AppContext)
 
   const [localClientField, setLocalClientField] = useState('')
@@ -125,7 +125,7 @@ const InputFIDOState = ({ state, strategy }) => {
   const [getUserData, { error: queryError }] = useLazyQuery(GET_USER_DATA, {
     onCompleted: ({ userData }) => {
       setUserData(userData)
-      history.push('/')
+      navigate('/')
     },
   })
 

packages/admin-ui/src/pages/Authentication/LoginState.jsx

@@ -2,7 +2,7 @@ import { useMutation, useLazyQuery, gql } from '@apollo/client'
 import { startAssertion } from '@simplewebauthn/browser'
 import { Field, Form, Formik } from 'formik'
 import React, { useContext } from 'react'
-import { useHistory } from 'react-router-dom'
+import { useLocation } from 'wouter'
 import { Label3, P } from '../../components/typography'
 import * as Yup from 'yup'
 
@@ -67,7 +67,7 @@ const getErrorMsg = (formikErrors, formikTouched, mutationError) => {
 }
 
 const LoginState = ({ dispatch, strategy }) => {
-  const history = useHistory()
+  const [, navigate] = useLocation()
   const { setUserData } = useContext(AppContext)
 
   const [login, { error: loginMutationError }] = useMutation(LOGIN)
@@ -125,7 +125,7 @@ const LoginState = ({ dispatch, strategy }) => {
     {
       onCompleted: ({ userData }) => {
         setUserData(userData)
-        history.push('/')
+        navigate('/')
       },
     },
   )

packages/admin-ui/src/pages/Authentication/Register.jsx

@@ -3,7 +3,7 @@ import Grid from '@mui/material/Grid'
 import Paper from '@mui/material/Paper'
 import { Field, Form, Formik } from 'formik'
 import React, { useReducer } from 'react'
-import { useLocation, useHistory } from 'react-router-dom'
+import { useLocation, useSearchParams } from 'wouter'
 import { H2, Label3, P } from '../../components/typography'
 import Logo from '../../styling/icons/menu/logo.svg?react'
 import * as Yup from 'yup'
@@ -12,8 +12,6 @@ import { Button } from '../../components/buttons'
 import { SecretInput } from '../../components/inputs/formik'
 import classes from './Authentication.module.css'
 
-const QueryParams = () => new URLSearchParams(useLocation().search)
-
 const VALIDATE_REGISTER_LINK = gql`
   query validateRegisterLink($token: String!) {
     validateRegisterLink(token: $token) {
@@ -84,8 +82,9 @@ const getErrorMsg = (
 }
 
 const Register = () => {
-  const history = useHistory()
-  const token = QueryParams().get('t')
+  const [, navigate] = useLocation()
+  const [searchParams] = useSearchParams()
+  const token = searchParams.get('t')
 
   const [state, dispatch] = useReducer(reducer, initialState)
 
@@ -118,7 +117,7 @@ const Register = () => {
 
   const [register, { error: mutationError }] = useMutation(REGISTER, {
     onCompleted: ({ register: success }) => {
-      if (success) history.push('/wizard', { fromAuthRegister: true })
+      if (success) navigate('/')
     },
   })
 

packages/admin-ui/src/pages/Authentication/Reset2FA.jsx

@@ -4,7 +4,7 @@ import Paper from '@mui/material/Paper'
 import { Form, Formik } from 'formik'
 import { QRCodeSVG as QRCode } from 'qrcode.react'
 import React, { useReducer, useState } from 'react'
-import { useLocation, useHistory } from 'react-router-dom'
+import { useLocation, useSearchParams } from 'wouter'
 import { H2, Label2, Label3, P } from '../../components/typography'
 import Logo from '../../styling/icons/menu/logo.svg?react'
 
@@ -43,9 +43,9 @@ const reducer = (state, action) => {
 }
 
 const Reset2FA = () => {
-  const history = useHistory()
-  const QueryParams = () => new URLSearchParams(useLocation().search)
-  const token = QueryParams().get('t')
+  const [, navigate] = useLocation()
+  const [searchParams] = useSearchParams()
+  const token = searchParams.get('t')
 
   const [isShowing, setShowing] = useState(false)
   const [invalidToken, setInvalidToken] = useState(false)
@@ -85,7 +85,7 @@ const Reset2FA = () => {
 
   const [reset2FA, { error: mutationError }] = useMutation(RESET_2FA, {
     onCompleted: ({ reset2FA: success }) => {
-      success ? history.push('/') : setInvalidToken(true)
+      success ? navigate('/') : setInvalidToken(true)
     },
   })
 

packages/admin-ui/src/pages/Authentication/ResetPassword.jsx

@@ -3,7 +3,7 @@ import Grid from '@mui/material/Grid'
 import Paper from '@mui/material/Paper'
 import { Field, Form, Formik } from 'formik'
 import React, { useState } from 'react'
-import { useLocation, useHistory } from 'react-router-dom'
+import { useLocation, useSearchParams } from 'wouter'
 import { H2, Label3, P } from '../../components/typography'
 import Logo from '../../styling/icons/menu/logo.svg?react'
 import * as Yup from 'yup'
@@ -57,9 +57,9 @@ const getErrorMsg = (formikErrors, formikTouched, mutationError) => {
 }
 
 const ResetPassword = () => {
-  const history = useHistory()
-  const QueryParams = () => new URLSearchParams(useLocation().search)
-  const token = QueryParams().get('t')
+  const [, navigate] = useLocation()
+  const [searchParams] = useSearchParams()
+  const token = searchParams.get('t')
   const [userID, setUserID] = useState(null)
   const [isLoading, setLoading] = useState(true)
   const [wasSuccessful, setSuccess] = useState(false)
@@ -83,7 +83,7 @@ const ResetPassword = () => {
 
   const [resetPassword, { error }] = useMutation(RESET_PASSWORD, {
     onCompleted: ({ resetPassword: success }) => {
-      if (success) history.push('/')
+      if (success) navigate('/')
     },
   })
 

packages/admin-ui/src/pages/Authentication/Setup2FAState.jsx

@@ -2,7 +2,7 @@ import { useMutation, useQuery, useLazyQuery, gql } from '@apollo/client'
 import { Form, Formik } from 'formik'
 import { QRCodeSVG as QRCode } from 'qrcode.react'
 import React, { useContext, useState } from 'react'
-import { useHistory } from 'react-router-dom'
+import { useLocation } from 'wouter'
 import { Label3, P } from '../../components/typography'
 
 import AppContext from '../../AppContext'
@@ -48,7 +48,7 @@ const GET_USER_DATA = gql`
 `
 
 const Setup2FAState = ({ state }) => {
-  const history = useHistory()
+  const [, navigate] = useLocation()
   const { setUserData } = useContext(AppContext)
 
   const [secret, setSecret] = useState(null)
@@ -85,7 +85,7 @@ const Setup2FAState = ({ state }) => {
   const [getUserData] = useLazyQuery(GET_USER_DATA, {
     onCompleted: ({ userData }) => {
       setUserData(userData)
-      history.push('/')
+      navigate('/')
     },
   })
 

packages/admin-ui/src/pages/Customers/CustomerProfile.jsx

@@ -4,7 +4,7 @@ import Switch from '@mui/material/Switch'
 import NavigateNextIcon from '@mui/icons-material/NavigateNext'
 import * as R from 'ramda'
 import React, { memo, useState } from 'react'
-import { useHistory, useParams } from 'react-router-dom'
+import { useLocation, useParams } from 'wouter'
 import { Label1, Label2 } from '../../components/typography'
 import AuthorizeReversedIcon from '../../styling/icons/button/authorize/white.svg?react'
 import AuthorizeIcon from '../../styling/icons/button/authorize/zodiac.svg?react'
@@ -284,7 +284,7 @@ const CHECK_AGAINST_SANCTIONS = gql`
 `
 
 const CustomerProfile = memo(() => {
-  const history = useHistory()
+  const [, navigate] = useLocation()
 
   const [showCompliance, setShowCompliance] = useState(false)
   const [wizard, setWizard] = useState(false)
@@ -515,7 +515,7 @@ const CustomerProfile = memo(() => {
         <Label1
           noMargin
           className="cursor-pointer text-comet"
-          onClick={() => history.push('/compliance/customers')}>
+          onClick={() => navigate('/compliance/customers')}>
           Customers
         </Label1>
         <Label2 noMargin className="cursor-pointer text-comet">

packages/admin-ui/src/pages/Customers/Customers.jsx

@@ -1,7 +1,7 @@
 import { useQuery, useMutation, gql } from '@apollo/client'
 import * as R from 'ramda'
 import React, { useState } from 'react'
-import { useHistory } from 'react-router-dom'
+import { useLocation } from 'wouter'
 import SearchBox from '../../components/SearchBox'
 import SearchFilter from '../../components/SearchFilter'
 import TitleSection from '../../components/layout/TitleSection'
@@ -95,10 +95,10 @@ const getFiltersObj = filters =>
   R.reduce((s, f) => ({ ...s, [f.type]: f.value }), {}, filters)
 
 const Customers = () => {
-  const history = useHistory()
+  const [, navigate] = useLocation()
 
   const handleCustomerClicked = customer =>
-    history.push(`/compliance/customer/${customer.id}`)
+    navigate(`/compliance/customer/${customer.id}`)
 
   const [filteredCustomers, setFilteredCustomers] = useState([])
   const [variables, setVariables] = useState({})

packages/admin-ui/src/pages/Dashboard/Alerts/AlertsTable.jsx

@@ -2,7 +2,7 @@ import List from '@mui/material/List'
 import ListItem from '@mui/material/ListItem'
 import * as R from 'ramda'
 import React from 'react'
-import { useHistory } from 'react-router-dom'
+import { useLocation } from 'wouter'
 import { P } from '../../../components/typography/index'
 import Wrench from '../../../styling/icons/action/wrench/zodiac.svg?react'
 import CashBoxEmpty from '../../../styling/icons/cassettes/cashbox-empty.svg?react'
@@ -23,7 +23,7 @@ const links = {
 }
 
 const AlertsTable = ({ numToRender, alerts, machines }) => {
-  const history = useHistory()
+  const [, navigate] = useLocation()
   const alertsToRender = R.slice(0, numToRender, alerts)
 
   const alertMessage = alert => {
@@ -45,7 +45,7 @@ const AlertsTable = ({ numToRender, alerts, machines }) => {
             <P className="my-2">{alertMessage(alert)}</P>
             <AlertLinkIcon
               className="ml-auto cursor-pointer"
-              onClick={() => history.push(links[alert.type] || '/dashboard')}
+              onClick={() => navigate(links[alert.type] || '/dashboard')}
             />
           </ListItem>
         )

packages/admin-ui/src/pages/Dashboard/Dashboard.jsx

@@ -1,7 +1,7 @@
 import { useQuery, gql } from '@apollo/client'
 import * as R from 'ramda'
 import React, { useState } from 'react'
-import { useHistory } from 'react-router-dom'
+import { useLocation } from 'wouter'
 import TitleSection from '../../components/layout/TitleSection'
 import { H1, Info2, TL2, Label1 } from '../../components/typography'
 import TxInIcon from '../../styling/icons/direction/cash-in.svg?react'
@@ -26,14 +26,14 @@ const GET_DATA = gql`
 `
 
 const Dashboard = () => {
-  const history = useHistory()
+  const [, navigate] = useLocation()
   const [open, setOpen] = useState(false)
 
   const { data, loading } = useQuery(GET_DATA)
 
   const onPaired = machine => {
     setOpen(false)
-    history.push('/maintenance/machine-status', { id: machine.deviceId })
+    navigate('/maintenance/machine-status', { state: { id: machine.deviceId } })
   }
 
   return !loading ? (

packages/admin-ui/src/pages/Dashboard/SystemStatus/MachinesTable.jsx

@@ -8,7 +8,7 @@ import TableHead from '@mui/material/TableHead'
 import TableRow from '@mui/material/TableRow'
 import * as R from 'ramda'
 import React from 'react'
-import { useHistory } from 'react-router-dom'
+import { useLocation } from 'wouter'
 import { Status } from '../../../components/Status'
 import { Label2, TL2 } from '../../../components/typography'
 import TxOutIcon from '../../../styling/icons/direction/cash-out.svg?react'
@@ -39,7 +39,7 @@ const HeaderCell = styled(TableCell)({
 })
 
 const MachinesTable = ({ machines = [], numToRender }) => {
-  const history = useHistory()
+  const [, navigate] = useLocation()
 
   const { data } = useQuery(GET_CONFIG)
   const fillingPercentageSettings = fromNamespace(
@@ -65,8 +65,10 @@ const MachinesTable = ({ machines = [], numToRender }) => {
   }
 
   const redirect = ({ name, deviceId }) => {
-    return history.push(`/machines/${deviceId}`, {
-      selectedMachine: name,
+    return navigate(`/machines/${deviceId}`, {
+      state: {
+        selectedMachine: name,
+      },
     })
   }
 

packages/admin-ui/src/pages/Machines/Machines.jsx

@@ -3,7 +3,7 @@ import Breadcrumbs from '@mui/material/Breadcrumbs'
 import NavigateNextIcon from '@mui/icons-material/NavigateNext'
 import * as R from 'ramda'
 import React, { useState } from 'react'
-import { Link, useLocation, useHistory } from 'react-router-dom'
+import { Link, useLocation } from 'wouter'
 import { TL1, TL2, Label3 } from '../../components/typography'
 
 import Cassettes from './MachineComponents/Cassettes'
@@ -61,17 +61,13 @@ const GET_INFO = gql`
 const getMachineID = path => path.slice(path.lastIndexOf('/') + 1)
 
 const MachineRoute = () => {
-  const location = useLocation()
-  const history = useHistory()
-
-  const id = getMachineID(location.pathname)
-
+  const [location, navigate] = useLocation()
   const [loading, setLoading] = useState(true)
 
+  const id = getMachineID(location)
   const { data, refetch } = useQuery(GET_INFO, {
     onCompleted: data => {
-      if (data.machine === null)
-        return history.push('/maintenance/machine-status')
+      if (data.machine === null) return navigate('/maintenance/machine-status')
 
       setLoading(false)
     },
@@ -85,7 +81,7 @@ const MachineRoute = () => {
   })
 
   const reload = () => {
-    return history.push(location.pathname)
+    return navigate(location)
   }
 
   return (

packages/admin-ui/src/pages/Maintenance/MachineStatus.jsx

@@ -2,7 +2,7 @@ import { useQuery, gql } from '@apollo/client'
 import { formatDistance } from 'date-fns'
 import * as R from 'ramda'
 import React from 'react'
-import { useHistory, useLocation } from 'react-router-dom'
+import { useLocation } from 'wouter'
 import { MainStatus } from '../../components/Status'
 import Title from '../../components/Title'
 import DataTable from '../../components/tables/DataTable'
@@ -55,9 +55,8 @@ const GET_DATA = gql`
 `
 
 const MachineStatus = () => {
-  const history = useHistory()
-  const { state } = useLocation()
-  const addedMachineId = state?.id
+  const [, navigate] = useLocation()
+  const addedMachineId = history.state?.id
   const {
     data: machinesResponse,
     refetch,
@@ -77,7 +76,7 @@ const MachineStatus = () => {
           {m.name}
           <div
             onClick={() => {
-              history.push(`/machines/${m.deviceId}`)
+              navigate(`/machines/${m.deviceId}`)
             }}>
             <MachineRedirectIcon />
           </div>

packages/admin-ui/src/pages/Transactions/Transactions.jsx

@@ -3,7 +3,7 @@ import { toUnit, formatCryptoAddress } from '@lamassu/coins/lightUtils'
 import BigNumber from 'bignumber.js'
 import * as R from 'ramda'
 import React, { useEffect, useState } from 'react'
-import { useHistory } from 'react-router-dom'
+import { useLocation } from 'wouter'
 import LogsDowloaderPopover from '../../components/LogsDownloaderPopper'
 import SearchBox from '../../components/SearchBox'
 import SearchFilter from '../../components/SearchFilter'
@@ -134,7 +134,7 @@ const getFiltersObj = filters =>
   R.reduce((s, f) => ({ ...s, [f.type]: f.value }), {}, filters)
 
 const Transactions = () => {
-  const history = useHistory()
+  const [, navigate] = useLocation()
 
   const [filters, setFilters] = useState([])
   const { data: filtersResponse, loading: filtersLoading } = useQuery(
@@ -160,7 +160,7 @@ const Transactions = () => {
   const timezone = R.path(['config', 'locale_timezone'], configResponse)
 
   const redirect = customerId => {
-    return history.push(`/compliance/customer/${customerId}`)
+    return navigate(`/compliance/customer/${customerId}`)
   }
 
   const elements = [

packages/admin-ui/src/pages/Wizard/Wizard.jsx

@@ -3,7 +3,7 @@ import Dialog from '@mui/material/Dialog'
 import DialogContent from '@mui/material/DialogContent'
 import classnames from 'classnames'
 import React, { useState, useContext } from 'react'
-import { useHistory } from 'react-router-dom'
+import { useLocation } from 'wouter'
 import { getWizardStep, STEPS } from './helper'
 
 import AppContext from '../../AppContext'
@@ -23,7 +23,7 @@ const GET_DATA = gql`
 
 const Wizard = () => {
   const { data, loading } = useQuery(GET_DATA)
-  const history = useHistory()
+  const [, navigate] = useLocation()
   const { setWizardTested } = useContext(AppContext)
 
   const [step, setStep] = useState(0)
@@ -52,7 +52,7 @@ const Wizard = () => {
     if (step >= STEPS.length - 1) {
       setOpen(false)
       setWizardTested(true)
-      history.push('/')
+      navigate('/')
       return
     }