chore: constants file, styling, and seek component

package.json

@@ -6,6 +6,7 @@
     "@emotion/core": "^10.0.10",
     "@emotion/styled": "^10.0.10",
     "babel-plugin-emotion": "^10.0.9",
+    "date-fns": "^1.30.1",
     "firebase": "^5.9.0",
     "react": "^16.8.4",
     "react-dom": "^16.8.4",

src/App.js

@@ -1,5 +1,6 @@
 import React, { Component } from "react";
 import { BrowserRouter as Router, Route } from "react-router-dom";
+import styled from "@emotion/styled";
 
 import logo from "./logo.svg";
 import "./App.css";
@@ -13,6 +14,11 @@ import Register from "./components/screens/Register";
 
 import { withAuthentication } from "./components/session";
 
+const RouteLayout = styled.div`
+  margin: 0 auto;
+  max-width: 720px;
+`;
+
 class App extends Component {
   state = {
     authUser: JSON.parse(localStorage.getItem("authUser"))
@@ -23,12 +29,14 @@ class App extends Component {
     return (
       <Router>
         <Navbar />
-        <Route path="/:year" component={Year} />
-        <Route path="/:year/:month" component={Month} />
-        <Route path="/:year/:month/:day" component={Day} />
-        <Route path="/user" component={User} />
-        <Route path="/login" component={Login} />
-        <Route path="/register" component={Register} />
+        <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} />
+        </RouteLayout>
       </Router>
     );
   }

src/components/Navbar/Navbar.js

@@ -2,6 +2,8 @@ import React from "react";
 import { Link } from "react-router-dom";
 import styled from "@emotion/styled";
 
+import { todayUrl, yearUrl, urls } from "../../utils/date";
+
 import SignOut from "../SignOut";
 import { withAuthentication } from "../session";
 
@@ -37,6 +39,8 @@ const Navbar = ({ authUser }) => (
       <NavIcons>
         {authUser ? (
           <React.Fragment>
+            <Link to={yearUrl()}>Year</Link>
+            <Link to={todayUrl()}>Today</Link>
             <Link to={"/user"}>Account</Link>
             <SignOut />
           </React.Fragment>

src/components/Seek/Seek.js

@@ -0,0 +1,29 @@
+import React from "react";
+import styled from "@emotion/styled";
+
+import { SIZES } from "../../styles/constants";
+
+const SeekHeader = styled.header`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: ${SIZES.normal};
+`;
+const SeekH1 = styled.h1`
+  display: block;
+  font-size: ${SIZES.normal};
+`;
+const SeekArrows = styled.div``;
+
+const Seek = ({ title = "", prev = "", next = "" }) => (
+  <React.Fragment>
+    <SeekHeader>
+      <SeekH1>{title}</SeekH1>
+      <SeekArrows>asdf</SeekArrows>
+    </SeekHeader>
+    <hr />
+  </React.Fragment>
+);
+
+export default Seek;

src/components/Seek/index.js

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

src/components/firebase/fire.js

@@ -27,7 +27,10 @@ class Firebase {
   doSignInWithEmailAndPassword = (email, password) =>
     this.auth.signInWithEmailAndPassword(email, password);
 
-  doSignOut = () => this.auth.signOut();
+  doSignOut = () => {
+    this.auth.signOut();
+    window.location.replace("/login");
+  };
 
   doPasswordReset = email => this.auth.sendPasswordResetEmail(email);
 

src/components/screens/Year/Year.js

@@ -1,5 +1,26 @@
-import React from "react";
+import React, { Component } from "react";
+import isToday from "date-fns/is_today";
 
-const Year = () => <div>Year</div>;
+import Seek from "../../Seek";
+
+class Year extends Component {
+  render() {
+    const {
+      match: {
+        params: { year }
+      }
+    } = this.props;
+    return (
+      <div>
+        <Seek
+          title={year}
+          prev={"Asdf"}
+          next={"asdf"}
+          disableNext={isToday(new Date())}
+        />
+      </div>
+    );
+  }
+}
 
 export default Year;

src/styles/constants.js

@@ -0,0 +1,7 @@
+export const SIZES = {
+  tiny: "0.5rem",
+  small: "1rem",
+  normal: "1.25rem",
+  medium: "1.5rem",
+  large: "2rem"
+};

src/utils/date.js

@@ -0,0 +1,14 @@
+import format from "date-fns/format";
+
+export const pad = n => (n < 10 ? "0" : "") + n;
+
+export const todayUrl = (date = new Date()) =>
+  `/${date.getFullYear()}/${pad(date.getMonth() + 1)}/${pad(date.getDate())}/`;
+
+export const yearUrl = (date = new Date()) => `/${date.getFullYear()}/`;
+
+export const months = {
+  short: Array.from({ length: 12 }, (x, index) =>
+    new Date(0, index).toLocaleDateString("en-US", { month: "short" })
+  )
+};

yarn.lock

@@ -3203,6 +3203,11 @@ data-urls@^1.0.0:
     whatwg-mimetype "^2.2.0"
     whatwg-url "^7.0.0"
 
+date-fns@^1.30.1:
+  version "1.30.1"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-1.30.1.tgz#2e71bf0b119153dbb4cc4e88d9ea5acfb50dc05c"
+  integrity sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw==
+
 date-now@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/date-now/-/date-now-0.1.4.tgz#eaf439fd4d4848ad74e5cc7dbef200672b9e345b"