Merge pull request #1852 from RafaelTaranto/fix/id-routing

fix: id routing

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

@@ -285,7 +285,6 @@ const CHECK_AGAINST_SANCTIONS = gql`
 
 const CustomerProfile = memo(() => {
   const [, navigate] = useLocation()
-
   const [showCompliance, setShowCompliance] = useState(false)
   const [wizard, setWizard] = useState(false)
   const [error, setError] = useState(null)
@@ -298,6 +297,7 @@ const CustomerProfile = memo(() => {
     loading: customerLoading,
   } = useQuery(GET_CUSTOMER, {
     variables: { customerId },
+    skip: !customerId,
   })
 
   const { data: configResponse, loading: configLoading } = useQuery(GET_DATA)

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 } from 'wouter'
+import { Link, useLocation, useParams } from 'wouter'
 import { TL1, TL2, Label3 } from '../../components/typography'
 
 import Cassettes from './MachineComponents/Cassettes'
@@ -58,13 +58,11 @@ const GET_INFO = gql`
   }
 `
 
-const getMachineID = path => path.slice(path.lastIndexOf('/') + 1)
-
 const MachineRoute = () => {
   const [location, navigate] = useLocation()
   const [loading, setLoading] = useState(true)
+  const { id: deviceId } = useParams()
 
-  const id = getMachineID(location)
   const { data, refetch } = useQuery(GET_INFO, {
     onCompleted: data => {
       if (data.machine === null) return navigate('/maintenance/machine-status')
@@ -72,9 +70,9 @@ const MachineRoute = () => {
       setLoading(false)
     },
     variables: {
-      deviceId: id,
+      deviceId,
       billFilters: {
-        deviceId: id,
+        deviceId,
         batch: 'none',
       },
     },

packages/admin-ui/src/routing/routes.jsx

@@ -93,7 +93,7 @@ const Routes = () => {
           </div>
         </Transition>
       </PrivateRoute>
-      <PrivateRoute path="/machines">
+      <PrivateRoute path="/machines/:id">
         <Machines />
       </PrivateRoute>
       <PublicRoute path="/register" component={Register} />
@@ -105,7 +105,10 @@ const Routes = () => {
           <Transition
             className={wrapperClasses}
             {...transitionProps}
-            in={location === route}
+            in={
+              location === route ||
+              (route.includes(':') && location.startsWith(route.split(':')[0]))
+            }
             mountOnEnter
             unmountOnExit>
             <div className={wrapperClasses}>