feat: traversal of dates in Seek component

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>
-      <Icon name="ChevronLeft" />
-      <Icon name="ChevronRight" />
+      <Link to={prev}>
+        <Icon name="ChevronLeft" />
+      </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,16 +28,19 @@ class User extends React.Component {
 
   render() {
     return (
-      <form onSubmit={this.addUser}>
-        <input
-          type="text"
-          name="name"
-          placeholder="Name"
-          onChange={this.updateInput}
-          value={this.state.name}
-        />
-        <button type="submit">Submit</button>
-      </form>
+      <React.Fragment>
+        <SignOut />
+        <form onSubmit={this.addUser}>
+          <input
+            type="text"
+            name="name"
+            placeholder="Name"
+            onChange={this.updateInput}
+            value={this.state.name}
+          />
+          <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>
     );