feat: traversal of dates in Seek component

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>
     );