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. 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`. Learn how to configure a non-root public URL by running `npm run build`.
--> -->
<title>React App</title> <title>Sol Journal</title>
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <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 React, { Component } from "react"
import { BrowserRouter as Router, Route } from "react-router-dom" import { BrowserRouter as Router, Route } from "react-router-dom"
import { compose } from "recompose"
import styled from "@emotion/styled" import styled from "@emotion/styled"
import { ThemeProvider } from "emotion-theming" import { ThemeProvider } from "emotion-theming"
@@ -15,6 +16,7 @@ import Login from "./components/screens/Login"
import Register from "./components/screens/Register" import Register from "./components/screens/Register"
import { withAuthentication } from "./components/session" import { withAuthentication } from "./components/session"
import { withFirebase } from "./components/firebase"
const RouteLayout = styled.div` const RouteLayout = styled.div`
display: flex; display: flex;
@@ -30,7 +32,10 @@ const RouteLayout = styled.div`
class App extends Component { class App extends Component {
state = { state = {
authUser: JSON.parse(localStorage.getItem("authUser")), authUser: JSON.parse(localStorage.getItem("authUser")),
selectedTheme: "LIGHT", selectedTheme:
new Date().getHours() >= 7 && new Date().getHours() <= 21
? "LIGHT"
: "DARK",
} }
onChangeTheme = () => { onChangeTheme = () => {
@@ -44,6 +49,19 @@ class App extends Component {
this.setState({ selectedTheme: newTheme }) 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() { render() {
const { selectedTheme } = this.state 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 React from "react"
import { compose } from "recompose"
import styled from "@emotion/styled"
import { withTheme } from "emotion-theming"
import { withFirebase } from "../firebase" 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 }) => ( const SignOutButton = ({ firebase }) => (
<button type="button" onClick={firebase.doSignOut}> <Button type="button" onClick={firebase.doSignOut}>
Sign Out 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 React from "react"
import styled from "@emotion/styled"
import { compose } from "recompose"
import { withFirebase } from "../../firebase" import { withFirebase } from "../../firebase"
import { withAuthentication } from "../../session"
import { SIZES } from "../../../styles/constants"
import SignOut from "../../SignOut" 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 { class User extends React.Component {
state = { state = {
name: "", name: "",
@@ -28,22 +54,22 @@ class User extends React.Component {
} }
render() { render() {
const { authUser } = this.props
return ( return (
<React.Fragment> <ProfileGrid>
<SignOut /> <ProfileSection>
<form onSubmit={this.addUser}> <ProfileSectionHeader>
<input User: <ProfileSectionText>{authUser.email}</ProfileSectionText>
type="text" </ProfileSectionHeader>
name="name" <SignOut />
placeholder="Name" </ProfileSection>
onChange={this.updateInput} {/* <ProfileSection>Export Entries</ProfileSection> */}
value={this.state.name} </ProfileGrid>
/>
<button type="submit">Submit</button>
</form>
</React.Fragment>
) )
} }
} }
export default withFirebase(User) export default compose(
withFirebase,
withAuthentication
)(User)