Skip to content

fix(web): hide selected offer and expand info when no consumption data #39

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
m4dm4rtig4n merged 2 commits into from
Dec 2, 2025
Merged

fix(web): hide selected offer and expand info when no consumption data #39

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b8dd867
fix(web): hide selected offer and auto-expand info when no consumptio…
Dec 2, 2025
86cf584
fix: restore original package-lock.json
Dec 2, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions apps/web/src/pages/ConsumptionEuro/components/InfoBlock.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,10 +41,10 @@ export function InfoBlock({ isExpanded, onToggle }: InfoBlockProps) {
{/* Collapsible Content */}
{isExpanded && (
<div className="px-6 pb-6 space-y-4">
{/* Cache Warning */}
<div className="bg-orange-50 dark:bg-orange-900/20 border border-orange-200 dark:border-orange-800 rounded-lg p-4">
<p className="text-sm text-orange-800 dark:text-orange-200">
<strong>💾 Cache automatique :</strong> L'utilisation de cette page entraîne un stockage temporaire de vos données de consommation dans le cache de la passerelle. Ces données sont chiffrées et expirent automatiquement après <strong>24 heures</strong>.
{/* Cache Information */}
<div className="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4">
<p className="text-sm text-yellow-800 dark:text-yellow-200">
<strong>💾 Cache automatique :</strong> L'utilisation de la page de consommation active automatiquement le cache. Vos données de consommation seront stockées temporairement pour améliorer les performances et éviter de solliciter excessivement l'API Enedis. Les données en cache expirent automatiquement après <strong>24 heures</strong>.
</p>
</div>

Expand Down
21 changes: 11 additions & 10 deletions apps/web/src/pages/ConsumptionEuro/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -165,6 +165,11 @@ export default function ConsumptionEuro() {
}
}, [selectedPDL, hasDataInCache, dateRange])

// Expand info block when no data, collapse when data is available
useEffect(() => {
setIsInfoExpanded(!hasDataInCache)
}, [hasDataInCache])
Comment on lines +168 to +171
Copy link

Copilot AI Dec 2, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This useEffect will override user preferences whenever hasDataInCache changes. If a user manually collapses the info block while no data is present, it will be re-expanded when data loads (or vice versa).

Consider using a flag to track whether the user has manually toggled the info block, and only auto-expand on the initial mount when there's no data:

const [hasManuallyToggled, setHasManuallyToggled] = useState(false)

// Expand info block only on initial load when no data
useEffect(() => {
  if (!hasManuallyToggled) {
    setIsInfoExpanded(!hasDataInCache)
  }
}, [hasDataInCache, hasManuallyToggled])

Then update the toggle handler:

onToggle={() => {
  setHasManuallyToggled(true)
  setIsInfoExpanded(!isInfoExpanded)
}}

Copilot uses AI. Check for mistakes.

// Poll for cache updates
useEffect(() => {
let pollCount = 0
Expand Down Expand Up @@ -274,7 +279,7 @@ export default function ConsumptionEuro() {
)}

{/* Current offer info with pricing details */}
{hasOffer && selectedOfferWithProvider && (
{hasDataInCache && hasOffer && selectedOfferWithProvider && (
<AnimatedSection isVisible={true} delay={0}>
<div className="mb-6">
<OfferPricingCard selectedOffer={selectedOfferWithProvider} />
Expand Down Expand Up @@ -427,15 +432,11 @@ export default function ConsumptionEuro() {
</div>
</AnimatedSection>

{/* Info block */}
{hasCostData && (
<AnimatedSection isVisible={true} delay={300}>
<InfoBlock
isExpanded={isInfoExpanded}
onToggle={() => setIsInfoExpanded(!isInfoExpanded)}
/>
</AnimatedSection>
)}
{/* Info block - Always visible like in Consumption kWh page */}
<InfoBlock
isExpanded={isInfoExpanded}
onToggle={() => setIsInfoExpanded(!isInfoExpanded)}
/>
</div>
)
}