From 0f440df5940a37e17c88c25c88e58e21780d8101 Mon Sep 17 00:00:00 2001
From: Stepan Usatiuk <stepanusatiuk@gmail.com>
Date: Sat, 5 Jan 2019 21:40:29 +0300
Subject: [PATCH] home and file screen

---
 frontend/src/App.scss      |   6 +++
 frontend/src/App.tsx       |  14 ++++-
 frontend/src/Home/Home.tsx | 101 ++++++++++++++++++++-----------------
 3 files changed, 75 insertions(+), 46 deletions(-)

diff --git a/frontend/src/App.scss b/frontend/src/App.scss
index f394d2d..b901ab5 100644
--- a/frontend/src/App.scss
+++ b/frontend/src/App.scss
@@ -5,4 +5,10 @@
     left: 0;
     right: 0;
     overflow: hidden;
+}
+
+.bp3-navbar {
+    .bp3-button {
+        margin-right: 0.25rem;
+    }
 }
\ No newline at end of file
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index a7022a3..a137dac 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,6 +1,12 @@
 import * as React from "react";
 import { connect } from "react-redux";
-import { Route, RouteComponentProps, Switch, withRouter } from "react-router";
+import {
+    Redirect,
+    Route,
+    RouteComponentProps,
+    Switch,
+    withRouter,
+} from "react-router";
 import { AuthScreen } from "~Auth/AuthScreen";
 import { Home } from "~Home/Home";
 import { Landing } from "~Landing/Landing";
@@ -21,6 +27,12 @@ export function AppComponent(props: IAppComponentProps) {
                     path="/"
                     component={() => (loggedIn ? <Home /> : <Landing />)}
                 />
+                <Route
+                    path="/files"
+                    component={() =>
+                        loggedIn ? <Home /> : <Redirect to="/login" />
+                    }
+                />
                 <Route path="/(login|signup)/" component={AuthScreen} />
             </Switch>
         </>
diff --git a/frontend/src/Home/Home.tsx b/frontend/src/Home/Home.tsx
index d9b47fb..b1e42e7 100644
--- a/frontend/src/Home/Home.tsx
+++ b/frontend/src/Home/Home.tsx
@@ -8,12 +8,13 @@ import {
 } from "@blueprintjs/core";
 import * as React from "react";
 import { connect } from "react-redux";
+import { RouteComponentProps, withRouter } from "react-router";
 import { Dispatch } from "redux";
 import { IUserJSON } from "~../../src/entity/User";
 import { IAppState } from "~redux/reducers";
 import { logoutUser } from "~redux/user/actions";
 
-interface IHomeProps {
+interface IHomeProps extends RouteComponentProps {
     user: IUserJSON | null;
     logout: () => void;
 }
@@ -24,47 +25,55 @@ export class HomeComponent extends React.PureComponent<IHomeProps> {
     }
 
     public render() {
+        console.log(this.props.location.pathname);
         return (
-            <>
-                {this.props.user && (
-                    <>
-                        <Navbar>
-                            <Navbar.Group align={Alignment.LEFT}>
-                                <Navbar.Heading>Writer</Navbar.Heading>
-                                <Navbar.Divider />
-                                <Button
-                                    className={Classes.MINIMAL}
-                                    icon="home"
-                                    text="Home"
-                                />
-                                <Button
-                                    className={Classes.MINIMAL}
-                                    icon="document"
-                                    text="Files"
-                                />
-                            </Navbar.Group>
-                            <Navbar.Group align={Alignment.RIGHT}>
-                                <Popover
-                                    target={
-                                        <Button id="userButton">
-                                            {this.props.user.username}
-                                        </Button>
-                                    }
-                                    content={
-                                        <Menu>
-                                            <Menu.Item
-                                                icon="log-out"
-                                                text="Logout"
-                                                onClick={this.props.logout}
-                                            />
-                                        </Menu>
-                                    }
-                                />
-                            </Navbar.Group>
-                        </Navbar>
-                    </>
-                )}
-            </>
+            this.props.user && (
+                <>
+                    <Navbar>
+                        <Navbar.Group align={Alignment.LEFT}>
+                            <Navbar.Heading>Writer</Navbar.Heading>
+                            <Navbar.Divider />
+                            <Button
+                                className={Classes.MINIMAL}
+                                icon="home"
+                                text="Home"
+                                active={this.props.location.pathname === "/"}
+                                onClick={() => this.props.history.push("/")}
+                            />
+                            <Button
+                                className={Classes.MINIMAL}
+                                icon="document"
+                                text="Files"
+                                active={
+                                    this.props.location.pathname === "/files"
+                                }
+                                onClick={() =>
+                                    this.props.history.push("/files")
+                                }
+                            />
+                        </Navbar.Group>
+                        <Navbar.Group align={Alignment.RIGHT}>
+                            <Popover
+                                target={
+                                    <Button id="userButton">
+                                        {this.props.user.username}
+                                    </Button>
+                                }
+                                content={
+                                    <Menu>
+                                        <Menu.Item
+                                            icon="log-out"
+                                            text="Logout"
+                                            onClick={this.props.logout}
+                                        />
+                                    </Menu>
+                                }
+                            />
+                        </Navbar.Group>
+                    </Navbar>
+                    <div id="MainScreen" />
+                </>
+            )
         );
     }
 }
@@ -77,7 +86,9 @@ function mapDispatchToProps(dispatch: Dispatch) {
     return { logout: () => dispatch(logoutUser()) };
 }
 
-export const Home = connect(
-    mapStateToProps,
-    mapDispatchToProps,
-)(HomeComponent);
+export const Home = withRouter(
+    connect(
+        mapStateToProps,
+        mapDispatchToProps,
+    )(HomeComponent),
+);