From eb6e0909361d42ba46160f25e0339fe93259c990 Mon Sep 17 00:00:00 2001
From: Nikola Ubavic <53820106+ubavic@users.noreply.github.com>
Date: Thu, 16 Dec 2021 11:31:03 +0100
Subject: [PATCH 1/5] fix: redirect to m-status on invalid machine ID

---
 .../src/pages/Machines/Machines.js            | 40 ++++++++++++++++---
 new-lamassu-admin/src/routing/routes.js       |  4 +-
 2 files changed, 37 insertions(+), 7 deletions(-)

diff --git a/new-lamassu-admin/src/pages/Machines/Machines.js b/new-lamassu-admin/src/pages/Machines/Machines.js
index 89c13f24..19381f20 100644
--- a/new-lamassu-admin/src/pages/Machines/Machines.js
+++ b/new-lamassu-admin/src/pages/Machines/Machines.js
@@ -7,7 +7,7 @@ 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 { Link, useLocation, useHistory } from 'react-router-dom'
 
 import { TL1, TL2, Label3 } from 'src/components/typography'
 
@@ -50,13 +50,43 @@ const GET_INFO = gql`
   }
 `
 
+const GET_MACHINES = gql`
+  {
+    machines {
+      name
+      deviceId
+    }
+  }
+`
+
 const getMachineID = path => path.slice(path.lastIndexOf('/') + 1)
 
