React Priority Queue Management System

This challenge involves building a React component that simulates a priority queue. A priority queue is a data structure where elements are served based on their priority. This is useful in various applications, such as task scheduling, event processing, and network routing, where certain operations need to be handled before others.

Problem Description

Your task is to create a React component that allows users to add items to a priority queue and visualize them. Items in the queue should be displayed in descending order of their priority (highest priority first).

Key Requirements:

• Add Item: A form to input an item's description and its priority level (a number).
• Display Queue: A list displaying all items currently in the priority queue.
• Priority Ordering: Items must be displayed strictly in order of priority, from highest to lowest. If two items have the same priority, their relative order can be arbitrary or based on insertion order (your choice, but be consistent).
• Remove Highest Priority: A button to remove the item with the highest priority from the queue.
• Clear Queue: A button to remove all items from the queue.
• State Management: Use React's state management (e.g., useState, useReducer) to manage the queue's data.
• TypeScript: All code should be written in TypeScript.

Expected Behavior: When items are added, they should immediately be placed in the correct position within the displayed queue based on their priority. When the "Remove Highest Priority" button is clicked, the item at the top of the queue should be removed, and the queue should re-render.

Edge Cases:

• Adding an item with a negative priority.
• Adding an item with zero priority.
• Attempting to remove from an empty queue.

Examples

Example 1: Adding Items

Input State: Queue: []

User Action:

1. Adds item "Task A" with priority 5.
2. Adds item "Task B" with priority 10.
3. Adds item "Task C" with priority 3.

Output State (after all additions): Queue:

[
  { id: 'some-unique-id-2', description: 'Task B', priority: 10 },
  { id: 'some-unique-id-1', description: 'Task A', priority: 5 },
  { id: 'some-unique-id-3', description: 'Task C', priority: 3 }
]

(Note: IDs are unique identifiers for each item)

Explanation: Items are displayed in descending order of priority. "Task B" (priority 10) is first, followed by "Task A" (priority 5), and then "Task C" (priority 3).

Example 2: Removing Highest Priority

Input State: Queue:

[
  { id: 'some-unique-id-2', description: 'Task B', priority: 10 },
  { id: 'some-unique-id-1', description: 'Task A', priority: 5 },
  { id: 'some-unique-id-3', description: 'Task C', priority: 3 }
]

User Action: Clicks the "Remove Highest Priority" button.

Output State: Queue:

[
  { id: 'some-unique-id-1', description: 'Task A', priority: 5 },
  { id: 'some-unique-id-3', description: 'Task C', priority: 3 }
]

Explanation: "Task B" with the highest priority (10) was removed. The remaining items are still ordered by priority.

Example 3: Handling Same Priorities

Input State: Queue: []

User Action:

1. Adds item "Urgent Alert" with priority 8.
2. Adds item "Important Notification" with priority 8.

Output State (after all additions): Queue:

[
  { id: 'some-unique-id-1', description: 'Urgent Alert', priority: 8 },
  { id: 'some-unique-id-2', description: 'Important Notification', priority: 8 }
]

(Or the order of "Urgent Alert" and "Important Notification" could be swapped, depending on insertion order implementation).

Explanation: When priorities are the same, the items are placed next to each other. The specific order between them is less critical as long as they appear together at their priority level.

Constraints

• Item priority will be an integer.
• Item description will be a non-empty string.
• The queue should be able to handle at least 100 items without significant performance degradation.
• Unique IDs for each item must be generated (e.g., using uuid or a simple counter).

Notes

Consider how to efficiently insert new items into the sorted queue to maintain the priority order. You might want to define an interface for your queue items. For generating unique IDs, consider using a library like uuid or a simple counter if you prefer to avoid external dependencies for this exercise.