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
2020-11-30 14:06:44 +00:00 · 2020-11-30 14:06:44 +00:00 · 5572fb0eb1
commit 5572fb0eb1
parent 00f176fccc
16 changed files with 126 additions and 103 deletions
--- a/new-lamassu-admin/src/components/layout/Header.js
+++ b/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>
--- a/new-lamassu-admin/src/components/layout/Header.styles.js
+++ b/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
--- a/new-lamassu-admin/src/pages/Dashboard/Alerts/Alerts.styles.js
+++ b/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
--- a/new-lamassu-admin/src/pages/Dashboard/Dashboard.styles.js
+++ b/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
--- a/new-lamassu-admin/src/pages/Dashboard/Footer/Footer.js
+++ b/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 [buttonName, setButtonName] = useState('Show all')
+  const [canExpand, setCanExpand] = useState(false)
+  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)
-        setButtonName(`Show all (${numItems})`)
+        setCanExpand(true)
      }
    }
  }, [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',
-      boxShadow: '0px -1px 10px 0px rgba(50, 50, 50, 0.1)'
+      textAlign: 'left'
    }
  }

+  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 item xs={11} style={{ marginBottom: 18 }}>
-                  {R.keys(data.rates.withCommissions).map(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 container spacing={1}>
+              <Grid container className={classes.footerContainer}>
+                {R.keys(data.rates.withCommissions).map(key =>
+                  renderFooterItem(key)
                )}
              </Grid>
-            </>
+            </Grid>
          )}
        </div>
      </div>
--- a/new-lamassu-admin/src/pages/Dashboard/Footer/Footer.styles.js
+++ b/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
--- a/new-lamassu-admin/src/pages/Dashboard/RightSide.js
+++ b/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
--- a/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/Graphs/PercentageChart.js
+++ b/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) => {
-    setValue(newValue)
-  }
+
+  const value = 50

  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>
--- a/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/SystemPerformance.styles.js
+++ b/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
--- a/new-lamassu-admin/src/pages/Dashboard/SystemStatus/MachinesTable.styles.js
+++ b/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
--- a/new-lamassu-admin/src/pages/Dashboard/SystemStatus/SystemStatus.js
+++ b/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 [numToRender, setNumToRender] = useState(NUM_TO_RENDER)
+  //  const [showExpandButton, setShowExpandButton] = useState(false)
+  // 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>
-        {(showAllItems || cardState.cardSize === 'small') && (
+        <H4 className={classes.h4}>System status</H4>{' '}
+      </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>
        </>
--- a/new-lamassu-admin/src/pages/Machines/MachineComponents/Cassettes/Cassettes.styles.js
+++ b/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
--- a/new-lamassu-admin/src/pages/Machines/MachineComponents/Transactions/DataTable.styles.js
+++ b/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
--- a/new-lamassu-admin/src/pages/Machines/MachineComponents/Transactions/DetailsCard.styles.js
+++ b/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
--- a/new-lamassu-admin/src/pages/Machines/Machines.styles.js
+++ b/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
--- a/new-lamassu-admin/src/routing/routes.js
+++ b/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} />