From 68050fd4bac0fa69bb2ac6361c45eccf66a2eb1a Mon Sep 17 00:00:00 2001
From: Jose Sousa <jcsousa127@gmail.com>
Date: Wed, 18 Nov 2020 21:16:40 +0000
Subject: [PATCH] feat: transitions animations without direction

---
 new-lamassu-admin/src/routing/routes.js | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/new-lamassu-admin/src/routing/routes.js b/new-lamassu-admin/src/routing/routes.js
index de280ba2..8a3ccd39 100644
--- a/new-lamassu-admin/src/routing/routes.js
+++ b/new-lamassu-admin/src/routing/routes.js
@@ -1,3 +1,5 @@
+import Fade from '@material-ui/core/Fade'
+import Slide from '@material-ui/core/Slide'
 import * as R from 'ramda'
 import React, { useContext } from 'react'
 import {
@@ -244,6 +246,8 @@ const getParent = route =>
 const Routes = () => {
   const history = useHistory()
   const location = useLocation()
+  const action = history.action
+
   const { wizardTested } = useContext(AppContext)
 
   const dontTriggerPages = ['/404', '/register', '/wizard']
@@ -252,6 +256,11 @@ const Routes = () => {
     history.push('/wizard')
   }
 
+  const Transition =
+    action === 'PUSH' && location.pathname !== '/transactions' ? Slide : Fade
+
+  // const props = Transition === Slide ? { direction: 'right' } : {}
+
   return (
     <Switch>
       <Route exact path="/">
@@ -261,7 +270,15 @@ const Routes = () => {
       <Route path="/register" component={AuthRegister} />
       {flattened.map(({ route, component: Page, key }) => (
         <Route path={route} key={key}>
-          <Page name={key} />
+          <Transition
+            direction="left"
+            in={location.pathname === route}
+            mountOnEnter
+            unmountOnExit>
+            <div>
+              <Page name={key} action={action} />
+            </div>
+          </Transition>
         </Route>
       ))}
       <Route path="/404" />