Hone logo
Hone
Problems

React Priority Queue Component

This challenge asks you to build a reusable React component that implements a priority queue. Priority queues are essential for managing tasks or items based on their importance, ensuring that the highest priority items are processed first. This component will allow users to add, remove, and view items in the queue, ordered by their assigned priority.

Problem Description

You are tasked with creating a PriorityQueue React component that manages a collection of items based on their priority. The component should allow users to:

  • Add Items: Add new items to the queue, each with a value and a priority (a numerical value, lower numbers indicating higher priority).
  • Remove Highest Priority Item: Remove and return the item with the highest priority (lowest priority number) from the queue.
  • View Queue: Display the current items in the queue, ordered by priority (highest priority at the top).
  • Clear Queue: Remove all items from the queue.

The component should maintain the queue's internal order automatically after each operation. The UI should clearly display the queue's contents and allow for adding new items.

Key Requirements:

  • The component must be written in TypeScript.
  • The component should be reusable and accept props for initial data and styling.
  • The internal data structure for the priority queue should be efficient for adding and removing items. A heap-based implementation is recommended for optimal performance.
  • The UI should be responsive and user-friendly.

Expected Behavior:

  • When an item is added, it should be inserted into the queue at the correct position based on its priority.
  • When the highest priority item is removed, the queue should be reordered to maintain the priority order.
  • The UI should reflect the current state of the queue accurately.
  • Error handling should be implemented to prevent unexpected behavior (e.g., attempting to remove from an empty queue).

Edge Cases to Consider:

  • Empty queue: Handle attempts to remove items from an empty queue gracefully (e.g., display a message, return undefined).
  • Duplicate priorities: Items with the same priority should be handled consistently (e.g., maintain insertion order).
  • Invalid priority values: Consider how to handle invalid priority values (e.g., negative numbers, non-numeric values). You can choose to throw an error or silently ignore them.
  • Large number of items: Ensure the component remains performant with a large number of items in the queue.

Examples

Example 1:

Input: Initial queue: []
User adds: { value: "Task A", priority: 1 }
User adds: { value: "Task B", priority: 3 }
User adds: { value: "Task C", priority: 2 }
Output: Queue: [{value: "Task A", priority: 1}, {value: "Task C", priority: 2}, {value: "Task B", priority: 3}]
Explanation: Items are added to the queue and sorted by priority.

Example 2:

Input: Queue: [{value: "Task A", priority: 1}, {value: "Task B", priority: 3}, {value: "Task C", priority: 2}]
User removes highest priority item.
Output: Queue: [{value: "Task C", priority: 2}, {value: "Task B", priority: 3}]
Explanation: "Task A" is removed, and the queue is reordered.

Example 3: (Edge Case)

Input: Queue: []
User attempts to remove highest priority item.
Output: Message displayed: "Queue is empty."
Explanation: Handles the edge case of attempting to remove from an empty queue.

Constraints

  • Priority Values: Priority values should be numbers.
  • Number of Items: The queue should be able to handle at least 100 items without significant performance degradation.
  • UI Responsiveness: The UI should remain responsive even when adding or removing items from a large queue.
  • Component Reusability: The component should be designed to be easily reusable in different parts of an application.

Notes

  • Consider using a heap data structure for efficient priority queue implementation. Libraries like heapq (if you're comfortable with it and can bridge it to TypeScript) can be helpful, but implementing your own heap is a good exercise.
  • Think about how to manage the component's state effectively using React's state management features (e.g., useState).
  • Focus on creating a clean, well-documented, and testable component.
  • The UI can be simple; the primary focus is on the priority queue logic. A basic list display is sufficient.
  • Consider how to handle potential errors gracefully and provide informative feedback to the user.
Loading editor...
typescript