spencerpincott/sol-journal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: resize writing area, add name to navbar

Browse Source
This commit is contained in:
Kyle Gill
2019-03-29 10:08:02 -06:00
parent faf5473d5d
commit eee11f9437
34 changed files with 386 additions and 369 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/Icon/Icon.js
View File

@@ -35,6 +35,7 @@ const Icon = ({ name, ...rest }) => (
{name === "ChevronLeft" && <ChevronLeft />}
{name === "ChevronRight" && <ChevronRight />}
{name === "Circle" && <Circle />}
{name === "Edit2" && <Edit2 />}
{name === "Moon" && <Moon />}
{name === "Sun" && <Sun />}
{name === "User" && <User />}

4
src/components/Icon/index.js
View File

@@ -1,2 +1,2 @@
import Icon from "./Icon";
export default Icon;
import Icon from "./Icon"
export default Icon

8
src/components/Logo/index.js
View File

@@ -1,4 +1,4 @@
import React from "react";
import React from "react"
const Logo = ({ color }) => {
return (
@@ -123,7 +123,7 @@ const Logo = ({ color }) => {
</clipPath>
</defs>
</svg>
);
};
)
}
export default Logo;
export default Logo

63
src/components/Navbar/Navbar.js
View File

@@ -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 }) => (
<Header>
<Nav>
<LogoSection>
<Logo color={theme.colors.logo} />
<LogoText color={theme.colors.primary}>SOL</LogoText>{" "}
<LogoText color={theme.colors.secondary}>JOURNAL</LogoText>
</LogoSection>
<NavIcons>
<Icon
onClick={() => toggleTheme()}
name={theme.name === "Dark" ? "Sun" : "Moon"}
/>
{authUser ? (
<React.Fragment>
<Link to={todayUrl()}>
<Icon name="Edit2" />
</Link>
<Link to={yearUrl()}>
<Icon name="Calendar" />
</Link>
<Link to={todayUrl()}>
<Icon name="Book" />
</Link>
<Icon
onClick={() => toggleTheme()}
name={theme.name === "Dark" ? "Sun" : "Moon"}
/>
<Link to={"/user"}>
<Icon name="User" />
</Link>
@@ -75,9 +88,9 @@ const Navbar = ({ authUser, theme, toggleTheme }) => (
</NavIcons>
</Nav>
</Header>
);
)
export default compose(
withAuthentication,
withTheme
)(Navbar);
)(Navbar)

4
src/components/Navbar/index.js
View File

@@ -1,2 +1,2 @@
import Navbar from "./Navbar";
export default Navbar;
import Navbar from "./Navbar"
export default Navbar

26
src/components/Seek/Seek.js
View File

@@ -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 }) => (
<SeekHeader>
@@ -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,
}}
/>
</Link>
)}
</SeekArrows>
</SeekHeader>
);
)
export default withTheme(Seek);
export default withTheme(Seek)

4
src/components/Seek/index.js
View File

@@ -1,2 +1,2 @@
import Seek from "./Seek";
export default Seek;
import Seek from "./Seek"
export default Seek

8
src/components/SignOut/SignOut.js
View File

@@ -1,11 +1,11 @@
import React from "react";
import React from "react"
import { withFirebase } from "../firebase";
import { withFirebase } from "../firebase"
const SignOutButton = ({ firebase }) => (
<button type="button" onClick={firebase.doSignOut}>
Sign Out
</button>
);
)
export default withFirebase(SignOutButton);
export default withFirebase(SignOutButton)

4
src/components/SignOut/index.js
View File

@@ -1,2 +1,2 @@
import SignOut from "./SignOut";
export default SignOut;
import SignOut from "./SignOut"
export default SignOut

8
src/components/firebase/context.js
View File

@@ -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 => (
<FirebaseContext.Consumer>
{firebase => <Component {...props} firebase={firebase} />}
</FirebaseContext.Consumer>
);
)
export default FirebaseContext;
export default FirebaseContext

38
src/components/firebase/fire.js
View File

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

8
src/components/firebase/index.js
View File

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

122
src/components/screens/Day/Day.js
View File

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

4
src/components/screens/Day/index.js
View File

