Skip to content

Commit 6f12286

Browse files
pizzarobpizzarob
committed
clean code
1 parent 3bdae74 commit 6f12286

23 files changed

+139
-106
lines changed

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
"dev:server:delay": "run-s delay dev:server:start",
1111
"delay": "node ./node_modules/npm-delay 10000",
1212
"dev:server:build": "webpack --config ./webpack/server.js --watch --colors --display-error-details",
13-
"dev:server:start": "nodemon ./build/server.js --watch ./build",
13+
"dev:server:start": "nodemon ./build/server.js --watch ./src/server --ignore ./src/client",
1414
"dev:client:build": "node webpack/dev-server.js"
1515
},
1616
"repository": {

‎src/client/client.js

+5-4
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import makeStore from 'Store';
77
import sagas from 'Sagas';
88
import { ConnectedRouter, routerMiddleware } from 'react-router-redux';
99
import createHistory from 'history/createBrowserHistory';
10-
import App from 'Components/App';
10+
import App from 'Containers/App';
1111
import { AppContainer } from 'react-hot-loader';
1212

1313
const logger = createLogger();
@@ -40,9 +40,10 @@ const render = Component => {
4040

4141
render(App);
4242

43-
if (module.hot && process.env.NODE_ENV === 'development') {
44-
module.hot.accept('./components/App', () => {
45-
render(App);
43+
if (module.hot && process.env.NODE_ENV) {
44+
module.hot.accept('Containers/App', () => {
45+
const NextApp = require('Containers/App').default; //eslint-disable-line
46+
render(NextApp);
4647
});
4748
}
4849

‎src/client/components/About.jsx

+8-9
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
1-
import React, { Component } from 'react';
1+
import React from 'react';
22

3-
class About extends Component {
4-
render() {
5-
return (
6-
<div>
7-
<h1>ABOUT</h1>
8-
</div>
9-
);
10-
}
3+
function About() {
4+
return (
5+
<div>
6+
<h1>ABOUT</h1>
7+
<p>This starter is using React, Redux, React Router 4, Redux Sagas, and Webpack Hot Module Reloading.</p>
8+
</div>
9+
);
1110
}
1211

1312
export default About;

‎src/client/components/Home.jsx

+10-15
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,14 @@
1-
import React, { Component } from 'react';
2-
import TodoList from 'Containers/TodoContainer';
1+
import React from 'react';
2+
import TodoList from 'Containers/TodoList';
33

4-
class Home extends Component {
5-
constructor() {
6-
super();
7-
}
8-
9-
render() {
10-
return (
11-
<div>
12-
<h1>Home</h1>
13-
<TodoList />
14-
</div>
15-
);
16-
}
4+
function Home() {
5+
return (
6+
<div>
7+
<h1 style={{ margin: '20px 0 0 0' }}>Redux Server Rendering Starter</h1>
8+
<h2 style={{ margin: 0, fontWeight: 'lighter' }}>Now With Hot Module Reloading, Redux Sagas, and React Router 4</h2>
9+
<TodoList />
10+
</div>
11+
);
1712
}
1813

1914
export default Home;

‎src/client/components/Navigation.jsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
import React, { Component } from 'react';
1+
import React from 'react';
22
import { Link } from 'react-router-dom';
33

44
function Navigation() {
55
return (
66
<nav>
77
<Link to="/">Home</Link>
8-
<Link to="/about">About</Link>
8+
<Link style={{ marginLeft: '15px' }} to="/about">About</Link>
99
</nav>
1010
);
1111
}

‎src/client/components/Todo.jsx

+7-2
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,12 @@ import React, { PropTypes } from 'react';
22

33
function Todo({ text, completed, onClick }) {
44
return (
5-
<li>{text}- {completed ? 'Done' : 'Not Done'}- <button onClick={onClick}>Toggle</button></li>
5+
<li>
6+
<div className="flex-parent flex-align-center flex-justify-between">
7+
<span>{text} - {completed ? 'Done' : 'Not Done'}</span>
8+
<button className="btn" onClick={onClick}>Toggle</button>
9+
</div>
10+
</li>
611
);
712
}
813

@@ -12,4 +17,4 @@ Todo.propTypes = {
1217
text: PropTypes.string.isRequired,
1318
};
1419

15-
export default Todo
20+
export default Todo;

‎src/client/components/TodoList.jsx

-18
This file was deleted.

‎src/client/components/UiButton.jsx

Whitespace-only changes.

‎src/client/components/App.jsx renamed to ‎src/client/containers/App.jsx

+22-12
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { connect } from 'react-redux';
66
import { Route } from 'react-router-dom';
77
import Home from 'Components/Home';
88
import About from 'Components/About';
9+
import { withRouter } from 'react-router';
910
import '../../scss/styles.scss';
1011

1112
class App extends Component {
@@ -22,21 +23,30 @@ class App extends Component {
2223
render() {
2324
return (
2425
<div className={`full-width full-height ${this.props.ui.showBgImage ? 'bg' : ''}`}>
25-
<Navigation />
26-
<Route path="/" exact component={Home} />
27-
<Route path="/about" component={About} />
28-
<button onClick={this.handleBgToggle}>Toggle Background</button>
26+
<div className="wrap">
27+
<Navigation />
28+
<Route path="/" exact component={Home} />
29+
<Route path="/about" component={About} />
30+
<button style={{ margin: 'auto' }} className="btn" onClick={this.handleBgToggle}>Toggle Background</button>
31+
</div>
2932
</div>
3033
);
3134
}
3235
}
3336

34-
function mapDispatchToProps(dispatch) {
35-
return {
36-
onToggleBg(bool) {
37-
dispatch(dispatchAction(actions.UPDATE_UI, { showBgImage: bool }));
38-
}
39-
}
40-
}
37+
App.propTypes = {
38+
onToggleBg: React.PropTypes.func,
39+
ui: React.PropTypes.object,
40+
};
41+
42+
const mapDispatchToProps = dispatch => ({
43+
onToggleBg(bool) {
44+
dispatch(dispatchAction(actions.UPDATE_UI, { showBgImage: bool }));
45+
},
46+
});
47+
48+
const mapStateToProps = state => ({
49+
ui: state.ui,
50+
});
4151

42-
export default connect(state => ({ ui: state.ui }), mapDispatchToProps)(App);
52+
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(App));

‎src/client/containers/TodoContainer.jsx

-23
This file was deleted.

‎src/client/containers/TodoList.jsx

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import React, { PropTypes } from 'react';
2+
import Todo from 'Components/Todo';
3+
import { actions } from 'Constants';
4+
import { dispatchAction } from 'Utils/common';
5+
import { connect } from 'react-redux';
6+
7+
function TodoList({ todos, onTodoClick }) {
8+
return (
9+
<ul className="todo">
10+
<lh>To Do List</lh>
11+
{todos.map(todo => (
12+
<Todo
13+
key={todo.id}
14+
{...todo}
15+
onClick={() => { onTodoClick(todo.id); }}
16+
/>
17+
))}
18+
</ul>
19+
);
20+
}
21+
22+
TodoList.propTypes = {
23+
todos: PropTypes.array,
24+
onTodoClick: PropTypes.func,
25+
};
26+
27+
function mapStateToProps(state) {
28+
return {
29+
todos: state.todos,
30+
};
31+
}
32+
33+
function mapDispatchToProps(dispatch) {
34+
return {
35+
onTodoClick(id) {
36+
dispatch(dispatchAction(actions.TOGGLE_TODO, { id }));
37+
},
38+
};
39+
}
40+
41+
export default connect(mapStateToProps, mapDispatchToProps)(TodoList);

‎src/client/reducers/index.js

+2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
import todos from './todo.js';
22
import ui from './ui';
33
import { combineReducers } from 'redux';
4+
import { routerReducer } from 'react-router-redux';
45

56
export default combineReducers({
67
todos,
78
ui,
9+
router: routerReducer,
810
});

‎src/client/reducers/ui.js

+4-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,10 @@ import { actions } from '../constants';
33
export default function ui(state = {}, action) {
44
switch (action.type) {
55
case actions.UPDATE_UI:
6-
return Object.assign({}, state, action.payload);
6+
return {
7+
...state,
8+
...action.payload,
9+
};
710
default:
811
return state;
912
}

‎src/client/sagas/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { LOCATION_CHANGE } from 'react-router-redux';
22
import { call, takeEvery } from 'redux-saga/effects';
33

44
function* locationChangeSaga() {
5-
yield call(console.log, 'LOCATION CHANGED - LOG FROM SAGA');
5+
yield call(console.log, 'LOCATION CHANGED - EXAMPLE, THIS IS A CONSOLE LOG WITHIN A SAGA - sagas/index.js'); //eslint-disable-line
66
}
77

88
export default function* rootSaga() {

‎src/scss/_app.scss

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
body {
22
font-family: Arial, Helvetica, sans-serif;
3+
margin: 0;
34
}
45

56
body, html {
@@ -12,6 +13,7 @@ body, html {
1213
}
1314

1415
.bg {
15-
background-image: url(http://i.giphy.com/l0HlEPNgC6Sdm4dQk.gif);
16+
background-image: url(https://media.giphy.com/media/13SqcuthpI2m1q/giphy.gif);
17+
background-size: cover;
1618
}
1719

‎src/scss/_btns.scss

+6-2
Original file line numberDiff line numberDiff line change
@@ -5,21 +5,25 @@
55
display: flex;
66
align-items: center;
77
justify-content: center;
8+
font-weight: bold;
9+
cursor: pointer;
810
}
911
.btn-1{
1012
border-color: #f44242;
1113
}
1214

1315
.btn-2{
14-
border-color: #f4dc42
16+
border-color: #f4dc42;
1517
}
1618

1719
.btn-3 {
1820
border-color: #4286f4;
21+
background-color: #4286f4;
22+
color: #fff;
1923
}
2024

2125
.btn-wrap {
2226
display: flex;
2327
justify-content: space-between;
2428
align-items: center;
25-
}
29+
}

‎src/scss/_nav.scss

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
nav {
2+
background: #4d4d4d;
3+
font-family: Verdana, Geneva, Tahoma, sans-serif;
4+
font-size: 12px;
5+
font-weight: bold;
6+
display: flex;
7+
justify-content: center;
8+
9+
a {
10+
color: #fff;
11+
}
12+
}

‎src/scss/_utils.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
}
1212

1313
.wrap {
14-
width: 300px;
14+
max-width: 800px;
1515
margin: auto;
1616
}
1717

@@ -29,4 +29,4 @@
2929

3030
.full-width {
3131
width: 100%;
32-
}
32+
}

‎src/scss/styles.scss

+2-1
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,5 @@
22
@import "utils";
33
@import "view";
44
@import "flex";
5-
@import "app";
5+
@import "app";
6+
@import "nav";

‎src/scss/views/_todo.scss

+1-4
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,15 @@
22
&, * {
33
box-sizing: border-box;
44
}
5-
background-color: #fff;
65
display: block;
76
max-width: 500px;
87
width: 100%;
9-
margin: auto;
8+
margin: 20px auto 50px;
109
border: 1px solid #eee;
1110
border-radius: 5px;
1211
padding: 0;
1312
lh {
14-
background-color: salmon;
1513
text-align: center;
16-
color: #fff;
1714
}
1815

1916
li, lh {

0 commit comments

Comments
 (0)