separate home and landing pages

frontend/src/App.scss

@@ -0,0 +1,8 @@
+.animationWrapper {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    overflow: hidden;
+}

frontend/src/App.tsx

@@ -1,16 +1,34 @@
 import * as React from "react";
-import { Route, RouteComponentProps, withRouter } from "react-router";
+import { connect } from "react-redux";
+import { Route, RouteComponentProps, Switch, withRouter } from "react-router";
 import { AuthScreen } from "~Auth/AuthScreen";
-import { Home } from "~Home";
+import { Home } from "~Home/Home";
+import { Landing } from "~Landing/Landing";
+import { IAppState } from "~redux/reducers";
 
-export function AppComponent(props: RouteComponentProps) {
+interface IAppComponentProps extends RouteComponentProps {
+    loggedIn: boolean;
+}
+
+export function AppComponent(props: IAppComponentProps) {
+    const { loggedIn } = props;
     const { location } = props.history;
     return (
         <>
-            <Route exact={true} path="/" component={Home} />
-            <Route path="/(login|signup)/" component={AuthScreen} />
+            <Switch>
+                <Route
+                    exact={true}
+                    path="/"
+                    component={() => (loggedIn ? <Home /> : <Landing />)}
+                />
+                <Route path="/(login|signup)/" component={AuthScreen} />
+            </Switch>
         </>
     );
 }
 
-export const App = withRouter(AppComponent);
+function mapStateToProps(state: IAppState) {
+    return { loggedIn: !(state.auth.jwt === null) };
+}
+
+export const App = withRouter(connect(mapStateToProps)(AppComponent));

frontend/src/Auth/AuthScreen.tsx

@@ -1,50 +1,69 @@
 import * as React from "react";
-import { Route, RouteComponentProps, Switch, withRouter } from "react-router";
+import { connect } from "react-redux";
+import {
+    Redirect,
+    Route,
+    RouteComponentProps,
+    Switch,
+    withRouter,
+} from "react-router";
 import { Transition } from "react-spring";
+import { IAppState } from "~redux/reducers";
 
 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>
-    );
+interface IAuthScreenProps extends RouteComponentProps {
+    loggedIn: boolean;
 }
 
-export const AuthScreen = withRouter(AuthScreenComponent);
+export class AuthScreenComponent extends React.PureComponent<IAuthScreenProps> {
+    constructor(props: IAuthScreenProps) {
+        super(props);
+    }
+    public render() {
+        const { location } = this.props.history;
+        const { from } = this.props.location.state || { from: "/" };
+        console.log(from);
+        const { loggedIn } = this.props;
+        return loggedIn ? (
+            <Redirect to={from} />
+        ) : (
+            <div className="animationWrapper">
+                <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>
+        );
+    }
+}
+
+function mapStateToProps(state: IAppState) {
+    return { loggedIn: !(state.auth.jwt === null) };
+}
+
+export const AuthScreen = withRouter(
+    connect(mapStateToProps)(AuthScreenComponent),
+);

frontend/src/Landing/Landing.tsx

@@ -0,0 +1,26 @@
+import { Alignment, Button, Navbar } from "@blueprintjs/core";
+import * as React from "react";
+import { RouteComponentProps, withRouter } from "react-router";
+
+export function LandingComponent(props: RouteComponentProps) {
+    function login() {
+        props.history.push("/login");
+    }
+    return (
+        <>
+            <Navbar>
+                <Navbar.Group align={Alignment.LEFT}>
+                    <Navbar.Heading>Writer</Navbar.Heading>
+                    <Navbar.Divider />
+                </Navbar.Group>
+                <Navbar.Group align={Alignment.RIGHT}>
+                    <Button icon="log-in" minimal={true} onClick={login}>
+                        Login
+                    </Button>
+                </Navbar.Group>
+            </Navbar>
+        </>
+    );
+}
+
+export const Landing = withRouter(LandingComponent);

frontend/src/index.tsx

@@ -1,3 +1,4 @@
+import "./App.scss";
 import "@blueprintjs/core/lib/css/blueprint.css";
 import "@blueprintjs/icons/lib/css/blueprint-icons.css";
 import "normalize.css/normalize.css";