React URL Parameter Management with useSearchParams

The useSearchParams hook in React provides a way to access and manipulate the query parameters in the URL. This challenge asks you to build a component that utilizes useSearchParams to read, update, and display URL parameters, demonstrating a practical application of this hook for managing application state based on the URL. Understanding how to work with URL parameters is crucial for building dynamic and shareable web applications.

Problem Description

You are tasked with creating a React component that manages URL parameters related to a product search. The component should:

1. Read and Display Parameters: Initially, display the values of the search and sort query parameters from the URL. If either parameter is missing, display a default value (e.g., "All" for search and "Relevance" for sort).
2. Update Parameters: Provide input fields for the user to modify the search and sort parameters. When the user changes the input values, the component should update the URL with the new parameter values.
3. Handle Empty Values: If a user clears an input field, the corresponding URL parameter should be removed from the URL.
4. Maintain Other Parameters: The component should only modify the search and sort parameters. Any other query parameters present in the URL should be preserved.

Expected Behavior:

• The component should render the current values of search and sort from the URL.
• Changing the input fields should immediately update the URL in the browser.
• Clearing an input field should remove the corresponding parameter from the URL.
• The component should not interfere with other query parameters.

Examples

Example 1:

Input: Initial URL: `http://localhost:3000/?search=shoes&sort=price`
Output:
Search: shoes
Sort: price

Explanation: The component reads the search and sort parameters from the URL and displays them.

Example 2:

Input: Initial URL: `http://localhost:3000/?search=hats&sort=name&page=2`
Output:
Search: hats
Sort: name

Explanation: The component reads search and sort and displays them, preserving the page parameter.

Example 3:

Input: Initial URL: `http://localhost:3000/`
Output:
Search: All
Sort: Relevance

Explanation: Since search and sort are not present in the URL, the default values are displayed.

Example 4:

Input: User clears the "Search" input field after initial URL: `http://localhost:3000/?search=shoes&sort=price`
Output: Updated URL: `http://localhost:3000/?sort=price`
Displayed:
Search: All
Sort: price

Explanation: Clearing the "Search" input removes the search parameter from the URL.

Constraints

• The component must be written in TypeScript.
• You must use the useSearchParams hook.
• The component should handle URL updates efficiently without causing unnecessary re-renders.
• The component should not rely on external libraries beyond React and TypeScript.
• The input fields should be standard HTML <input> elements.

Notes

• Consider using the useState hook to manage the local state of the input fields.
• The useSearchParams hook returns a [searchParams, setSearchParams] tuple. searchParams is a URLSearchParams object, and setSearchParams is a function to update the URL.
• When using setSearchParams, you can pass a new URLSearchParams object or an object with key-value pairs to update the parameters.
• Think about how to handle the case where the user enters an empty string in an input field – this should result in the parameter being removed from the URL.
• Focus on creating a clean and maintainable component that effectively demonstrates the use of useSearchParams.