From 48e68d47b708165a1c8b5a252bb17e8d673ad6b9 Mon Sep 17 00:00:00 2001 From: Josh Date: Fri, 16 May 2025 12:18:29 +0000 Subject: [PATCH] Fixed UI/UX issues with CareerExplorer and Modal (loading stick). --- src/App.js | 5 +++++ src/components/CareerExplorer.js | 36 +++++++++++++++++++++---------- src/components/CareerModal.js | 13 +++++++++++ src/components/CareerSearch.js | 2 +- user_profile.db | Bin 114688 -> 118784 bytes 5 files changed, 44 insertions(+), 12 deletions(-) diff --git a/src/App.js b/src/App.js index df78632..dd21f2c 100644 --- a/src/App.js +++ b/src/App.js @@ -120,6 +120,11 @@ function App() { Getting Started +
  • + + Career Explorer + +
  • Interest Inventory diff --git a/src/components/CareerExplorer.js b/src/components/CareerExplorer.js index 0aa854e..9fb614d 100644 --- a/src/components/CareerExplorer.js +++ b/src/components/CareerExplorer.js @@ -5,6 +5,7 @@ import CareerSuggestions from './CareerSuggestions.js'; import CareerPrioritiesModal from './CareerPrioritiesModal.js'; import CareerModal from './CareerModal.js'; import CareerSearch from './CareerSearch.js'; +import {Button} from './ui/button.js'; import axios from 'axios'; const STATES = [ @@ -105,6 +106,7 @@ function CareerExplorer({ }) { }; useEffect(() => { + setLoading(true); const fetchUserProfile = async () => { try { const token = localStorage.getItem('token'); @@ -162,6 +164,7 @@ function CareerExplorer({ }) { } catch (err) { console.error('Error fetching user profile:', err); setShowModal(true); // fallback if error + setLoading(false); } }; @@ -206,7 +209,7 @@ function CareerExplorer({ }) { const socCode = career.code; setSelectedCareer(career); setError(null); - setCareerDetails({}); + setCareerDetails(null); setSalaryData([]); setEconomicProjections({}); @@ -216,19 +219,27 @@ function CareerExplorer({ }) { if (!socCode) { console.error('SOC Code is missing'); setError('SOC Code is missing'); + setLoading(false); return; } try { // CIP fetch const cipResponse = await fetch(`${apiUrl}/cip/${socCode}`); - if (!cipResponse.ok) throw new Error('Failed to fetch CIP Code'); + if (!cipResponse.ok) {setError(`We're sorry, but specific details for "${career.title}" are not available at this time.`); + setCareerDetails({ error: `We're sorry, but detailed info for "${career.title}" isn't available right now.`}); + setLoading(false); + return; + } const { cipCode } = await cipResponse.json(); const cleanedCipCode = cipCode.replace('.', '').slice(0, 4); // Job details const jobDetailsResponse = await fetch(`${apiUrl}/onet/career-description/${socCode}`); - if (!jobDetailsResponse.ok) throw new Error('Failed to fetch job description'); + if (!jobDetailsResponse.ok){setCareerDetails({ error: `We're sorry, but detailed info for "${career.title}" isn't available right now.`}); + setLoading(false); + return; +} const { description, tasks } = await jobDetailsResponse.json(); // Salary @@ -297,14 +308,16 @@ function CareerExplorer({ }) { setCareerDetails(updatedCareerDetails); } catch (error) { - console.error('Error processing career click:', error.message); - setError('Failed to load data'); + console.error('Error processing career click:', error.message); + setCareerDetails({ + error: `We're sorry, but detailed info for "${career.title}" isn't available right now.` + }); } finally { setLoading(false); } - }, - [userState, apiUrl, areaTitle, userZipcode] -); + }, + [userState, apiUrl, areaTitle, userZipcode] + ); // ============= Let typed careers open PopoutPanel ============= const handleCareerFromSearch = useCallback( @@ -510,6 +523,7 @@ function CareerExplorer({ }) { }; return ( +
    {renderLoadingOverlay()} {showModal && ( @@ -519,7 +533,7 @@ function CareerExplorer({ }) { /> )}
    -

    Explore Careers

    +

    Explore Careers - use the tools in this area to find your perfect career

    { console.log('[Dashboard] onCareerSelected =>', careerObj); @@ -529,7 +543,7 @@ function CareerExplorer({ }) { />
    -

    Career Comparison Matrix

    +

    Career Comparison

    {careerList.length ? ( @@ -588,7 +602,7 @@ function CareerExplorer({ }) { ); diff --git a/src/components/CareerModal.js b/src/components/CareerModal.js index 2e4e420..02bbbe2 100644 --- a/src/components/CareerModal.js +++ b/src/components/CareerModal.js @@ -9,6 +9,19 @@ function CareerModal({ career, careerDetails, closeModal, addCareerToList }) { console.log('CareerModal props:', { career, careerDetails}); + if (careerDetails?.error) { + return ( +
    +
    +

    {careerDetails.error}

    + +
    +
    + ); + } + if (!careerDetails?.salaryData) { return (
    diff --git a/src/components/CareerSearch.js b/src/components/CareerSearch.js index 37e5e6d..888f77e 100644 --- a/src/components/CareerSearch.js +++ b/src/components/CareerSearch.js @@ -63,7 +63,7 @@ const CareerSearch = ({ onCareerSelected }) => { return (
    -

    Search for Career

    +

    Search for Career (select from suggestions)

    setSearchInput(e.target.value)} diff --git a/user_profile.db b/user_profile.db index 71f385799c3f1b2e2184aae4d65553185cd28f85..4b8ef4e6341bfd4fe6ddbff89f3bc2d39a93548f 100644 GIT binary patch delta 933 zcmZva&rj4q6vsQINLF1y*#!ZS*~SDU72EyAc8w;u2QDVYlLvx2+spdC$gZd`l37 zF@DbT12!jTz}EKt7k%-*lF%hC2;xH5kKV)0wN&Ry|Fk%?o&X79csMh3=9U;st#!x1 zHL!kF@b8Sj^dFD3{OstUKQ($oe1m+v#24_7+sGmAJ7F71Y-B!uNh+*h@(8G1lH5&$o7IMrQGI_MThz&+zgQR1H=lS~w zASdMuncpSzGkPJ2zXdnNycRrdgNwa+T~%a*w^HRxQV8DffPulxw5G_&aT>_JRmTn| zxjUDR^HlQx*>Rn=pqa(-VjnauoKN7Dk>2FcUM3kA>Kfk{29 r$dsWnu?cI+MV?yq++}9TMNU&jHgXJ($ip7rfvOYjpj=F^tStNj?8+!H delta 112 zcmZozz~0cnK0%sy4g&*&3=o6CL=AJsIU5re^78_@%$%PX_?_Z6o7Kf8ursYppKK@~!gMxwGmpqM78am#naNM&;#nH47zLZ%<+r=bGwz)*{ow}2 M$nCKk7#H&c09;`pHvj+t
    {recognitionRating} {matchScore.toFixed(1)}% - +