Skip to content

Instantly share code, notes, and snippets.

@pradeep1991singh
Created August 24, 2020 11:06
Show Gist options
  • Save pradeep1991singh/6acf39cdc02ef287925e91729254a002 to your computer and use it in GitHub Desktop.
Save pradeep1991singh/6acf39cdc02ef287925e91729254a002 to your computer and use it in GitHub Desktop.
kanban-board.js
import React, { Component } from 'react';
import './index.css';
export default class KanbanBoard extends Component {
constructor() {
super();
// Each task is uniquely identified by its name.
// Therefore, when you perform any operation on tasks, make sure you pick tasks by names (primary key) instead of any kind of index or any other attribute.
this.state = {
tasks: [
{ name: '1', stage: 0 },
{ name: '2', stage: 0 },
],
newTask: '',
};
this.stagesNames = ['Backlog', 'To Do', 'Ongoing', 'Done'];
}
handleChange = (event) => {
this.setState({ newTask: event.target.value });
};
createTask = (name) => {
if (this.state.newTask !== '') {
let tasks = this.state.tasks;
tasks.push({ name: this.state.newTask, stage: 0 });
this.setState({ tasks, newTask: '' });
}
};
arrowForward = (task) => {
if (task.stage >= 0 && task.stage < 3) {
let tasks = this.state.tasks;
var taskIdx = tasks.findIndex((t) => t.name === task.name);
tasks[taskIdx].stage++;
this.setState({ tasks });
}
};
arrowBack = (task) => {
if (task.stage > 0 && task.stage <= 3) {
let tasks = this.state.tasks;
var taskIdx = tasks.findIndex((t) => t.name === task.name);
tasks[taskIdx].stage--;
this.setState({ tasks });
}
};
deleteTask = (task) => {
if (task.name) {
let tasks = this.state.tasks;
tasks = tasks.filter((t) => t.name !== task.name);
this.setState({ tasks });
}
};
render() {
const { tasks } = this.state;
let stagesTasks = [];
for (let i = 0; i < this.stagesNames.length; ++i) {
stagesTasks.push([]);
}
for (let task of tasks) {
const stageId = task.stage;
stagesTasks[stageId].push(task);
}
return (
<div className="mt-20 layout-column justify-content-center align-items-center">
<section className="mt-50 layout-row align-items-center justify-content-center">
<input
name="newTask"
value={this.state.newTask}
id="create-task-input"
type="text"
className="large"
placeholder="New task name"
data-testid="create-task-input"
onChange={this.handleChange}
/>
<button type="submit" className="ml-30" data-testid="create-task-button" onClick={this.createTask}>
Create task
</button>
</section>
<div className="mt-50 layout-row">
{stagesTasks.map((tasks, i) => {
return (
<div className="card outlined ml-20 mt-0" key={`${i}`}>
<div className="card-text">
<h4>{this.stagesNames[i]}</h4>
<ul className="styled mt-50" data-testid={`stage-${i}`}>
{tasks.map((task, index) => {
return (
<li className="slide-up-fade-in" key={`${i}${index}`}>
<div className="li-content layout-row justify-content-between align-items-center">
<span data-testid={`${task.name.split(' ').join('-')}-name`}>
{task.name}
</span>
<div className="icons">
<button
className="icon-only x-small mx-2"
data-testid={`${task.name.split(' ').join('-')}-back`}
onClick={() => this.arrowBack(task)}
>
<i className="material-icons">arrow_back</i>
</button>
<button
className="icon-only x-small mx-2"
data-testid={`${task.name
.split(' ')
.join('-')}-forward`}
onClick={() => this.arrowForward(task)}
>
<i className="material-icons">arrow_forward</i>
</button>
<button
className="icon-only danger x-small mx-2"
data-testid={`${task.name.split(' ').join('-')}-delete`}
onClick={() => this.deleteTask(task)}
>
<i className="material-icons">delete</i>
</button>
</div>
</div>
</li>
);
})}
</ul>
</div>
</div>
);
})}
</div>
</div>
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment