I want you to become a senior frontend developer with 10 years of experience. As a senior developer, you already mastered the best practices and can create efficient and scalable applications. Your task is to refactor and fix Tasks Logger application. The application does the following.

Allows user to input task title
Allows user to select task type. Either Front-End or Back-End
If task type is Front-End it should automatically add to Front-End Tasks container else, add to Back-End container when the user click 'Add'. Each task should have a progress bar.
Delete button beside each task to delete the task
When user click on the task, display a modal where user can input and add subtask. The modal should also display The Task title and information of the last added task example: Last Added: April 13, 2023 (12:03pm)
Each subtask should have option 'Pending, Ongoing, and Completed' beside it and Change the background color of subtask depending on its status.
Use local storage so that when a user reload the page, the tasks and subtasks should still be there. The progress bar of each task depends on the average % of its subtasks' status. (100% Complete, 50% Ongoing, 0% Pending)
You can use the following React Hooks: useState, useEffect, useContext, useReducer
Perform TDD with Mocha and Chai

You can ask me for clarifying questions before you start.

```
import React, { useState } from 'react';
import TaskContainer from './components/TaskContainer';
import SubtaskModal from './components/SubtaskModal';
import { v4 as uuidv4 } from 'uuid';

function App() {
  const [tasks, setTasks] = useState([]);
  const [showSubtaskModal, setShowSubtaskModal] = useState(false);
  const [selectedTask, setSelectedTask] = useState(null);

  const handleAddTask = (title, type) => {
    const newTask = {
      id: uuidv4(),
      title,
      type,
      subtasks: [],
    };
    setTasks([...tasks, newTask]);
  };

  const handleDeleteTask = (taskId) => {
    setTasks(tasks.filter((task) => task.id !== taskId));
  };

  const handleShowSubtaskModal = (taskId) => {
    setSelectedTask(tasks.find((task) => task.id === taskId));
    setShowSubtaskModal(true);
  };

  const handleHideSubtaskModal = () => {
    setSelectedTask(null);
    setShowSubtaskModal(false);
  };

  const handleAddSubtask = (taskId, subtask) => {
    const updatedTasks = tasks.map((task) => {
      if (task.id === taskId) {
        const updatedSubtasks = [...task.subtasks, { ...subtask, id: uuidv4() }];
        return { ...task, subtasks: updatedSubtasks };
      }
      return task;
    });
    setTasks(updatedTasks);
  };

  return (
    <div className="container mx-auto p-6">
      <h1 className="mb-6 text-3xl font-bold">Task Logger</h1>
      <div className="flex justify-end mb-6">
        <button onClick={() => handleShowSubtaskModal(null)} className="px-4 py-2 bg-blue-500 text-white rounded-md">
          Add Task
        </button>
      </div>
      <TaskContainer tasks={tasks} onTaskDelete={handleDeleteTask} onShowSubtaskModal={handleShowSubtaskModal} />
      {showSubtaskModal && <SubtaskModal task={selectedTask} onCloseModal={handleHideSubtaskModal} onAddSubtask={handleAddSubtask} />}
    </div>
  );
}

export default App;

import React from 'react';

function Task({ task, onTaskDelete }) {
  const getProgressBarColor = (averageStatus) => {
    if (averageStatus === 100) {
      return 'bg-green-500';
    } else if (averageStatus >= 50) {
      return 'bg-yellow-500';
    } else {
      return 'bg-red-500';
    }
  };

  const handleDeleteClick = () => {
    onTaskDelete(task.id);
  };

  const subtaskStatuses = task.subtasks.map((subtask) => subtask.status);
  const averageStatus = subtaskStatuses.length > 0 ? Math.round(subtaskStatuses.reduce((a, b) => a + b) / subtaskStatuses.length) : 0;

  return (
    <div className="flex items-center justify-between mb-4">
      <div className="flex items-center space-x-4">
        <div className="flex-shrink-0 w-4 h-4 rounded-full">
          <div className={getProgressBarColor(averageStatus)} style={{ width: `${averageStatus}%`, height: '100%' }}></div>
        </div>
        <p className="font-bold">{task.title}</p>
      </div>
      <button onClick={handleDeleteClick} className="px-2 py-1 text-sm text-red-500 underline">
        Delete
      </button>
    </div>
  );
}

export default Task;

import React, { useState } from 'react';

function TaskInput({ onAddTask }) {
  const [taskTitle, setTaskTitle] = useState('');
  const [taskType, setTaskType] = useState('');

  const handleTitleChange = (event) => {
    setTaskTitle(event.target.value);
  };

  const handleTypeChange = (event) => {
    setTaskType(event.target.value);
  };

	const handleAddTask = () => {
	  if (taskTitle && taskType) {
		onAddTask(taskTitle, taskType);
		setTaskTitle('');
		setTaskType('');
	  }
	};

  return (
    <div className="flex items-center justify-between mb-4">
      <input
        type="text"
        placeholder="Enter task title"
        value={taskTitle}
        onChange={handleTitleChange}
        className="w-2/3 px-3 py-2 border border-gray-400 rounded-md"
      />
      <div className="flex items-center space-x-4">
        <label>
          <input
            type="radio"
            name="task-type"
            value="front-end"
            checked={taskType === 'front-end'}
            onChange={handleTypeChange}
            className="mr-2"
          />
          Front-End
        </label>
        <label>
          <input
            type="radio"
            name="task-type"
            value="back-end"
            checked={taskType === 'back-end'}
            onChange={handleTypeChange}
            className="mr-2"
          />
          Back-End
        </label>
        <button onClick={handleAddTask} className="px-4 py-2 bg-blue-500 text-white rounded-md">
          Add
        </button>
      </div>
    </div>
  );
}

export default TaskInput;

import React from 'react';
import Task from './Task.jsx';

function TaskContainer({ tasks, onTaskDelete }) {
  const frontEndTasks = tasks.filter((task) => task.type === 'front-end');
  const backEndTasks = tasks.filter((task) => task.type === 'back-end');

  return (
    <div className="flex justify-between">
      <div className="w-1/2 mr-4">
        <h2 className="mb-2 font-bold text-lg">Front-End Tasks</h2>
        {frontEndTasks.map((task) => (
          <Task key={task.id} task={task} onTaskDelete={onTaskDelete} />
        ))}
      </div>
      <div className="w-1/2">
        <h2 className="mb-2 font-bold text-lg">Back-End Tasks</h2>
        {backEndTasks.map((task) => (
          <Task key={task.id} task={task} onTaskDelete={onTaskDelete} />
        ))}
      </div>
    </div>
  );
}

export default TaskContainer;

import React from 'react';

function Subtask({ subtask }) {
  const handleStatusChange = (event) => {
    // TODO: Implement status update logic
  };

  return (
    <div className="flex items-center justify-between mb-2">
      <div className="flex items-center space-x-2">
        <input
          type="checkbox"
          checked={subtask.status === 100}
          onChange={handleStatusChange}
          className="w-4 h-4 border border-gray-400 rounded-sm"
        />
        <p>{subtask.title}</p>
      </div>
      <div className="flex-shrink-0 w-4 h-4 rounded-full">
        <div className="bg-gray-400" style={{ width: `${subtask.status}%`, height: '100%' }}></div>
      </div>
    </div>
  );
}

export default Subtask;

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

function SubtaskModal({ task, onCloseModal, onAddSubtask }) {
  const [subtaskTitle, setSubtaskTitle] = useState('');

  const handleTitleChange = (event) => {
    setSubtaskTitle(event.target.value);
  };

  const handleAddSubtask = () => {
    if (subtaskTitle) {
      onAddSubtask(task.id, { title: subtaskTitle, status: 0 });
      setSubtaskTitle('');
    }
  };

  return (
    <div className="fixed top-0 left-0 w-full h-full flex items-center justify-center">
      <div className="absolute top-0 left-0 w-full h-full bg-gray-900 opacity-75"></div>
      <div className="z-10 w-full max-w-md p-6 mx-auto bg-white rounded-md shadow-lg">
        <div className="flex items-center justify-between mb-4">
          <h2 className="font-bold text-lg">{task.title}</h2>
          <button onClick={onCloseModal} className="px-2 py-1 text-sm font-medium text-gray-500 hover:text-gray-800">
            Close
          </button>
        </div>
        <div className="mb-4">
          {task.subtasks.map((subtask) => (
            <Subtask key={subtask.id} subtask={subtask} />
          ))}
        </div>
        <div className="flex items-center space-x-4">
          <input
            type="text"
            placeholder="Enter subtask title"
            value={subtaskTitle}
            onChange={handleTitleChange}
            className="w-2/3 px-3 py-2 border border-gray-400 rounded-md"
          />
          <button onClick={handleAddSubtask} className="px-4 py-2 bg-blue-500 text-white rounded-md">
            Add
          </button>
        </div>
      </div>
    </div>
  );
}

export default SubtaskModal;
```