From e8a8f41d8166580cdd1be64fb277b3ca0fd9bf1f Mon Sep 17 00:00:00 2001
From: Kyle Gill <kylerobertgill@gmail.com>
Date: Wed, 3 Apr 2019 18:14:17 -0600
Subject: [PATCH] feat: protected routes

---
 src/App.js                                  | 18 ++++++++++++++----
 src/components/Icon/Icon.js                 | 13 ++++++++++++-
 src/components/Navbar/Navbar.js             | 10 +++++++---
 src/components/PrivateRoute/PrivateRoute.js | 21 +++++++++++++++++++++
 src/components/PrivateRoute/index.js        |  2 ++
 5 files changed, 56 insertions(+), 8 deletions(-)
 create mode 100644 src/components/PrivateRoute/PrivateRoute.js
 create mode 100644 src/components/PrivateRoute/index.js

diff --git a/src/App.js b/src/App.js
index 9cc38cd..7d964c2 100644
--- a/src/App.js
+++ b/src/App.js
@@ -14,6 +14,7 @@ import Year from "./components/screens/Year"
 import User from "./components/screens/User"
 import Login from "./components/screens/Login"
 import Register from "./components/screens/Register"
+import PrivateRoute from "./components/PrivateRoute"
 
 import { withAuthentication } from "./components/session"
 import { withFirebase } from "./components/firebase"
@@ -63,7 +64,9 @@ class App extends Component {
   }
 
   render() {
-    const { selectedTheme } = this.state
+    const { selectedTheme, authUser } = this.state
+    const { authUser: propAuthUser } = this.props
+    const authed = !!propAuthUser || !!authUser
 
     const currentTheme = theme[selectedTheme]
     return (
@@ -71,13 +74,20 @@ class App extends Component {
         <Router>
           <Navbar toggleTheme={this.onChangeTheme} />
           <RouteLayout>
-            <Route path="/:year(\d+)" component={Year} exact />
-            <Route
+            <PrivateRoute
+              authed={authed}
+              path="/:year(\d+)"
+              component={Year}
+              exact
+            />
+            <PrivateRoute
+              authed={authed}
               path="/:year(\d+)/:month(0[1-9]|1[0-2]+)"
               component={Month}
               exact
             />
-            <Route
+            <PrivateRoute
+              authed={authed}
               path="/:year(\d+)/:month(0[1-9]|1[0-2]+)/:day(\d+)"
               component={Day}
               exact
diff --git a/src/components/Icon/Icon.js b/src/components/Icon/Icon.js
index 5ac61c1..9fc82a6 100644
--- a/src/components/Icon/Icon.js
+++ b/src/components/Icon/Icon.js
@@ -1,12 +1,15 @@
 import React from "react"
 import styled from "@emotion/styled"
 import {
+  ArrowRightCircle,
+  ArrowRight,
   Book,
   Calendar,
   ChevronLeft,
   ChevronRight,
   Circle,
   Edit2,
+  LogIn,
   Moon,
   Sun,
   User,
@@ -33,14 +36,22 @@ const IconBase = styled.div`
   }
 `
 
-const Icon = ({ name, tabindex, ...rest }) => (
+const Icon = ({ name, tabindex, label, ...rest }) => (
   <IconBase tabIndex={tabindex} {...rest}>
+    {label && (
+      <span style={{ margin: "3px -3px 3px 3px", fontWeight: 700 }}>
+        {label}
+      </span>
+    )}
+    {name === "ArrowRightCircle" && <ArrowRightCircle />}
+    {name === "ArrowRight" && <ArrowRight />}
     {name === "Book" && <Book />}
     {name === "Calendar" && <Calendar />}
     {name === "ChevronLeft" && <ChevronLeft />}
     {name === "ChevronRight" && <ChevronRight />}
     {name === "Circle" && <Circle />}
     {name === "Edit2" && <Edit2 />}
+    {name === "LogIn" && <LogIn />}
     {name === "Moon" && <Moon />}
     {name === "Sun" && <Sun />}
     {name === "User" && <User />}
diff --git a/src/components/Navbar/Navbar.js b/src/components/Navbar/Navbar.js
index 2266cab..ad5a344 100644
--- a/src/components/Navbar/Navbar.js
+++ b/src/components/Navbar/Navbar.js
@@ -1,6 +1,8 @@
 import React from "react"
 import { StyledLink as Link } from "../elements"
 import styled from "@emotion/styled"
+/** @jsx jsx */
+import { jsx, css } from "@emotion/core"
 import { compose } from "recompose"
 import { withTheme } from "emotion-theming"
 
@@ -82,9 +84,11 @@ const Navbar = ({ authUser, theme, toggleTheme }) => (
           </React.Fragment>
         ) : (
           <React.Fragment>
-            <Link to={"/"}>Landing</Link>
-            <Link to={"/login"}>Login</Link>
-            <Link to={"/register"}>Register</Link>
+            {/* <Link to={"/"}>Landing</Link> */}
+            <Link to={"/login"}>
+              <Icon name="LogIn" label="Get Started" />
+            </Link>
+            {/* <Link to={"/register"}>Register</Link> */}
           </React.Fragment>
         )}
       </NavIcons>
diff --git a/src/components/PrivateRoute/PrivateRoute.js b/src/components/PrivateRoute/PrivateRoute.js
new file mode 100644
index 0000000..b991987
--- /dev/null
+++ b/src/components/PrivateRoute/PrivateRoute.js
@@ -0,0 +1,21 @@
+import React, { Component } from "react"
+import { Route, Redirect } from "react-router-dom"
+
+const PrivateRoute = ({ component: Component, authed, ...rest }) => {
+  return (
+    <Route
+      {...rest}
+      render={props =>
+        authed === true ? (
+          <Component {...props} />
+        ) : (
+          <Redirect
+            to={{ pathname: "/login", state: { from: props.location } }}
+          />
+        )
+      }
+    />
+  )
+}
+
+export default PrivateRoute
diff --git a/src/components/PrivateRoute/index.js b/src/components/PrivateRoute/index.js
new file mode 100644
index 0000000..345d794
--- /dev/null
+++ b/src/components/PrivateRoute/index.js
@@ -0,0 +1,2 @@
+import PrivateRoute from "./PrivateRoute"
+export default PrivateRoute