Skip to content

Commit

Permalink
more cleanup
Browse files Browse the repository at this point in the history
  • Loading branch information
@philipstubbs13
philipstubbs13 committed Sep 30, 2018
1 parent 8713a46 commit 57a11cc
Show file tree
Hide file tree
Showing 4 changed files with 213 additions and 212 deletions.
245 changes: 123 additions & 122 deletions client/src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,141 +34,142 @@ import logo from './images/edue_logo.png';
import './App.css';

const styles = {
card: {
minWidth: 275,
marginTop: 50,
borderSize: 5,
borderStyle: 'solid',
borderWidth: 3,
borderColor: 'var(--main-bg-color)',
},
card: {
minWidth: 275,
marginTop: 50,
borderSize: 5,
borderStyle: 'solid',
borderWidth: 3,
borderColor: 'var(--main-bg-color)',
},
};

class App extends Component {
constructor() {
super();
this.state = {
user: null,
};
constructor() {
super();
this.state = {
user: null,
};

this.login = this.login.bind(this);
this.logout = this.logout.bind(this);
}
this.login = this.login.bind(this);
this.logout = this.logout.bind(this);
}

componentDidMount() {
// When the user signs in, this checks the Firebase database to see
// if they were already previously authenticated.
// If they were, we set their user details back into the state.
auth.onAuthStateChanged((user) => {
if (user) {
this.setState({ user });
}
});
}
componentDidMount() {
// When the user signs in, this checks the Firebase database to see
// if they were already previously authenticated.
// If they were, we set their user details back into the state.
auth.onAuthStateChanged((user) => {
if (user) {
this.setState({ user });
}
});
}

// Handles authentication with firebase.
// Here we call the signInWithPopup method from the auth module,
// and pass in our provider (remember this refers to the Google Auth Provider).
// Now, when you click the 'login' button, it will trigger a popup
// that gives us the option to sign in with a Google account
// signInWithPopup has a promise API that allows us to call
// .then on it and pass in a callback.
// This callback will be provided with a result object that contains,
// among other things, a property called .user that has all the
// information about the user who has just successfully signed in
// including their name and user photo. We then store this inside of the state using setState.
login() {
auth.signInWithPopup(provider)
.then((result) => {
// console.log(result);
const user = result.user;
this.setState({
user,
});
});
}
// Handles authentication with firebase.
// Here we call the signInWithPopup method from the auth module,
// and pass in our provider (remember this refers to the Google Auth Provider).
// Now, when you click the 'login' button, it will trigger a popup
// that gives us the option to sign in with a Google account
// signInWithPopup has a promise API that allows us to call
// .then on it and pass in a callback.
// This callback will be provided with a result object that contains,
// among other things, a property called .user that has all the
// information about the user who has just successfully signed in
// including their name and user photo. We then store this inside of the state using setState.
login() {
auth.signInWithPopup(provider)
.then((result) => {
// console.log(result);
const user = result.user;
this.setState({
user,
});
});
}

// We call the signOut method on auth,
// and then using the Promise API
// we remove the user from our application's state.
// With this.state.user now equal to null,
// the user will see the Log In button instead of the Log Out button.
logout() {
auth.signOut()
.then(() => {
this.setState({
user: null,
});
});
}
// We call the signOut method on auth,
// and then using the Promise API
// we remove the user from our application's state.
// With this.state.user now equal to null,
// the user will see the Log In button instead of the Log Out button.
logout() {
auth.signOut()
.then(() => {
this.setState({
user: null,
});
});
}

render() {
const { user } = this.state;
const { classes } = this.props;
// console.log(user);
return (<div className="App">
<Router>
<div className="entire-page">
{user
? (
<div>
<NavBar
name={user.displayName || user.email}
photo={user.photoURL}
handleLogout={this.logout}
/>
<div className="main-content-section">
<Switch>
<Route exact path="/" component={Landing} />
<Route exact path="/events" component={Events} />
<Route exact path="/profile" render={props => <Profile
{...props} name={user.displayName} email={user.email} photo={user.photoURL} uid={user.uid}></Profile>}
/>
<Route exact path="/add" component={AddEvent} />
<Route exact path="/help" component={Help} />
<Route exact path="/login" component={Login} />
<Route exact path="/eventDetails" component={EventDetails} />
</Switch>
</div>
</div>
)
: (
<div className="main-content-section">
<Grid container spacing={16} justify="center" className="login-page">
<Grid item xs={12} sm={12} md={6}>
<img src={logo} alt="team logo" className="logo"></img>
</Grid>
<Grid item xs={12} sm={12} md={6}>
<Typography variant="display1" className="app-title">
Welcome to EduVents
render() {
const { user } = this.state;
const { classes } = this.props;
// console.log(user);
return (<div className="App">
<Router>
<div className="entire-page">
{user
? (
<div>
<NavBar
name={user.displayName || user.email}
photo={user.photoURL}
handleLogout={this.logout}
/>
<div className="main-content-section">
<Switch>
<Route exact path="/" component={Landing} />
<Route exact path="/events" component={Events} />
<Route exact path="/profile" render={props => <Profile
{...props} name={user.displayName} email={user.email} photo={user.photoURL} uid={user.uid}></Profile>}
/>
<Route exact path="/add" component={AddEvent} />
<Route exact path="/help" component={Help} />
<Route exact path="/login" component={Login} />
<Route exact path="/add" component={AddEvent} />
<Route exact path="/eventDetails" component={EventDetails} />
</Switch>
</div>
</div>
)
: (
<div className="main-content-section">
<Grid container spacing={16} justify="center" className="login-page">
<Grid item xs={12} sm={12} md={6}>
<img src={logo} alt="team logo" className="logo"></img>
</Grid>
<Grid item xs={12} sm={12} md={6}>
<Typography variant="display1" className="app-title">
Welcome to EduVents
</Typography>
<Card className={classes.card}>
<CardContent>
<Typography variant="display1">
LOGIN
<Card className={classes.card}>
<CardContent>
<Typography variant="display1">
LOGIN
</Typography>
<Typography variant="body1" className="sub-title">
Log in to find fun, educational activities and
<Typography variant="body1" className="sub-title">
Log in to find fun, educational activities and
events to do with your kids.
</Typography>
<div className="login">
<p>Login with Google to continue to site.</p>
<button type="submit" className="loginBtn loginBtn--google" onClick={this.login}>
Login with Google
<div className="login">
<p>Login with Google to continue to site.</p>
<button type="submit" className="loginBtn loginBtn--google" onClick={this.login}>
Login with Google
</button>
</div>
</CardContent>
</Card>
</Grid>
</Grid>
</div>
)}
<Footer />
</div>
</Router>
</div>
);
}
</div>
</CardContent>
</Card>
</Grid>
</Grid>
</div>
)}
<Footer />
</div>
</Router>
</div>
);
}
}


