Fix: make percentage chart work properly

Fix: code review

Fix: rework components according to PR requested changes

Fix: fix repeated code buildRatesNoCommission

Also renames id to deviceId in transactions quer

Fix: pr requested changes

Chore: move inline styles to classes

Chore: remove comment

Fix: bad equality !process.env.NODE_ENV === 'production'

new-lamassu-admin/src/pages/Dashboard/SystemStatus/SystemStatus.js

@@ -1,10 +1,11 @@
 import { useQuery } from '@apollo/react-hooks'
-// import Button from '@material-ui/core/Button'
+import Button from '@material-ui/core/Button'
 import Grid from '@material-ui/core/Grid'
 import { makeStyles } from '@material-ui/core/styles'
 import gql from 'graphql-tag'
-import React, { useState, useEffect } from 'react'
+import React from 'react'
 
+import { cardState as cardState_ } from 'src/components/CollapsibleCard'
 // import ActionButton from 'src/components/buttons/ActionButton'
 import { H4, TL2, Label1 } from 'src/components/typography'
 
@@ -14,7 +15,7 @@ import styles from './MachinesTable.styles'
 const useStyles = makeStyles(styles)
 
 // number of machines in the table to render on page load
-// const NUM_TO_RENDER = 3
+const NUM_TO_RENDER = 3
 
 const GET_DATA = gql`
   query getData {
@@ -38,97 +39,56 @@ const GET_DATA = gql`
   }
 `
 
-const parseUptime = time => {
+/* const parseUptime = time => {
   if (time < 60) return `${time}s`
   if (time < 3600) return `${Math.floor(time / 60)}m`
   if (time < 86400) return `${Math.floor(time / 60 / 60)}h`
   return `${Math.floor(time / 60 / 60 / 24)}d`
-}
+} */
 
-const SystemStatus = ({ cardState, setRightSideState }) => {
+const SystemStatus = ({ onReset, onExpand, size }) => {
   const classes = useStyles()
   const { data, loading } = useQuery(GET_DATA)
-  const [showAllItems, setShowAllItems] = useState(false)
-  //  const [showExpandButton, setShowExpandButton] = useState(false)
-  // const [numToRender, setNumToRender] = useState(NUM_TO_RENDER)
 
-  useEffect(() => {
-    /*     if (showAllItems) {
-      setShowExpandButton(false)
-      setNumToRender(data?.machines.length)
-    } else if (data && data?.machines.length > numToRender) {
-      setShowExpandButton(true)
-    } */
-    if (cardState.cardSize === 'small' || cardState.cardSize === 'default') {
-      setShowAllItems(false)
-      // setNumToRender(NUM_TO_RENDER)
-    }
-  }, [cardState.cardSize, data, /* numToRender, */ showAllItems])
+  const showAllItems = size === cardState_.EXPANDED
 
-  /*   const reset = () => {
-    setShowAllItems(false)
-    setNumToRender(NUM_TO_RENDER)
-    setRightSideState({
-      systemStatus: { cardSize: 'default', buttonName: 'Show less' },
-      alerts: { cardSize: 'default', buttonName: 'Show less' }
-    })
-  }
-
-  const showAllClick = () => {
-    setShowExpandButton(false)
-    setShowAllItems(true)
-    setRightSideState({
-      systemStatus: { cardSize: 'big', buttonName: 'Show less' },
-      alerts: { cardSize: 'small', buttonName: 'Show alerts' }
-    })
-  } */
-
-  // placeholder data
-  if (data) {
-    data.uptime = [{ time: 1854125, state: 'RUNNING' }]
-  }
-
-  const uptime = data?.uptime ?? [{}]
+  // const uptime = data?.uptime ?? [{}]
   return (
     <>
-      <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+      <div className={classes.container}>
         <H4 className={classes.h4}>System status</H4>{' '}
-      </div>
-      {/* {(showAllItems || cardState.cardSize === 'small') && (
-          <>
-            <Label1
-              style={{
-                textAlign: 'center',
-                marginBottom: 0,
-                marginTop: 0
-              }}>
-              <Button
-                onClick={reset}
-                size="small"
-                disableRipple
-                disableFocusRipple
-                className={classes.button}>
-                {cardState.buttonName}
-              </Button>
-            </Label1>
-          </>
+        {showAllItems && (
+          <Label1 className={classes.upperButtonLabel}>
+            <Button
+              onClick={onReset}
+              size="small"
+              disableRipple
+              disableFocusRipple
+              className={classes.button}>
+              {'Show less'}
+            </Button>
+          </Label1>
         )}
-      </div> */}
-      {!loading && cardState.cardSize !== 'small' && (
+      </div>
+      {!loading && (
         <>
           <Grid container spacing={1}>
+            {/*             
+            On hold until system uptime is implemented
             <Grid item xs={4}>
-              <TL2 style={{ display: 'inline' }}>
+              <TL2 className={classes.tl2}>
                 {parseUptime(uptime[0].time)}
               </TL2>
-              <Label1 style={{ display: 'inline' }}> System up time</Label1>
+              <Label1 className={classes.label1}> System up time</Label1>
+            </Grid> */}
+            <Grid item xs={4}>
+              <TL2 className={classes.tl2}>{data?.serverVersion}</TL2>
+              <Label1 className={classes.label1}> server version</Label1>
             </Grid>
             <Grid item xs={4}>
-              <TL2 style={{ display: 'inline' }}>{data?.serverVersion}</TL2>
-              <Label1 style={{ display: 'inline' }}> server version</Label1>
-            </Grid>
-            <Grid item xs={4}>
-              {/*               <ActionButton
+              {/*
+              On hold until system update features are implemented
+              <ActionButton
                 color="primary"
                 className={classes.actionButton}
                 onClick={() => console.log('Upgrade button clicked')}>
@@ -136,18 +96,22 @@ const SystemStatus = ({ cardState, setRightSideState }) => {
               </ActionButton> */}
             </Grid>
           </Grid>
-          <Grid container spacing={1} style={{ marginTop: 23 }}>
+          <Grid
+            container
+            spacing={1}
+            className={classes.machinesTableContainer}>
             <Grid item xs={12}>
               <MachinesTable
-                /* numToRender={numToRender} */
-                numToRender={Infinity}
+                numToRender={
+                  showAllItems ? data?.machines.length : NUM_TO_RENDER
+                }
                 machines={data?.machines ?? []}
               />
-              {/*               {showExpandButton && (
+              {!showAllItems && data.machines.length > NUM_TO_RENDER && (
                 <>
-                  <Label1 style={{ textAlign: 'center', marginBottom: 0 }}>
+                  <Label1 className={classes.buttonLabel}>
                     <Button
-                      onClick={showAllClick}
+                      onClick={() => onExpand()}
                       size="small"
                       disableRipple
                       disableFocusRipple
@@ -156,7 +120,7 @@ const SystemStatus = ({ cardState, setRightSideState }) => {
                     </Button>
                   </Label1>
                 </>
-              )} */}
+              )}
             </Grid>
           </Grid>
         </>