Skip to content

Commit 6315e36

Browse files
prescottprueprescottprue
committed
AccountManager and Dropdown renamed to ProfileManager and Dropdown. Variables.scss moved up to app level.
1 parent 9edea8d commit 6315e36

File tree

26 files changed

+209
-234
lines changed

26 files changed

+209
-234
lines changed

‎generators/app/templates/app/components/_variables.scss renamed to ‎generators/app/templates/app/_variables.scss

File renamed without changes.

‎generators/app/templates/app/components/AccountDropdown/AccountDropdown.js

-18
This file was deleted.

‎generators/app/templates/app/components/AccountManager/AccountManager.js

-29
This file was deleted.

‎generators/app/templates/app/components/LoginForm/LoginForm.js

+14-18
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,5 @@
11
import React, {Component, PropTypes} from 'react';
2-
import {bindActionCreators} from 'redux';
3-
import {connect} from 'react-redux';
42
import { Link } from 'react-router';
5-
import * as Actions from '../../actions';
63
import './LoginForm.scss';
74

85
class LoginForm extends Component {
@@ -13,6 +10,9 @@ import './LoginForm.scss';
1310
this.handlePasswordChange = this.handlePasswordChange.bind(this);
1411
this.state = {username: '', password: ''};
1512
}
13+
static propType = {
14+
onLoginClick: PropTypes.func.isRequired
15+
};
1616
/**
1717
* @function handleLogin
1818
* @description Fire onLoginClick function provided to component when login is clicked
@@ -36,26 +36,22 @@ import './LoginForm.scss';
3636
}
3737
render() {
3838
return (
39-
<div className="login-page">
40-
<form className="inputs" onSubmit={this.handleLogin}>
41-
<div className="input-wrapper">
42-
<span className="input-label">Username/Email</span>
43-
<input onChange={this.handleUsernameChange}/>
39+
<form className="LoginForm" onSubmit={this.handleLogin}>
40+
<div className="LoginForm-Group">
41+
<span className="LoginForm-Label">Username/Email</span>
42+
<input className="LoginForm-Input" onChange={this.handleUsernameChange}/>
4443
</div>
45-
<div className="input-wrapper">
46-
<span className="input-label">Password</span>
47-
<input onChange={this.handlePasswordChange} type='password' />
44+
<div className="LoginForm-Group">
45+
<span className="LoginForm-Label">Password</span>
46+
<input className="LoginForm-Input" onChange={this.handlePasswordChange} type='password' />
4847
</div>
49-
<div className="input-wrapper">
50-
<button className="" type="submit">Login</button>
51-
<button className="" type="reset">Cancel</button>
48+
<div className="LoginForm-Buttons">
49+
<button className="LoginForm-Login" type="submit">Login</button>
50+
<button className="LoginForm-Cancel" type="reset">Cancel</button>
5251
</div>
5352
</form>
54-
</div>
5553
)
5654
}
5755
}
58-
LoginForm.propTypes = {
59-
onLoginClick: PropTypes.func.isRequired
60-
};
56+
6157
export default LoginForm;

‎generators/app/templates/app/components/LoginForm/LoginForm.scss

+9-4
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,13 @@
1-
.login-page {
1+
.LoginForm {
22
width: 100%;
33
text-align:center;
4-
}
4+
&-Group {
5+
padding:10px;
6+
}
7+
&-Label {
8+
9+
}
10+
&-Input {
511

6-
.input-wrapper {
7-
padding:10px;
12+
}
813
}

‎generators/app/templates/app/components/Navbar/Navbar.js

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import React, { Component, PropTypes } from 'react';
2+
import { Link } from 'react-router';
3+
4+
import ProfileManager from '../ProfileManager/ProfileManager';
5+
import './Navbar.scss';
6+
7+
class Navbar extends Component {
8+
constructor(props) {
9+
super(props);
10+
}
11+
static propTypes = {
12+
profile: PropTypes.object
13+
};
14+
render() {
15+
return (
16+
<div className="Navbar">
17+
<div className="Navbar-Brand">
18+
<Link to="/">Starter</Link>
19+
</div>
20+
<div className="Navbar-Spacer"></div>
21+
<ProfileManager profile={ this.props.profile } />
22+
</div>
23+
)
24+
}
25+
}
26+
export default Navbar;

‎generators/app/templates/app/components/Navbar/Navbar.scss

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
@import '../../variables';
2+
3+
.Navbar {
4+
background-color: $navbar;
5+
width:100%;
6+
padding:10px;
7+
font-size:1.5em;
8+
line-height: 1.3em;
9+
/* Flexbox */
10+
display: -webkit-flex;
11+
display: -ms-flexbox;
12+
display: flex;
13+
flex-direction: row;
14+
vertical-align: middle;
15+
&-Brand {
16+
font-size:1em;
17+
& :hover {
18+
color: $secondary;
19+
}
20+
}
21+
&-Spacer {
22+
flex:1;
23+
}
24+
}