Expand Down
56 changes: 40 additions & 16 deletions client/src/components/NavBar/NavBar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,39 @@ const styles = {
},
};

const menuLinks = [
{
id: 0,
link: '/',
icon: 'fas fa-home',
name: 'Home',
},
{
id: 1,
link: '/events',
icon: 'fas fa-calendar-alt',
name: 'Events',
},
{
id: 2,
link: '/profile',
icon: 'fas fa-users',
name: 'Profile',
},
{
id: 3,
link: '/add',
icon: 'far fa-calendar-plus',
name: 'Add Event',
},
{
id: 4,
link: '/help',
icon: 'fas fa-question-circle',
name: 'Help',
},
];

class NavBar extends Component {
constructor() {
super();
Expand Down Expand Up @@ -99,22 +132,13 @@ class NavBar extends Component {
EduVents
</Typography>
<Divider />
<MenuItem className={classes.menuItem} component={Link} to="/">
<i className="fas fa-home" />
<span className={classes.menuText}>Home</span>
</MenuItem>
<MenuItem className={classes.menuItem} component={Link} to="/events">
<i className="fas fa-calendar-alt" />
<span className={classes.menuText}> Events</span>
</MenuItem>
<MenuItem className={classes.menuItem} component={Link} to="/profile">
<i className="fas fa-users" />
<span className={classes.menuText}>Profile</span>
</MenuItem>
<MenuItem className={classes.menuItem} component={Link} to="/help">
<i className="fas fa-question-circle" />
<span className={classes.menuText}>Help</span>
</MenuItem>
{menuLinks.map(link => (
<MenuItem key={link.id} className={classes.menuItem} component={Link} to={link.link}>
<i className={link.icon} />
<span className={classes.menuText}>{link.name}</span>
</MenuItem>
))}
;
<MenuItem className={classes.menuItem} onClick={handleLogout} component={Link} to="/">
<i className="fas fa-sign-out-alt" />
<span className={classes.menuText}>Logout</span>
Expand Down
3 changes: 0 additions & 3 deletions client/src/containers/AddEvent/AddEvent.js
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,10 @@
// import React
import React, { Component } from 'react';
// Import NavBar component
import NavBar from '../../components/NavBar';

class AddEvent extends Component {
render() {
return (
<div>
<NavBar />
<div className="main-content-section">
<h1>Add Event</h1>
</div>
Expand Down
Loading

0 comments on commit 57a11cc

Please sign in to comment.