fix(web): display selected provider on initial load #71
Conversation
Initialize cascading selectors with synced state tracking to ensure selected offer displays correctly when navigating to Dashboard with cached offers data. Prevents dropdown from showing 'Sélectionner...' on page load. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
There was a problem hiding this comment.
Pull request overview
This PR fixes an issue where selected energy offers were not displaying correctly on the Dashboard page when navigating back to a PDL card with a pre-selected offer that's cached by React Query. The fix adds state tracking to synchronize cascading selectors with the selected offer, handling both initial load scenarios and external offer changes.
Key changes:
- Introduced
lastSyncedOfferIdstate to track which offer has been synced to the selectors - Enhanced the
useEffectto conditionally sync selectors only when the offer changes externally - Added logic to distinguish between initial mount, external changes, and offer clearing
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| useEffect(() => { | ||
| if (selectedOffer) { | ||
| setSelectedProviderId(selectedOffer.provider_id) | ||
| setSelectedOfferType(selectedOffer.offer_type) | ||
| // We have a valid offer - sync the selectors if not already synced to this offer | ||
| if (lastSyncedOfferId !== selectedOffer.id) { | ||
| setSelectedProviderId(selectedOffer.provider_id) | ||
| setSelectedOfferType(selectedOffer.offer_type) | ||
| setLastSyncedOfferId(selectedOffer.id) | ||
| } | ||
| } else if (selectedOfferId === null || selectedOfferId === undefined) { | ||
| // Offer was cleared externally - reset selectors | ||
| if (lastSyncedOfferId !== null) { | ||
| setSelectedProviderId(null) | ||
| setSelectedOfferType(null) | ||
| setLastSyncedOfferId(null) | ||
| } | ||
| } | ||
| }, [selectedOffer]) | ||
| // Note: when selectedOfferId is set but selectedOffer is null (offers loading), | ||
| // we wait - the effect will re-run when offers finish loading | ||
| }, [selectedOffer, selectedOfferId, lastSyncedOfferId]) |
There was a problem hiding this comment.
Critical bug: This effect will interfere with manual user selection. When a user manually changes selectedProviderId via handleProviderChange (line 127), the effect will immediately re-sync the selectors back to the old selectedOffer values, preventing the user from changing their selection.
The issue occurs because:
- User changes provider →
handleProviderChangesetsselectedProviderIdto new value selectedOfferIdprop hasn't changed yet (still old offer)- Effect runs →
selectedOfferis still the old offer andlastSyncedOfferId !== selectedOffer.idis true - Effect resets
selectedProviderIdback to old offer's provider
To fix this, you need to update lastSyncedOfferId when users manually interact with the selectors (in handleProviderChange, handleOfferTypeChange, and handleClear). This tells the effect that the user is actively changing the selection and prevents it from overwriting their changes. For example:
const handleProviderChange = (providerId: string | null) => {
setSelectedProviderId(providerId)
setSelectedOfferType(null)
setLastSyncedOfferId(undefined) // Signal that user is manually selecting
}| if (lastSyncedOfferId !== null) { | ||
| setSelectedProviderId(null) | ||
| setSelectedOfferType(null) | ||
| setLastSyncedOfferId(null) | ||
| } |
There was a problem hiding this comment.
Bug: The condition lastSyncedOfferId !== null will fail to reset selectors when lastSyncedOfferId is undefined (its initial state).
This can happen on initial render if selectedOfferId is null or undefined from the start. In this case, lastSyncedOfferId would be undefined, but the condition checks for !== null, so the reset won't happen.
Change the condition to:
if (lastSyncedOfferId !== null && lastSyncedOfferId !== undefined) {Or more concisely:
if (lastSyncedOfferId != null) { // using != instead of !== checks both null and undefined
Summary
Fix issue where selected energy offer was not displayed on Dashboard page load. When navigating back to a PDL card with a pre-selected offer (cached by React Query), the cascading selectors showed 'Sélectionner...' instead of the saved values.
Changes
Testing