Transforming and Mapping API Response Data to a UI Model

// Assume this is the raw data received from an API
const rawApiProduct = {
  productId: 'P101',
  productName: 'Super Widget Pro',
  productDescription: 'An advanced widget with superior performance.',
  productPrice: {
    amount: 99.99,
    currency: 'USD'
  },
  availableStock: 150,
  manufacturerDetails: {
    name: 'Acme Corp',
    country: 'USA',
    contactEmail: '[email protected]'
  },
  category_id: 'CAT001',
  lastUpdated: '2023-10-27T10:30:00Z',
  // ... other verbose or inconsistent fields
};

// Define a function to transform the raw data into a UI-friendly format
function transformProductForUI(rawProduct) {
  if (!rawProduct) return null;

  return {
    id: rawProduct.productId,
    name: rawProduct.productName,
    description: rawProduct.productDescription,
    price: rawProduct.productPrice ? `${rawProduct.productPrice.amount} ${rawProduct.productPrice.currency}` : 'N/A',
    stock: rawProduct.availableStock,
    manufacturer: rawProduct.manufacturerDetails ? rawProduct.manufacturerDetails.name : 'Unknown',
    lastUpdatedDate: rawProduct.lastUpdated ? new Date(rawProduct.lastUpdated).toLocaleDateString() : 'N/A',
    // Example of a computed property or derived value
    isInStock: rawProduct.availableStock > 0
  };
}

// Example Usage:
// const uiProduct = transformProductForUI(rawApiProduct);
// console.log('Transformed UI Product:', uiProduct);
/*
Expected Output:
{
  id: 'P101',
  name: 'Super Widget Pro',
  description: 'An advanced widget with superior performance.',
  price: '99.99 USD',
  stock: 150,
  manufacturer: 'Acme Corp',
  lastUpdatedDate: '10/27/2023', // Varies by locale
  isInStock: true
}
*/

// Example with an array of products
const rawApiProducts = [
  rawApiProduct,
  {
    productId: 'P102',
    productName: 'Mini Gadget',
    productDescription: 'A compact and portable gadget.',
    productPrice: { amount: 29.99, currency: 'EUR' },
    availableStock: 0,
    manufacturerDetails: { name: 'Gizmo Co.' },
    lastUpdated: '2023-10-25T15:00:00Z',
  }
];

const uiProducts = rawApiProducts.map(transformProductForUI);
// console.log('Transformed UI Products:', uiProducts);