feat: traversal of dates in Seek component

src/App.js

@@ -16,6 +16,7 @@ import { withAuthentication } from "./components/session";
 
 const RouteLayout = styled.div`
   margin: 0 auto;
+  padding: 0 10px;
   max-width: 720px;
   min-height: calc(100vh - 60px);
   background-color: ${props => props.theme.colors.bodyBackground};
@@ -30,15 +31,12 @@ class App extends Component {
   onChangeTheme = () => {
     const { selectedTheme } = this.state;
     const root = document.documentElement;
-    console.log(root);
     const newTheme = selectedTheme === "LIGHT" ? "DARK" : "LIGHT";
     root.style.setProperty(
       "background-color",
       theme[newTheme].colors.bodyBackground
     );
-    this.setState(prevState => ({
-      selectedTheme: newTheme
-    }));
+    this.setState({ selectedTheme: newTheme });
   };
 
   render() {
@@ -50,12 +48,20 @@ class App extends Component {
         <Router>
           <Navbar toggleTheme={this.onChangeTheme} />
           <RouteLayout>
-            <Route path="/:year(\d+)" component={Year} />
-            <Route path="/:year(\d+)/:month(\d+)" component={Month} />
-            <Route path="/:year(\d+)/:month(\d+)/:day(\d+)" component={Day} />
-            <Route path="/user" component={User} />
-            <Route path="/login" component={Login} />
-            <Route path="/register" component={Register} />
+            <Route path="/:year(\d+)" component={Year} exact />
+            <Route
+              path="/:year(\d+)/:month(0[1-9]|1[0-2]+)"
+              component={Month}
+              exact
+            />
+            <Route
+              path="/:year(\d+)/:month(0[1-9]|1[0-2]+)/:day(\d+)"
+              component={Day}
+              exact
+            />
+            <Route path="/user" component={User} exact />
+            <Route path="/login" component={Login} exact />
+            <Route path="/register" component={Register} exact />
           </RouteLayout>
         </Router>
       </ThemeProvider>

src/components/Icon/Icon.js

@@ -7,6 +7,7 @@ import {
   ChevronRight,
   Circle,
   Moon,
+  Sun,
   User
 } from "react-feather";
 import { withTheme } from "emotion-theming";
@@ -21,7 +22,7 @@ const IconBase = styled.div`
   transition: 0.1s all ease-in-out;
   color: ${props => props.theme.colors.secondary};
   &:hover {
-    background-color: ${props => props.theme.colors.hover};
+    background-color: ${props => !props.disabled && props.theme.colors.hover};
     cursor: pointer;
   }
 `;
@@ -34,6 +35,7 @@ const Icon = ({ name, ...rest }) => (
     {name === "ChevronRight" && <ChevronRight />}
     {name === "Circle" && <Circle />}
     {name === "Moon" && <Moon />}
+    {name === "Sun" && <Sun />}
     {name === "User" && <User />}
   </IconBase>
 );

src/components/Navbar/Navbar.js

@@ -7,7 +7,6 @@ import { withTheme } from "emotion-theming";
 import { todayUrl, yearUrl } from "../../utils/date";
 
 import Icon from "../Icon";
-import SignOut from "../SignOut";
 import { withAuthentication } from "../session";
 
 const Header = styled.div`
