feat: protected routes

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

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>

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

src/components/PrivateRoute/index.js

@@ -0,0 +1,2 @@
+import PrivateRoute from "./PrivateRoute"
+export default PrivateRoute