React-Based Task Scheduler

This challenge asks you to build a simple task scheduler using React and TypeScript. The scheduler should allow users to add tasks with deadlines, and then display the tasks in a prioritized order based on their deadlines, simulating a basic scheduling algorithm. This is a common problem in many applications, from project management tools to operating systems.

Problem Description

You need to create a React component that manages a list of tasks. Each task has a title (string) and a deadline (Date object). The component should allow users to:

1. Add Tasks: Provide an input field for the task title and a date picker for the deadline. Upon submission, a new task object should be added to the task list.
2. Display Tasks: Display the tasks in a sorted order based on their deadlines (earliest deadline first). Each task should be displayed with its title and deadline.
3. Clear All Tasks: Provide a button to remove all tasks from the list.

The component should maintain the task list in its state and re-render whenever the task list changes. The sorting should be performed automatically whenever a new task is added or a task is removed.

Key Requirements:

• Use React and TypeScript.
• Implement a state management solution (useState is sufficient for this challenge).
• Sort tasks by deadline in ascending order.
• Provide a user interface for adding tasks and clearing the list.
• Handle invalid date inputs gracefully (e.g., display an error message).

Expected Behavior:

• When a new task is added, it should be immediately sorted into the correct position in the list.
• The displayed list should always be sorted by deadline.
• The "Clear All Tasks" button should remove all tasks from the list and update the display accordingly.
• The date picker should allow users to select a valid date. If an invalid date is entered, an appropriate error message should be displayed.

Edge Cases to Consider:

• Empty task list.
• Tasks with the same deadline (should maintain the original order in this case).
• Invalid date input (e.g., future dates beyond a reasonable limit, or non-date input).
• Large number of tasks (consider performance implications, although this is not a primary focus for this challenge).

Examples

Example 1:

Input:  Initial task list: []. User adds task "Grocery Shopping" with deadline "2024-12-25" and task "Pay Bills" with deadline "2024-12-20".
Output:  Displayed task list: ["Pay Bills" (2024-12-20), "Grocery Shopping" (2024-12-25)]
Explanation: The tasks are sorted by deadline, with "Pay Bills" appearing before "Grocery Shopping".

Example 2:

Input: Task list: ["Laundry" (2024-12-15), "Grocery Shopping" (2024-12-25)]. User adds task "Book Appointment" with deadline "2024-12-25".
Output: Displayed task list: ["Laundry" (2024-12-15), "Grocery Shopping" (2024-12-25), "Book Appointment" (2024-12-25)]
Explanation: The new task is added and the list remains sorted. Tasks with the same deadline maintain their original order.

Example 3: (Edge Case)

Input: Task list: ["Laundry" (2024-12-15)]. User enters an invalid date (e.g., "abc") for the deadline.
Output: An error message is displayed indicating that the date is invalid. The task is not added to the list.
Explanation: The component handles invalid date input gracefully.

Constraints

• Date Range: The date picker should allow dates within the next 365 days.
• Task Title Length: The task title should be limited to a maximum of 50 characters.
• Performance: The sorting algorithm should be efficient enough to handle a list of up to 100 tasks without noticeable performance degradation. (Simple sorting algorithms like insertion sort are acceptable for this scale).
• Input Format: Task titles must be strings. Deadlines must be Date objects.

Notes

• You can use any UI library for the date picker, but ensure it's compatible with TypeScript. Consider using a library like react-datepicker.
• Focus on the core scheduling logic and UI functionality. Advanced features like task editing or drag-and-drop reordering are not required.
• Prioritize clear and readable code. Use meaningful variable names and comments where necessary.
• Consider how you will handle the state updates to ensure the component re-renders correctly when the task list changes.
• Think about how to best structure your component to keep it organized and maintainable.