From e1af351b6706d959a1ee7b2f5ccd2a773b7a1c81 Mon Sep 17 00:00:00 2001 From: Kyle Gill Date: Thu, 28 Mar 2019 23:41:43 -0600 Subject: [PATCH] chore: code cleanup, removing console.logs, adding year grid --- src/App.js | 2 +- src/components/firebase/fire.js | 4 +- src/components/screens/Day/Day.js | 9 ++-- src/components/screens/Month/Month.js | 3 +- src/components/screens/Register/Register.js | 21 ++++---- src/components/screens/User/User.js | 11 +++-- src/components/screens/Year/Year.js | 55 +++++++++++++++++++-- src/index.js | 2 +- src/serviceWorker.js | 30 +++++------ src/utils/date.js | 6 +-- 10 files changed, 96 insertions(+), 47 deletions(-) diff --git a/src/App.js b/src/App.js index 3116d1d..71e0ea6 100644 --- a/src/App.js +++ b/src/App.js @@ -43,7 +43,7 @@ class App extends Component { }; render() { - const { authUser, selectedTheme } = this.state; + const { selectedTheme } = this.state; const currentTheme = theme[selectedTheme]; return ( diff --git a/src/components/firebase/fire.js b/src/components/firebase/fire.js index c887eb7..56fdba0 100644 --- a/src/components/firebase/fire.js +++ b/src/components/firebase/fire.js @@ -20,9 +20,9 @@ class Firebase { .firestore() .enablePersistence() .catch(function(err) { - if (err.code == "failed-precondition") { + if (err.code === "failed-precondition") { console.error("firestore won't work offline with multiple tabs open"); - } else if (err.code == "unimplemented") { + } else if (err.code === "unimplemented") { console.error( "current browser can't take advantage of firestore offline" ); diff --git a/src/components/screens/Day/Day.js b/src/components/screens/Day/Day.js index 1f16cc5..c1de956 100644 --- a/src/components/screens/Day/Day.js +++ b/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 { /> RECORD THOUGHTS ABOUT YOUR DAY {loading ? ( -
- loading... -
+ ) : ( { - 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 => { diff --git a/src/components/screens/User/User.js b/src/components/screens/User/User.js index 9f592e7..c51a150 100644 --- a/src/components/screens/User/User.js +++ b/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: "" }); }; diff --git a/src/components/screens/Year/Year.js b/src/components/screens/Year/Year.js index 76edf1a..e7ed293 100644 --- a/src/components/screens/Year/Year.js +++ b/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 (
= new Date().getFullYear()} /> + + {months.long.map((month, index) => { + const isDisabled = monthIndexesToInclude < index; + return isDisabled ? ( + + {month} + + ) : ( + + {month} + + ); + })} +
); } } -export default Year; +export default withTheme(Year); diff --git a/src/index.js b/src/index.js index aeb67da..fd2ce9e 100644 --- a/src/index.js +++ b/src/index.js @@ -16,4 +16,4 @@ ReactDOM.render( // If you want your app to work offline and load faster, you can change // unregister() to register() below. Note this comes with some pitfalls. // Learn more about service workers: https://bit.ly/CRA-PWA -serviceWorker.unregister(); +serviceWorker.register(); diff --git a/src/serviceWorker.js b/src/serviceWorker.js index f8c7e50..5ef2083 100644 --- a/src/serviceWorker.js +++ b/src/serviceWorker.js @@ -11,9 +11,9 @@ // opt-in, read https://bit.ly/CRA-PWA const isLocalhost = Boolean( - window.location.hostname === 'localhost' || + window.location.hostname === "localhost" || // [::1] is the IPv6 localhost address. - window.location.hostname === '[::1]' || + window.location.hostname === "[::1]" || // 127.0.0.1/8 is considered localhost for IPv4. window.location.hostname.match( /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ @@ -21,7 +21,7 @@ const isLocalhost = Boolean( ); export function register(config) { - if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { + if (process.env.NODE_ENV === "production" && "serviceWorker" in navigator) { // The URL constructor is available in all browsers that support SW. const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href); if (publicUrl.origin !== window.location.origin) { @@ -31,7 +31,7 @@ export function register(config) { return; } - window.addEventListener('load', () => { + window.addEventListener("load", () => { const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; if (isLocalhost) { @@ -42,8 +42,8 @@ export function register(config) { // service worker/PWA documentation. navigator.serviceWorker.ready.then(() => { console.log( - 'This web app is being served cache-first by a service ' + - 'worker. To learn more, visit https://bit.ly/CRA-PWA' + "This web app is being served cache-first by a service " + + "worker. To learn more, visit https://bit.ly/CRA-PWA" ); }); } else { @@ -64,14 +64,14 @@ function registerValidSW(swUrl, config) { return; } installingWorker.onstatechange = () => { - if (installingWorker.state === 'installed') { + if (installingWorker.state === "installed") { if (navigator.serviceWorker.controller) { // At this point, the updated precached content has been fetched, // but the previous service worker will still serve the older // content until all client tabs are closed. console.log( - 'New content is available and will be used when all ' + - 'tabs for this page are closed. See https://bit.ly/CRA-PWA.' + "New content is available and will be used when all " + + "tabs for this page are closed. See https://bit.ly/CRA-PWA." ); // Execute callback @@ -82,7 +82,7 @@ function registerValidSW(swUrl, config) { // At this point, everything has been precached. // It's the perfect time to display a // "Content is cached for offline use." message. - console.log('Content is cached for offline use.'); + console.log("Content is cached for offline use."); // Execute callback if (config && config.onSuccess) { @@ -94,7 +94,7 @@ function registerValidSW(swUrl, config) { }; }) .catch(error => { - console.error('Error during service worker registration:', error); + console.error("Error during service worker registration:", error); }); } @@ -103,10 +103,10 @@ function checkValidServiceWorker(swUrl, config) { fetch(swUrl) .then(response => { // Ensure service worker exists, and that we really are getting a JS file. - const contentType = response.headers.get('content-type'); + const contentType = response.headers.get("content-type"); if ( response.status === 404 || - (contentType != null && contentType.indexOf('javascript') === -1) + (contentType != null && contentType.indexOf("javascript") === -1) ) { // No service worker found. Probably a different app. Reload the page. navigator.serviceWorker.ready.then(registration => { @@ -121,13 +121,13 @@ function checkValidServiceWorker(swUrl, config) { }) .catch(() => { console.log( - 'No internet connection found. App is running in offline mode.' + "No internet connection found. App is running in offline mode." ); }); } export function unregister() { - if ('serviceWorker' in navigator) { + if ("serviceWorker" in navigator) { navigator.serviceWorker.ready.then(registration => { registration.unregister(); }); diff --git a/src/utils/date.js b/src/utils/date.js index 8bb1718..c175840 100644 --- a/src/utils/date.js +++ b/src/utils/date.js @@ -1,5 +1,3 @@ -import format from "date-fns/format"; - export const pad = n => (n < 10 ? "0" : "") + n; export const todayUrl = (date = new Date()) => @@ -8,7 +6,7 @@ export const todayUrl = (date = new Date()) => 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" }) + long: Array.from({ length: 12 }, (x, index) => + new Date(0, index).toLocaleDateString("en-US", { month: "long" }) ) };