From eee11f9437bbc4008fa5a64b1ad842b11583337d Mon Sep 17 00:00:00 2001 From: Kyle Gill Date: Fri, 29 Mar 2019 10:08:02 -0600 Subject: [PATCH] chore: resize writing area, add name to navbar --- src/App.js | 56 +++++---- src/App.test.js | 16 +-- src/components/Icon/Icon.js | 1 + src/components/Icon/index.js | 4 +- src/components/Logo/index.js | 8 +- src/components/Navbar/Navbar.js | 63 ++++++---- src/components/Navbar/index.js | 4 +- src/components/Seek/Seek.js | 26 ++-- src/components/Seek/index.js | 4 +- src/components/SignOut/SignOut.js | 8 +- src/components/SignOut/index.js | 4 +- src/components/firebase/context.js | 8 +- src/components/firebase/fire.js | 38 +++--- src/components/firebase/index.js | 8 +- src/components/screens/Day/Day.js | 122 +++++++++---------- src/components/screens/Day/index.js | 4 +- src/components/screens/Login/Login.js | 44 +++---- src/components/screens/Login/index.js | 4 +- src/components/screens/Month/Month.js | 44 +++---- src/components/screens/Month/index.js | 4 +- src/components/screens/Register/Register.js | 54 ++++---- src/components/screens/Register/index.js | 4 +- src/components/screens/User/User.js | 32 ++--- src/components/screens/User/index.js | 4 +- src/components/screens/Year/Year.js | 38 +++--- src/components/screens/Year/index.js | 4 +- src/components/session/context.js | 6 +- src/components/session/index.js | 6 +- src/components/session/withAuthentication.js | 36 +++--- src/index.js | 16 +-- src/serviceWorker.js | 56 ++++----- src/styles/constants.js | 5 +- src/styles/theme.js | 14 +-- src/utils/date.js | 10 +- 34 files changed, 386 insertions(+), 369 deletions(-) diff --git a/src/App.js b/src/App.js index 71e0ea6..9c08a2b 100644 --- a/src/App.js +++ b/src/App.js @@ -1,18 +1,20 @@ -import React, { Component } from "react"; -import { BrowserRouter as Router, Route } from "react-router-dom"; -import styled from "@emotion/styled"; -import { ThemeProvider } from "emotion-theming"; +import React, { Component } from "react" +import { BrowserRouter as Router, Route } from "react-router-dom" +import styled from "@emotion/styled" +import { ThemeProvider } from "emotion-theming" -import theme from "./styles/theme"; -import Navbar from "./components/Navbar"; -import Day from "./components/screens/Day"; -import Month from "./components/screens/Month"; -import Year from "./components/screens/Year"; -import User from "./components/screens/User"; -import Login from "./components/screens/Login"; -import Register from "./components/screens/Register"; +import { SIZES } from "./styles/constants" -import { withAuthentication } from "./components/session"; +import theme from "./styles/theme" +import Navbar from "./components/Navbar" +import Day from "./components/screens/Day" +import Month from "./components/screens/Month" +import Year from "./components/screens/Year" +import User from "./components/screens/User" +import Login from "./components/screens/Login" +import Register from "./components/screens/Register" + +import { withAuthentication } from "./components/session" const RouteLayout = styled.div` display: flex; @@ -20,32 +22,32 @@ const RouteLayout = styled.div` height: 100%; margin: 0 auto; padding: 0 10px; - max-width: 720px; + max-width: ${SIZES.maxWidth}; min-height: calc(100vh - 60px); background-color: ${props => props.theme.colors.bodyBackground}; -`; +` class App extends Component { state = { authUser: JSON.parse(localStorage.getItem("authUser")), - selectedTheme: "LIGHT" - }; + selectedTheme: "LIGHT", + } onChangeTheme = () => { - const { selectedTheme } = this.state; - const root = document.documentElement; - const newTheme = selectedTheme === "LIGHT" ? "DARK" : "LIGHT"; + const { selectedTheme } = this.state + const root = document.documentElement + const newTheme = selectedTheme === "LIGHT" ? "DARK" : "LIGHT" root.style.setProperty( "background-color", theme[newTheme].colors.bodyBackground - ); - this.setState({ selectedTheme: newTheme }); - }; + ) + this.setState({ selectedTheme: newTheme }) + } render() { - const { selectedTheme } = this.state; + const { selectedTheme } = this.state - const currentTheme = theme[selectedTheme]; + const currentTheme = theme[selectedTheme] return ( @@ -68,8 +70,8 @@ class App extends Component { - ); + ) } } -export default withAuthentication(App); +export default withAuthentication(App) diff --git a/src/App.test.js b/src/App.test.js index a754b20..7deaa42 100644 --- a/src/App.test.js +++ b/src/App.test.js @@ -1,9 +1,9 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import App from './App'; +import React from "react" +import ReactDOM from "react-dom" +import App from "./App" -it('renders without crashing', () => { - const div = document.createElement('div'); - ReactDOM.render(, div); - ReactDOM.unmountComponentAtNode(div); -}); +it("renders without crashing", () => { + const div = document.createElement("div") + ReactDOM.render(, div) + ReactDOM.unmountComponentAtNode(div) +}) diff --git a/src/components/Icon/Icon.js b/src/components/Icon/Icon.js index 963e3b7..78b6b7c 100644 --- a/src/components/Icon/Icon.js +++ b/src/components/Icon/Icon.js @@ -35,6 +35,7 @@ const Icon = ({ name, ...rest }) => ( {name === "ChevronLeft" && } {name === "ChevronRight" && } {name === "Circle" && } + {name === "Edit2" && } {name === "Moon" && } {name === "Sun" && } {name === "User" && } diff --git a/src/components/Icon/index.js b/src/components/Icon/index.js index 86b8c41..dd4586c 100644 --- a/src/components/Icon/index.js +++ b/src/components/Icon/index.js @@ -1,2 +1,2 @@ -import Icon from "./Icon"; -export default Icon; +import Icon from "./Icon" +export default Icon diff --git a/src/components/Logo/index.js b/src/components/Logo/index.js index 6e7f8c0..75cba46 100644 --- a/src/components/Logo/index.js +++ b/src/components/Logo/index.js @@ -1,4 +1,4 @@ -import React from "react"; +import React from "react" const Logo = ({ color }) => { return ( @@ -123,7 +123,7 @@ const Logo = ({ color }) => { - ); -}; + ) +} -export default Logo; +export default Logo diff --git a/src/components/Navbar/Navbar.js b/src/components/Navbar/Navbar.js index 924f6d0..2005caa 100644 --- a/src/components/Navbar/Navbar.js +++ b/src/components/Navbar/Navbar.js @@ -1,38 +1,49 @@ -import React from "react"; -import { Link } from "react-router-dom"; -import styled from "@emotion/styled"; -import { compose } from "recompose"; -import { withTheme } from "emotion-theming"; +import React from "react" +import { Link } from "react-router-dom" +import styled from "@emotion/styled" +import { compose } from "recompose" +import { withTheme } from "emotion-theming" -import { todayUrl, yearUrl } from "../../utils/date"; +import { SIZES } from "../../styles/constants" +import { todayUrl, yearUrl } from "../../utils/date" -import Logo from "../Logo"; -import Icon from "../Icon"; -import { withAuthentication } from "../session"; +import Logo from "../Logo" +import Icon from "../Icon" +import { withAuthentication } from "../session" const Header = styled.div` background-color: ${props => props.theme.colors.headerBackground}; height: 60px; display: grid; grid-template-areas: "... nav ..."; - grid-template-columns: 1fr minmax(240px, 720px) 1fr; + grid-template-columns: 1fr minmax(240px, ${SIZES.maxWidth}) 1fr; grid-gap: 10px; align-items: center; border-width: 1px; border-color: ${props => props.theme.colors.quarternary}; border-style: solid; -`; +` const Nav = styled.div` grid-area: nav; - max-width: 720px; + max-width: ${SIZES.maxWidth}; display: flex; flex-direction: row; justify-content: space-between; align-content: center; -`; +` const LogoSection = styled.div` - width: 40px; -`; + height: 40px; + display: flex; + flex-direction: row; + align-items: center; + font-family: "Montserrat", sans-serif; + font-weight: 700; + font-size: 18px; +` +const LogoText = styled.span` + color: ${props => props.color}; + margin-left: 5px; +` const NavIcons = styled.div` display: flex; flex-direction: row; @@ -40,27 +51,29 @@ const NavIcons = styled.div` * + * { margin-left: 10px; } -`; +` const Navbar = ({ authUser, theme, toggleTheme }) => (
-); +) export default compose( withAuthentication, withTheme -)(Navbar); +)(Navbar) diff --git a/src/components/Navbar/index.js b/src/components/Navbar/index.js index c2829d1..27f2a37 100644 --- a/src/components/Navbar/index.js +++ b/src/components/Navbar/index.js @@ -1,2 +1,2 @@ -import Navbar from "./Navbar"; -export default Navbar; +import Navbar from "./Navbar" +export default Navbar diff --git a/src/components/Seek/Seek.js b/src/components/Seek/Seek.js index 44f698a..d3d439e 100644 --- a/src/components/Seek/Seek.js +++ b/src/components/Seek/Seek.js @@ -1,10 +1,10 @@ -import React from "react"; -import styled from "@emotion/styled"; -import { withTheme } from "emotion-theming"; -import { Link } from "react-router-dom"; +import React from "react" +import styled from "@emotion/styled" +import { withTheme } from "emotion-theming" +import { Link } from "react-router-dom" -import { SIZES } from "../../styles/constants"; -import Icon from "../Icon"; +import { SIZES } from "../../styles/constants" +import Icon from "../Icon" const SeekHeader = styled.header` display: flex; @@ -14,17 +14,17 @@ const SeekHeader = styled.header` border-bottom-width: 1px; border-bottom-style: solid; border-color: ${props => props.theme.colors.quarternary}; -`; +` const SeekH1 = styled.h1` display: block; font-size: ${SIZES.normal}; color: ${props => props.theme.colors.secondary}; -`; +` const SeekArrows = styled.div` display: grid; grid-template-columns: auto auto; grid-gap: 10px; -`; +` const Seek = ({ title = "", prev = "", next = "", disableNext, theme }) => ( @@ -38,7 +38,7 @@ const Seek = ({ title = "", prev = "", next = "", disableNext, theme }) => ( disabled={disableNext} name="ChevronRight" style={{ - color: disableNext ? theme.colors.hover : theme.colors.secondary + color: disableNext ? theme.colors.hover : theme.colors.secondary, }} /> ) : ( @@ -47,13 +47,13 @@ const Seek = ({ title = "", prev = "", next = "", disableNext, theme }) => ( disabled={disableNext} name="ChevronRight" style={{ - color: disableNext ? theme.colors.hover : theme.colors.secondary + color: disableNext ? theme.colors.hover : theme.colors.secondary, }} /> )} -); +) -export default withTheme(Seek); +export default withTheme(Seek) diff --git a/src/components/Seek/index.js b/src/components/Seek/index.js index d7a6634..232bb19 100644 --- a/src/components/Seek/index.js +++ b/src/components/Seek/index.js @@ -1,2 +1,2 @@ -import Seek from "./Seek"; -export default Seek; +import Seek from "./Seek" +export default Seek diff --git a/src/components/SignOut/SignOut.js b/src/components/SignOut/SignOut.js index 56594b0..c424e06 100644 --- a/src/components/SignOut/SignOut.js +++ b/src/components/SignOut/SignOut.js @@ -1,11 +1,11 @@ -import React from "react"; +import React from "react" -import { withFirebase } from "../firebase"; +import { withFirebase } from "../firebase" const SignOutButton = ({ firebase }) => ( -); +) -export default withFirebase(SignOutButton); +export default withFirebase(SignOutButton) diff --git a/src/components/SignOut/index.js b/src/components/SignOut/index.js index 6ba41d9..2a2e47b 100644 --- a/src/components/SignOut/index.js +++ b/src/components/SignOut/index.js @@ -1,2 +1,2 @@ -import SignOut from "./SignOut"; -export default SignOut; +import SignOut from "./SignOut" +export default SignOut diff --git a/src/components/firebase/context.js b/src/components/firebase/context.js index ed3a3b3..012c72d 100644 --- a/src/components/firebase/context.js +++ b/src/components/firebase/context.js @@ -1,11 +1,11 @@ -import React from "react"; +import React from "react" -const FirebaseContext = React.createContext(null); +const FirebaseContext = React.createContext(null) export const withFirebase = Component => props => ( {firebase => } -); +) -export default FirebaseContext; +export default FirebaseContext diff --git a/src/components/firebase/fire.js b/src/components/firebase/fire.js index 56fdba0..cb162f9 100644 --- a/src/components/firebase/fire.js +++ b/src/components/firebase/fire.js @@ -1,6 +1,6 @@ -import app from "firebase/app"; -import "firebase/auth"; -import "firebase/firestore"; +import app from "firebase/app" +import "firebase/auth" +import "firebase/firestore" const config = { apiKey: process.env.REACT_APP_FIREBASE_API_KEY, @@ -8,43 +8,43 @@ const config = { databaseURL: process.env.REACT_APP_DEV_DATABASE_URL, projectId: process.env.REACT_APP_DEV_PROJECT_ID, storageBucket: process.env.REACT_APP_DEV_STORAGE_BUCKET, - messagingSenderId: process.env.REACT_APP_DEV_MESSAGING_SENDER_ID -}; + messagingSenderId: process.env.REACT_APP_DEV_MESSAGING_SENDER_ID, +} class Firebase { constructor() { - app.initializeApp(config); - this.auth = app.auth(); - this.db = app.firestore(); + app.initializeApp(config) + this.auth = app.auth() + this.db = app.firestore() app .firestore() .enablePersistence() .catch(function(err) { if (err.code === "failed-precondition") { - console.error("firestore won't work offline with multiple tabs open"); + console.error("firestore won't work offline with multiple tabs open") } else if (err.code === "unimplemented") { console.error( "current browser can't take advantage of firestore offline" - ); + ) } - }); + }) } // Auth doCreateUserWithEmailAndPassword = (email, password) => - this.auth.createUserWithEmailAndPassword(email, password); + this.auth.createUserWithEmailAndPassword(email, password) doSignInWithEmailAndPassword = (email, password) => - this.auth.signInWithEmailAndPassword(email, password); + this.auth.signInWithEmailAndPassword(email, password) doSignOut = () => { - this.auth.signOut(); - window.location.replace("/login"); - }; + this.auth.signOut() + window.location.replace("/login") + } - doPasswordReset = email => this.auth.sendPasswordResetEmail(email); + doPasswordReset = email => this.auth.sendPasswordResetEmail(email) - doPasswordUpdate = password => this.auth.currentUser.updatePassword(password); + doPasswordUpdate = password => this.auth.currentUser.updatePassword(password) } -export default Firebase; +export default Firebase diff --git a/src/components/firebase/index.js b/src/components/firebase/index.js index 0797f60..0e7a62f 100644 --- a/src/components/firebase/index.js +++ b/src/components/firebase/index.js @@ -1,6 +1,6 @@ -import FirebaseContext, { withFirebase } from "./context"; -import Firebase from "./fire"; +import FirebaseContext, { withFirebase } from "./context" +import Firebase from "./fire" -export default Firebase; +export default Firebase -export { FirebaseContext, withFirebase }; +export { FirebaseContext, withFirebase } diff --git a/src/components/screens/Day/Day.js b/src/components/screens/Day/Day.js index eca6e84..843cfd7 100644 --- a/src/components/screens/Day/Day.js +++ b/src/components/screens/Day/Day.js @@ -1,23 +1,23 @@ -import React, { Component } from "react"; -import styled from "@emotion/styled"; -import { compose } from "recompose"; -import { withRouter } from "react-router-dom"; -import { withTheme } from "emotion-theming"; -import { withFirebase } from "../../firebase"; -import { withAuthentication } from "../../session"; -import { addDays, subDays, format, isAfter, startOfYesterday } from "date-fns"; -import { BeatLoader } from "react-spinners"; +import React, { Component } from "react" +import styled from "@emotion/styled" +import { compose } from "recompose" +import { withRouter } from "react-router-dom" +import { withTheme } from "emotion-theming" +import { withFirebase } from "../../firebase" +import { withAuthentication } from "../../session" +import { addDays, subDays, format, isAfter, startOfYesterday } from "date-fns" +import { BeatLoader } from "react-spinners" -import { SIZES } from "../../../styles/constants"; +import { SIZES } from "../../../styles/constants" -import Seek from "../../Seek"; +import Seek from "../../Seek" const JournalHeading = styled.h2` font-weight: 700; font-size: ${SIZES.tiny}; color: ${props => props.theme.colors.secondary}; margin-top: ${SIZES.medium}; -`; +` const JournalEntryArea = styled.textarea` font-family: sans-serif; flex-grow: 0.8; @@ -42,60 +42,60 @@ const JournalEntryArea = styled.textarea` box-shadow: 0 0 0 8px ${props => props.theme.colors.bodyBackground}, 0 0 0 10px ${props => props.theme.colors.hover}; } -`; +` -const AUTOSAVE_DELAY = 2000; +const AUTOSAVE_DELAY = 2000 class Day extends Component { state = { text: "", - loading: true - }; - timeout = 0; - retrievedFromServer = false; + loading: true, + } + timeout = 0 + retrievedFromServer = false componentDidMount() { const { history, match: { - params: { year, month, day } - } - } = this.props; + params: { year, month, day }, + }, + } = this.props history.listen((location, action) => { - const [, year, month, day] = location.pathname.split("/"); - this.onRouteChanged(year, month, day); - }); - this.getDocRef(year, month, day, false); + const [, year, month, day] = location.pathname.split("/") + this.onRouteChanged(year, month, day) + }) + this.getDocRef(year, month, day, false) } onRouteChanged = (year, month, day) => { - this.setState({ loading: true }); - this.getDocRef(year, month, day, false); - }; + this.setState({ loading: true }) + this.getDocRef(year, month, day, false) + } getDocRef = (year, month, day, cacheFirst) => { - const { firebase, authUser } = this.props; + const { firebase, authUser } = this.props const getOptions = { - source: cacheFirst ? "cache" : "default" - }; + source: cacheFirst ? "cache" : "default", + } const docRef = firebase.db .collection("entries") - .doc(`${year}${month}${day}-${authUser.uid}`); - this.getData(docRef, getOptions); - }; + .doc(`${year}${month}${day}-${authUser.uid}`) + this.getData(docRef, getOptions) + } getData = (docRef, options) => { docRef .get(options) .then(doc => { if (doc.data()) { - this.setState({ text: doc.data().text, loading: false }); + this.setState({ text: doc.data().text, loading: false }) } else { - this.setState({ text: "", loading: false }); + this.setState({ text: "", loading: false }) } }) .catch(err => { - console.warn("entry not found in cache"); + console.warn("entry not found in cache") // for cache first, server second fetching, dangerous with potential overwriting of data // docRef.get().then(doc => { // if (doc.data()) { @@ -104,28 +104,28 @@ class Day extends Component { // this.setState({ text: "", loading: false }); // } // }); - }); - }; + }) + } onChangeText = e => { - if (this.timeout) clearTimeout(this.timeout); - const text = e.target.value; + if (this.timeout) clearTimeout(this.timeout) + const text = e.target.value - this.setState({ text }); + this.setState({ text }) this.timeout = setTimeout(() => { - console.log(text); - this.saveText(text); - }, AUTOSAVE_DELAY); - }; + console.log(text) + this.saveText(text) + }, AUTOSAVE_DELAY) + } saveText = text => { const { match: { - params: { year, month, day } + params: { year, month, day }, }, firebase, - authUser - } = this.props; + authUser, + } = this.props firebase.db .collection("entries") .doc(`${year}${month}${day}-${authUser.uid}`) @@ -134,24 +134,24 @@ class Day extends Component { text, day: Number(day), year: Number(year), - month: Number(month) + month: Number(month), }, { - merge: true + merge: true, } - ); - }; + ) + } render() { const { match: { - params: { year, month, day } + params: { year, month, day }, }, - theme - } = this.props; - const { text, loading } = this.state; - const currentDay = new Date(year, month - 1, day); - if (!currentDay) return; + theme, + } = this.props + const { text, loading } = this.state + const currentDay = new Date(year, month - 1, day) + if (!currentDay) return return ( <> @@ -175,7 +175,7 @@ class Day extends Component { /> )} - ); + ) } } @@ -184,4 +184,4 @@ export default compose( withTheme, withAuthentication, withRouter -)(Day); +)(Day) diff --git a/src/components/screens/Day/index.js b/src/components/screens/Day/index.js index c78c291..a8ec12c 100644 --- a/src/components/screens/Day/index.js +++ b/src/components/screens/Day/index.js @@ -1,2 +1,2 @@ -import Day from "./Day"; -export default Day; +import Day from "./Day" +export default Day diff --git a/src/components/screens/Login/Login.js b/src/components/screens/Login/Login.js index fc8b6e4..d900cf3 100644 --- a/src/components/screens/Login/Login.js +++ b/src/components/screens/Login/Login.js @@ -1,8 +1,8 @@ -import React, { Component } from "react"; -import { withRouter, Link } from "react-router-dom"; -import { format } from "date-fns"; +import React, { Component } from "react" +import { withRouter, Link } from "react-router-dom" +import { format } from "date-fns" -import { FirebaseContext } from "../../firebase"; +import { FirebaseContext } from "../../firebase" const LoginPage = ({ history }) => (
@@ -14,38 +14,38 @@ const LoginPage = ({ history }) => ( Don't have an account? Sign Up

-); +) class LoginFormBase extends Component { constructor(props) { - super(props); + super(props) - this.state = { email: "", password: "", error: null }; + this.state = { email: "", password: "", error: null } } onSubmit = event => { - event.preventDefault(); - const { email, password } = this.state; + event.preventDefault() + const { email, password } = this.state this.props.firebase .doSignInWithEmailAndPassword(email, password) .then(() => { - this.setState({ email: "", password: "", error: null }); - this.props.history.push(format(new Date(), "/YYYY/MM/DD")); + this.setState({ email: "", password: "", error: null }) + this.props.history.push(format(new Date(), "/YYYY/MM/DD")) }) .catch(error => { - this.setState({ error }); - }); - }; + this.setState({ error }) + }) + } onChange = event => { - this.setState({ [event.target.name]: event.target.value }); - }; + this.setState({ [event.target.name]: event.target.value }) + } render() { - const { email, password, error } = this.state; + const { email, password, error } = this.state - const isInvalid = password === "" || email === ""; + const isInvalid = password === "" || email === "" return (
@@ -69,12 +69,12 @@ class LoginFormBase extends Component { {error &&

{error.message}

}
- ); + ) } } -const LoginForm = withRouter(LoginFormBase); +const LoginForm = withRouter(LoginFormBase) -export default LoginPage; +export default LoginPage -export { LoginForm }; +export { LoginForm } diff --git a/src/components/screens/Login/index.js b/src/components/screens/Login/index.js index d4e9b8e..d114a4d 100644 --- a/src/components/screens/Login/index.js +++ b/src/components/screens/Login/index.js @@ -1,2 +1,2 @@ -import Login from "./Login"; -export default Login; +import Login from "./Login" +export default Login diff --git a/src/components/screens/Month/Month.js b/src/components/screens/Month/Month.js index 05d7fc7..76aef03 100644 --- a/src/components/screens/Month/Month.js +++ b/src/components/screens/Month/Month.js @@ -1,6 +1,6 @@ -import React, { Component } from "react"; -import { Link } from "react-router-dom"; -import styled from "@emotion/styled"; +import React, { Component } from "react" +import { Link } from "react-router-dom" +import styled from "@emotion/styled" import { isAfter, isThisYear, @@ -8,17 +8,17 @@ import { addMonths, subMonths, getDaysInMonth, - startOfMonth -} from "date-fns"; + startOfMonth, +} from "date-fns" -import Seek from "../../Seek"; +import Seek from "../../Seek" const YearCardGrid = styled.div` display: grid; - grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); + grid-template-columns: repeat(auto-fit, minmax(75px, 1fr)); grid-gap: 20px; margin-top: 20px; -`; +` const YearCard = styled.div` color: ${props => props.disabled @@ -26,39 +26,39 @@ const YearCard = styled.div` : props.theme.colors.secondary}; border: 1px solid; border-color: ${props => props.theme.colors.quarternary}; - padding: 30px; + padding: 25px; border-radius: 5px; text-align: center; user-select: none; &:hover { border-color: ${props => !props.disabled && props.theme.colors.tertiary}; } -`; +` class Month extends Component { render() { const { match: { - params: { year, month } - } - } = this.props; - const currentDay = new Date(year, month - 1); + params: { year, month }, + }, + } = this.props + const currentDay = new Date(year, month - 1) // include all months unless it's this year - let dayIndexesToInclude = 31; + let dayIndexesToInclude = 31 if (isThisYear(currentDay)) { - dayIndexesToInclude = new Date().getDate(); + dayIndexesToInclude = new Date().getDate() } - let yearCards = []; + let yearCards = [] for (let i = 0; i < getDaysInMonth(currentDay); i++) { - const isDisabled = dayIndexesToInclude <= i; + const isDisabled = dayIndexesToInclude <= i if (isDisabled) { yearCards.push( {i + 1} - ); + ) } else { yearCards.push( {i + 1} - ); + ) } } @@ -85,8 +85,8 @@ class Month extends Component { /> {yearCards} - ); + ) } } -export default Month; +export default Month diff --git a/src/components/screens/Month/index.js b/src/components/screens/Month/index.js index 7dac0dc..ab03bfb 100644 --- a/src/components/screens/Month/index.js +++ b/src/components/screens/Month/index.js @@ -1,2 +1,2 @@ -import Month from "./Month"; -export default Month; +import Month from "./Month" +export default Month diff --git a/src/components/screens/Register/Register.js b/src/components/screens/Register/Register.js index 15c173a..8546f99 100644 --- a/src/components/screens/Register/Register.js +++ b/src/components/screens/Register/Register.js @@ -1,7 +1,7 @@ -import React, { Component } from "react"; -import { withRouter } from "react-router-dom"; +import React, { Component } from "react" +import { withRouter } from "react-router-dom" -import { FirebaseContext } from "../../firebase"; +import { FirebaseContext } from "../../firebase" const RegisterPage = ({ history }) => (
@@ -10,24 +10,24 @@ const RegisterPage = ({ history }) => ( {firebase => }
-); +) class RegisterForm extends Component { constructor(props) { - super(props); + super(props) this.state = { username: "", email: "", passwordOne: "", passwordTwo: "", - error: null - }; + error: null, + } } onSubmit = event => { - const { email, passwordOne } = this.state; - const { firebase } = this.props; + const { email, passwordOne } = this.state + const { firebase } = this.props firebase .doCreateUserWithEmailAndPassword(email, passwordOne) @@ -37,37 +37,37 @@ class RegisterForm extends Component { email: "", passwordOne: "", passwordTwo: "", - error: null - }); - const { user } = result; - console.log(user); + error: null, + }) + const { user } = result + console.log(user) firebase.db .collection("users") .doc(user.uid) .set({ email: user.email, - theme: "LIGHT" - }); - this.props.history.push("/home"); + theme: "LIGHT", + }) + this.props.history.push("/home") }) .catch(error => { - this.setState({ error }); - }); + this.setState({ error }) + }) - event.preventDefault(); - }; + event.preventDefault() + } onChange = event => { - this.setState({ [event.target.name]: event.target.value }); - }; + this.setState({ [event.target.name]: event.target.value }) + } render() { - const { username, email, passwordOne, passwordTwo, error } = this.state; + const { username, email, passwordOne, passwordTwo, error } = this.state const isInvalid = passwordOne !== passwordTwo || passwordOne === "" || email === "" || - username === ""; + username === "" return (
@@ -105,10 +105,10 @@ class RegisterForm extends Component { {error &&

{error.message}

}
- ); + ) } } -export default withRouter(RegisterPage); +export default withRouter(RegisterPage) -export { RegisterForm }; +export { RegisterForm } diff --git a/src/components/screens/Register/index.js b/src/components/screens/Register/index.js index e7a7c05..ebb6976 100644 --- a/src/components/screens/Register/index.js +++ b/src/components/screens/Register/index.js @@ -1,2 +1,2 @@ -import Register from "./Register"; -export default Register; +import Register from "./Register" +export default Register diff --git a/src/components/screens/User/User.js b/src/components/screens/User/User.js index c51a150..9756e41 100644 --- a/src/components/screens/User/User.js +++ b/src/components/screens/User/User.js @@ -1,31 +1,31 @@ -import React from "react"; -import { withFirebase } from "../../firebase"; +import React from "react" +import { withFirebase } from "../../firebase" -import SignOut from "../../SignOut"; +import SignOut from "../../SignOut" class User extends React.Component { state = { - name: "" - }; + name: "", + } updateInput = e => { this.setState({ - [e.target.name]: e.target.value - }); - }; + [e.target.name]: e.target.value, + }) + } addUser = e => { - e.preventDefault(); - const { firebase } = this.props; + e.preventDefault() + const { firebase } = this.props firebase.db .collection("users") .doc() .add({ - name: this.state.name - }); - this.setState({ name: "" }); - }; + name: this.state.name, + }) + this.setState({ name: "" }) + } render() { return ( @@ -42,8 +42,8 @@ class User extends React.Component { - ); + ) } } -export default withFirebase(User); +export default withFirebase(User) diff --git a/src/components/screens/User/index.js b/src/components/screens/User/index.js index 472e48d..01f33f4 100644 --- a/src/components/screens/User/index.js +++ b/src/components/screens/User/index.js @@ -1,2 +1,2 @@ -import User from "./User"; -export default User; +import User from "./User" +export default User diff --git a/src/components/screens/Year/Year.js b/src/components/screens/Year/Year.js index e7ed293..72b3b6c 100644 --- a/src/components/screens/Year/Year.js +++ b/src/components/screens/Year/Year.js @@ -1,18 +1,18 @@ -import React, { Component } from "react"; -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 React, { Component } from "react" +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"; +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 @@ -27,21 +27,21 @@ const MonthCard = styled.div` &:hover { border-color: ${props => !props.disabled && props.theme.colors.tertiary}; } -`; +` class Year extends Component { render() { const { match: { - params: { year } - } - } = this.props; - const currentDate = new Date(year, 0, 1); + params: { year }, + }, + } = this.props + const currentDate = new Date(year, 0, 1) // include all months unless it's this year - let monthIndexesToInclude = 11; + let monthIndexesToInclude = 11 if (isThisYear(currentDate)) { - monthIndexesToInclude = getMonth(new Date()); + monthIndexesToInclude = getMonth(new Date()) } return (
@@ -53,7 +53,7 @@ class Year extends Component { /> {months.long.map((month, index) => { - const isDisabled = monthIndexesToInclude < index; + const isDisabled = monthIndexesToInclude < index return isDisabled ? ( {month} @@ -66,12 +66,12 @@ class Year extends Component { > {month} - ); + ) })}
- ); + ) } } -export default withTheme(Year); +export default withTheme(Year) diff --git a/src/components/screens/Year/index.js b/src/components/screens/Year/index.js index fb76635..d65d30c 100644 --- a/src/components/screens/Year/index.js +++ b/src/components/screens/Year/index.js @@ -1,2 +1,2 @@ -import Year from "./Year"; -export default Year; +import Year from "./Year" +export default Year diff --git a/src/components/session/context.js b/src/components/session/context.js index ea7a851..a25efac 100644 --- a/src/components/session/context.js +++ b/src/components/session/context.js @@ -1,5 +1,5 @@ -import React from "react"; +import React from "react" -const AuthUserContext = React.createContext(null); +const AuthUserContext = React.createContext(null) -export default AuthUserContext; +export default AuthUserContext diff --git a/src/components/session/index.js b/src/components/session/index.js index 3c0e3e8..6ba4f71 100644 --- a/src/components/session/index.js +++ b/src/components/session/index.js @@ -1,4 +1,4 @@ -import AuthUserContext from "./context"; -import withAuthentication from "./withAuthentication"; +import AuthUserContext from "./context" +import withAuthentication from "./withAuthentication" -export { AuthUserContext, withAuthentication }; +export { AuthUserContext, withAuthentication } diff --git a/src/components/session/withAuthentication.js b/src/components/session/withAuthentication.js index 57356f0..e802304 100644 --- a/src/components/session/withAuthentication.js +++ b/src/components/session/withAuthentication.js @@ -1,39 +1,39 @@ -import React from "react"; +import React from "react" -import AuthUserContext from "./context"; -import { withFirebase } from "../firebase"; +import AuthUserContext from "./context" +import { withFirebase } from "../firebase" const withAuthentication = Component => { class WithAuthentication extends React.Component { constructor(props) { - super(props); + super(props) this.state = { - authUser: JSON.parse(localStorage.getItem("authUser")) - }; + authUser: JSON.parse(localStorage.getItem("authUser")), + } } componentDidMount() { this.listener = this.props.firebase.auth.onAuthStateChanged( authUser => { - localStorage.setItem("authUser", JSON.stringify(authUser)); - this.setState({ + localStorage.setItem("authUser", JSON.stringify(authUser)) + this.setState({ authUser: { uid: authUser.uid, email: authUser.email, emailVerified: authUser.emailVerified, - } - }); + }, + }) }, () => { - localStorage.removeItem("authUser"); - this.setState({ authUser: null }); + localStorage.removeItem("authUser") + this.setState({ authUser: null }) } - ); + ) } componentWillUnmount() { - this.listener(); + this.listener() } render() { @@ -41,11 +41,11 @@ const withAuthentication = Component => { - ); + ) } } - return withFirebase(WithAuthentication); -}; + return withFirebase(WithAuthentication) +} -export default withAuthentication; +export default withAuthentication diff --git a/src/index.js b/src/index.js index fd2ce9e..c42ce21 100644 --- a/src/index.js +++ b/src/index.js @@ -1,19 +1,19 @@ -import React from "react"; -import ReactDOM from "react-dom"; +import React from "react" +import ReactDOM from "react-dom" -import "./index.css"; -import App from "./App"; -import * as serviceWorker from "./serviceWorker"; -import Firebase, { FirebaseContext } from "./components/firebase"; +import "./index.css" +import App from "./App" +import * as serviceWorker from "./serviceWorker" +import Firebase, { FirebaseContext } from "./components/firebase" ReactDOM.render( , document.getElementById("root") -); +) // 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.register(); +serviceWorker.register() diff --git a/src/serviceWorker.js b/src/serviceWorker.js index 5ef2083..8f4c0e2 100644 --- a/src/serviceWorker.js +++ b/src/serviceWorker.js @@ -18,25 +18,25 @@ const isLocalhost = Boolean( window.location.hostname.match( /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ ) -); +) export function register(config) { 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); + const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href) if (publicUrl.origin !== window.location.origin) { // Our service worker won't work if PUBLIC_URL is on a different origin // from what our page is served on. This might happen if a CDN is used to // serve assets; see https://github.com/facebook/create-react-app/issues/2374 - return; + return } window.addEventListener("load", () => { - const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; + const swUrl = `${process.env.PUBLIC_URL}/service-worker.js` if (isLocalhost) { // This is running on localhost. Let's check if a service worker still exists or not. - checkValidServiceWorker(swUrl, config); + checkValidServiceWorker(swUrl, config) // Add some additional logging to localhost, pointing developers to the // service worker/PWA documentation. @@ -44,13 +44,13 @@ export function register(config) { console.log( "This web app is being served cache-first by a service " + "worker. To learn more, visit https://bit.ly/CRA-PWA" - ); - }); + ) + }) } else { // Is not localhost. Just register service worker - registerValidSW(swUrl, config); + registerValidSW(swUrl, config) } - }); + }) } } @@ -59,9 +59,9 @@ function registerValidSW(swUrl, config) { .register(swUrl) .then(registration => { registration.onupdatefound = () => { - const installingWorker = registration.installing; + const installingWorker = registration.installing if (installingWorker == null) { - return; + return } installingWorker.onstatechange = () => { if (installingWorker.state === "installed") { @@ -72,30 +72,30 @@ function registerValidSW(swUrl, config) { console.log( "New content is available and will be used when all " + "tabs for this page are closed. See https://bit.ly/CRA-PWA." - ); + ) // Execute callback if (config && config.onUpdate) { - config.onUpdate(registration); + config.onUpdate(registration) } } else { // 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) { - config.onSuccess(registration); + config.onSuccess(registration) } } } - }; - }; + } + } }) .catch(error => { - console.error("Error during service worker registration:", error); - }); + console.error("Error during service worker registration:", error) + }) } function checkValidServiceWorker(swUrl, config) { @@ -103,7 +103,7 @@ 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) @@ -111,25 +111,25 @@ function checkValidServiceWorker(swUrl, config) { // No service worker found. Probably a different app. Reload the page. navigator.serviceWorker.ready.then(registration => { registration.unregister().then(() => { - window.location.reload(); - }); - }); + window.location.reload() + }) + }) } else { // Service worker found. Proceed as normal. - registerValidSW(swUrl, config); + registerValidSW(swUrl, config) } }) .catch(() => { console.log( "No internet connection found. App is running in offline mode." - ); - }); + ) + }) } export function unregister() { if ("serviceWorker" in navigator) { navigator.serviceWorker.ready.then(registration => { - registration.unregister(); - }); + registration.unregister() + }) } } diff --git a/src/styles/constants.js b/src/styles/constants.js index 9305d78..c47539b 100644 --- a/src/styles/constants.js +++ b/src/styles/constants.js @@ -3,5 +3,6 @@ export const SIZES = { small: "1rem", normal: "1.25rem", medium: "1.5rem", - large: "2rem" -}; + large: "2rem", + maxWidth: "600px", +} diff --git a/src/styles/theme.js b/src/styles/theme.js index 03fc3b3..6ccfe2b 100644 --- a/src/styles/theme.js +++ b/src/styles/theme.js @@ -9,8 +9,8 @@ const theme = { quarternary: "#EAEAEA", headerBackground: "#FAFBFC", bodyBackground: "#FFF", - hover: "hsla(233, 5%, 31%, 0.12)" - } + hover: "hsla(233, 5%, 31%, 0.12)", + }, }, DARK: { name: "Dark", @@ -22,9 +22,9 @@ const theme = { quarternary: "#3E4B62", headerBackground: "#272f3d", bodyBackground: "#262B34", - hover: "hsla(233, 100%, 96%, 0.12)" - } - } -}; + hover: "hsla(233, 100%, 96%, 0.12)", + }, + }, +} -export default theme; +export default theme diff --git a/src/utils/date.js b/src/utils/date.js index c175840..3300dcd 100644 --- a/src/utils/date.js +++ b/src/utils/date.js @@ -1,12 +1,12 @@ -export const pad = n => (n < 10 ? "0" : "") + n; +export const pad = n => (n < 10 ? "0" : "") + n export const todayUrl = (date = new Date()) => - `/${date.getFullYear()}/${pad(date.getMonth() + 1)}/${pad(date.getDate())}/`; + `/${date.getFullYear()}/${pad(date.getMonth() + 1)}/${pad(date.getDate())}/` -export const yearUrl = (date = new Date()) => `/${date.getFullYear()}/`; +export const yearUrl = (date = new Date()) => `/${date.getFullYear()}/` export const months = { long: Array.from({ length: 12 }, (x, index) => new Date(0, index).toLocaleDateString("en-US", { month: "long" }) - ) -}; + ), +}