Content

1. Demo
2. Features
3. Realizing
4. Difficulties

Demo

I Must Do - a Web TODO-application on React.js.

Features

Basic features:

• viewing the task list;
• adding, editing and deleting tasks;
• view detailed information about a task.

Specific features:

• searching tasks by name;
• setting the task completion status (waiting, in progress, complete)
• dragging the border between the task list and the view & edit form
• counting the total number of tasks and each type of tasks separately

Realizing

In the process of creating this application, I have learned the base of React.js in practice :

• functional components;
• react-hooks (useState, useEffect, useRef);
• Context API;
• JSX;
• css-modules.

I also used the JavaScript Fetch API to get tasks data from a fake json server when the application is starting.
I used SASS (SCSS) for creating the styles of react-components as a scss-modules.

Difficulties

A particular difficulty for me was the dragging the border between the task list and the view & edit form.
I realized it with Resizer-element and events onDrugStart and onDrug

function Resizer({ className, resizableElem }) {

	let startPosition, tasksWidth

	// creating an element for changing drag effect picture
	const dragImg = document.createElement('canvas');
	dragImg.classList.add('drag-img')

	// get coordinates and width values at the start of resizing
	const startResize = e => {
		e.stopPropagation()
		startPosition = e.clientX // X of resizer element
		tasksWidth = resizableElem.current.offsetWidth // current width of Resizer element
		e.dataTransfer.setDragImage(dragImg, 0, 0) // set drag image
		e.target.style.cursor = 'col-resize'
	}

	// change width when border is moving
	const resize = e => {
		resizableElem.current.style.width = `${tasksWidth + e.clientX - startPosition}px`
	}

	return (
		<div
	    className={ className }
      draggable={ true }
      onDragStart={ startResize }
      onDrag={ resize }
    />
	)
}

export default Resizer