Create a gist now

Instantly share code, notes, and snippets.

@non117 /TaskItem.jsx
Last active Mar 26, 2017

What would you like to do?
redux design components
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);
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