kanban-board.js

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>
		);
	}
}