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

feat: user page

Browse Source
This commit is contained in:
Kyle Gill
2019-03-29 11:03:44 -06:00
parent eee11f9437
commit f3ac895199
6 changed files with 89 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/favicon.ico
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.8 KiB

After

Width:  |  Height:  |  Size: 17 KiB

2
public/index.html
View File

@@ -26,7 +26,7 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
<title>Sol Journal</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>

BIN
public/reactfavicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.8 KiB

25
src/App.js
View File

@@ -1,5 +1,6 @@
import React, { Component } from "react"
import { BrowserRouter as Router, Route } from "react-router-dom"
import { compose } from "recompose"
import styled from "@emotion/styled"
import { ThemeProvider } from "emotion-theming"
@@ -15,6 +16,7 @@ import Login from "./components/screens/Login"
import Register from "./components/screens/Register"
import { withAuthentication } from "./components/session"
import { withFirebase } from "./components/firebase"
const RouteLayout = styled.div`
display: flex;
@@ -30,7 +32,10 @@ const RouteLayout = styled.div`
class App extends Component {
state = {
authUser: JSON.parse(localStorage.getItem("authUser")),
selectedTheme: "LIGHT",
selectedTheme:
new Date().getHours() >= 7 && new Date().getHours() <= 21
? "LIGHT"
: "DARK",
}
onChangeTheme = () => {
@@ -44,6 +49,19 @@ class App extends Component {
this.setState({ selectedTheme: newTheme })
}
saveUserSettings = newTheme => {
const { authUser, firebase } = this.props
firebase.db
.collection("users")
.doc(authUser.uid)
.update({
theme: newTheme,
})
.then(function() {
console.log("Updated theme settings")
})
}
render() {
const { selectedTheme } = this.state
@@ -74,4 +92,7 @@ class App extends Component {
}
}
export default withAuthentication(App)
export default compose(
withAuthentication,
withFirebase
)(App)

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

@@ -1,11 +1,33 @@
import React from "react"
import { compose } from "recompose"
import styled from "@emotion/styled"
import { withTheme } from "emotion-theming"
import { withFirebase } from "../firebase"
const Button = styled.button`
background-color: ${props => props.theme.colors.headerBackground};
padding: 10px 50px;
height: 40px;
border-radius: 5px;
border: 0px solid;
border-color: ${props => props.theme.colors.quarternary};
color: ${props => props.theme.colors.secondary};
font-size: 14px;
font-weight: 700;
&:hover {
cursor: pointer;
background-color: ${props => props.theme.colors.hover};
}
`
const SignOutButton = ({ firebase }) => (
<button type="button" onClick={firebase.doSignOut}>
<Button type="button" onClick={firebase.doSignOut}>
Sign Out
</button>
</Button>
)
export default withFirebase(SignOutButton)
export default compose(
withTheme,
withFirebase
)(SignOutButton)

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

@@ -1,8 +1,34 @@
import React from "react"
import styled from "@emotion/styled"
import { compose } from "recompose"
import { withFirebase } from "../../firebase"
import { withAuthentication } from "../../session"
import { SIZES } from "../../../styles/constants"
import SignOut from "../../SignOut"
const ProfileGrid = styled.div`
display: grid;
grid-template-rows: 1fr;
grid-gap: 20px;
`
const ProfileSection = styled.div`
display: flex;
width: 100%;
align-items: center;
justify-content: space-between;
padding: 10px 0;
`
const ProfileSectionHeader = styled.h2`
font-size: ${SIZES.normal};
color: ${props => props.theme.colors.tertiary};
`
const ProfileSectionText = styled.span`
font-size: ${SIZES.normal};
color: ${props => props.theme.colors.secondary};
`
class User extends React.Component {
state = {
name: "",
@@ -28,22 +54,22 @@ class User extends React.Component {
}
render() {
const { authUser } = this.props
return (
<React.Fragment>
<SignOut />
<form onSubmit={this.addUser}>
<input
type="text"
name="name"
placeholder="Name"
onChange={this.updateInput}
value={this.state.name}
/>
<button type="submit">Submit</button>
</form>
</React.Fragment>
<ProfileGrid>
<ProfileSection>
<ProfileSectionHeader>
User: <ProfileSectionText>{authUser.email}</ProfileSectionText>
</ProfileSectionHeader>
<SignOut />
</ProfileSection>
{/* <ProfileSection>Export Entries</ProfileSection> */}
</ProfileGrid>
)
}
}
export default withFirebase(User)
export default compose(
withFirebase,
withAuthentication
)(User)