‎generators/app/templates/app/components/ProfileDropdown/ProfileDropdown.js

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import React, { Component, PropTypes } from 'react';
2+
import { Link } from 'react-router';
3+
4+
class ProfileDropdown extends Component {
5+
static propTypes = {
6+
profile: PropTypes.shape({
7+
username: PropTypes.string.isRequired
8+
}).isRequired
9+
};
10+
render() {
11+
return (
12+
<div className="buttons">
13+
<Link to="/profile">{this.props.profile.username}</Link>
14+
</div>
15+
)
16+
}
17+
}
18+
19+
export default ProfileDropdown;

‎generators/app/templates/app/components/ProfileManager/ProfileManager.js

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import React, { Component, PropTypes } from 'react';
2+
import { Link } from 'react-router';
3+
import ProfileDropdown from '../ProfileDropdown/ProfileDropdown';
4+
import './ProfileManager.scss';
5+
6+
class ProfileManager extends Component {
7+
constructor(props) {
8+
super(props);
9+
}
10+
static propTypes = {
11+
profile: PropTypes.object
12+
};
13+
render() {
14+
if(this.props.profile && this.props.profile.username){
15+
return (
16+
<ProfileDropdown
17+
profile={ this.props.profile }
18+
/>
19+
)
20+
} else {
21+
return (
22+
<div className="ProfileManager-Buttons">
23+
<Link className="ProfileManager-Button" to="/login">Login</Link>
24+
<Link className="ProfileManager-Button" to="/signup">Signup</Link>
25+
</div>
26+
);
27+
}
28+
}
29+
}
30+
31+
export default ProfileManager;

‎generators/app/templates/app/components/ProfileManager/ProfileManager.scss

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
@import '../../variables';
2+
.ProfileManager {
3+
4+
//Button group
5+
&-Buttons {
6+
display:inline;
7+
padding-right:10px;
8+
}
9+
//Button
10+
&-Button {
11+
margin-right:10px;
12+
margin-left:10px;
13+
text-decoration:none;
14+
& :hover {
15+
// background-color:white;
16+
color: $secondary;
17+
text-decoration: underline;
18+
}
19+
}
20+
}

‎generators/app/templates/app/components/SignupForm/SignupForm.js

+30-34
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,5 @@
11
import React, {Component, PropTypes} from 'react';
2-
import {bindActionCreators} from 'redux';
3-
import {connect} from 'react-redux';
42
import { Link } from 'react-router';
5-
import * as Actions from '../../actions';
63
// import './SignupForm.scss';
74

