React/Next.js Examples

import { useState, useEffect, useCallback } from 'react';

const useIPOAlerts = (apiKey) => {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  const [data, setData] = useState(null);

  const makeRequest = useCallback(async (endpoint, options = {}) => {
    setLoading(true);
    setError(null);

    try {
      const response = await fetch(`https://api.ipoalerts.in${endpoint}`, {
        ...options,
        headers: {
          'x-api-key': apiKey,
          'Content-Type': 'application/json',
          ...options.headers
        }
      });

      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }

      const result = await response.json();
      setData(result);
      return result;
    } catch (err) {
      setError(err.message);
      throw err;
    } finally {
      setLoading(false);
    }
  }, [apiKey]);

  const getIPOs = useCallback((filters = {}) => {
    const params = new URLSearchParams(filters);
    return makeRequest(`/ipos?${params}`);
  }, [makeRequest]);

  const getIPO = useCallback((identifier) => {
    return makeRequest(`/ipos/${identifier}`);
  }, [makeRequest]);

  return {
    loading,
    error,
    data,
    getIPOs,
    getIPO,
    makeRequest
  };
};

export default useIPOAlerts;

import React, { useState, useEffect } from 'react';
import useIPOAlerts from './hooks/useIPOAlerts';

const IPOList = ({ apiKey }) => {
  const { loading, error, data, getIPOs } = useIPOAlerts(apiKey);
  const [filters, setFilters] = useState({ status: 'upcoming' });

  useEffect(() => {
    getIPOs(filters);
  }, [filters, getIPOs]);

  const handleFilterChange = (newFilters) => {
    setFilters(prev => ({ ...prev, ...newFilters }));
  };

  if (loading) return <div>Loading IPOs...</div>;
  if (error) return <div>Error: {error}</div>;

  return (
    <div>
      <div className="filters">
        <select 
          value={filters.status} 
          onChange={(e) => handleFilterChange({ status: e.target.value })}
        >
          <option value="upcoming">Upcoming</option>
          <option value="open">Open</option>
          <option value="closed">Closed</option>
          <option value="listed">Listed</option>
        </select>
        
        <select 
          value={filters.type || ''} 
          onChange={(e) => handleFilterChange({ type: e.target.value || undefined })}
        >
          <option value="">All Types</option>
          <option value="EQ">Equity</option>
          <option value="SME">SME</option>
          <option value="DEBT">Debt</option>
        </select>
      </div>

      <div className="ipo-list">
        {data?.ipos?.map(ipo => (
          <div key={ipo.id} className="ipo-card">
            <h3>{ipo.name}</h3>
            <p>Symbol: {ipo.symbol}</p>
            <p>Price Range: {ipo.priceRange}</p>
            <p>Start Date: {ipo.startDate}</p>
            <p>End Date: {ipo.endDate}</p>
            <p>Issue Size: {ipo.issueSize}</p>
            {ipo.logo && <img src={ipo.logo} alt={`${ipo.name} logo`} />}
          </div>
        ))}
      </div>

      {data?.meta && (
        <div className="pagination">
          <p>
            Showing {data.meta.countOnPage} of {data.meta.count} IPOs
            (Page {data.meta.page} of {data.meta.totalPages})
          </p>
        </div>
      )}
    </div>
  );
};

export default IPOList;

// pages/api/ipos.js or app/api/ipos/route.js
export default async function handler(req, res) {
  const { status, type, page = 1, limit = 10 } = req.query;
  
  try {
    const params = new URLSearchParams({
      page: page.toString(),
      limit: limit.toString()
    });
    
    if (status) params.append('status', status);
    if (type) params.append('type', type);
    
    const response = await fetch(`https://api.ipoalerts.in/ipos?${params}`, {
      headers: {
        'x-api-key': process.env.IPOALERTS_API_KEY,
        'Content-Type': 'application/json'
      }
    });
    
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    
    const data = await response.json();
    res.status(200).json(data);
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
}