home and file screen

frontend/src/App.scss

@@ -6,3 +6,9 @@
     right: 0;
     overflow: hidden;
 }
+
+.bp3-navbar {
+    .bp3-button {
+        margin-right: 0.25rem;
+    }
+}

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>
         </>

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,9 +25,9 @@ export class HomeComponent extends React.PureComponent<IHomeProps> {
     }
 
     public render() {
+        console.log(this.props.location.pathname);
         return (
-            <>
-                {this.props.user && (
+            this.props.user && (
                 <>
                     <Navbar>
                         <Navbar.Group align={Alignment.LEFT}>
@@ -36,11 +37,19 @@ export class HomeComponent extends React.PureComponent<IHomeProps> {
                                 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}>
@@ -62,9 +71,9 @@ export class HomeComponent extends React.PureComponent<IHomeProps> {
                             />
                         </Navbar.Group>
                     </Navbar>
+                    <div id="MainScreen" />
                 </>
-                )}
-            </>
+            )
         );
     }
 }
@@ -77,7 +86,9 @@ function mapDispatchToProps(dispatch: Dispatch) {
     return { logout: () => dispatch(logoutUser()) };
 }
 
-export const Home = connect(
+export const Home = withRouter(
+    connect(
         mapStateToProps,
         mapDispatchToProps,
-)(HomeComponent);
+    )(HomeComponent),
+);