Tube.jsx

import React, { useState } from 'react';
import { Select, Table } from './components'; // Assuming third-party components

const App = () => {
  const [selectedLine, setSelectedLine] = useState('bakerloo');
  const { data: lines } = useDataSource('https://api.tfl.gov.uk/line/mode/tube/status', []);
  
  const { 
    data: tubeStations, 
    loading, 
    error 
  } = useDataSource(
    `https://api.tfl.gov.uk/Line/${selectedLine}/Route/Sequence/inbound`,
    [selectedLine],
    'stations'
  );

  const selectItems = lines.map(line => ({
    value: line.id,
    label: line.name
  }));

  const columns = [
    { key: 'name', header: 'Name', accessor: 'name' },
    { key: 'modes', header: 'Modes', accessor: row => 
      Array.isArray(row.modes) ? row.modes.join(', ') : (row.modes || 'N/A')
    }
  ];

  return (
    <div>
      <h1>London Tube Lines</h1>
      
      <Select
        id="lines"
        value={selectedLine}
        onChange={setSelectedLine}
        items={selectItems}
        placeholder="Select Tube Line"
      />

      {error && <div role="alert">{error}</div>}
      {loading && <div>Loading stations...</div>}

      <Table
        data={tubeStations}
        columns={columns}
        height="280px"
        loading={loading}
        emptyMessage={selectedLine ? 'No stations found' : 'Select a line to view stations'}
      />
    </div>
  );
};
};

export default App;

useDataSource.js

import React, { useState } from 'react';

// Custom hook for data fetching
const useDataSource = (url, dependencies = [], resultSelector = null) => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  React.useEffect(() => {
    if (!url) return;

    const fetchData = async () => {
      setLoading(true);
      setError(null);
      try {
        const response = await fetch(url);
        const result = await response.json();
        // Apply result selector if provided (e.g., "stations" to extract data.stations)
        const finalData = resultSelector ? result[resultSelector] || [] : result;
        setData(finalData);
      } catch (err) {
        console.error('Error fetching data:', err);
        setError('Failed to load data');
        setData([]);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, dependencies);

  return { data, loading, error };
};