React Notification Hook with TypeScript

This challenge asks you to create a reusable useNotification hook in React using TypeScript. This hook will manage a notification state (message and type) and provide functions to display and clear notifications, enhancing user experience by providing timely feedback within your application. It's a common pattern for handling success, error, or informational messages.

Problem Description

You need to implement a useNotification hook that provides a centralized way to manage and display notifications within a React application. The hook should maintain the following state:

• message: A string representing the notification message. Initially, this should be an empty string.
• type: A string representing the notification type (e.g., "success", "error", "warning", "info"). Initially, this should be an empty string.

The hook should expose the following functions:

• showNotification(message: string, type: "success" | "error" | "warning" | "info"): This function takes a message and a type as arguments and updates the notification state accordingly.
• clearNotification(): This function resets the notification state, clearing both the message and the type.

The hook should also return an object containing:

• notification: An object with message and type properties reflecting the current notification state.
• showNotification: The function to display a notification.
• clearNotification: The function to clear the notification.

Key Requirements:

• The hook must be written in TypeScript.
• The type parameter in showNotification must be restricted to the specified string literal types ("success", "error", "warning", "info").
• The hook should use the useState hook to manage the notification state.
• The returned notification object should accurately reflect the current state.

Expected Behavior:

1. Initially, notification.message should be an empty string and notification.type should be an empty string.
2. Calling showNotification("Success!", "success") should update notification.message to "Success!" and notification.type to "success".
3. Calling clearNotification() should reset notification.message to an empty string and notification.type to an empty string.
4. Subsequent calls to showNotification should override the previous notification.

Edge Cases to Consider:

• What happens if showNotification is called with an empty message? (Should still update the type).
• What happens if showNotification is called with a type that is not one of the allowed values? (The type restriction should prevent this, but consider how to handle it if it somehow occurs).

Examples

Example 1:

Input: Initial state, then showNotification("Error!", "error")
Output: { message: "Error!", type: "error" }
Explanation: The hook initializes with empty message and type. showNotification updates the state to display an error message.

Example 2:

Input: Initial state, then showNotification("Info", "info"), then clearNotification()
Output: { message: "", type: "" }
Explanation: showNotification displays an info message. clearNotification resets the state to its initial empty values.

Example 3:

Input: Initial state, then showNotification("", "warning")
Output: { message: "", type: "warning" }
Explanation:  Even with an empty message, the type is correctly updated.

Constraints

• The hook must be self-contained and not rely on any external context or libraries beyond React and TypeScript.
• The hook should be performant and avoid unnecessary re-renders.
• The code should be well-formatted and easy to understand.
• The showNotification function should not accept any other arguments besides message and type.

Notes

• Consider using functional components and hooks for a clean and modern approach.
• Think about how to structure the returned object to provide a clear and concise API.
• The primary goal is to create a reusable and reliable notification management hook. Focus on correctness and clarity over complex optimizations.