import React, { useEffect, useState } from 'react';
const MyTable = ({ filterValues }) => {
const [intradata, setIntradata] = useState(null);
const [data, setData] = useState(null);
const [selectedGroup, setSelectedGroup] = useState('summary');
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
const [columns, setColumns] = useState([]);
const [validGroups, setValidGroups] = useState([]);
useEffect(() => {
const fetchData = async () => {
try {
// Fetch intradatacols
const intradatacolsResponse = await fetch('http://5.34.198.87:8000/api/options/intradatacols');
if (!intradatacolsResponse.ok) {
throw new Error(`HTTP error! Status: ${intradatacolsResponse.status}`);
}
const intradatacolsData = await intradatacolsResponse.json();
console.log('API Response for intradatacols:', intradatacolsData);
setData(intradatacolsData);
const groups = Object.keys(intradatacolsData.groups);
setValidGroups(groups);
const initialColumns = intradatacolsData.groupscolumn[selectedGroup] || [];
setColumns(initialColumns);
if (!groups.includes(selectedGroup)) {
console.error(`Invalid selectedGroup: ${selectedGroup}`);
return;
}
// Fetch intradata
const intradataResponse = await fetch('http://5.34.198.87:8000/api/options/intradata');
if (!intradataResponse.ok) {
throw new Error(`HTTP error! Status: ${intradataResponse.status}`);
}
const intradataData = await intradataResponse.json();
console.log('API Response for intradata:', intradataData);
setIntradata(intradataData.data);
} catch (error) {
console.error('Error fetching data:', error);
setError(error.message || 'An error occurred while fetching data.');
} finally {
setLoading(false);
}
};
fetchData();
}, [selectedGroup]);
useEffect(() => {
console.log('intradata:', intradata);
console.log('columns:', columns);
console.log('data:', data);
}, [intradata, columns, data]);
if (loading) {
return <div>Loading...</div>;
}
if (error) {
return <div>Error: {error}</div>;
}
if (!intradata || !data || !data.groups || !data.groupscolumn) {
return <div>No data available</div>;
}
// Filter the intradata based on filterValues
const filteredData = intradata.filter((item) => {
// Check filter01
if (filterValues.filter01 && item.ua_instrument_id.toString().toLowerCase() !== filterValues.filter01.toString().toLowerCase()) {
console.log(`ua_instrument_id Filter: ${item.ua_instrument_id} !== ${filterValues.filter01}`);
return false;
}
// Custom function to parse date in the format "yyyyMMdd"
const parseCustomDate = (dateString) => {
const year = dateString.substr(0, 4);
const month = dateString.substr(4, 2) - 1; // Months are zero-based
const day = dateString.substr(6, 2);
return new Date(year, month, day);
};
// Check date range filter
if (filterValues.startDate && filterValues.endDate) {
const itemDate = parseCustomDate(item.end_date); // Parse using custom function
if (isNaN(itemDate.getTime())) {
console.error(`Invalid date format for end_date: ${item.end_date}`);
return false;
}
const startDate = parseInt(filterValues.startDate, 10);
const endDate = parseInt(filterValues.endDate, 10);
console.log('Item Date:', itemDate);
console.log('Start Date:', startDate);
console.log('End Date:', endDate);
console.log('Column Values:', item[columns[0]]);
return itemDate >= startDate && itemDate <= endDate;
}
return true;
});
console.log('Filtered Data:', filteredData);
console.log('Filtered Data for Rendering:', filteredData);
return (
<div className="container mt-4">
<div className="btn-group mb-3">
{validGroups.map((groupKey) => (
<button
key={groupKey}
type="button"
className={`btn ${selectedGroup === groupKey ? 'bg-blue-500 text-white' : 'bg-blue-200'}`}
onClick={() => setSelectedGroup(groupKey)}
>
{data.groups[groupKey]}
</button>
))}
</div>
<div className="table-container overflow-x-auto" style={{ maxHeight: '400px' }}>
<table className="table-auto w-full border-collapse border border-gray-800">
<thead className="bg-gray-800 text-white">
<tr>
{columns.map((column, index) => (
<th key={index} className="py-2 px-4 border border-gray-800">
{data.fields[column]}
</th>
))}
</tr>
</thead>
<tbody>
{filteredData.length > 0 ? (
filteredData.map((item, itemIndex) => (
<tr key={itemIndex} className={itemIndex % 2 === 0 ? 'bg-gray-100' : 'bg-white'}>
{columns.map((column, columnIndex) => (
<td key={columnIndex} className="py-2 px-4 border border-gray-800">
{item[column] instanceof Date ? item[column].toLocaleDateString() : item[column]}
</td>
))}
</tr>
))
) : (
<tr>
<td colSpan={columns.length} className="py-2 px-4 border border-gray-800">
No matching data
</td>
</tr>
)}
</tbody>
</table>
</div>
</div>
);
};
export default MyTable;
