115 lines
3.7 KiB
JavaScript
115 lines
3.7 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
|
import authFetch from '../utils/authFetch.js';
|
|
|
|
const CareerPrioritiesModal = ({ userProfile, onClose }) => {
|
|
const [responses, setResponses] = useState({});
|
|
|
|
useEffect(() => {
|
|
if (userProfile?.career_priorities) {
|
|
setResponses(JSON.parse(userProfile.career_priorities));
|
|
}
|
|
}, [userProfile]);
|
|
|
|
// Updated "interests" question:
|
|
const questions = [
|
|
{
|
|
id: 'interests',
|
|
text: 'How important is it that your career aligns with your personal interests?',
|
|
options: ['Very important', 'Somewhat important', 'Not as important'],
|
|
},
|
|
{
|
|
id: 'meaning',
|
|
text: 'Is it important your job helps others or makes a difference?',
|
|
options: ['Yes, very important', 'Somewhat important', 'Not as important'],
|
|
},
|
|
{
|
|
id: 'stability',
|
|
text: 'How important is it that your career pays well?',
|
|
options: ['Very important', 'Somewhat important', 'Not as important'],
|
|
},
|
|
{
|
|
id: 'growth',
|
|
text: 'Do you want clear chances to advance and grow professionally?',
|
|
options: ['Yes, very important', 'Somewhat important', 'Not as important'],
|
|
},
|
|
{
|
|
id: 'balance',
|
|
text: 'Do you prefer a job with flexible hours and time outside work?',
|
|
options: ['Yes, very important', 'Somewhat important', 'Not as important'],
|
|
},
|
|
{
|
|
id: 'recognition',
|
|
text: 'How important is it to have a career that others admire?',
|
|
options: ['Very important', 'Somewhat important', 'Not as important'],
|
|
},
|
|
];
|
|
|
|
const handleSave = async () => {
|
|
const payload = {
|
|
firstName: userProfile.firstname,
|
|
lastName: userProfile.lastname,
|
|
email: userProfile.email,
|
|
zipCode: userProfile.zipcode,
|
|
state: userProfile.state,
|
|
area: userProfile.area,
|
|
careerSituation: userProfile.career_situation || null,
|
|
career_priorities: JSON.stringify(responses),
|
|
};
|
|
|
|
try {
|
|
await authFetch('/api/user-profile', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(payload),
|
|
});
|
|
onClose();
|
|
} catch (error) {
|
|
console.error('Error saving priorities:', error);
|
|
}
|
|
};
|
|
|
|
const allAnswered = questions.every(q => responses[q.id]);
|
|
|
|
return (
|
|
<div className="fixed inset-0 bg-gray-900 bg-opacity-60 flex justify-center items-center z-50">
|
|
<div className="bg-white p-6 rounded-lg shadow-lg w-full max-w-2xl overflow-y-auto max-h-[90vh] z-60">
|
|
<h2 className="text-xl font-bold mb-4">Tell us what's important to you</h2>
|
|
{questions.map(q => (
|
|
<div key={q.id} className="mb-4">
|
|
<label className="block mb-2 font-medium">{q.text}</label>
|
|
<select
|
|
value={responses[q.id] || ''}
|
|
onChange={(e) =>
|
|
setResponses({ ...responses, [q.id]: e.target.value })
|
|
}
|
|
className="w-full border px-3 py-2 rounded"
|
|
>
|
|
<option value="" disabled>
|
|
Select an answer
|
|
</option>
|
|
{q.options.map((opt) => (
|
|
<option key={opt} value={opt}>
|
|
{opt}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
))}
|
|
<div className="flex justify-end space-x-2">
|
|
<button
|
|
onClick={handleSave}
|
|
disabled={!allAnswered}
|
|
className={`px-4 py-2 rounded ${
|
|
allAnswered ? 'bg-blue-600 text-white' : 'bg-gray-300 cursor-not-allowed'
|
|
}`}
|
|
>
|
|
Save Answers
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CareerPrioritiesModal;
|