animate edit doc screen

frontend/src/App.scss

@@ -5,7 +5,7 @@
     bottom: 0;
     left: 0;
     right: 0;
-    overflow: hidden;
+    overflow-x: hidden;
 }
 
 .loadingWrapper {

frontend/src/App.tsx

@@ -19,23 +19,19 @@ interface IAppComponentProps extends RouteComponentProps {
 export function AppComponent(props: IAppComponentProps) {
     const { loggedIn } = props;
     const { location } = props.history;
-    return (
-        <>
-            <Switch>
-                <Route
-                    exact={true}
-                    path="/"
-                    component={() => (loggedIn ? <Home /> : <Landing />)}
-                />
-                <Route
-                    path="/docs/:id"
-                    component={() =>
-                        loggedIn ? <Home /> : <Redirect to="/login" />
-                    }
-                />
-                <Route path="/(login|signup)/" component={AuthScreen} />
-            </Switch>
-        </>
+    return loggedIn ? (
+        <Switch>
+            <Route path="/docs/:id" component={Home} />,
+            <Route path="/" component={Home} />,
+            <Route path="/signup" component={AuthScreen} />,
+            <Route path="/login" component={AuthScreen} />,
+        </Switch>
+    ) : (
+        <Switch>
+            <Route path="/signup" component={AuthScreen} />
+            <Route path="/login" component={AuthScreen} />
+            <Route exact={true} path="/" component={Landing} />
+        </Switch>
     );
 }
 

frontend/src/Documents/Docs.scss

@@ -1,10 +1,5 @@
 @import "~@blueprintjs/core/lib/scss/variables";
 #overview {
-    max-width: 100%;
-    width: 50rem;
-    margin: 0 auto;
-    margin-top: 3.5rem;
-    max-height: 100%;
     display: flex;
     flex-direction: column;
     .separator {
@@ -25,7 +20,6 @@
             width: 10.5rem;
             margin: 1rem;
             padding: 0rem;
-
             overflow: hidden;
             h4 {
                 padding: 1rem;

frontend/src/Documents/EditDoc.tsx

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { connect } from "react-redux";
+import { RouteComponentProps, withRouter } from "react-router";
+import { IDocumentJSON } from "~../../src/entity/Document";
+import { IAppState } from "~redux/reducers";
+
+export interface IEditDocComponent extends RouteComponentProps {
+    allDocs: IDocumentJSON[];
+    doc: number;
+}
+
+export function EditDocComponent(props: IEditDocComponent) {
+    if (props.allDocs) {
+        const { id } = props.match.params as any;
+        const doc = props.allDocs[id];
+        return <div>{doc.name}</div>;
+    } else {
+        return <div />;
+    }
+}
+
+function mapStateToProps(state: IAppState) {
+    return { allDocs: state.docs.all };
+}
+
+export const EditDoc = withRouter(connect(mapStateToProps)(EditDocComponent));

frontend/src/Home/Home.scss

@@ -0,0 +1,16 @@
+@import "~@blueprintjs/core/lib/scss/variables";
+#MainScreen {
+    margin-top: $pt-navbar-height;
+}
+
+.viewComponent {
+    position: absolute;
+    max-width: 100%;
+    width: 50rem;
+    left: 0;
+    right: 0;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 5rem;
+    max-height: 100%;
+}

frontend/src/Home/Home.tsx

@@ -1,3 +1,5 @@
+import "./Home.scss";
+
 import {
     Alignment,
     Breadcrumbs,
@@ -10,9 +12,11 @@ import {
 import * as React from "react";
 import { connect } from "react-redux";
 import { Route, RouteComponentProps, Switch, withRouter } from "react-router";
+import { Transition } from "react-spring/renderprops";
 import { Dispatch } from "redux";
 import { IDocumentJSON } from "~../../src/entity/Document";
 import { IUserJSON } from "~../../src/entity/User";
+import { EditDoc } from "~Documents/EditDoc";
 import { Overview } from "~Documents/Overview";
 import { IAppState } from "~redux/reducers";
 import { logoutUser } from "~redux/user/actions";
@@ -29,6 +33,8 @@ export class HomeComponent extends React.PureComponent<IHomeProps> {
     }
 
     public render() {
+        const { location } = this.props.history;
+
         const breadcrumbs: IBreadcrumbProps[] = [
             {
                 icon: "home",
@@ -49,7 +55,7 @@ export class HomeComponent extends React.PureComponent<IHomeProps> {
         return (
             this.props.user && (
                 <>
-                    <Navbar>
+                    <Navbar fixedToTop={true}>
                         <Navbar.Group align={Alignment.LEFT}>
                             <Navbar.Heading>Writer</Navbar.Heading>
                             <Navbar.Divider />
@@ -74,11 +80,35 @@ export class HomeComponent extends React.PureComponent<IHomeProps> {
                             />
                         </Navbar.Group>
                     </Navbar>
-                    <div id="MainScreen">
-                        <Switch>
-                            <Route exact={true} path="/" component={Overview} />
-                            <Route path="/docs/:id" component={Overview} />
-                        </Switch>
+                    <div id="MainScreen" 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: any) => (style: any) => (
+                                <div style={style} className="viewComponent">
+                                    <Switch location={_location}>
+                                        <Route
+                                            path="/docs/:id"
+                                            component={EditDoc}
+                                        />
+                                        <Route path="/" component={Overview} />
+                                    </Switch>
+                                </div>
+                            )}
+                        </Transition>
                     </div>
                 </>
             )