diff --git a/package.json b/package.json index 79247d8..280449c 100644 --- a/package.json +++ b/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", diff --git a/src/App.js b/src/App.js index fe61bf0..287c657 100644 --- a/src/App.js +++ b/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 ( - - - - - - + + + + + + + + ); } diff --git a/src/components/Navbar/Navbar.js b/src/components/Navbar/Navbar.js index 7797d36..ddacbe9 100644 --- a/src/components/Navbar/Navbar.js +++ b/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 }) => ( {authUser ? ( + Year + Today Account diff --git a/src/components/Seek/Seek.js b/src/components/Seek/Seek.js new file mode 100644 index 0000000..6409171 --- /dev/null +++ b/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 = "" }) => ( + + + {title} + asdf + +
+
+); + +export default Seek; diff --git a/src/components/Seek/index.js b/src/components/Seek/index.js new file mode 100644 index 0000000..d7a6634 --- /dev/null +++ b/src/components/Seek/index.js @@ -0,0 +1,2 @@ +import Seek from "./Seek"; +export default Seek; diff --git a/src/components/firebase/fire.js b/src/components/firebase/fire.js index 5dd81d7..c527b59 100644 --- a/src/components/firebase/fire.js +++ b/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); diff --git a/src/components/screens/Year/Year.js b/src/components/screens/Year/Year.js index bb0c606..d05da64 100644 --- a/src/components/screens/Year/Year.js +++ b/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 = () =>
Year
; +import Seek from "../../Seek"; + +class Year extends Component { + render() { + const { + match: { + params: { year } + } + } = this.props; + return ( +
+ +
+ ); + } +} export default Year; diff --git a/src/styles/constants.js b/src/styles/constants.js new file mode 100644 index 0000000..4c80bf3 --- /dev/null +++ b/src/styles/constants.js @@ -0,0 +1,7 @@ +export const SIZES = { + tiny: "0.5rem", + small: "1rem", + normal: "1.25rem", + medium: "1.5rem", + large: "2rem" +}; diff --git a/src/utils/date.js b/src/utils/date.js new file mode 100644 index 0000000..8bb1718 --- /dev/null +++ b/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" }) + ) +}; diff --git a/yarn.lock b/yarn.lock index 49d0f46..c099c72 100644 --- a/yarn.lock +++ b/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"