Merge pull request #1002 from ubavic/fix/machine_upairing

fix: unpairing machine through dashboard shows blank page

lib/machine-loader.js

@@ -12,30 +12,35 @@ const configManager = require('./new-config-manager')
 const settingsLoader = require('./new-settings-loader')
 const notifierUtils = require('./notifier/utils')
 const notifierQueries = require('./notifier/queries')
+const { ApolloError } = require('apollo-server-errors');
 
 const fullyFunctionalStatus = { label: 'Fully functional', type: 'success' }
 const unresponsiveStatus = { label: 'Unresponsive', type: 'error' }
 const stuckStatus = { label: 'Stuck', type: 'error' }
 
+function toMachineObject (r) {
+  return {
+    deviceId: r.device_id,
+    cashbox: r.cashbox,
+    cassette1: r.cassette1,
+    cassette2: r.cassette2,
+    cassette3: r.cassette3,
+    cassette4: r.cassette4,
+    numberOfCassettes: r.number_of_cassettes,
+    version: r.version,
+    model: r.model,
+    pairedAt: new Date(r.created),
+    lastPing: new Date(r.last_online),
+    name: r.name,
+    paired: r.paired
+    // TODO: we shall start using this JSON field at some point
+    // location: r.location,
+  }
+}
+
 function getMachines () {
   return db.any('SELECT * FROM devices WHERE display=TRUE ORDER BY created')
-    .then(rr => rr.map(r => ({
-      deviceId: r.device_id,
-      cashbox: r.cashbox,
-      cassette1: r.cassette1,
-      cassette2: r.cassette2,
-      cassette3: r.cassette3,
-      cassette4: r.cassette4,
-      numberOfCassettes: r.number_of_cassettes,
-      version: r.version,
-      model: r.model,
-      pairedAt: new Date(r.created),
-      lastPing: new Date(r.last_online),
-      name: r.name,
-      // TODO: we shall start using this JSON field at some point
-      // location: r.location,
-      paired: r.paired
-    })))
+    .then(rr => rr.map(toMachineObject))
 }
 
 function getConfig (defaultConfig) {
@@ -100,21 +105,10 @@ function getMachineName (machineId) {
 
 function getMachine (machineId, config) {
   const sql = 'SELECT * FROM devices WHERE device_id=$1'
-  const queryMachine = db.oneOrNone(sql, [machineId]).then(r => ({
-    deviceId: r.device_id,
-    cashbox: r.cashbox,
-    cassette1: r.cassette1,
-    cassette2: r.cassette2,
-    cassette3: r.cassette3,
-    cassette4: r.cassette4,
-    numberOfCassettes: r.number_of_cassettes,
-    version: r.version,
-    model: r.model,
-    pairedAt: new Date(r.created),
-    lastPing: new Date(r.last_online),
-    name: r.name,
-    paired: r.paired
-  }))
+  const queryMachine = db.oneOrNone(sql, [machineId]).then(r => {
+    if (r === null) throw new ApolloError('Resource doesn\'t exist', 'NOT_FOUND')
+    else return toMachineObject(r)
+  })
 
   return Promise.all([queryMachine, dbm.machineEvents(), config])
     .then(([machine, events, config]) => {

new-lamassu-admin/src/pages/Machines/Machines.js

@@ -6,8 +6,8 @@ import NavigateNextIcon from '@material-ui/icons/NavigateNext'
 import classnames from 'classnames'
 import gql from 'graphql-tag'
 import * as R from 'ramda'
-import React from 'react'
-import { Link, useLocation } from 'react-router-dom'
+import React, { useState } from 'react'
+import { Link, useLocation, useHistory } from 'react-router-dom'
 
 import { TL1, TL2, Label3 } from 'src/components/typography'
 
@@ -58,18 +58,42 @@ const GET_INFO = gql`
 
 const getMachineID = path => path.slice(path.lastIndexOf('/') + 1)
 
-const Machines = () => {
+const MachineRoute = () => {
   const location = useLocation()
-  const { data, loading, refetch } = useQuery(GET_INFO, {
+  const history = useHistory()
+
+  const id = getMachineID(location.pathname)
+
+  const [loading, setLoading] = useState(true)
+
+  const { data, refetch } = useQuery(GET_INFO, {
+    onCompleted: data => {
+      if (data.machine === null)
+        return history.push('/maintenance/machine-status')
+
+      setLoading(false)
+    },
     variables: {
-      deviceId: getMachineID(location.pathname),
-      billFilters: {
-        deviceId: getMachineID(location.pathname),
-        batch: 'none'
-      }
+      deviceId: id
+    },
+    billFilters: {
+      deviceId: id,
+      batch: 'none'
     }
   })
 
+  const reload = () => {
+    return history.push(location.pathname)
+  }
+
+  return (
+    !loading && (
+      <Machines data={data} refetch={refetch} reload={reload}></Machines>
+    )
+  )
+}
+
+const Machines = ({ data, refetch, reload }) => {
   const classes = useStyles()
 
   const timezone = R.path(['config', 'locale_timezone'], data) ?? {}
@@ -82,54 +106,52 @@ const Machines = () => {
   const machineID = R.path(['deviceId'])(machine) ?? null
 
   return (
-    !loading && (
-      <Grid container className={classes.grid}>
-        <Grid item xs={3}>
-          <Grid item xs={12}>
-            <div className={classes.breadcrumbsContainer}>
-              <Breadcrumbs separator={<NavigateNextIcon fontSize="small" />}>
-                <Link to="/dashboard" className={classes.breadcrumbLink}>
-                  <Label3 noMargin className={classes.subtitle}>
-                    Dashboard
-                  </Label3>
-                </Link>
-                <TL2 noMargin className={classes.subtitle}>
-                  {machineName}
-                </TL2>
-              </Breadcrumbs>
-              <Overview data={machine} onActionSuccess={refetch} />
-            </div>
-          </Grid>
-        </Grid>
-        <Grid item xs={9}>
-          <div className={classes.content}>
-            <div
-              className={classnames(classes.detailItem, classes.detailsMargin)}>
-              <TL1 className={classes.subtitle}>{'Details'}</TL1>
-              <Details data={machine} timezone={timezone} />
-            </div>
-            <div className={classes.detailItem}>
-              <TL1 className={classes.subtitle}>{'Cash box & cassettes'}</TL1>
-              <Cassettes
-                refetchData={refetch}
-                machine={machine}
-                config={config ?? false}
-                bills={bills}
-              />
-            </div>
-            <div className={classes.transactionsItem}>
-              <TL1 className={classes.subtitle}>{'Latest transactions'}</TL1>
-              <Transactions id={machineID} />
-            </div>
-            <div className={classes.detailItem}>
-              <TL1 className={classes.subtitle}>{'Commissions'}</TL1>
-              <Commissions name={'commissions'} id={machineID} />
-            </div>
+    <Grid container className={classes.grid}>
+      <Grid item xs={3}>
+        <Grid item xs={12}>
+          <div className={classes.breadcrumbsContainer}>
+            <Breadcrumbs separator={<NavigateNextIcon fontSize="small" />}>
+              <Link to="/dashboard" className={classes.breadcrumbLink}>
+                <Label3 noMargin className={classes.subtitle}>
+                  Dashboard
+                </Label3>
+              </Link>
+              <TL2 noMargin className={classes.subtitle}>
+                {machineName}
+              </TL2>
+            </Breadcrumbs>
+            <Overview data={machine} onActionSuccess={reload} />
           </div>
         </Grid>
       </Grid>
-    )
+      <Grid item xs={9}>
+        <div className={classes.content}>
+          <div
+            className={classnames(classes.detailItem, classes.detailsMargin)}>
+            <TL1 className={classes.subtitle}>{'Details'}</TL1>
+            <Details data={machine} timezone={timezone} />
+          </div>
+          <div className={classes.detailItem}>
+            <TL1 className={classes.subtitle}>{'Cash box & cassettes'}</TL1>
+            <Cassettes
+              refetchData={refetch}
+              machine={machine}
+              config={config ?? false}
+              bills={bills}
+            />
+          </div>
+          <div className={classes.transactionsItem}>
+            <TL1 className={classes.subtitle}>{'Latest transactions'}</TL1>
+            <Transactions id={machineID} />
+          </div>
+          <div className={classes.detailItem}>
+            <TL1 className={classes.subtitle}>{'Commissions'}</TL1>
+            <Commissions name={'commissions'} id={machineID} />
+          </div>
+        </div>
+      </Grid>
+    </Grid>
   )
 }
 
-export default Machines
+export default MachineRoute