76 lines
2.1 KiB
JavaScript
76 lines
2.1 KiB
JavaScript
import React, { useEffect, useState } from 'react';
|
|
import { Input } from './ui/input.js';
|
|
|
|
const CareerSearch = ({ setPendingCareerForModal }) => {
|
|
const [careers, setCareers] = useState([]);
|
|
const [searchInput, setSearchInput] = useState('');
|
|
|
|
useEffect(() => {
|
|
const fetchCareerTitles = async () => {
|
|
try {
|
|
const response = await fetch('/career_clusters.json');
|
|
const data = await response.json();
|
|
|
|
const careerTitlesSet = new Set();
|
|
|
|
// Iterate using Object.keys at every level (no .forEach or .map)
|
|
const clusters = Object.keys(data);
|
|
for (let i = 0; i < clusters.length; i++) {
|
|
const cluster = clusters[i];
|
|
const subdivisions = Object.keys(data[cluster]);
|
|
|
|
for (let j = 0; j < subdivisions.length; j++) {
|
|
const subdivision = subdivisions[j];
|
|
const careersArray = data[cluster][subdivision];
|
|
|
|
for (let k = 0; k < careersArray.length; k++) {
|
|
const careerObj = careersArray[k];
|
|
if (careerObj.title) {
|
|
careerTitlesSet.add(careerObj.title);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
setCareers([...careerTitlesSet]);
|
|
|
|
} catch (error) {
|
|
console.error("Error fetching or processing career_clusters.json:", error);
|
|
}
|
|
};
|
|
|
|
fetchCareerTitles();
|
|
}, []);
|
|
|
|
const handleConfirmCareer = () => {
|
|
if (careers.includes(searchInput)) {
|
|
setPendingCareerForModal(searchInput);
|
|
} else {
|
|
alert("Please select a valid career from the suggestions.");
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<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">
|
|
{careers.map((career, index) => (
|
|
<option key={index} value={career} />
|
|
))}
|
|
</datalist>
|
|
|
|
<button onClick={handleConfirmCareer}>
|
|
Confirm New Career
|
|
</button>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CareerSearch;
|