@@ -61,7 +61,9 @@ export default function ParticipantRankingPage({
6161 participantType = 'caregiver' ,
6262 caregiverHasCancer = true ,
6363} : ParticipantRankingPageProps ) {
64- const [ derivedParticipantType , setDerivedParticipantType ] = useState < 'cancerPatient' | 'caregiver' | null > ( null ) ;
64+ const [ derivedParticipantType , setDerivedParticipantType ] = useState <
65+ 'cancerPatient' | 'caregiver' | null
66+ > ( null ) ;
6567 const [ derivedCaregiverHasCancer , setDerivedCaregiverHasCancer ] = useState < boolean | null > ( null ) ;
6668 const [ isLoadingCase , setIsLoadingCase ] = useState < boolean > ( false ) ;
6769
@@ -133,7 +135,9 @@ export default function ParticipantRankingPage({
133135 try {
134136 setIsLoadingOptions ( true ) ;
135137 setOptionsError ( null ) ;
136- const { data } = await baseAPIClient . get < OptionsResponse > ( '/ranking/options' , { params : { target } } ) ;
138+ const { data } = await baseAPIClient . get < OptionsResponse > ( '/ranking/options' , {
139+ params : { target } ,
140+ } ) ;
137141 const staticQualitiesExpanded : DisplayOption [ ] = ( data . staticQualities || [ ] ) . flatMap ( ( q ) => {
138142 const scopes = q . allowedScopes || [ ] ;
139143 return scopes . map ( ( s ) => ( {
@@ -219,7 +223,11 @@ export default function ParticipantRankingPage({
219223
220224 // For patient flow, fetch options once
221225 useEffect ( ( ) => {
222- if ( effectiveParticipantType === 'cancerPatient' && singleColumnOptions . length === 0 && ! isLoadingOptions ) {
226+ if (
227+ effectiveParticipantType === 'cancerPatient' &&
228+ singleColumnOptions . length === 0 &&
229+ ! isLoadingOptions
230+ ) {
223231 fetchOptions ( 'patient' ) ;
224232 }
225233 // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -236,7 +244,9 @@ export default function ParticipantRankingPage({
236244 p = { 10 }
237245 >
238246 { optionsError ? (
239- < Text color = "red.500" mb = { 4 } > { optionsError } </ Text >
247+ < Text color = "red.500" mb = { 4 } >
248+ { optionsError }
249+ </ Text >
240250 ) : null }
241251
242252 { effectiveParticipantType === 'caregiver' ? (
@@ -303,38 +313,23 @@ export default function ParticipantRankingPage({
303313 boxShadow = "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)"
304314 p = { 10 }
305315 >
306- { // Prefer explicit flag; otherwise infer from value
307- ( formData . isCaregiverVolunteerFlow ?? false ) ||
308- formData . volunteerType === 'caringForLovedOne' ||
309- ( ! ! formData . volunteerType && formData . volunteerType !== 'similarDiagnosis' ) ? (
310- < CaregiverTwoColumnQualitiesForm
311- selectedQualities = { formData . selectedQualities }
312- onQualityToggle = { toggleQuality }
313- leftOptions = { leftColumnOptions }
314- rightOptions = { rightColumnOptions }
315- onNext = { ( ) => {
316- if ( leftColumnOptions . length === 0 && rightColumnOptions . length === 0 && ! isLoadingOptions ) {
317- fetchOptions ( 'caregiver' ) ;
318- }
319- const keys = formData . selectedQualities ;
320- const labels = keys . map ( ( k ) => optionsIndex [ k ] ?. label || k ) ;
321- setFormData ( ( prev ) => ( {
322- ...prev ,
323- rankedPreferences : [ ...labels ] ,
324- rankedKeys : [ ...keys ] ,
325- } ) ) ;
326- setCurrentStep ( 4 ) ;
327- } }
328- />
329- ) : effectiveCaregiverHasCancer ? (
330- formData . volunteerType === 'similarDiagnosis' ? (
331- < CaregiverQualitiesForm
316+ {
317+ // Prefer explicit flag; otherwise infer from value
318+ ( formData . isCaregiverVolunteerFlow ?? false ) ||
319+ formData . volunteerType === 'caringForLovedOne' ||
320+ ( ! ! formData . volunteerType && formData . volunteerType !== 'similarDiagnosis' ) ? (
321+ < CaregiverTwoColumnQualitiesForm
332322 selectedQualities = { formData . selectedQualities }
333323 onQualityToggle = { toggleQuality }
334- options = { singleColumnOptions }
324+ leftOptions = { leftColumnOptions }
325+ rightOptions = { rightColumnOptions }
335326 onNext = { ( ) => {
336- if ( singleColumnOptions . length === 0 && ! isLoadingOptions ) {
337- fetchOptions ( 'patient' ) ;
327+ if (
328+ leftColumnOptions . length === 0 &&
329+ rightColumnOptions . length === 0 &&
330+ ! isLoadingOptions
331+ ) {
332+ fetchOptions ( 'caregiver' ) ;
338333 }
339334 const keys = formData . selectedQualities ;
340335 const labels = keys . map ( ( k ) => optionsIndex [ k ] ?. label || k ) ;
@@ -346,8 +341,48 @@ export default function ParticipantRankingPage({
346341 setCurrentStep ( 4 ) ;
347342 } }
348343 />
344+ ) : effectiveCaregiverHasCancer ? (
345+ formData . volunteerType === 'similarDiagnosis' ? (
346+ < CaregiverQualitiesForm
347+ selectedQualities = { formData . selectedQualities }
348+ onQualityToggle = { toggleQuality }
349+ options = { singleColumnOptions }
350+ onNext = { ( ) => {
351+ if ( singleColumnOptions . length === 0 && ! isLoadingOptions ) {
352+ fetchOptions ( 'patient' ) ;
353+ }
354+ const keys = formData . selectedQualities ;
355+ const labels = keys . map ( ( k ) => optionsIndex [ k ] ?. label || k ) ;
356+ setFormData ( ( prev ) => ( {
357+ ...prev ,
358+ rankedPreferences : [ ...labels ] ,
359+ rankedKeys : [ ...keys ] ,
360+ } ) ) ;
361+ setCurrentStep ( 4 ) ;
362+ } }
363+ />
364+ ) : (
365+ < VolunteerMatchingForm
366+ selectedQualities = { formData . selectedQualities }
367+ onQualityToggle = { toggleQuality }
368+ options = { singleColumnOptions }
369+ onNext = { ( ) => {
370+ if ( singleColumnOptions . length === 0 && ! isLoadingOptions ) {
371+ fetchOptions ( 'patient' ) ;
372+ }
373+ const keys = formData . selectedQualities ;
374+ const labels = keys . map ( ( k ) => optionsIndex [ k ] ?. label || k ) ;
375+ setFormData ( ( prev ) => ( {
376+ ...prev ,
377+ rankedPreferences : [ ...labels ] ,
378+ rankedKeys : [ ...keys ] ,
379+ } ) ) ;
380+ setCurrentStep ( 4 ) ;
381+ } }
382+ />
383+ )
349384 ) : (
350- < VolunteerMatchingForm
385+ < CaregiverQualitiesForm
351386 selectedQualities = { formData . selectedQualities }
352387 onQualityToggle = { toggleQuality }
353388 options = { singleColumnOptions }
@@ -366,26 +401,7 @@ export default function ParticipantRankingPage({
366401 } }
367402 />
368403 )
369- ) : (
370- < CaregiverQualitiesForm
371- selectedQualities = { formData . selectedQualities }
372- onQualityToggle = { toggleQuality }
373- options = { singleColumnOptions }
374- onNext = { ( ) => {
375- if ( singleColumnOptions . length === 0 && ! isLoadingOptions ) {
376- fetchOptions ( 'patient' ) ;
377- }
378- const keys = formData . selectedQualities ;
379- const labels = keys . map ( ( k ) => optionsIndex [ k ] ?. label || k ) ;
380- setFormData ( ( prev ) => ( {
381- ...prev ,
382- rankedPreferences : [ ...labels ] ,
383- rankedKeys : [ ...keys ] ,
384- } ) ) ;
385- setCurrentStep ( 4 ) ;
386- } }
387- />
388- ) }
404+ }
389405 </ Box >
390406 </ Flex >
391407 ) ;
@@ -411,7 +427,8 @@ export default function ParticipantRankingPage({
411427 let target : 'patient' | 'caregiver' = 'patient' ;
412428 if (
413429 effectiveParticipantType === 'caregiver' &&
414- ( ( formData . isCaregiverVolunteerFlow ?? false ) || formData . volunteerType === 'caringForLovedOne' )
430+ ( ( formData . isCaregiverVolunteerFlow ?? false ) ||
431+ formData . volunteerType === 'caringForLovedOne' )
415432 ) {
416433 target = 'caregiver' ;
417434 } else {
0 commit comments