94 lines
2.9 KiB
JavaScript
94 lines
2.9 KiB
JavaScript
import React, { useEffect, useState } from 'react';
|
|
|
|
const CareerSearch = ({ onCareerSelected }) => {
|
|
const [careerObjects, setCareerObjects] = useState([]);
|
|
const [searchInput, setSearchInput] = useState('');
|
|
|
|
useEffect(() => {
|
|
const fetchCareerData = async () => {
|
|
try {
|
|
const response = await fetch('/career_clusters.json');
|
|
const data = await response.json();
|
|
|
|
// Create a Map keyed by title, storing one object per unique title
|
|
const uniqueByTitle = new Map();
|
|
|
|
const clusters = Object.keys(data);
|
|
for (let i = 0; i < clusters.length; i++) {
|
|
const clusterKey = clusters[i];
|
|
const subdivisions = Object.keys(data[clusterKey]);
|
|
|
|
for (let j = 0; j < subdivisions.length; j++) {
|
|
const subKey = subdivisions[j];
|
|
const careersList = data[clusterKey][subKey] || [];
|
|
|
|
for (let k = 0; k < careersList.length; k++) {
|
|
const c = careersList[k];
|
|
// If there's a title and soc_code, store the first we encounter for that title.
|
|
if (c.title && c.soc_code && c.cip_code !== undefined) {
|
|
if (!uniqueByTitle.has(c.title)) {
|
|
// Add it if we haven't seen this exact title yet
|
|
uniqueByTitle.set(c.title, {
|
|
title: c.title,
|
|
soc_code: c.soc_code,
|
|
cip_code: c.cip_code,
|
|
});
|
|
}
|
|
// If you truly only want to keep the first occurrence,
|
|
// just do nothing if we see the same title again.
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Convert Map to array
|
|
const dedupedArr = [...uniqueByTitle.values()];
|
|
setCareerObjects(dedupedArr);
|
|
|
|
} catch (error) {
|
|
console.error('Error loading or parsing career_clusters.json:', error);
|
|
}
|
|
};
|
|
|
|
fetchCareerData();
|
|
}, []);
|
|
|
|
// Called when user clicks "Confirm New Career"
|
|
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' }}>
|
|
<h3>Search for Career</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;
|