19 - To-Do List with Task Categorization

Description

Create a React application that allows users to create and manage tasks with titles and descriptions, assign tasks to specific categories, view tasks organized by category, and mark tasks as complete or incomplete.

Algorithm

1. Create a state variable to store the tasks and categories.

2. Define a function to handle the creation of new tasks.

3. Define a function to handle the assignment of tasks to categories.

4. Define a function to handle the marking of tasks as complete or incomplete.

5. Render the tasks organized by category.

Classes

• Task: A component that represents a single task.

• Category: A component that represents a single category.

• TaskList: A component that renders the list of tasks organized by category.

Code

Task.js

import React from 'react';

function Task({ task, onTaskComplete }) {
  return (
    <div>
      <h2>{task.title}</h2>
      <p>{task.description}</p>
      <button onClick={() => onTaskComplete(task)}>Mark as Complete</button>
    </div>
  );
}

export default Task;

Category.js

import React from 'react';

function Category({ category, tasks }) {
  return (
    <div>
      <h2>{category.name}</h2>
      <ul>
        {tasks.map((task) => (
          <li key={task.id}>
            <Task task={task} onTaskComplete={onTaskComplete} />
          </li>
        ))}
      </ul>
    </div>
  );
}

export default Category;

TaskList.js

import React, { useState } from 'react';
import Task from './Task';
import Category from './Category';

function TaskList() {
  const [tasks, setTasks] = useState([
    { id: 1, title: 'Task 1', description: 'This is task 1', category: 'Category 1' },
    { id: 2, title: 'Task 2', description: 'This is task 2', category: 'Category 2' },
    { id: 3, title: 'Task 3', description: 'This is task 3', category: 'Category 1' },
  ]);
  const [categories, setCategories] = useState([
    { name: 'Category 1', tasks: [tasks[0], tasks[2]] },
    { name: 'Category 2', tasks: [tasks[1]] },
  ]);

  const handleTaskComplete = (task) => {
    setTasks(
      tasks.map((t) =>
        t.id === task.id ? { ...t, completed: true } : t
      )
    );
  };

  return (
    <div>
      {categories.map((category) => (
        <Category
          key={category.name}
          category={category}
          tasks={category.tasks}
        />
      ))}
    </div>
  );
}

export default TaskList;

Explanation

The Task component represents a single task, and the Category component represents a single category. The TaskList component renders the list of tasks organized by category. The user can create new tasks, assign tasks to categories, and mark tasks as complete or incomplete.

Possible Future Enhancements

• Add more features to the task management system (e.g., due dates, priorities).

• Improve the user interface and user experience.

• Add authentication and authorization.

• Allow users to create and manage their own categories.

• Display the number of completed and incomplete tasks for each category.