Last active
March 26, 2017 01:08
-
-
Save non117/76a8dc9c1fd8e9014cc40146c2b62377 to your computer and use it in GitHub Desktop.
redux design components
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, { PropTypes } from 'react'; | |
import { connect } from 'react-redux'; | |
import { bindActionCreators } from 'redux'; | |
import AddButton from './AddButton.jsx'; | |
import TaskFrom from './TaskForm.jsx'; | |
import TaskItem from './TaskItem.jsx'; | |
import * as duck from '../../ducks/Todo'; | |
export class TodoApp extends React.PureComponent { | |
static propTypes = { | |
state: PropTypes.object.isRequired, | |
createTask: PropTypes.func.isRequired, | |
updateTask: PropTypes.func.isRequired, | |
checkTask: PropTypes.func.isRequired, | |
submitTask: PropTypes.func.isRequired, | |
changeInputTarget: PropTypes.func.isRequired, | |
} | |
static childContextTypes = { | |
createTask: PropTypes.func, | |
updateTask: PropTypes.func, | |
checkTask: PropTypes.func, | |
submitTask: PropTypes.func, | |
changeInputTarget: PropTypes.func, | |
} | |
getChildContext() { | |
const { state, ...actions } = this.props; | |
return { ...actions }; | |
} | |
renderTasks() { | |
const { state } = this.props; | |
return state.getIncompleteTasks().map( | |
task => { | |
if (task.id === state.inputTarget) { | |
return <TaskFrom key={task.id} task={task} /> | |
} | |
return <TaskItem key={task.id} task={task} /> | |
} | |
); | |
} | |
renderCompleteTasks() { | |
const { state } = this.props; | |
return state.getCompleteTasks().map( | |
task => <TaskItem key={task.id} task={task} /> | |
); | |
} | |
render() { | |
return( | |
<div> | |
<h2>current tasks</h2> | |
<table> | |
<thead> | |
<tr> | |
<th>id</th> | |
<th>name</th> | |
<th>deadline</th> | |
<th /> | |
</tr> | |
</thead> | |
<tbody> | |
{ this.renderTasks() } | |
</tbody> | |
</table> | |
<AddButton /> | |
<h2>complete tasks</h2> | |
<table> | |
<thead> | |
<tr> | |
<th>id</th> | |
<th>name</th> | |
<th>deadline</th> | |
<th /> | |
</tr> | |
</thead> | |
<tbody> | |
{ this.renderCompleteTasks() } | |
</tbody> | |
</table> | |
</div> | |
); | |
} | |
} | |
function mapStateToProps(state) { | |
return { state: state.$$todoState }; | |
} | |
function mapDispatchProps(dispatch) { | |
return { | |
...bindActionCreators(duck.actions, dispatch), | |
}; | |
} | |
export const TodoContainer = connect(mapStateToProps, mapDispatchProps)(TodoApp); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, { PropTypes } from 'react'; | |
import { Task } from '../../models'; | |
export default class TaskItem extends React.PureComponent { | |
static propTypes = { | |
task: Task.PropTypes.isRequired, | |
} | |
static contextTypes = { | |
changeInputTarget: PropTypes.func, | |
checkTask: PropTypes.func, | |
} | |
renderCheckButton() { | |
const { task } = this.props; | |
const { checkTask } = this.context; | |
return <button onClick={() => checkTask(task.id)}>✅</button> | |
} | |
render() { | |
const { task } = this.props; | |
const { changeInputTarget } = this.context; | |
return ( | |
<tr onClick={() => changeInputTarget(task.id)}> | |
<td>{task.id}</td> | |
<td>{task.name}</td> | |
<td>{task.deadline}</td> | |
<td> | |
{ task.checked ? "✅" : this.renderCheckButton() } | |
</td> | |
</tr> | |
); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment