npm package: @maspav/angular-http-handler
Description: An Angular service designed to simplify the process of handling HTTP requests and responses in Angular applications
Author: Akwasi Boateng
Latest version: 0.0.6

# @maspav/angular-http-handler

![Version](https://img.shields.io/badge/version-0.0.5-blue.svg)

## Table of Contents
- [@maspav/angular-http-handler](#maspavangular-http-handler)
  - [Table of Contents](#table-of-contents)
  - [Introduction](#introduction)
  - [Features](#features)
  - [Installation](#installation)
  - [Usage](#usage)
  - [Configuration](#configuration)
  - [Examples (With Configuration)](#examples-with-configuration)
  - [Examples (Without Configuration)](#examples-without-configuration)

## Introduction
`@maspav/angular-http-handler` is an Angular service designed to simplify the process of handling HTTP requests and responses in Angular applications. This service includes support for error handling, response transformations, pagination management, and more.

## Features
  * Centralized HTTP request handling.
  * Easy error management.
  * Simplified response transformation.
  * Pagination management.
  * Configurable base URL for API requests.

## Installation
To install the library, use npm:

```bash
npm i @maspav/angular-http-handler
```

## Usage
Importing the Module <br>
First, import the module in your AppModule:

```typescript
import { AngularHttpHandlerModule } from '@maspav/angular-http-handler';

@NgModule({
  imports: [
    AngularHttpHandlerModule;
  ],
})
export class AppModule { }

```

Using the Service <br>
Inject the HttpHandlerService into your component or service:

```typescript
import { Component } from '@angular/core';
import { AngularHttpHandlerService } from '@maspav/angular-http-handler';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html'
})
export class ExampleComponent {

  constructor(private httpHandler: AngularHttpHandlerService) { }

}
```

## Configuration
The AngularHttpHandlerService can be customized by passing an optional configuration object when setting up the module, that is, the base url.
```typescript
import { AngularHttpHandlerModule } from '@maspav/angular-http-handler';

@NgModule({
  imports: [
    AngularHttpHandlerModule.forRoot({ baseUrl: 'https://api.yourdomain.com/' });
  ],
})
export class AppModule { }

```

## Examples (With Configuration)
Making a POST Request
```typescript
 postRequestFunction(payload: object) {
  return this.httpHandler.post('endpoint', payload).subscribe(
    response => console.log('Item created:', response),
    error => console.error('Error:', error)
  );
}
```
Making a GET Request
```typescript
getRequestFunction(params: any) {
  return this.httpHandler.get('endpoint', params).subscribe(
    response => console.log('Data received:', response),
    error => console.error('Error:', error)
  );
}

```
Making a DELETE Request
```typescript
deleteRequestFunction(params: any) {
  return this.httpHandler.delete('endpoint', params).subscribe(
    response => console.log('Item deleted:', response),
    error => console.error('Error:', error)
  );
}
```
Making a PUT Request
```typescript
putRequestFunction(payload: object) {
  return this.httpHandler.put('endpoint', payload).subscribe(
    response => console.log('Item updated:', response),
    error => console.error('Error:', error)
  );
}
```

## Examples (Without Configuration)
Making a POST Request
```typescript
 postRequestFunction(payload: object) {
  return this.httpHandler.post('https://api.yourdomain.com/endpoint', payload).subscribe(
    response => console.log('Item created:', response),
    error => console.error('Error:', error)
  );
}
```
Making a GET Request
```typescript
getRequestFunction(params: any) {
  return this.httpHandler.get('https://api.yourdomain.com/endpoint', params).subscribe(
    response => console.log('Data received:', response),
    error => console.error('Error:', error)
  );
}

```
Making a DELETE Request
```typescript
deleteRequestFunction(params: any) {
  return this.httpHandler.delete('https://api.yourdomain.com/endpoint', params).subscribe(
    response => console.log('Item deleted:', response),
    error => console.error('Error:', error)
  );
}
```
Making a PUT Request
```typescript
putRequestFunction(payload: object) {
  return this.httpHandler.put('https://api.yourdomain.com/endpoint', payload).subscribe(
    response => console.log('Item updated:', response),
    error => console.error('Error:', error)
  );
}
```

**Interfaces** <br>
`Paginator` <br>
Manages pagination details for API responses:

```typescript
 export interface Paginator {
  collectionSize?: number | any;
  page?: number | any;
  total?: number;
  from?: number;
  to?: number;
  perPage?: number;
  disabled?: boolean;
  pages?: number;
}
```

`Loader` <br>
Handles loading state and error messaging:

```typescript
 export interface Loader {
  loading: boolean;
  error?: string;
}
```

`Metadata` <br>
Contains pagination and link information for API responses:

```typescript
export interface Metadata {
  pageLinks: {
    previousPage?: any;
    firstPage: string;
    currentPage: string;
    nextPage?: any;
    lastPage: string;
  };
  pageInfo: {
    pages: number;
    total: number;
    currentPage: number;
    pageSize: number;
    perPage: number;
    from: number;
    to: number;
  };
}
```

`ErrorConfig` <br>
Configures error handling behavior:

```typescript
export interface ErrorConfig {
  bypassAlertStatuses?: number[] | '*';
  retryCount?: number;
  message?: string;
}
```

`Using Interfaces in a Component`<br>
Example Component:

```typescript
import { Component, OnInit } from '@angular/core';
import { AngularHttpHandlerService, Paginator, Loader, Metadata } from '@maspav/angular-http-handler';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html'
})
export class ExampleComponent implements OnInit {

  // Define properties using the provided interfaces
  paginator: Paginator = {
    page: 1,
    perPage: 10,
    total: 0,
    from: 0,
    to: 0,
    pages: 0,
    collectionSize: 0,
    disabled: false,
  };

  loader: Loader = {
    loading: false,
    error: ''
  };

  metadata: Metadata;

  constructor(private httpHandler: AngularHttpHandlerService) { }

  ngOnInit(): void {
    this.fetchData();
  }

  // Example function to fetch data and use the interfaces
  fetchData() {
    this.setLoader(true);
    this.httpHandler.get('https://api.yourdomain.com/endpoint', { page: this.paginator.page })
      .subscribe(
        (response: any) => {
          // Assuming response.metadata contains the metadata information
          this.metadata = response.metadata;
          // Use the metadata to update paginator and other UI elements
          this.setPaginator(this.metadata);
          this.setLoader(false);
        },
        (error: any) => {
          this.setLoader(false, error.message);
        }
      );
  }

  // Set the loader state
  setLoader(loading: boolean, error?: string) {
    this.loader.loading = loading;
    this.loader.error = error || '';
  }

  // Set the paginator based on API response metadata
  setPaginator(metadata: Metadata) {
    this.paginator.collectionSize = metadata.pageInfo.total;
    this.paginator.page = metadata.pageInfo.currentPage;
    this.paginator.perPage = metadata.pageInfo.perPage;
    this.paginator.pages = metadata.pageInfo.pages;
    this.paginator.from = metadata.pageInfo.from;
    this.paginator.to = metadata.pageInfo.to;
  }
}

```