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 (
- );
+ )
}
}
-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 (
- );
+ )
}
}
-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" })
- )
-};
+ ),
+}