animate login/signup screens

frontend/package-lock.json

@@ -3231,14 +3231,12 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -3253,20 +3251,17 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -3383,8 +3378,7 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -3396,7 +3390,6 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -3411,7 +3404,6 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -3419,14 +3411,12 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "minipass": {
           "version": "2.2.4",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.1",
             "yallist": "^3.0.0"
@@ -3445,7 +3435,6 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -3526,8 +3515,7 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -3539,7 +3527,6 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -3661,7 +3648,6 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -7295,6 +7281,14 @@
         "warning": "^4.0.1"
       }
     },
+    "react-spring": {
+      "version": "7.2.7",
+      "resolved": "https://registry.npmjs.org/react-spring/-/react-spring-7.2.7.tgz",
+      "integrity": "sha512-UFPkQzPQMOf9E9GFprcGVfa+1EdnffQV6tvFGY+kck32orqgqKrfP54y8da3qP3T6hLnLkU77seVZOD7GYPNEg==",
+      "requires": {
+        "@babel/runtime": "^7.0.0"
+      }
+    },
     "react-transition-group": {
       "version": "2.5.2",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.5.2.tgz",

frontend/package.json

@@ -24,6 +24,7 @@
     "react-redux": "^6.0.0",
     "react-router": "^4.3.1",
     "react-router-dom": "^4.3.1",
+    "react-spring": "^7.2.7",
     "redux": "^4.0.1",
     "redux-saga": "^0.16.2"
   }

frontend/src/App.tsx

@@ -1,17 +1,16 @@
 import * as React from "react";
-import { Route, Switch } from "react-router";
+import { Route, RouteComponentProps, withRouter } from "react-router";
-import { Login } from "~Auth/Login";
+import { AuthScreen } from "~Auth/AuthScreen";
-import { Signup } from "~Auth/Signup";
 import { Home } from "~Home";
 
-export function App() {
+export function AppComponent(props: RouteComponentProps) {
+    const { location } = props.history;
     return (
         <>
-            <Switch>
+            <Route exact={true} path="/" component={Home} />
-                <Route exact={true} path="/" component={Home} />
+            <Route path="/(login|signup)/" component={AuthScreen} />
-                <Route path="/login" component={Login} />
-                <Route path="/signup" component={Signup} />
-            </Switch>
         </>
     );
 }
+
+export const App = withRouter(AppComponent);

frontend/src/Auth/Auth.scss

@@ -3,6 +3,9 @@
     margin: auto;
     margin-top: 10rem;
     width: 20rem;
+    left: 0;
+    right: 0;
+    position: absolute;
     form {
         display: flex;
         flex-direction: column;

frontend/src/Auth/AuthScreen.tsx

@@ -0,0 +1,50 @@
+import * as React from "react";
+import { Route, RouteComponentProps, Switch, withRouter } from "react-router";
+import { Transition } from "react-spring";
+
+import { Login } from "./Login";
+import { Signup } from "./Signup";
+
+export function AuthScreenComponent(props: RouteComponentProps) {
+    const { location } = props.history;
+    return (
+        <div
+            style={{
+                position: "absolute",
+                top: 0,
+                bottom: 0,
+                left: 0,
+                right: 0,
+                overflow: "hidden",
+            }}
+        >
+            <Transition
+                items={location}
+                keys={location.pathname}
+                from={{
+                    opacity: 0,
+                    transform: "translate3d(-400px,0,0)",
+                }}
+                enter={{
+                    opacity: 1,
+                    transform: "translate3d(0,0,0)",
+                }}
+                leave={{
+                    opacity: 0,
+                    transform: "translate3d(400px,0,0)",
+                }}
+            >
+                {_location => style => (
+                    <div style={style}>
+                        <Switch location={_location}>
+                            <Route path="/login" component={Login} />
+                            <Route path="/signup" component={Signup} />
+                        </Switch>
+                    </div>
+                )}
+            </Transition>
+        </div>
+    );
+}
+
+export const AuthScreen = withRouter(AuthScreenComponent);

frontend/src/Home.tsx

@@ -4,7 +4,6 @@ import * as React from "react";
 export function Home() {
     return (
         <>
-            {" "}
             <Navbar>
                 <Navbar.Group align={Alignment.LEFT}>
                     <Navbar.Heading>Writer</Navbar.Heading>

tslint.json

@@ -11,6 +11,7 @@
         "no-implicit-dependencies": false,
         "no-submodule-imports": false,
         "no-this-assignment": false,
-        "max-classes-per-file": false
+        "max-classes-per-file": false,
+        "jsx-no-lambda": false
     }
 }