Centralize API Calls and Implement Boilerplate Backend Integrations

[wendulem]

Overview

To improve maintainability and scalability, we need to refactor all direct axios calls scattered throughout our components into a single api.js service file. This file will handle all interactions with the backend and the Shopify API, ensuring a clean separation of concerns and making the API logic easier to manage and update.

Tasks

1. Create a Central API Service File

Objective: Centralize all external API calls into a single service module.

Details:

• Create api.js: Develop a file that exports functions for each type of API request (fetch products, fetch product by ID, fetch vendor, etc.).
• Implement Service Functions: Each function should handle the logic for a specific API call, including building the request and handling responses and errors.

2. Define API Service Functions

Objective: Define and implement functions within api.js that make HTTP requests to the appropriate backend endpoints.

Details:

• Fetch Products: Implement a function to fetch products, potentially sorted by view count or other filters.
• Fetch Product Details: Implement a function to fetch details of a specific product using its ID.
• Fetch Vendor Details: Implement a function to retrieve vendor information based on vendor ID.

3. Integrate API Service with Components

Objective: Replace existing axios calls in components with calls to the functions defined in api.js.

Details:

• Refactor HomePage: Use the fetch products function from api.js.
• Refactor ProductPage: Use the fetch product details function from api.js.
• Refactor VendorPage: Use the fetch vendor details function from api.js.

4. Ensure Error Handling and Loading States are Managed

Objective: Enhance user experience by managing loading states and errors comprehensively.

Details:

• Loading States: Ensure that each component correctly handles and displays loading states during API calls.
• Error Handling: Improve error handling in API functions to provide clear feedback and potentially retry logic or fallbacks.

Expected Outcome

• A cleaner, more maintainable structure for handling API calls in the React application.
• Improved error handling and user experience due to more consistent and centralized API call management.

Implementation Details

Here's an example of what the api.js might look like:

import axios from 'axios';

const BASE_URL = 'http://localhost:5000/api';  // Adjust based on actual backend URL

export const fetchProducts = async (params) => {
  try {
    const response = await axios.get(`${BASE_URL}/products`, { params });
    return response.data;
  } catch (error) {
    console.error('Error fetching products:', error);
    throw error;
  }
};

export const fetchProductById = async (productId) => {
  try {
    const response = await axios.get(`${BASE_URL}/products/${productId}`);
    return response.data;
  } catch (error) {
    console.error('Error fetching product details:', error);
    throw error;
  }
};

export const fetchVendorById = async (vendorId) => {
  try {
    const response = await axios.get(`${BASE_URL}/vendors/${vendorId}`);
    return response.data;
  } catch (error) {
    console.error('Error fetching vendor details:', error);
    throw error;
  }
};