From cc14f37b6dd7f0f8aa07687176968754f32cdafc Mon Sep 17 00:00:00 2001
From: Cesar <26280794+csrapr@users.noreply.github.com>
Date: Wed, 6 Jan 2021 15:47:25 +0000
Subject: [PATCH] Feat: enable transition animation for dashboard

---
 .../src/components/layout/Header.js           |  5 ++++-
 .../src/pages/Dashboard/Alerts/Alerts.js      |  5 +++--
 .../src/pages/Dashboard/Dashboard.js          | 21 +++++++++++++++++++
 .../src/pages/Dashboard/RightSide.js          |  1 -
 new-lamassu-admin/src/routing/routes.js       | 16 +++++++++++++-
 5 files changed, 43 insertions(+), 5 deletions(-)

diff --git a/new-lamassu-admin/src/components/layout/Header.js b/new-lamassu-admin/src/components/layout/Header.js
index ae1d1118..b69f9cd4 100644
--- a/new-lamassu-admin/src/components/layout/Header.js
+++ b/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>
diff --git a/new-lamassu-admin/src/pages/Dashboard/Alerts/Alerts.js b/new-lamassu-admin/src/pages/Dashboard/Alerts/Alerts.js
index 54be2660..1c24124c 100644
--- a/new-lamassu-admin/src/pages/Dashboard/Alerts/Alerts.js
+++ b/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(
diff --git a/new-lamassu-admin/src/pages/Dashboard/Dashboard.js b/new-lamassu-admin/src/pages/Dashboard/Dashboard.js
index c345be9c..c6176eea 100644
--- a/new-lamassu-admin/src/pages/Dashboard/Dashboard.js
+++ b/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 (
     <>
diff --git a/new-lamassu-admin/src/pages/Dashboard/RightSide.js b/new-lamassu-admin/src/pages/Dashboard/RightSide.js
index 561ea99d..3aa2df48 100644
--- a/new-lamassu-admin/src/pages/Dashboard/RightSide.js
+++ b/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
diff --git a/new-lamassu-admin/src/routing/routes.js b/new-lamassu-admin/src/routing/routes.js
index be3e1c2c..9bb29fde 100644
--- a/new-lamassu-admin/src/routing/routes.js
+++ b/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} />