ui-result-handler

ui-result-handler is a package providing utilities for handling results in front-end applications. It offers a set of types and interfaces to represent various types of results, such as successes, errors, warnings, and information, and provides metadata for additional context.

Installation

To install ui-result-handler, you can use npm:

npm install ui-result-handler

Usage

// Import the necessary types from the package
import { Result, ResultType, Metadata } from 'ui-result-handler';

interface User {
    name: string;
    email: string;
}

interface Login {
    user: User;
    token: string;
}

// Define a sample result
const response: Result<Login> = await fetch('https://api.example.com/users/1');
console.log(response);

// {
//   isSuccess: true,
//   resultType: 'success',
//   statusCode: 200,
//   message: 'Operation successful',
//   value: {
//     user: {
//       name: 'example',
//       email: '[e-mail]'
//     },
//     token: 'example'
//   },
//   metadata: {
//     totalItems: 1
//   }
// };

// Show a notification based on the result type
function genericShowNotification(result: Result<any>): void {
    // Logic to show notification based on the result type
}

function specificShowNotification(severity: ResultType, message: string): void {
    // Logic to show notification with specific severity and message
}

// Call genericShowNotification with the response
genericShowNotification(response);

// Call specificShowNotification with a specific result type and message
specificShowNotification(ResultType.success, 'notification example message');

Result Object Structure

A Result object has the following structure:

• isSuccess: A boolean indicating whether the operation succeeded or failed.
• resultType: The type of result (e.g., "success", "error", "warn", "info").
• statusCode: The HTTP status code associated with the result.
• message: A descriptive message explaining the result.
• data (optional): The data associated with the result.
• metadata (optional): Additional metadata associated with the result.

A ResultType enum is also provided, which includes the following values:

• success: Indicates a successful operation.
• error: Indicates an error occurred during the operation.
• warn: Indicates a warning or non-fatal issue occurred during the operation.
• info: Indicates an informational message about the operation.

Features

1. Type Inference from Back-End: Automatically retrieves the result type from the back-end to display information to the user. This ensures seamless integration between the back-end and front-end, allowing for consistent handling and display of result data.
2. Export of ResultType Enum: Exports the ResultType enum, allowing for easy integration with notification tools whose types correspond to those of the result. This simplifies the process of displaying notifications based on the outcome of API requests.
3. Rendering Helpers: Provides utility functions or components for rendering results in your front-end application, allowing for consistent and user-friendly display of result information to users.
4. Centralized Error Handling: Offers functionalities or components to centrally manage error handling in your front-end application, ensuring consistent error display throughout the application, such as a global alert component that automatically displays errors when they occur.
5. Integration with Third-Party Notification Libraries: Integrates with popular third-party notification libraries like Toastify or SweetAlert, facilitating the display of notifications to users based on the type of result returned by the API.
6. Result Validation: Provides validation functions to check if a given result meets certain expectations or criteria, such as verifying if a result is a success, an error, or a warning, and taking appropriate action in your front-end application.
7. Loading State Management: Adds features to manage loading states during API calls, providing visual indicators to inform users that operations are in progress, and hiding or disabling features during loading.
8. Message Customization: Allows customization of result messages to fit specific needs of your front-end application, such as options for localization into different languages or customization to match your application's branding.

API Package

To complement this package, a back-end package named api-result-handler is also available. It provides data models to define the return types of requests to the front-end.

You can find more information about api-result-handler in its README. and to install api-result-handler, you can use npm:

npm install uapi-result-handler