-const Machines = () => {
+const MachineRoute = () => {
   const location = useLocation()
+  const history = useHistory()
+
+  const id = getMachineID(location.pathname)
+
+  const { loading } = useQuery(GET_MACHINES, {
+    onCompleted: data => {
+      const machines = data.machines
+      const machineFound = machines.map(m => m.deviceId).includes(id)
+
+      if (!machineFound) return history.push('/maintenance/machine-status')
+    }
+  })
+
+  const reload = () => {
+    return history.push(location.pathname)
+  }
+
+  return !loading && <Machines id={id} reload={reload}></Machines>
+}
+
+const Machines = ({ id, reload }) => {
   const { data, loading, refetch } = useQuery(GET_INFO, {
     variables: {
-      deviceId: getMachineID(location.pathname)
+      deviceId: id
     }
   })
   const classes = useStyles()
@@ -85,7 +115,7 @@ const Machines = () => {
                   {machineName}
                 </TL2>
               </Breadcrumbs>
-              <Overview data={machine} onActionSuccess={refetch} />
+              <Overview data={machine} onActionSuccess={reload} />
             </div>
           </Grid>
         </Grid>
@@ -119,4 +149,4 @@ const Machines = () => {
   )
 }
 
-export default Machines
+export default MachineRoute
diff --git a/new-lamassu-admin/src/routing/routes.js b/new-lamassu-admin/src/routing/routes.js
index 18876686..5aa939bb 100644
--- a/new-lamassu-admin/src/routing/routes.js
+++ b/new-lamassu-admin/src/routing/routes.js
@@ -17,7 +17,7 @@ import Register from 'src/pages/Authentication/Register'
 import Reset2FA from 'src/pages/Authentication/Reset2FA'
 import ResetPassword from 'src/pages/Authentication/ResetPassword'
 import Dashboard from 'src/pages/Dashboard'
-import Machines from 'src/pages/Machines'
+import MachineRoute from 'src/pages/Machines'
 import Wizard from 'src/pages/Wizard'
 
 import PrivateRoute from './PrivateRoute'
@@ -140,7 +140,7 @@ const Routes = () => {
           }
         />
       </PrivateRoute>
-      <PrivateRoute path="/machines" component={Machines} />
+      <PrivateRoute path="/machines" component={MachineRoute} />
       <PrivateRoute path="/wizard" component={Wizard} />
       <PublicRoute path="/register" component={Register} />
       {/* <PublicRoute path="/configmigration" component={ConfigMigration} /> */}

From 586ad4879b0ab120d4832aaef92cb08b7ef9a533 Mon Sep 17 00:00:00 2001
From: Nikola Ubavic <53820106+ubavic@users.noreply.github.com>
Date: Thu, 16 Dec 2021 11:41:09 +0100
Subject: [PATCH 2/5] chore: revert unnecessary changes

---
 new-lamassu-admin/src/routing/routes.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/new-lamassu-admin/src/routing/routes.js b/new-lamassu-admin/src/routing/routes.js
index 5aa939bb..18876686 100644
--- a/new-lamassu-admin/src/routing/routes.js
+++ b/new-lamassu-admin/src/routing/routes.js
@@ -17,7 +17,7 @@ import Register from 'src/pages/Authentication/Register'
 import Reset2FA from 'src/pages/Authentication/Reset2FA'
 import ResetPassword from 'src/pages/Authentication/ResetPassword'
 import Dashboard from 'src/pages/Dashboard'
-import MachineRoute from 'src/pages/Machines'
+import Machines from 'src/pages/Machines'
 import Wizard from 'src/pages/Wizard'
 
 import PrivateRoute from './PrivateRoute'
@@ -140,7 +140,7 @@ const Routes = () => {
           }
         />
       </PrivateRoute>
-      <PrivateRoute path="/machines" component={MachineRoute} />
+      <PrivateRoute path="/machines" component={Machines} />
       <PrivateRoute path="/wizard" component={Wizard} />
       <PublicRoute path="/register" component={Register} />
       {/* <PublicRoute path="/configmigration" component={ConfigMigration} /> */}

From f620927f3bddb9bdeac016280c11a02e981f5b91 Mon Sep 17 00:00:00 2001
From: Nikola Ubavic <53820106+ubavic@users.noreply.github.com>
Date: Thu, 16 Dec 2021 12:35:27 +0100
Subject: [PATCH 3/5] fix: use state instead apollo `loading` result

---
 new-lamassu-admin/src/pages/Machines/Machines.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/new-lamassu-admin/src/pages/Machines/Machines.js b/new-lamassu-admin/src/pages/Machines/Machines.js
index 19381f20..c4b5635f 100644
--- a/new-lamassu-admin/src/pages/Machines/Machines.js
+++ b/new-lamassu-admin/src/pages/Machines/Machines.js
@@ -6,7 +6,7 @@ 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 React, { useState } from 'react'
 import { Link, useLocation, useHistory } from 'react-router-dom'
 
 import { TL1, TL2, Label3 } from 'src/components/typography'
@@ -67,12 +67,16 @@ const MachineRoute = () => {
 
   const id = getMachineID(location.pathname)
 
-  const { loading } = useQuery(GET_MACHINES, {
+  const [loading, setLoading] = useState(true)
+
+  useQuery(GET_MACHINES, {
     onCompleted: data => {
       const machines = data.machines
       const machineFound = machines.map(m => m.deviceId).includes(id)
 
       if (!machineFound) return history.push('/maintenance/machine-status')
+
+      setLoading(false)
     }
   })
 

From deef6e52a37aba7d5e24339d4a04d2744c39fe53 Mon Sep 17 00:00:00 2001
From: Nikola Ubavic <53820106+ubavic@users.noreply.github.com>
Date: Fri, 24 Dec 2021 23:30:25 +0100
Subject: [PATCH 4/5] fix: throw error on missing resource

---
 lib/machine-loader.js                         |  58 ++++-----
 .../src/pages/Machines/Machines.js            | 117 ++++++++----------
 2 files changed, 79 insertions(+), 96 deletions(-)

diff --git a/lib/machine-loader.js b/lib/machine-loader.js
index b2ae3afb..5790673f 100644
--- a/lib/machine-loader.js
+++ b/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]) => {
diff --git a/new-lamassu-admin/src/pages/Machines/Machines.js b/new-lamassu-admin/src/pages/Machines/Machines.js
index c4b5635f..66fcf19d 100644
--- a/new-lamassu-admin/src/pages/Machines/Machines.js
+++ b/new-lamassu-admin/src/pages/Machines/Machines.js
@@ -50,15 +50,6 @@ const GET_INFO = gql`
   }
 `
 
-const GET_MACHINES = gql`
-  {
-    machines {
-      name
-      deviceId
-    }
-  }
-`
-
 const getMachineID = path => path.slice(path.lastIndexOf('/') + 1)
 
 const MachineRoute = () => {
@@ -69,14 +60,15 @@ const MachineRoute = () => {
 
   const [loading, setLoading] = useState(true)
 
-  useQuery(GET_MACHINES, {
+  const { data, refetch } = useQuery(GET_INFO, {
     onCompleted: data => {
-      const machines = data.machines
-      const machineFound = machines.map(m => m.deviceId).includes(id)
-
-      if (!machineFound) return history.push('/maintenance/machine-status')
+      if (data.machine === null)
+        return history.push('/maintenance/machine-status')
 
       setLoading(false)
+    },
+    variables: {
+      deviceId: id
     }
   })
 
@@ -84,15 +76,14 @@ const MachineRoute = () => {
     return history.push(location.pathname)
   }
 
-  return !loading && <Machines id={id} reload={reload}></Machines>
+  return (
+    !loading && (
+      <Machines data={data} refetch={refetch} reload={reload}></Machines>
+    )
+  )
 }
 
-const Machines = ({ id, reload }) => {
-  const { data, loading, refetch } = useQuery(GET_INFO, {
-    variables: {
-      deviceId: id
-    }
-  })
+const Machines = ({ data, refetch, reload }) => {
   const classes = useStyles()
 
   const timezone = R.path(['config', 'locale_timezone'], data) ?? {}
@@ -104,52 +95,50 @@ const Machines = ({ id, reload }) => {
   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={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 cassettes'}</TL1>
-              <Cassettes
-                refetchData={refetch}
-                machine={machine}
-                config={config ?? false}
-              />
-            </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 cassettes'}</TL1>
+            <Cassettes
+              refetchData={refetch}
+              machine={machine}
+              config={config ?? false}
+            />
+          </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>
   )
 }
 

From 6521d45ab51caeaf7fb58f05ebdeff3773abf9e3 Mon Sep 17 00:00:00 2001
From: Nikola Ubavic <53820106+ubavic@users.noreply.github.com>
Date: Fri, 24 Dec 2021 23:47:31 +0100
Subject: [PATCH 5/5] fix: conflicts

---
 .../src/pages/Machines/Machines.js              | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/new-lamassu-admin/src/pages/Machines/Machines.js b/new-lamassu-admin/src/pages/Machines/Machines.js
index 66fcf19d..7fdbd5cb 100644
--- a/new-lamassu-admin/src/pages/Machines/Machines.js
+++ b/new-lamassu-admin/src/pages/Machines/Machines.js
@@ -20,7 +20,7 @@ import styles from './Machines.styles'
 const useStyles = makeStyles(styles)
 
 const GET_INFO = gql`
-  query getMachine($deviceId: ID!) {
+  query getMachine($deviceId: ID!, $billFilters: JSONObject) {
     machine(deviceId: $deviceId) {
       name
       deviceId
@@ -46,6 +46,12 @@ const GET_INFO = gql`
         note
       }
     }
+    bills(filters: $billFilters) {
+      id
+      fiat
+      deviceId
+      created
+    }
     config
   }
 `
@@ -69,6 +75,10 @@ const MachineRoute = () => {
     },
     variables: {
       deviceId: id
+    },
+    billFilters: {
+      deviceId: id,
+      batch: 'none'
     }
   })
 
@@ -83,7 +93,7 @@ const MachineRoute = () => {
   )
 }
 
-const Machines = ({ data, refetch, reload }) => {
+const Machines = ({ data, refetch, reload, bills }) => {
   const classes = useStyles()
 
   const timezone = R.path(['config', 'locale_timezone'], data) ?? {}
@@ -121,11 +131,12 @@ const Machines = ({ data, refetch, reload }) => {
             <Details data={machine} timezone={timezone} />
           </div>
           <div className={classes.detailItem}>
-            <TL1 className={classes.subtitle}>{'Cash cassettes'}</TL1>
+            <TL1 className={classes.subtitle}>{'Cash box & cassettes'}</TL1>
             <Cassettes
               refetchData={refetch}
               machine={machine}
               config={config ?? false}
+              bills={bills}
             />
           </div>
           <div className={classes.transactionsItem}>