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

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