diff --git a/new-lamassu-admin/src/components/tables/DataTable.js b/new-lamassu-admin/src/components/tables/DataTable.js index 54984226..2891f688 100644 --- a/new-lamassu-admin/src/components/tables/DataTable.js +++ b/new-lamassu-admin/src/components/tables/DataTable.js @@ -1,4 +1,4 @@ -import { makeStyles } from '@material-ui/core/styles' +import { makeStyles, Box } from '@material-ui/core' import classnames from 'classnames' import * as R from 'ramda' import React, { useState } from 'react' @@ -17,6 +17,7 @@ import { Td, Th } from 'src/components/fake-table/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' @@ -94,6 +95,8 @@ const DataTable = ({ expandable, shouldStartExpanded, onClick, + loading, + emptyText, ...props }) => { const [expanded, setExpanded] = useState(null) @@ -143,38 +146,42 @@ const DataTable = ({ } return ( - - - {elements.map(({ width, className, textAlign, header }, idx) => ( - - ))} - {expandable && } - - - - {({ height }) => ( - +
- {header} -
+ + {elements.map(({ width, className, textAlign, header }, idx) => ( +
- )} - - -
+ className={className} + textAlign={textAlign}> + {header} + + ))} + {expandable && } + + + {loading &&

Loading...

} + {!loading && R.isEmpty(data) &&

{emptyText}

} + + {({ height }) => ( + + )} + + + + ) } diff --git a/new-lamassu-admin/src/pages/Customers/CustomerProfile.js b/new-lamassu-admin/src/pages/Customers/CustomerProfile.js index 0ddb2874..9572e0bc 100644 --- a/new-lamassu-admin/src/pages/Customers/CustomerProfile.js +++ b/new-lamassu-admin/src/pages/Customers/CustomerProfile.js @@ -92,7 +92,7 @@ const CustomerProfile = memo(() => { const history = useHistory() const { id: customerId } = useParams() - const { data: customerResponse, refetch: getCustomer } = useQuery( + const { data: customerResponse, refetch: getCustomer, loading } = useQuery( GET_CUSTOMER, { variables: { customerId } @@ -171,7 +171,7 @@ const CustomerProfile = memo(() => { /> - + ) }) diff --git a/new-lamassu-admin/src/pages/Customers/Customers.js b/new-lamassu-admin/src/pages/Customers/Customers.js index 2426ae5a..d24e59d2 100644 --- a/new-lamassu-admin/src/pages/Customers/Customers.js +++ b/new-lamassu-admin/src/pages/Customers/Customers.js @@ -24,7 +24,7 @@ const GET_CUSTOMERS = gql` const Customers = () => { const history = useHistory() - const { data: customersResponse } = useQuery(GET_CUSTOMERS) + const { data: customersResponse, loading } = useQuery(GET_CUSTOMERS) const handleCustomerClicked = customer => history.push(`/compliance/customer/${customer.id}`) @@ -33,7 +33,13 @@ const Customers = () => { R.path(['customers'])(customersResponse) ?? [] ) - return + return ( + + ) } export default Customers diff --git a/new-lamassu-admin/src/pages/Customers/CustomersList.js b/new-lamassu-admin/src/pages/Customers/CustomersList.js index eb2157e1..cb5956d3 100644 --- a/new-lamassu-admin/src/pages/Customers/CustomersList.js +++ b/new-lamassu-admin/src/pages/Customers/CustomersList.js @@ -14,7 +14,7 @@ import styles from './CustomersList.styles' const useStyles = makeStyles(styles) -const CustomersList = ({ data, onClick }) => { +const CustomersList = ({ data, onClick, loading }) => { const classes = useStyles() const elements = [ @@ -75,7 +75,13 @@ const CustomersList = ({ data, onClick }) => { { label: 'Cash-out', icon: } ]} /> - + ) } diff --git a/new-lamassu-admin/src/pages/Customers/components/TransactionsList.js b/new-lamassu-admin/src/pages/Customers/components/TransactionsList.js index 51f5c5c7..c7fa3228 100644 --- a/new-lamassu-admin/src/pages/Customers/components/TransactionsList.js +++ b/new-lamassu-admin/src/pages/Customers/components/TransactionsList.js @@ -15,7 +15,7 @@ import mainStyles from '../CustomersList.styles' const useStyles = makeStyles(mainStyles) -const TransactionsList = ({ data }) => { +const TransactionsList = ({ data, loading }) => { const classes = useStyles() const hasData = !(R.isEmpty(data) || R.isNil(data)) @@ -82,7 +82,9 @@ const TransactionsList = ({ data }) => {

- {hasData + {loading + ? 'Loading' + : hasData ? 'All transactions from this customer' : 'No transactions so far'}

diff --git a/new-lamassu-admin/src/pages/Transactions/Transactions.js b/new-lamassu-admin/src/pages/Transactions/Transactions.js index 513d2abb..018497ae 100644 --- a/new-lamassu-admin/src/pages/Transactions/Transactions.js +++ b/new-lamassu-admin/src/pages/Transactions/Transactions.js @@ -1,5 +1,5 @@ import { useQuery } from '@apollo/react-hooks' -import { makeStyles } from '@material-ui/core/styles' +import { makeStyles } from '@material-ui/core' import BigNumber from 'bignumber.js' import gql from 'graphql-tag' import moment from 'moment' @@ -54,7 +54,7 @@ const GET_TRANSACTIONS = gql` const Transactions = () => { const classes = useStyles() - const { data: txResponse } = useQuery(GET_TRANSACTIONS, { + const { data: txResponse, loading } = useQuery(GET_TRANSACTIONS, { variables: { limit: NUM_LOG_RESULTS } @@ -160,6 +160,8 @@ const Transactions = () => {
{ const [wizard, setWizard] = useState(false) const [error, setError] = useState(false) - const { data } = useQuery(GET_INFO) + const { data, loading } = useQuery(GET_INFO) const triggers = fromServer(data?.config?.triggers ?? []) const complianceConfig = @@ -108,9 +108,11 @@ const Triggers = () => { className={classes.tableWidth} display="flex" justifyContent="end"> - setWizard(true)}> - + Add new trigger - + {!loading && !R.isEmpty(triggers) && ( + setWizard(true)}> + + Add new trigger + + )} { onClose={() => setWizard(null)} /> )} + {!loading && R.isEmpty(triggers) && ( + +

+ It seems there are no active compliance triggers on your network +

+ +
+ )} ) }