@@ -16,6 +15,7 @@ const Header = styled.div`
   display: grid;
   grid-template-areas: "... nav ...";
   grid-template-columns: 1fr minmax(240px, 720px) 1fr;
+  grid-gap: 10px;
   align-items: center;
   border-width: 1px;
   border-color: ${props => props.theme.colors.quarternary};
@@ -43,7 +43,10 @@ const Navbar = ({ authUser, theme, toggleTheme }) => (
     <Nav>
       <Logo>Logo</Logo>
       <NavIcons>
-        <Icon onClick={() => toggleTheme()} name="Moon" />
+        <Icon
+          onClick={() => toggleTheme()}
+          name={theme.name === "Dark" ? "Sun" : "Moon"}
+        />
         {authUser ? (
           <React.Fragment>
             <Link to={yearUrl()}>
@@ -55,8 +58,6 @@ const Navbar = ({ authUser, theme, toggleTheme }) => (
             <Link to={"/user"}>
               <Icon name="User" />
             </Link>
-
-            <SignOut />
           </React.Fragment>
         ) : (
           <React.Fragment>

src/components/Seek/Seek.js

@@ -1,6 +1,7 @@
 import React from "react";
 import styled from "@emotion/styled";
 import { withTheme } from "emotion-theming";
+import { Link } from "react-router-dom";
 
 import { SIZES } from "../../styles/constants";
 import Icon from "../Icon";
@@ -25,12 +26,24 @@ const SeekArrows = styled.div`
   grid-gap: 10px;
 `;
 
-const Seek = ({ title = "", prev = "", next = "" }) => (
+const Seek = ({ title = "", prev = "", next = "", disableNext, theme }) => (
   <SeekHeader>
     <SeekH1>{title}</SeekH1>
     <SeekArrows>
+      <Link to={prev}>
         <Icon name="ChevronLeft" />
-      <Icon name="ChevronRight" />
+      </Link>
+      <Link to={disableNext ? "#" : next}>
+        <Icon
+          disabled={disableNext}
+          name="ChevronRight"
+          style={{
+            color: disableNext
+              ? theme.colors.quarternary
+              : theme.colors.secondary
+          }}
+        />
+      </Link>
     </SeekArrows>
   </SeekHeader>
 );

src/components/screens/Day/Day.js

@@ -1,5 +1,30 @@
-import React from "react";
+import React, { Component } from "react";
+import { addDays, subDays, format, isAfter, startOfYesterday } from "date-fns";
 
-const Day = () => <div>Day</div>;
+import Seek from "../../Seek";
+
+class Day extends Component {
+  render() {
+    const {
+      match: {
+        params: { year, month, day }
+      }
+    } = this.props;
+    const currentDay = new Date(year, month - 1, day);
+    console.log(currentDay);
+    if (!currentDay) return;
+
+    return (
+      <div>
+        <Seek
+          title={format(currentDay, "YYYY MMM DD")}
+          prev={format(subDays(currentDay, 1), "/YYYY/MM/DD")}
+          next={format(addDays(currentDay, 1), "/YYYY/MM/DD")}
+          disableNext={isAfter(currentDay, startOfYesterday())}
+        />
+      </div>
+    );
+  }
+}
 
 export default Day;

src/components/screens/Month/Month.js

@@ -1,5 +1,28 @@
-import React from "react";
+import React, { Component } from "react";
+import { addDays, subDays, format, isToday } from "date-fns";
 
-const Month = () => <div>Month</div>;
+import Seek from "../../Seek";
+
+class Month extends Component {
+  render() {
+    const {
+      match: {
+        params: { year, month }
+      }
+    } = this.props;
+    const currentDay = new Date(year, month - 1);
+    console.log(currentDay);
+    return (
+      <div>
+        <Seek
+          title={format(currentDay, "YYYY MMM")}
+          prev={format(subDays(currentDay, 1), "/YYYY/MM")}
+          next={"asdf"}
+          disableNext={isToday(new Date())}
+        />
+      </div>
+    );
+  }
+}
 
 export default Month;

src/components/screens/User/User.js

@@ -1,6 +1,8 @@
 import React from "react";
 import fire from "../../firebase/fire.js";
 
+import SignOut from "../../SignOut";
+
 class User extends React.Component {
   state = {
     name: ""
@@ -26,6 +28,8 @@ class User extends React.Component {
 
   render() {
     return (
+      <React.Fragment>
+        <SignOut />
         <form onSubmit={this.addUser}>
           <input
             type="text"
@@ -36,6 +40,7 @@ class User extends React.Component {
           />
           <button type="submit">Submit</button>
         </form>
+      </React.Fragment>
     );
   }
 }

src/components/screens/Year/Year.js

@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import isToday from "date-fns/is_today";
+import { addYears, subYears, format } from "date-fns";
 
 import Seek from "../../Seek";
 
@@ -10,13 +10,15 @@ class Year extends Component {
         params: { year }
       }
     } = this.props;
+    const currentDate = new Date(year, 0, 1);
+    console.log(currentDate.getFullYear());
     return (
       <div>
         <Seek
           title={year}
-          prev={"Asdf"}
-          next={"asdf"}
-          disableNext={isToday(new Date())}
+          prev={format(subYears(currentDate, 1), "/YYYY")}
+          next={format(addYears(currentDate, 1), "/YYYY")}
+          disableNext={year >= new Date().getFullYear()}
         />
       </div>
     );

src/styles/theme.js

@@ -1,5 +1,6 @@
 const theme = {
   LIGHT: {
+    name: "Light",
     colors: {
       primary: "#2E3136",
       secondary: "#999",
@@ -11,6 +12,7 @@ const theme = {
     }
   },
   DARK: {
+    name: "Dark",
     colors: {
       primary: "#F3F6F8",
       secondary: "#9Ba3B0",