115 lines
3.4 KiB
Plaintext
115 lines
3.4 KiB
Plaintext
import React, { useState } from 'react';
|
|
import "../styles/legacy/SchoolFilters.legacy.css";
|
|
function SchoolFilters({ schools, setFilteredSchools }) {
|
|
const [sortBy, setSortBy] = useState('tuition'); // Default: Sort by Tuition
|
|
const [tuitionRange, setTuitionRange] = useState([0, 50000]); // Example range
|
|
const [distanceRange, setDistanceRange] = useState([0, 200]); // Example range
|
|
|
|
// Sorting function
|
|
const sortSchools = (schools) => {
|
|
return [...schools].sort((a, b) => {
|
|
if (sortBy === 'tuition') return a.inState - b.inState;
|
|
if (sortBy === 'distance') return a.distance - b.distance;
|
|
return 0;
|
|
});
|
|
};
|
|
|
|
// Filtering function
|
|
const filterSchools = (schools) => {
|
|
return schools.filter((school) =>
|
|
school.inState >= tuitionRange[0] &&
|
|
school.inState <= tuitionRange[1] &&
|
|
school.distance >= distanceRange[0] &&
|
|
school.distance <= distanceRange[1]
|
|
);
|
|
};
|
|
|
|
// Apply sorting & filtering when values change
|
|
const updateFilteredSchools = () => {
|
|
let updatedSchools = sortSchools(schools);
|
|
updatedSchools = filterSchools(updatedSchools);
|
|
setFilteredSchools(updatedSchools);
|
|
};
|
|
|
|
// Effect to update results on change
|
|
React.useEffect(() => {
|
|
updateFilteredSchools();
|
|
}, [sortBy, tuitionRange, distanceRange, schools]);
|
|
|
|
return (
|
|
<div className="filters-container">
|
|
<h3>Sort & Filter Schools</h3>
|
|
|
|
{/* Sorting Options */}
|
|
<div className="sorting-options">
|
|
<label>Sort by:</label>
|
|
<div>
|
|
<input
|
|
type="radio"
|
|
id="sortTuition"
|
|
name="sort"
|
|
value="tuition"
|
|
checked={sortBy === 'tuition'}
|
|
onChange={() => setSortBy('tuition')}
|
|
/>
|
|
<label htmlFor="sortTuition">Tuition</label>
|
|
</div>
|
|
<div>
|
|
<input
|
|
type="radio"
|
|
id="sortDistance"
|
|
name="sort"
|
|
value="distance"
|
|
checked={sortBy === 'distance'}
|
|
onChange={() => setSortBy('distance')}
|
|
/>
|
|
<label htmlFor="sortDistance">Distance</label>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Filtering Options */}
|
|
<div className="filtering-options">
|
|
<label>Tuition Range: ${tuitionRange[0]} - ${tuitionRange[1]}</label>
|
|
<input
|
|
type="range"
|
|
min="0"
|
|
max="50000"
|
|
step="500"
|
|
value={tuitionRange[0]}
|
|
onChange={(e) => setTuitionRange([Number(e.target.value), tuitionRange[1]])}
|
|
/>
|
|
<input
|
|
type="range"
|
|
min="0"
|
|
max="50000"
|
|
step="500"
|
|
value={tuitionRange[1]}
|
|
onChange={(e) => setTuitionRange([tuitionRange[0], Number(e.target.value)])}
|
|
/>
|
|
</div>
|
|
|
|
<div className="filtering-options">
|
|
<label>Distance Range: {distanceRange[0]} - {distanceRange[1]} mi</label>
|
|
<input
|
|
type="range"
|
|
min="0"
|
|
max="200"
|
|
step="5"
|
|
value={distanceRange[0]}
|
|
onChange={(e) => setDistanceRange([Number(e.target.value), distanceRange[1]])}
|
|
/>
|
|
<input
|
|
type="range"
|
|
min="0"
|
|
max="200"
|
|
step="5"
|
|
value={distanceRange[1]}
|
|
onChange={(e) => setDistanceRange([distanceRange[0], Number(e.target.value)])}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default SchoolFilters;
|