Feat: make dashboard and machine profile page

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

@@ -1,76 +1,130 @@
+import { useQuery } from '@apollo/react-hooks'
 import Button from '@material-ui/core/Button'
 import Grid from '@material-ui/core/Grid'
 import { makeStyles } from '@material-ui/core/styles'
-import React from 'react'
-
-import { cardState as cardState_ } from 'src/components/CollapsibleCard'
+import gql from 'graphql-tag'
+import * as R from 'ramda'
+import React, { useState, useEffect } from 'react'
 import { Label1, H4 } from 'src/components/typography'
 
-import styles from './Alerts.styles'
+import styles from '../Dashboard.styles'
+
 import AlertsTable from './AlertsTable'
 
 const NUM_TO_RENDER = 3
 
-const data = {
-  alerts: [
-    { text: 'alert 1' },
-    { text: 'alert 2' },
-    { text: 'alert 3' },
-    { text: 'alert 4' },
-    { text: 'alert 5' }
-  ]
-}
+const GET_ALERTS = gql`
+  query getAlerts {
+    alerts {
+      id
+      type
+      detail
+      message
+      created
+      read
+      valid
+    }
+    machines {
+      deviceId
+      name
+    }
+  }
+`
 
 const useStyles = makeStyles(styles)
 
-const Alerts = ({ onReset, onExpand, size }) => {
+const Alerts = ({ cardState, setRightSideState }) => {
   const classes = useStyles()
+  const [showAllItems, setShowAllItems] = useState(false)
+  const { data } = useQuery(GET_ALERTS)
 
-  const showAllItems = size === cardState_.EXPANDED
+  const alerts = R.path(['alerts'])(data) ?? []
+  const machines = R.compose(
+    R.map(R.prop('name')),
+    R.indexBy(R.prop('deviceId'))
+  )(data?.machines ?? [])
 
-  const alertsLength = () => (data ? data.alerts.length : 0)
+  const showExpandButton = alerts.length > NUM_TO_RENDER && !showAllItems
+
+  useEffect(() => {
+    if (cardState.cardSize === 'small' || cardState.cardSize === 'default') {
+      setShowAllItems(false)
+    }
+  }, [cardState.cardSize])
+
+  const reset = () => {
+    setRightSideState({
+      systemStatus: { cardSize: 'default', buttonName: 'Show less' },
+      alerts: { cardSize: 'default', buttonName: 'Show less' }
+    })
+    setShowAllItems(false)
+  }
+
+  const showAllClick = () => {
+    setShowAllItems(true)
+    setRightSideState({
+      systemStatus: { cardSize: 'small', buttonName: 'Show machines' },
+      alerts: { cardSize: 'big', buttonName: 'Show less' }
+    })
+  }
 
   return (
     <>
-      <div className={classes.container}>
-        <H4 className={classes.h4}>{`Alerts (${alertsLength()})`}</H4>
-        {showAllItems && (
-          <Label1 className={classes.upperButtonLabel}>
-            <Button
-              onClick={onReset}
-              size="small"
-              disableRipple
-              disableFocusRipple
-              className={classes.button}>
-              {'Show less'}
-            </Button>
-          </Label1>
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'space-between'
+        }}>
+        <H4 className={classes.h4}>{`Alerts ${
+          data ? `(${alerts.length})` : 0
+        }`}</H4>
+        {(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>
+          </>
         )}
       </div>
-      <>
-        <Grid container spacing={1}>
-          <Grid item xs={12}>
-            <AlertsTable
-              numToRender={showAllItems ? data?.alerts.length : NUM_TO_RENDER}
-              alerts={data?.alerts ?? []}
-            />
-            {!showAllItems && (
-              <>
-                <Label1 className={classes.centerLabel}>
-                  <Button
-                    onClick={() => onExpand('alerts')}
-                    size="small"
-                    disableRipple
-                    disableFocusRipple
-                    className={classes.button}>
-                    {`Show all (${data.alerts.length})`}
-                  </Button>
-                </Label1>
-              </>
-            )}
+      {cardState.cardSize !== 'small' && (
+        <>
+          <Grid container spacing={1}>
+            <Grid item xs={12}>
+              <AlertsTable
+                numToRender={showAllItems ? alerts.length : NUM_TO_RENDER}
+                alerts={alerts}
+                machines={machines}
+              />
+              {showExpandButton && (
+                <>
+                  <Label1 style={{ textAlign: 'center', marginBottom: 0 }}>
+                    <Button
+                      onClick={showAllClick}
+                      size="small"
+                      disableRipple
+                      disableFocusRipple
+                      className={classes.button}>
+                      {`Show all (${alerts.length})`}
+                    </Button>
+                  </Label1>
+                </>
+              )}
+            </Grid>
           </Grid>
-        </Grid>
-      </>
+        </>
+      )}
     </>
   )
 }