LocationsService

HTTP service for fetching states and cities from the API

Overview

The LocationsService is an Angular service that handles HTTP requests for location data. It provides methods to fetch states and cities with pagination and filtering capabilities.

Location: src/app/features/paginator/services/locations.service.ts

Methods

getStates()

Retrieves all available states from the API.

Signature:

getStates(): Observable<StatesResponse>

Returns: Observable of StatesResponse

Example:

import { Component, OnInit } from '@angular/core';
import { LocationsService } from './services/locations.service';
import { State } from './types/location';

@Component({
  selector: 'app-state-selector',
  templateUrl: './state-selector.component.html'
})
export class StateSelectorComponent implements OnInit {
  states: State[] = [];

  constructor(private locationsService: LocationsService) {}

  ngOnInit(): void {
    this.locationsService.getStates().subscribe({
      next: (response) => {
        if (response.success) {
          this.states = response.data;
        }
      },
      error: (error) => console.error('Error fetching states:', error)
    });
  }
}

getCities()

Retrieves cities from the API with optional filtering and pagination.

Signature:

getCities(filters: CityFilters): Observable<CitiesResponse>

Parameters:

• filters: CityFilters - Object containing filter criteria
  • state?: string - Filter by state code
  • pageSize?: number - Number of items per page
  • page?: number - Page number to retrieve

Returns: Observable of CitiesResponse

Example:

import { Component, OnInit } from '@angular/core';
import { LocationsService } from './services/locations.service';
import { City, CityFilters } from './types/location';

@Component({
  selector: 'app-city-list',
  templateUrl: './city-list.component.html'
})
export class CityListComponent implements OnInit {
  cities: City[] = [];
  totalRecords = 0;

  constructor(private locationsService: LocationsService) {}

  ngOnInit(): void {
    const filters: CityFilters = {
      state: '05',
      page: 1,
      pageSize: 10
    };

    this.locationsService.getCities(filters).subscribe({
      next: (response) => {
        if (response.success) {
          this.cities = response.data;
          this.totalRecords = response.totalRecords;
        }
      },
      error: (error) => console.error('Error fetching cities:', error)
    });
  }

  loadPage(page: number): void {
    const filters: CityFilters = { page, pageSize: 10 };
    this.locationsService.getCities(filters).subscribe({
      next: (response) => {
        if (response.success) {
          this.cities = response.data;
        }
      }
    });
  }
}

TypeScript Interfaces

CityFilters

export interface CityFilters {
  state?: string;
  pageSize?: number;
  page?: number;
}

StatesResponse

export interface StatesResponse {
  status: number;
  success: boolean;
  message: string;
  data: State[];
}

CitiesResponse

export interface CitiesResponse {
  status: number;
  success: boolean;
  message: string;
  totalRecords: number;
  data: City[];
  pagination: Pagination;
}

State

export interface State {
  id: string;
  state: string;
}

City

export interface City {
  city_dane_code: string;
  city: string;
  state_dane_code: string;
  state: string;
  id: string;
}

Pagination

export interface Pagination {
  total: number;
  totalPages: number;
  currentPage: number;
  pageSize: number;
}

API Endpoints

The service uses the base URL from environment.apiUrl:

• GET /states - Retrieves all states
• GET /cities?state={state}&page={page}&pageSize={pageSize} - Retrieves filtered cities

Implementation Details

• The service is provided in the root injector (providedIn: 'root')
• Uses Angular’s HttpClient for HTTP requests
• Query parameters are built using HttpParams for the cities endpoint
• All optional filters are only added to the request if they have values
• Returns RxJS Observables for reactive data handling