Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- const tasksListsArr = Object.entries(this.state.tasks).map(list => {
- return (
- <TasksList
- key={list[0]}
- listrole={list[0]}
- listTitle={this.state.Lists[list[0]]}
- tasks={list[1]}
- listTextChangedHandler={event => this.listTextChangedHandler(list[0], event)}
- addTaskHandler={() => this.addTaskHandler(list[0])}
- taskDeleteHandler={this.taskDeleteHandler}
- moveTaskHandler={this.moveTaskHandler}
- taskEditHandler={this.taskEditHandler}
- taskEditApprove={this.taskEditApprove}
- />
- )
- })
- import React from "react"
- import classes from "./TasksList.module.css"
- const TasksList = props => {
- const tasks = props.tasks.map(task => {
- const buttonLeft =
- !task.isEdit && (props.listrole === "inprogress" || props.listrole === "done") ? (
- <button onClick={() => props.moveTaskHandler(task.id, "left")}>left</button>
- ) : null
- const buttonRight =
- !task.isEdit && (props.listrole === "inprogress" || props.listrole === "backlog") ? (
- <button onClick={() => props.moveTaskHandler(task.id, "right")}>right</button>
- ) : null
- const taskUtils = task.isEdit ? null : (
- <div>
- <span onClick={() => props.taskDeleteHandler(props.listrole, task.id)}>X</span>
- <span onClick={() => props.taskEditHandler(props.listrole, task.id)}>edit</span>
- </div>
- )
- const taskContent = task.isEdit ? (
- <div>
- <input
- type='text'
- onChange={event => props.listTextChangedHandler(props.listrole, event)}
- />
- <button onClick={props.taskEditApprove(props.listrole, task.id)}>OK</button>
- </div>
- ) : (
- <div>
- <div>{task.text}</div>
- </div>
- )
- return (
- <div key={task.id} className={classes.Task}>
- {buttonLeft}
- {taskContent}
- {buttonRight}
- {taskUtils}
- </div>
- )
- })
- console.log(tasks)
- return (
- <div className={classes.List}>
- <h2 className={classes.ListTitle}> {props.listTitle} </h2>
- <input type='text' onChange={props.listTextChangedHandler} placeholder='Add task...' />
- <button onClick={props.addTaskHandler}>+</button>
- <div className={classes.TasksList}>{tasks}</div>
- </div>
- )
- }
Add Comment
Please, Sign In to add comment