89 lines
2.9 KiB
JavaScript
89 lines
2.9 KiB
JavaScript
import React, { useEffect, useState } from 'react';
|
||
import { Button } from './ui/button.js';
|
||
|
||
const CareerSearch = ({ onCareerSelected }) => {
|
||
const [careerObjects, setCareerObjects] = useState([]);
|
||
const [searchInput, setSearchInput] = useState('');
|
||
|
||
useEffect(() => {
|
||
const fetchCareerData = async () => {
|
||
try {
|
||
const response = await fetch('/careers_with_ratings.json');
|
||
const data = await response.json();
|
||
|
||
// Create a Map keyed by career title, so we only keep one object per unique title
|
||
const uniqueByTitle = new Map();
|
||
|
||
// data is presumably an array like:
|
||
// [
|
||
// { soc_code: "15-1241.00", title: "Computer Network Architects", cip_codes: [...], ... },
|
||
// { soc_code: "15-1299.07", title: "Blockchain Engineers", cip_codes: [...], ... },
|
||
// ...
|
||
// ]
|
||
for (const c of data) {
|
||
// Make sure we have a valid title, soc_code, and cip_codes
|
||
if (c.title && c.soc_code && c.cip_codes) {
|
||
// Only store the first unique title found
|
||
if (!uniqueByTitle.has(c.title)) {
|
||
uniqueByTitle.set(c.title, {
|
||
title: c.title,
|
||
soc_code: c.soc_code,
|
||
// NOTE: We store the array of CIPs in `cip_code`.
|
||
cip_code: c.cip_codes,
|
||
limited_data: c.limited_data,
|
||
ratings: c.ratings,
|
||
});
|
||
}
|
||
}
|
||
}
|
||
|
||
// Convert the map into an array
|
||
const dedupedArr = [...uniqueByTitle.values()];
|
||
setCareerObjects(dedupedArr);
|
||
} catch (error) {
|
||
console.error('Error loading or parsing careers_with_ratings.json:', error);
|
||
}
|
||
};
|
||
|
||
fetchCareerData();
|
||
}, []);
|
||
|
||
const handleConfirmCareer = () => {
|
||
// find the full object by exact title match
|
||
const foundObj = careerObjects.find(
|
||
(obj) => obj.title.toLowerCase() === searchInput.toLowerCase()
|
||
);
|
||
console.log('[CareerSearch] foundObj:', foundObj);
|
||
|
||
if (foundObj) {
|
||
onCareerSelected(foundObj);
|
||
} else {
|
||
alert('Please select a valid career from the suggestions.');
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div style={{ marginBottom: '1rem' }}>
|
||
<h2>Search for Career (select from suggestions)</h2>
|
||
<h3>We have an extensive database with thousands of recognized job titles. If you don’t see your exact title, please choose the closest match—this helps us provide the most accurate guidance.</h3>
|
||
<input
|
||
value={searchInput}
|
||
onChange={(e) => setSearchInput(e.target.value)}
|
||
placeholder="Start typing a career..."
|
||
list="career-titles"
|
||
/>
|
||
<datalist id="career-titles">
|
||
{careerObjects.map((obj, index) => (
|
||
<option key={index} value={obj.title} />
|
||
))}
|
||
</datalist>
|
||
|
||
<Button onClick={handleConfirmCareer} style={{ marginLeft: '8px' }}>
|
||
Confirm
|
||
</Button>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default CareerSearch;
|