Feat: make footer expand on hover

chore: rename status variable from showExpandBtn to canExpand

Chore: disable notific. card, redirect to dashboard on logo click

This commit also fixes eslint warnings about anonymous exports
On the header, the Dashboard link is removed, in favour of adding
a redirect on click on the Lamassu Admin text. "Machines" header
link is removed as well, and a machine profile can be accessed
through the dashboard -> System Status card

new-lamassu-admin/src/components/layout/Header.js

@@ -60,7 +60,9 @@ const Header = memo(({ tree }) => {
     <header>
       <div className={classes.header}>
         <div className={classes.content}>
-          <div className={classes.logo}>
+          <div
+            onClick={() => history.push('/dashboard')}
+            className={classnames(classes.logo, classes.logoLink)}>
             <Logo />
             <H4 className={classes.white}>Lamassu Admin</H4>
           </div>

new-lamassu-admin/src/components/layout/Header.styles.js

@@ -20,7 +20,7 @@ if (version === 8) {
   subheaderHeight = spacer * 7
 }
 
-export default {
+const styles = {
   header: {
     backgroundColor: primaryColor,
     color: white,
@@ -164,5 +164,10 @@ export default {
     '& > svg': {
       marginRight: 16
     }
+  },
+  logoLink: {
+    cursor: 'pointer'
   }
 }
+
+export default styles

new-lamassu-admin/src/pages/Dashboard/Alerts/Alerts.styles.js

@@ -5,7 +5,7 @@ import {
   primaryColor
 } from 'src/styling/variables'
 
-export default {
+const styles = {
   label: {
     margin: 0,
     color: offColor
@@ -62,3 +62,4 @@ export default {
     }
   }
 }
+export default styles

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

@@ -2,7 +2,7 @@ import typographyStyles from 'src/components/typography/styles'
 import { spacer, white, primaryColor } from 'src/styling/variables'
 const { label1 } = typographyStyles
 
-export default {
+const styles = {
   root: {
     flexGrow: 1,
     marginBottom: 108
@@ -60,3 +60,5 @@ export default {
     }
   }
 }
+
+export default styles

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

@@ -1,15 +1,14 @@
 import { useQuery } from '@apollo/react-hooks'
 import { makeStyles } from '@material-ui/core'
-import Button from '@material-ui/core/Button'
 import Grid from '@material-ui/core/Grid'
 import gql from 'graphql-tag'
 import * as R from 'ramda'
 import React, { useState, useEffect } from 'react'
 
-import { Label1, Label2 } from 'src/components/typography'
+import { Label2 } from 'src/components/typography'
 import { ReactComponent as TxInIcon } from 'src/styling/icons/direction/cash-in.svg'
 import { ReactComponent as TxOutIcon } from 'src/styling/icons/direction/cash-out.svg'
-import { white } from 'src/styling/variables'
+import { white, spacer } from 'src/styling/variables'
 import { fromNamespace } from 'src/utils/config'
 
 import styles from './Footer.styles'
@@ -32,31 +31,19 @@ const useStyles = makeStyles(styles)
 const Footer = () => {
   const { data, loading } = useQuery(GET_DATA)
   const [expanded, setExpanded] = useState(false)
-  const [showExpandBtn, setShowExpandBtn] = useState(false)
+  const [canExpand, setCanExpand] = useState(false)
-  const [buttonName, setButtonName] = useState('Show all')
+  const [delayedExpand, setDelayedExpand] = useState(null)
   const classes = useStyles()
 
   useEffect(() => {
     if (data && data.rates && data.rates.withCommissions) {
       const numItems = R.keys(data.rates.withCommissions).length
       if (numItems > 4) {
-        setShowExpandBtn(true)
+        setCanExpand(true)
-        setButtonName(`Show all (${numItems})`)
       }
     }
   }, [data])
 
-  const toggleExpand = () => {
-    if (expanded) {
-      const numItems = R.keys(data.rates.withCommissions).length
-      setExpanded(false)
-      setButtonName(`Show all (${numItems})`)
-    } else {
-      setExpanded(true)
-      setButtonName(`Show less`)
-    }
-  }
-
   const wallets = fromNamespace('wallets')(data?.config)
 
   const renderFooterItem = key => {
@@ -127,55 +114,58 @@ const Footer = () => {
 
   const makeFooterExpandedClass = () => {
     return {
-      overflow: 'scroll',
-      // 88px for base height, then add 100 px for each row of items. Each row has 4 items. 5 items makes 2 rows so 288px of height
       height:
-        88 + Math.ceil(R.keys(data.rates.withCommissions).length / 4) * 100,
+        R.keys(data.rates.withCommissions).length < 8
+          ? spacer * 12 * 2 + spacer * 2
+          : spacer * 12 * 3 + spacer * 3,
       maxHeight: '50vh',
       position: 'fixed',
       left: 0,
       bottom: 0,
       width: '100vw',
       backgroundColor: white,
-      textAlign: 'left',
+      textAlign: 'left'
-      boxShadow: '0px -1px 10px 0px rgba(50, 50, 50, 0.1)'
     }
   }
 
+  const expand = () => {
+    if (canExpand) {
+      setExpanded(true)
+    }
+  }
+
+  const shrink = () => {
+    setExpanded(false)
+  }
+  const handleMouseEnter = () => {
+    setDelayedExpand(
+      setTimeout(() => {
+        expand()
+      }, 300)
+    )
+  }
+
+  const handleMouseLeave = () => {
+    clearTimeout(delayedExpand)
+    shrink()
+  }
+
   return (
     <>
       <div
-        className={!expanded ? classes.footer : null}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        className={classes.footer}
         style={expanded ? makeFooterExpandedClass() : null}>
         <div className={classes.content}>
           {!loading && data && (
-            <>
+            <Grid container spacing={1}>
-              <Grid container spacing={1}>
+              <Grid container className={classes.footerContainer}>
-                <Grid container item xs={11} style={{ marginBottom: 18 }}>
+                {R.keys(data.rates.withCommissions).map(key =>
-                  {R.keys(data.rates.withCommissions).map(key =>
+                  renderFooterItem(key)
-                    renderFooterItem(key)
-                  )}
-                </Grid>
-                {/* {renderFooterItem(R.keys(data.rates.withCommissions)[0])} */}
-                {showExpandBtn && (
-                  <Label1
-                    style={{
-                      textAlign: 'center',
-                      marginBottom: 0,
-                      marginTop: 35
-                    }}>
-                    <Button
-                      onClick={toggleExpand}
-                      size="small"
-                      disableRipple
-                      disableFocusRipple
-                      className={classes.button}>
-                      {buttonName}
-                    </Button>
-                  </Label1>
                 )}
               </Grid>
-            </>
+            </Grid>
           )}
         </div>
       </div>

new-lamassu-admin/src/pages/Dashboard/Footer/Footer.styles.js

@@ -4,11 +4,12 @@ import {
   offColor,
   errorColor,
   primaryColor,
-  white
+  white,
+  spacer
 } from 'src/styling/variables'
 const { label1 } = typographyStyles
 
-export default {
+const styles = {
   label: {
     color: offColor
   },
@@ -67,7 +68,7 @@ export default {
     width: '100vw',
     backgroundColor: white,
     textAlign: 'left',
-    height: 88,
+    height: spacer * 12,
     boxShadow: '0px -1px 10px 0px rgba(50, 50, 50, 0.1)'
   },
   content: {
@@ -92,5 +93,11 @@ export default {
       marginLeft: 6
     },
     marginTop: -20
+  },
+  footerContainer: {
+    marginLeft: spacer * 5,
+    marginBottom: spacer * 2
   }
 }
+
+export default styles

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

@@ -2,7 +2,7 @@ import Grid from '@material-ui/core/Grid'
 import { makeStyles } from '@material-ui/core/styles'
 import React, { useState } from 'react'
 
-import Alerts from './Alerts'
+// import Alerts from './Alerts'
 import styles from './Dashboard.styles'
 import SystemStatus from './SystemStatus'
 const useStyles = makeStyles(styles)
@@ -28,14 +28,14 @@ const RightSide = () => {
   return (
     <>
       <Grid item xs={6}>
-        <Grid item style={{ marginBottom: 16 }}>
+        {/*         <Grid item style={{ marginBottom: 16 }}>
           <div className={classes.card}>
             <Alerts
               cardState={rightSideState.alerts}
               setRightSideState={setRightSideState}
             />
           </div>
-        </Grid>
+        </Grid> */}
         <Grid item>
           <div className={classes.card}>
             <SystemStatus

new-lamassu-admin/src/pages/Dashboard/SystemPerformance/Graphs/PercentageChart.js

@@ -1,5 +1,4 @@
 import { makeStyles } from '@material-ui/core'
-import Slider from '@material-ui/core/Slider'
 import React from 'react'
 
 import { ReactComponent as CashIn } from 'src/styling/icons/direction/cash-in.svg'
@@ -38,10 +37,8 @@ const useStyles = makeStyles(styles)
 
 const PercentageChart = () => {
   const classes = useStyles()
-  const [value, setValue] = React.useState(50)
+
-  const handleChange = (event, newValue) => {
+  const value = 50
-    setValue(newValue)
-  }
 
   const buildPercentageView = (value, direction) => {
     switch (direction) {
@@ -72,24 +69,15 @@ const PercentageChart = () => {
 
   return (
     <>
-      <Slider
-        value={value}
-        onChange={handleChange}
-        aria-labelledby="continuous-slider"
-      />
       <div className={classes.wrapper}>
         <div
           className={classes.percentageBox}
           style={{ width: `${value}%`, marginRight: 4 }}>
-          {/*           <CashIn />
-          <span className={classes.label}>{` ${value}%`}</span> */}
           {buildPercentageView(value, 'cashIn')}
         </div>
         <div
           className={classes.percentageBox}
           style={{ width: `${100 - value}%` }}>
-          {/*           <CashOut />
-          <span className={classes.label}>{` ${100 - value}%`}</span> */}
           {buildPercentageView(100 - value, 'cashOut')}
         </div>
       </div>

new-lamassu-admin/src/pages/Dashboard/SystemPerformance/SystemPerformance.styles.js

@@ -9,7 +9,7 @@ import {
   linkSecondaryColor
 } from 'src/styling/variables'
 
-export default {
+const styles = {
   titleWrapper: {
     display: 'flex',
     justifyContent: 'space-between',
@@ -78,3 +78,5 @@ export default {
     color: linkSecondaryColor
   }
 }
+
+export default styles

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

@@ -5,7 +5,7 @@ import {
   primaryColor
 } from 'src/styling/variables'
 
-export default {
+const styles = {
   label: {
     margin: 0,
     color: offColor
@@ -35,7 +35,7 @@ export default {
   statusHeader: {
     marginLeft: 2
   },
-  table: {
+  /*   table: {
     maxHeight: 440,
     '&::-webkit-scrollbar': {
       width: 7
@@ -44,6 +44,18 @@ export default {
       backgroundColor: offColor,
       borderRadius: 5
     }
+  }, */
+  // temporary, when notifications are enabled delete this one and decomment above
+  table: {
+    maxHeight: 465,
+    minHeight: 465,
+    '&::-webkit-scrollbar': {
+      width: 7
+    },
+    '&::-webkit-scrollbar-thumb': {
+      backgroundColor: offColor,
+      borderRadius: 5
+    }
   },
   tableBody: {
     overflow: 'auto'
@@ -52,3 +64,5 @@ export default {
     marginTop: 0
   }
 }
+
+export default styles

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

@@ -1,11 +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 ActionButton from 'src/components/buttons/ActionButton'
+// import ActionButton from 'src/components/buttons/ActionButton'
 import { H4, TL2, Label1 } from 'src/components/typography'
 
 import MachinesTable from './MachinesTable'
@@ -14,7 +14,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 {
@@ -49,23 +49,23 @@ const SystemStatus = ({ cardState, setRightSideState }) => {
   const classes = useStyles()
   const { data, loading } = useQuery(GET_DATA)
   const [showAllItems, setShowAllItems] = useState(false)
-  const [showExpandButton, setShowExpandButton] = useState(false)
+  //  const [showExpandButton, setShowExpandButton] = useState(false)
-  const [numToRender, setNumToRender] = useState(NUM_TO_RENDER)
+  // const [numToRender, setNumToRender] = useState(NUM_TO_RENDER)
 
   useEffect(() => {
-    if (showAllItems) {
+    /*     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)
+      // setNumToRender(NUM_TO_RENDER)
     }
-  }, [cardState.cardSize, data, numToRender, showAllItems])
+  }, [cardState.cardSize, data, /* numToRender, */ showAllItems])
 
-  const reset = () => {
+  /*   const reset = () => {
     setShowAllItems(false)
     setNumToRender(NUM_TO_RENDER)
     setRightSideState({
@@ -81,7 +81,7 @@ const SystemStatus = ({ cardState, setRightSideState }) => {
       systemStatus: { cardSize: 'big', buttonName: 'Show less' },
       alerts: { cardSize: 'small', buttonName: 'Show alerts' }
     })
-  }
+  } */
 
   // placeholder data
   if (data) {
@@ -92,8 +92,9 @@ const SystemStatus = ({ cardState, setRightSideState }) => {
   return (
     <>
       <div style={{ display: 'flex', justifyContent: 'space-between' }}>
-        <H4 className={classes.h4}>System status</H4>
+        <H4 className={classes.h4}>System status</H4>{' '}
-        {(showAllItems || cardState.cardSize === 'small') && (
+      </div>
+      {/* {(showAllItems || cardState.cardSize === 'small') && (
           <>
             <Label1
               style={{
@@ -112,7 +113,7 @@ const SystemStatus = ({ cardState, setRightSideState }) => {
             </Label1>
           </>
         )}
-      </div>
+      </div> */}
       {!loading && cardState.cardSize !== 'small' && (
         <>
           <Grid container spacing={1}>
@@ -127,21 +128,22 @@ const SystemStatus = ({ cardState, setRightSideState }) => {
               <Label1 style={{ display: 'inline' }}> server version</Label1>
             </Grid>
             <Grid item xs={4}>
-              <ActionButton
+              {/*               <ActionButton
                 color="primary"
                 className={classes.actionButton}
                 onClick={() => console.log('Upgrade button clicked')}>
                 Update to v10.6.0
-              </ActionButton>
+              </ActionButton> */}
             </Grid>
           </Grid>
           <Grid container spacing={1} style={{ marginTop: 23 }}>
             <Grid item xs={12}>
               <MachinesTable
-                numToRender={numToRender}
+                /* numToRender={numToRender} */
+                numToRender={Infinity}
                 machines={data?.machines ?? []}
               />
-              {showExpandButton && (
+              {/*               {showExpandButton && (
                 <>
                   <Label1 style={{ textAlign: 'center', marginBottom: 0 }}>
                     <Button
@@ -154,7 +156,7 @@ const SystemStatus = ({ cardState, setRightSideState }) => {
                     </Button>
                   </Label1>
                 </>
-              )}
+              )} */}
             </Grid>
           </Grid>
         </>

new-lamassu-admin/src/pages/Machines/MachineComponents/Cassettes/Cassettes.styles.js

@@ -1,6 +1,8 @@
-export default {
+const styles = {
   cashbox: {
     width: 80,
     height: 36
   }
 }
+
+export default styles

new-lamassu-admin/src/pages/Machines/MachineComponents/Transactions/DataTable.styles.js

@@ -1,6 +1,6 @@
 import { zircon } from 'src/styling/variables'
 
-export default {
+const styles = {
   expandButton: {
     outline: 'none',
     border: 'none',
@@ -41,3 +41,5 @@ export default {
     flexDirection: 'column'
   })
 }
+
+export default styles

new-lamassu-admin/src/pages/Machines/MachineComponents/Transactions/DetailsCard.styles.js

@@ -3,7 +3,7 @@ import { offColor } from 'src/styling/variables'
 
 const { p } = typographyStyles
 
-export default {
+const styles = {
   wrapper: {
     display: 'flex',
     flexDirection: 'column',
@@ -82,3 +82,5 @@ export default {
     width: 215
   }
 }
+
+export default styles

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

@@ -6,7 +6,7 @@ import {
   comet
 } from 'src/styling/variables'
 
-export default {
+const styles = {
   grid: {
     flex: 1,
     height: '100%'
@@ -71,3 +71,5 @@ export default {
     marginRight: 8
   }
 }
+
+export default styles

new-lamassu-admin/src/routing/routes.js

@@ -51,18 +51,18 @@ const useStyles = makeStyles({
 })
 
 const tree = [
-  {
+  /*   {
     key: 'dashboard',
     label: 'Dashboard',
     route: '/dashboard',
     component: Dashboard
-  },
+  }, */
-  {
+  /*   {
     key: 'machines',
     label: 'Machines',
     route: '/machines',
     component: Machines
-  },
+  }, */
   {
     key: 'transactions',
     label: 'Transactions',
@@ -315,6 +315,8 @@ const Routes = () => {
       <Route exact path="/">
         <Redirect to={{ pathname: '/transactions' }} />
       </Route>
+      <Route path="/dashboard" component={Dashboard} />
+      <Route path="/machines" component={Machines} />
       <Route path="/wizard" component={Wizard} />
       <Route path="/register" component={AuthRegister} />
       <Route path="/configmigration" component={ConfigMigration} />