85
class SignupForm extends Component {
@@ -13,6 +10,9 @@ class SignupForm extends Component {
1310
this.handlePasswordChange = this.handlePasswordChange.bind(this);
1411
this.state = {username: '', password: ''};
1512
}
13+
static propTypes = {
14+
onLoginClick: PropTypes.func.isRequired
15+
};
1616
/**
1717
* @function handleSignup
1818
* @description Fire onLoginClick function provided to component when login is clicked
@@ -37,38 +37,34 @@ class SignupForm extends Component {
3737
}
3838
render() {
3939
return (
40-
<div className="signup-page">
41-
<form className="inputs" onSubmit={this.handleSignup}>
42-
<div className="input-wrapper">
43-
<span className="input-label">Username</span>
44-
<input onChange={this.handleInputChange}/>
45-
</div>
46-
<div className="input-wrapper">
47-
<span className="input-label">Email</span>
48-
<input onChange={this.handleInputChange}/>
49-
</div>
50-
<div className="input-wrapper">
51-
<span className="input-label">Name</span>
52-
<input onChange={this.handleInputChange}/>
53-
</div>
54-
<div className="input-wrapper">
55-
<span className="input-label">Password</span>
56-
<input onChange={this.handlePasswordChange} type='password' />
57-
</div>
58-
<div className="input-wrapper">
59-
<span className="input-label">Confirm</span>
60-
<input onChange={this.handleInputChange} type='password'/>
61-
</div>
62-
<div className="input-wrapper">
63-
<button className="" type="submit">Signup</button>
64-
<button className="" type="reset">Cancel</button>
65-
</div>
66-
</form>
67-
</div>
40+
<form className="SignupForm" onSubmit={this.handleSignup}>
41+
<div className="SignupForm-Input-Wrapper">
42+
<span className="SignupForm-Label">Username</span>
43+
<input className="SignupForm-Input" onChange={this.handleInputChange}/>
44+
</div>
45+
<div className="input-wrapper">
46+
<span className="SignupForm-Label">Email</span>
47+
<input className="SignupForm-Input" onChange={this.handleInputChange}/>
48+
</div>
49+
<div className="input-wrapper">
50+
<span className="SignupForm-Label">Name</span>
51+
<input className="SignupForm-Input" onChange={this.handleInputChange}/>
52+
</div>
53+
<div className="input-wrapper">
54+
<span className="SignupForm-Label">Password</span>
55+
<input className="SignupForm-Input" onChange={this.handlePasswordChange} type='password' />
56+
</div>
57+
<div className="input-wrapper">
58+
<span className="SignupForm-Label">Confirm</span>
59+
<input className="SignupForm-Input" onChange={this.handleInputChange} type='password'/>
60+
</div>
61+
<div className="input-wrapper">
62+
<button className="SignupForm-Button" type="submit">Signup</button>
63+
<button className="SignupForm-Button" type="reset">Cancel</button>
64+
</div>
65+
</form>
6866
)
6967
}
7068
}
71-
SignupForm.propTypes = {
72-
onLoginClick: PropTypes.func.isRequired
73-
};
69+
7470
export default SignupForm;

‎generators/app/templates/app/components/cars/cars.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
@import '../variables';
1+
@import '../../variables';

‎generators/app/templates/app/containers/About/About.js

-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React, {Component} from 'react';
22

33
export default class About extends Component {
4-
54
render() {
65
}
76
}

‎generators/app/templates/app/containers/App/App.js

+15-4
Original file line numberDiff line numberDiff line change
@@ -4,20 +4,31 @@ import { connect } from 'react-redux';
44
import * as Actions from '../../actions';
55
import './App.scss';
66

7-
import Navbar from '../Navbar/Navbar';
7+
import Navbar from '../../components/Navbar/Navbar';
88

99
class Main extends Component {
1010
constructor(props) {
1111
super(props);
1212
}
1313
render() {
1414
return (
15-
<div className="app">
16-
<Navbar />
15+
<div className="App">
16+
<Navbar profile={ this.props.profile }/>
1717
{this.props.children}
1818
</div>
1919
)
2020
}
2121
}
22+
//Place state of redux store into props of component
23+
function mapStateToProps(state) {
24+
return {
25+
profile: state.profile,
26+
router: state.router
27+
};
28+
}
29+
//Place action methods into props
30+
function mapDispatchToProps(dispatch) {
31+
return bindActionCreators(Actions, dispatch);
32+
}
2233

23-
export default Main;
34+
export default connect(mapStateToProps, mapDispatchToProps)(Main);

‎generators/app/templates/app/containers/App/App.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
.app {
1+
.App {
22
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
33
}
44
.inputs {

‎generators/app/templates/app/containers/Home/Home.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import './Home.scss';
55
export default class Home extends Component {
66
render() {
77
return (
8-
<div className="homepage">
8+
<div className="Home">
99
<h2>Starter Project</h2>
1010
<p>Example application built with React, Redux, and Matter. </p>
1111
<p>Webpack is used to supply hot reloading for modules during development.</p>

0 commit comments

Comments
 (0)