feat: implement EmptyTable component

new-lamassu-admin/src/components/table/EmptyTable.js

@@ -0,0 +1,30 @@
+import { makeStyles } from '@material-ui/core'
+import React, { memo } from 'react'
+
+import { H4 } from 'src/components/typography'
+import { ReactComponent as EmptyTableIcon } from 'src/styling/icons/table/empty-table.svg'
+
+const styles = {
+  emptyTable: {
+    width: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    marginTop: 52
+  }
+}
+
+const useStyles = makeStyles(styles)
+
+const EmptyTable = memo(({ message }) => {
+  const classes = useStyles()
+
+  return (
+    <div className={classes.emptyTable}>
+      <EmptyTableIcon />
+      <H4>{message}</H4>
+    </div>
+  )
+})
+
+export default EmptyTable

new-lamassu-admin/src/components/table/index.js

@@ -1,4 +1,5 @@
 import EditCell from './EditCell'
+import EmptyTable from './EmptyTable'
 import Table from './Table'
 import TableBody from './TableBody'
 import TableCell from './TableCell'
@@ -8,6 +9,7 @@ import TableRow from './TableRow'
 
 export {
   EditCell,
+  EmptyTable,
   Table,
   TableCell,
   TableHead,

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

@@ -17,10 +17,10 @@ import {
   Td,
   Th
 } from 'src/components/fake-table/Table'
+import { EmptyTable } from 'src/components/table'
 import { H4 } from 'src/components/typography'
 import { ReactComponent as ExpandClosedIcon } from 'src/styling/icons/action/expand/closed.svg'
 import { ReactComponent as ExpandOpenIcon } from 'src/styling/icons/action/expand/open.svg'
-import { ReactComponent as EmptyTableIcon } from 'src/styling/icons/table/empty-table.svg'
 
 import styles from './DataTable.styles'
 
@@ -168,12 +168,7 @@ const DataTable = ({
         </THead>
         <TBody className={classes.body}>
           {loading && <H4>Loading...</H4>}
-          {!loading && R.isEmpty(data) && (
+          {!loading && R.isEmpty(data) && <EmptyTable message={emptyText} />}
-            <div className={classes.emptyTable}>
-              <EmptyTableIcon />
-              <H4>{emptyText}</H4>
-            </div>
-          )}
           <AutoSizer disableWidth>
             {({ height }) => (
               <List

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

@@ -8,6 +8,7 @@ import { Tooltip } from 'src/components/Tooltip'
 import { NamespacedTable as EditableTable } from 'src/components/editableTable'
 import { Switch } from 'src/components/inputs'
 import TitleSection from 'src/components/layout/TitleSection'
+import { EmptyTable } from 'src/components/table'
 import { P, Label2 } from 'src/components/typography'
 import { fromNamespace, toNamespace } from 'src/utils/config'
 
@@ -113,6 +114,7 @@ const CashOut = ({ name: SCREEN_KEY }) => {
         disableRowEdit={R.compose(R.not, R.path(['active']))}
         elements={getElements(machines, locale)}
       />
+      {R.isEmpty(config) && <EmptyTable message="No machines so far" />}
       {wizard && (
         <Wizard
           machine={R.find(R.propEq('deviceId', wizard))(machines)}

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

@@ -1,6 +1,7 @@
 import { useQuery, useMutation } from '@apollo/react-hooks'
 import { makeStyles } from '@material-ui/core'
 import gql from 'graphql-tag'
+import * as R from 'ramda'
 import React from 'react'
 import * as Yup from 'yup'
 
@@ -8,6 +9,7 @@ import { Table as EditableTable } from 'src/components/editableTable'
 import { CashOut, CashIn } from 'src/components/inputs/cashbox/Cashbox'
 import { NumberInput } from 'src/components/inputs/formik'
 import TitleSection from 'src/components/layout/TitleSection'
+import { EmptyTable } from 'src/components/table'
 import { fromNamespace } from 'src/utils/config'
 
 import styles from './CashCassettes.styles.js'
@@ -172,6 +174,10 @@ const CashCassettes = () => {
         save={onSave}
         validationSchema={ValidationSchema}
       />
+
+      {data && R.isEmpty(data.machines) && (
+        <EmptyTable message="No machines so far" />
+      )}
     </>
   )
 }