chore: code cleanup, removing console.logs, adding year grid

src/components/screens/Day/Day.js

@@ -60,7 +60,7 @@ class Day extends Component {
       }
     } = this.props;
     history.listen((location, action) => {
-      const [blank, year, month, day] = location.pathname.split("/");
+      const [, year, month, day] = location.pathname.split("/");
       this.onRouteChanged(year, month, day);
     });
     this.getDocRef(year, month, day, false);
@@ -144,8 +144,7 @@ class Day extends Component {
     const {
       match: {
         params: { year, month, day }
-      },
-      theme
+      }
     } = this.props;
     const { text, loading } = this.state;
     const currentDay = new Date(year, month - 1, day);
@@ -161,9 +160,7 @@ class Day extends Component {
         />
         <JournalHeading>RECORD THOUGHTS ABOUT YOUR DAY</JournalHeading>
         {loading ? (
-          <div style={{ color: theme.colors.tertiary, fontSize: 12 }}>
-            loading...
-          </div>
+          <JournalEntryArea disabled placeholder="Loading..." />
         ) : (
           <JournalEntryArea
             placeholder="Start writing..."

src/components/screens/Month/Month.js

@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import { addDays, subDays, format, isToday } from "date-fns";
+import { subDays, format, isToday } from "date-fns";
 
 import Seek from "../../Seek";
 
@@ -11,7 +11,6 @@ class Month extends Component {
       }
     } = this.props;
     const currentDay = new Date(year, month - 1);
-    console.log(currentDay);
     return (
       <div>
         <Seek

src/components/screens/Register/Register.js

@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import { Link, withRouter } from "react-router-dom";
+import { withRouter } from "react-router-dom";
 
 import { FirebaseContext } from "../../firebase";
 
@@ -26,8 +26,8 @@ class RegisterForm extends Component {
   }
 
   onSubmit = event => {
-    const { username, email, passwordOne } = this.state;
-    const { firebase } = this.props
+    const { email, passwordOne } = this.state;
+    const { firebase } = this.props;
 
     firebase
       .doCreateUserWithEmailAndPassword(email, passwordOne)
@@ -39,12 +39,15 @@ class RegisterForm extends Component {
           passwordTwo: "",
           error: null
         });
-        const { user } = result
-        console.log(user)
-        firebase.db.collection("users").doc(user.uid).set({
-          email: user.email,
-          theme: "LIGHT"
-        })
+        const { user } = result;
+        console.log(user);
+        firebase.db
+          .collection("users")
+          .doc(user.uid)
+          .set({
+            email: user.email,
+            theme: "LIGHT"
+          });
         this.props.history.push("/home");
       })
       .catch(error => {

src/components/screens/User/User.js

@@ -16,11 +16,14 @@ class User extends React.Component {
 
   addUser = e => {
     e.preventDefault();
-    const { firebase } = this.props
+    const { firebase } = this.props;
 
-    const userRef = firebase.db.collection("users").doc().add({
-      name: this.state.name
-    });
+    firebase.db
+      .collection("users")
+      .doc()
+      .add({
+        name: this.state.name
+      });
     this.setState({ name: "" });
   };
 

src/components/screens/Year/Year.js

@@ -1,8 +1,34 @@
 import React, { Component } from "react";
-import { addYears, subYears, format } from "date-fns";
+import { Link } from "react-router-dom";
+import styled from "@emotion/styled";
+import { addYears, subYears, format, isThisYear, getMonth } from "date-fns";
+import { withTheme } from "emotion-theming";
 
+import { months } from "../../../utils/date";
 import Seek from "../../Seek";
 
+const MonthCardGrid = styled.div`
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  grid-gap: 20px;
+  margin-top: 20px;
+`;
+const MonthCard = styled.div`
+  color: ${props =>
+    props.disabled
+      ? props.theme.colors.quarternary
+      : props.theme.colors.secondary};
+  border: 1px solid;
+  border-color: ${props => props.theme.colors.quarternary};
+  padding: 40px;
+  border-radius: 5px;
+  text-align: center;
+  user-select: none;
+  &:hover {
+    border-color: ${props => !props.disabled && props.theme.colors.tertiary};
+  }
+`;
+
 class Year extends Component {
   render() {
     const {
@@ -11,7 +37,12 @@ class Year extends Component {
       }
     } = this.props;
     const currentDate = new Date(year, 0, 1);
-    console.log(currentDate.getFullYear());
+
+    // include all months unless it's this year
+    let monthIndexesToInclude = 11;
+    if (isThisYear(currentDate)) {
+      monthIndexesToInclude = getMonth(new Date());
+    }
     return (
       <div>
         <Seek
@@ -20,9 +51,27 @@ class Year extends Component {
           next={format(addYears(currentDate, 1), "/YYYY")}
           disableNext={year >= new Date().getFullYear()}
         />
+        <MonthCardGrid>
+          {months.long.map((month, index) => {
+            const isDisabled = monthIndexesToInclude < index;
+            return isDisabled ? (
+              <MonthCard key={index} disabled={isDisabled}>
+                {month}
+              </MonthCard>
+            ) : (
+              <Link
+                key={index}
+                to={format(new Date(year, index), "/YYYY/MM")}
+                style={{ textDecoration: "none" }}
+              >
+                <MonthCard>{month}</MonthCard>
+              </Link>
+            );
+          })}
+        </MonthCardGrid>
       </div>
     );
   }
 }
 
-export default Year;
+export default withTheme(Year);