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

This commit is contained in:
Kyle Gill
2019-03-28 23:41:43 -06:00
parent eb2a76ff7c
commit e1af351b67
10 changed files with 96 additions and 47 deletions

View File

@@ -43,7 +43,7 @@ class App extends Component {
};
render() {
const { authUser, selectedTheme } = this.state;
const { selectedTheme } = this.state;
const currentTheme = theme[selectedTheme];
return (

View File

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

View File

@@ -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..."

View File

@@ -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

View File

@@ -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({
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 => {

View File

@@ -16,9 +16,12 @@ 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({
firebase.db
.collection("users")
.doc()
.add({
name: this.state.name
});
this.setState({ name: "" });

View File

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

View File

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

View File

@@ -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();
});

View File

@@ -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" })
)
};