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

56
src/App.js
View File

@@ -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 (
<ThemeProvider theme={currentTheme}>
<Router>
@@ -68,8 +70,8 @@ class App extends Component {
</RouteLayout>
</Router>
</ThemeProvider>
);
)
}
}
export default withAuthentication(App);
export default withAuthentication(App)

16
src/App.test.js
View File

@@ -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(<App />, div);
ReactDOM.unmountComponentAtNode(div);
});
it("renders without crashing", () => {
const div = document.createElement("div")
ReactDOM.render(<App />, div)
ReactDOM.unmountComponentAtNode(div)
})

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

16
src/index.js
View File

@@ -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(
<FirebaseContext.Provider value={new Firebase()}>
<App />
</FirebaseContext.Provider>,
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()

56
src/serviceWorker.js
View File

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

5
src/styles/constants.js
View File

@@ -3,5 +3,6 @@ export const SIZES = {
small: "1rem",
normal: "1.25rem",
medium: "1.5rem",
large: "2rem"
};
large: "2rem",
maxWidth: "600px",
}

14
src/styles/theme.js
View File

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

10
src/utils/date.js
View File

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