Feat: enable transition animation for dashboard

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

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

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

@@ -33,10 +33,11 @@ const GET_ALERTS = gql`
 
 const useStyles = makeStyles(styles)
 
-const Alerts = ({ cardState, setRightSideState }) => {
+const Alerts = props => {
+  const { cardState, setRightSideState } = props
   const classes = useStyles()
-  const { data } = useQuery(GET_ALERTS)
   const [showAllItems, setShowAllItems] = useState(false)
+  const { data } = useQuery(GET_ALERTS)
 
   const alerts = R.path(['alerts'])(data) ?? []
   const machines = R.compose(

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

@@ -1,6 +1,8 @@
+import { useQuery } from '@apollo/react-hooks'
 import Grid from '@material-ui/core/Grid'
 import { makeStyles } from '@material-ui/core/styles'
 import classnames from 'classnames'
+import gql from 'graphql-tag'
 import React from 'react'
 import TitleSection from 'src/components/layout/TitleSection'
 import { ReactComponent as TxInIcon } from 'src/styling/icons/direction/cash-in.svg'
@@ -11,9 +13,28 @@ import Footer from './Footer'
 import LeftSide from './LeftSide'
 import RightSide from './RightSide'
 const useStyles = makeStyles(styles)
+const GET_ALERTS = gql`
+  query getAlerts {
+    alerts {
+      id
+      type
+      detail
+      message
+      created
+      read
+      valid
+    }
+    machines {
+      deviceId
+      name
+    }
+  }
+`
 
 const Dashboard = () => {
+  const { data } = useQuery(GET_ALERTS)
   const classes = useStyles()
+  console.log(data)
 
   return (
     <>

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

@@ -41,7 +41,6 @@ const RightSide = () => {
     // setAlertsSize(cardState.DEFAULT)
     setSystemStatusSize(cardState.DEFAULT)
   }
-
   return (
     <Grid item xs={6}>
       {/*         <CollapsibleCard

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

@@ -303,7 +303,21 @@ const Routes = () => {
       <Route exact path="/">
         <Redirect to={{ pathname: '/transactions' }} />
       </Route>
-      <Route path="/dashboard" component={Dashboard} />
+      {/* <Route path="/dashboard" /> */}
+      <Route path={'/dashboard'}>
+        <Transition
+          className={classes.wrapper}
+          {...transitionProps}
+          in={true}
+          mountOnEnter
+          unmountOnExit
+          children={
+            <div className={classes.wrapper}>
+              <Dashboard />
+            </div>
+          }
+        />
+      </Route>
       <Route path="/machines" component={Machines} />
       <Route path="/wizard" component={Wizard} />
       <Route path="/register" component={AuthRegister} />