chore: code cleanup, removing console.logs, adding year grid
This commit is contained in:
@@ -43,7 +43,7 @@ class App extends Component {
|
||||
};
|
||||
|
||||
render() {
|
||||
const { authUser, selectedTheme } = this.state;
|
||||
const { selectedTheme } = this.state;
|
||||
|
||||
const currentTheme = theme[selectedTheme];
|
||||
return (
|
||||
|
||||
@@ -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"
|
||||
);
|
||||
|
||||
@@ -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..."
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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 => {
|
||||
|
||||
@@ -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: "" });
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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();
|
||||
|
||||
@@ -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();
|
||||
});
|
||||
|
||||
@@ -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" })
|
||||
)
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user