49 lines
1.6 KiB
JavaScript
49 lines
1.6 KiB
JavaScript
import React from 'react';
|
|
import { ClipLoader } from 'react-spinners';
|
|
|
|
function SchoolsList({ schools, distances, tuitionData, calculatingDistances }) {
|
|
return (
|
|
<div className="schools-list">
|
|
<h2>Schools Offering Programs</h2>
|
|
{schools.length > 0 ? (
|
|
<ul>
|
|
{schools.map((school, index) => {
|
|
const matchingTuitionData = tuitionData.find(
|
|
(tuition) =>
|
|
tuition['school.name']?.toLowerCase().trim() ===
|
|
school['Institution Name']?.toLowerCase().trim()
|
|
);
|
|
const isCalculating = calculatingDistances[school['UNITID']];
|
|
return (
|
|
<li key={index}>
|
|
<strong>{school['Institution Name']}</strong>
|
|
<br />
|
|
Degree type: {school['CREDDESC'] || 'N/A'}
|
|
<br />
|
|
In-State Tuition: $
|
|
{matchingTuitionData?.['latest.cost.tuition.in_state'] || 'N/A'}
|
|
<br />
|
|
Out-of-State Tuition: $
|
|
{matchingTuitionData?.['latest.cost.tuition.out_of_state'] || 'N/A'}
|
|
<br />
|
|
Distance:{' '}
|
|
{isCalculating ? (
|
|
<span className="distance-spinner">
|
|
<ClipLoader size={15} color="#4A90E2" />
|
|
</span>
|
|
) : (
|
|
distances[school['UNITID']] || 'N/A'
|
|
)}
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
) : (
|
|
<p>No schools found for the selected program.</p>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default SchoolsList;
|