From c22d2a0f94d1a7d4cc4fe2a561c7c65b49e8015a Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Fri, 10 May 2019 22:22:33 +0200
Subject: [PATCH] route animations

---
 package.json                |  3 +-
 src/App.css                 | 11 +++++--
 src/App.jsx                 | 57 +++++++++++++++++++++++++++----------
 src/screens/Home.jsx        |  2 +-
 src/screens/Preferences.css |  1 -
 5 files changed, 54 insertions(+), 20 deletions(-)

diff --git a/package.json b/package.json
index 1597eb2..3b173bf 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,8 @@
     "ms": "^2.1.1",
     "react": "^16.8.6",
     "react-blockies": "^1.4.1",
-    "react-dom": "^16.8.6"
+    "react-dom": "^16.8.6",
+    "react-pose": "^4.0.8"
   },
   "devDependencies": {
     "@babel/core": "^7.4.4",
diff --git a/src/App.css b/src/App.css
index 4046707..b5708e3 100644
--- a/src/App.css
+++ b/src/App.css
@@ -77,7 +77,13 @@ a h1 {
     overflow-y: auto;
 }
 
-.app > div {
+.app > div,
+.app > div > div {
+    width: 100%;
+    height: 100%;
+}
+
+.app > div > div {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -95,7 +101,8 @@ a h1 {
     background: #fff;
     border-radius: 5px;
     border: .1rem solid #e2e2e2;
-    animation: fadein .5s .5s ease-out;
+
+    /* animation: fadein .5s .5s ease-out; */
 }
 
 .dark .box {
diff --git a/src/App.jsx b/src/App.jsx
index d9514c3..8667be8 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,11 +1,8 @@
 import React, { PureComponent } from 'react'
-import {
-  Router,
-  createMemorySource,
-  createHistory,
-  LocationProvider
-} from '@reach/router'
+import PropTypes from 'prop-types'
+import { Router, Location } from '@reach/router'
 import { webFrame } from 'electron'
+import posed, { PoseGroup } from 'react-pose'
 import AppProvider from './store/AppProvider'
 import Titlebar from './components/Titlebar'
 import Home from './screens/Home'
@@ -18,9 +15,41 @@ import './App.css'
 webFrame.setVisualZoomLevelLimits(1, 1)
 webFrame.setLayoutZoomLevelLimits(0, 0)
 
-// https://github.com/reach/router/issues/25
-const source = createMemorySource('/')
-const history = createHistory(source)
+const Animation = posed.div({
+  enter: {
+    y: 0,
+    opacity: 1,
+    delay: 100,
+    transition: {
+      type: 'spring',
+      stiffness: 500,
+      damping: 25,
+      restDelta: 0.5,
+      restSpeed: 10
+    }
+  },
+  exit: {
+    y: 50,
+    opacity: 0,
+    transition: { duration: 150 }
+  }
+})
+
+const PosedRouter = ({ children }) => (
+  <Location>
+    {({ location }) => (
+      <PoseGroup>
+        <Animation key={location.key}>
+          <Router location={location}>{children}</Router>
+        </Animation>
+      </PoseGroup>
+    )}
+  </Location>
+)
+
+PosedRouter.propTypes = {
+  children: PropTypes.any.isRequired
+}
 
 export default class App extends PureComponent {
   render() {
@@ -28,12 +57,10 @@ export default class App extends PureComponent {
       <AppProvider>
         <Titlebar />
         <div className="app">
-          <LocationProvider history={history}>
-            <Router>
-              <Home path="/" default />
-              <Preferences path="preferences" />
-            </Router>
-          </LocationProvider>
+          <PosedRouter>
+            <Home path="/" default />
+            <Preferences path="/preferences" />
+          </PosedRouter>
         </div>
       </AppProvider>
     )
diff --git a/src/screens/Home.jsx b/src/screens/Home.jsx
index ee84abb..5627ba9 100644
--- a/src/screens/Home.jsx
+++ b/src/screens/Home.jsx
@@ -18,7 +18,7 @@ export default class Home extends PureComponent {
     return (
       <>
         <main className="main box">
-          <Link className="preferences-link" to="preferences">
+          <Link className="preferences-link" to="/preferences">
             <IconCog />
           </Link>
 
diff --git a/src/screens/Preferences.css b/src/screens/Preferences.css
index b8143c2..1566575 100644
--- a/src/screens/Preferences.css
+++ b/src/screens/Preferences.css
@@ -1,7 +1,6 @@
 .preferences {
     text-align: left;
     width: 100%;
-    margin-top: 7vh;
     position: relative;
 }