fix: fixed the expanded component not closing when redirecting from 'Add machine'

fix: use useEffect to correctly fix the not closing expanded row

fix: pass added machine id to machine status via History props instead
of url

fix: avoid page reloading on confirmed actions

new-lamassu-admin/src/components/layout/Header.js

@@ -44,7 +44,7 @@ const Header = memo(({ tree }) => {
 
   const onPaired = machine => {
     setOpen(false)
-    history.push(`/maintenance/machine-status/${machine.deviceId}`)
+    history.push('/maintenance/machine-status', { id: machine.deviceId })
   }
 
   return (

new-lamassu-admin/src/components/tables/DataTable.js

@@ -1,7 +1,7 @@
 import { makeStyles, Box } from '@material-ui/core'
 import classnames from 'classnames'
 import * as R from 'ramda'
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import {
   AutoSizer,
   List,
@@ -93,13 +93,15 @@ const DataTable = ({
   Details,
   className,
   expandable,
-  shouldStartExpanded,
+  initialExpanded,
   onClick,
   loading,
   emptyText,
   ...props
 }) => {
-  const [expanded, setExpanded] = useState(null)
+  const [expanded, setExpanded] = useState(initialExpanded)
+
+  useEffect(() => setExpanded(initialExpanded), [initialExpanded])
 
   const coreWidth = R.compose(R.sum, R.map(R.prop('width')))(elements)
   const expWidth = 1200 - coreWidth
@@ -132,10 +134,7 @@ const DataTable = ({
             elements={elements}
             data={data[index]}
             Details={Details}
-            expanded={
+            expanded={index === expanded}
-              index === expanded ||
-              (shouldStartExpanded && shouldStartExpanded(data[index]))
-            }
             expandRow={expandRow}
             expandable={expandable}
             onClick={onClick}

new-lamassu-admin/src/pages/Maintenance/MachineDetailsCard.js

@@ -87,8 +87,9 @@ const MachineDetailsRow = ({ it: machine, onActionSuccess }) => {
       setErrorMessage(errorMessage)
     },
     onCompleted: () => {
-      onActionSuccess ? onActionSuccess() : window.location.reload()
+      onActionSuccess && onActionSuccess()
-      setConfirmActionDialogOpen(false)
+      renameActionDialogOpen && setConfirmActionDialogOpen(false)
+      confirmActionDialogOpen && setRenameActionDialogOpen(false)
     }
   })
 

new-lamassu-admin/src/pages/Maintenance/MachineStatus.js

@@ -4,7 +4,7 @@ import gql from 'graphql-tag'
 import moment from 'moment'
 import * as R from 'ramda'
 import React from 'react'
-import { useParams } from 'react-router-dom'
+import { useLocation } from 'react-router-dom'
 
 import { MainStatus } from 'src/components/Status'
 import Title from 'src/components/Title'
@@ -41,10 +41,9 @@ const useStyles = makeStyles(mainStyles)
 
 const MachineStatus = () => {
   const classes = useStyles()
-  const { id: machineId } = useParams()
+  const { state } = useLocation()
-  const { data: machinesResponse } = useQuery(GET_MACHINES)
+  const addedMachineId = state?.id
-
+  const { data: machinesResponse, refetch } = useQuery(GET_MACHINES)
-  const shouldStartExpanded = machine => machine.deviceId === machineId
 
   const elements = [
     {
@@ -77,6 +76,15 @@ const MachineStatus = () => {
     }
   ]
 
+  const machines = R.path(['machines'])(machinesResponse) ?? []
+  const expandedIndex = R.findIndex(R.propEq('deviceId', addedMachineId))(
+    machines
+  )
+
+  const InnerMachineDetailsRow = ({ it }) => (
+    <MachineDetailsRow it={it} onActionSuccess={refetch} />
+  )
+
   return (
     <>
       <div className={classes.titleWrapper}>
@@ -96,9 +104,9 @@ const MachineStatus = () => {
       </div>
       <DataTable
         elements={elements}
-        data={R.path(['machines'])(machinesResponse)}
+        data={machines}
-        Details={MachineDetailsRow}
+        Details={InnerMachineDetailsRow}
-        shouldStartExpanded={shouldStartExpanded}
+        initialExpanded={expandedIndex}
         expandable
       />
     </>

new-lamassu-admin/src/routing/routes.js

@@ -64,7 +64,7 @@ const tree = [
       {
         key: 'machine-status',
         label: 'Machine Status',
-        route: '/maintenance/machine-status/:id',
+        route: '/maintenance/machine-status',
         component: MachineStatus
       },
       {