@@ -1,2 +1,2 @@
import Day from "./Day";
export default Day;
import Day from "./Day"
export default Day

44
src/components/screens/Login/Login.js
View File

@@ -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 }) => (
<div>
@@ -14,38 +14,38 @@ const LoginPage = ({ history }) => (
Don't have an account? <Link to={"/register"}>Sign Up</Link>
</p>
</div>
);
)
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 (
<form onSubmit={this.onSubmit}>
@@ -69,12 +69,12 @@ class LoginFormBase extends Component {
{error && <p>{error.message}</p>}
</form>
);
)
}
}
const LoginForm = withRouter(LoginFormBase);
const LoginForm = withRouter(LoginFormBase)
export default LoginPage;
export default LoginPage
export { LoginForm };
export { LoginForm }

4
src/components/screens/Login/index.js
View File

@@ -1,2 +1,2 @@
import Login from "./Login";
export default Login;
import Login from "./Login"
export default Login

44
src/components/screens/Month/Month.js
View File

@@ -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(
<YearCard disabled={isDisabled} key={i}>
{i + 1}
</YearCard>
);
)
} else {
yearCards.push(
<Link
@@ -68,7 +68,7 @@ class Month extends Component {
>
<YearCard key={i}>{i + 1}</YearCard>
</Link>
);
)
}
}
@@ -85,8 +85,8 @@ class Month extends Component {
/>
<YearCardGrid>{yearCards}</YearCardGrid>
</>
);
)
}
}
export default Month;
export default Month

4
src/components/screens/Month/index.js
View File

@@ -1,2 +1,2 @@
import Month from "./Month";
export default Month;
import Month from "./Month"
export default Month

54
src/components/screens/Register/Register.js
View File

@@ -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 }) => (
<div>
@@ -10,24 +10,24 @@ const RegisterPage = ({ history }) => (
{firebase => <RegisterForm history={history} firebase={firebase} />}
</FirebaseContext.Consumer>
</div>
);
)
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 (
<form onSubmit={this.onSubmit}>
@@ -105,10 +105,10 @@ class RegisterForm extends Component {
{error && <p>{error.message}</p>}
</form>
);
)
}
}
export default withRouter(RegisterPage);
export default withRouter(RegisterPage)
export { RegisterForm };
export { RegisterForm }

4
src/components/screens/Register/index.js
View File

@@ -1,2 +1,2 @@
import Register from "./Register";
export default Register;
import Register from "./Register"
export default Register

32
src/components/screens/User/User.js
View File

@@ -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 {
<button type="submit">Submit</button>
</form>
</React.Fragment>
);
)
}
}
export default withFirebase(User);
export default withFirebase(User)

4
src/components/screens/User/index.js
View File

@@ -1,2 +1,2 @@
import User from "./User";
export default User;
import User from "./User"
export default User

38
src/components/screens/Year/Year.js
View File

@@ -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 (
<div>
@@ -53,7 +53,7 @@ class Year extends Component {
/>
<MonthCardGrid>
{months.long.map((month, index) => {
const isDisabled = monthIndexesToInclude < index;
const isDisabled = monthIndexesToInclude < index
return isDisabled ? (
<MonthCard key={index} disabled={isDisabled}>
{month}
@@ -66,12 +66,12 @@ class Year extends Component {
>
<MonthCard>{month}</MonthCard>
</Link>
);
)
})}
</MonthCardGrid>
</div>
);
)
}
}
export default withTheme(Year);
export default withTheme(Year)

4
src/components/screens/Year/index.js
View File

@@ -1,2 +1,2 @@
import Year from "./Year";
export default Year;
import Year from "./Year"
export default Year

6
src/components/session/context.js
View File

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

6
src/components/session/index.js
View File

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

36
src/components/session/withAuthentication.js
View File

@@ -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 => {
<AuthUserContext.Provider value={this.state.authUser}>
<Component authUser={this.state.authUser} {...this.props} />
</AuthUserContext.Provider>
);
)
}
}
return withFirebase(WithAuthentication);
};
return withFirebase(WithAuthentication)
}
export default withAuthentication;
export default withAuthentication