From 5ffd9db8ab9d51b634cbed8af6fce186ea66117e Mon Sep 17 00:00:00 2001
From: gnacho <hnacho@proton.me>
Date: Mon, 12 Oct 2026 09:45:00 +0200
Subject: [PATCH] fix(charger): uploading a photo no longer blanks the page

invalidateExtensions() nulled the extensions cache, unmounting the
page and the nav until a manual reload. The upload endpoint already
persists and re-resolves server-side, so the client now only
cache-busts the local <img> via an onUploaded callback.
---
 app/src/components/ChargerImageButtons.tsx | 5 ++---
 app/src/pages/Cargador.tsx                 | 6 ++++--
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/app/src/components/ChargerImageButtons.tsx b/app/src/components/ChargerImageButtons.tsx
index 2a93fd3..2778290 100644
--- a/app/src/components/ChargerImageButtons.tsx
+++ b/app/src/components/ChargerImageButtons.tsx
@@ -2,14 +2,13 @@ import { useRef, useState } from 'react';
 import { ImagePlus } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import type { ChargerCfg } from '@/data/types';
-import { invalidateExtensions } from '@/hooks/useExtensions';
 import { apiFetch } from '@/data/api-client';
 import { heliosToast } from '@/lib/toast';
 
 /** Boton pequeno (arriba-derecha de la tarjeta) para cambiar la foto del
  *  coche: reescala a 460 px de alto en canvas (conserva transparencia) y la
  *  sube al endpoint del cargador. La imagen vive en dataDir, no en el repo. */
-export default function ChargerImageButtons({ charger }: { charger: ChargerCfg }) {
+export default function ChargerImageButtons({ charger, onUploaded }: { charger: ChargerCfg; onUploaded?: () => void }) {
   const { t } = useTranslation();
   const fileRef = useRef<HTMLInputElement>(null);
   const [busy, setBusy] = useState(false);
@@ -40,7 +39,7 @@ export default function ChargerImageButtons({ charger }: { charger: ChargerCfg }
         body: JSON.stringify({ image: dataUrl }),
         headers: { 'Content-Type': 'application/json' },
       });
-      invalidateExtensions();
+      onUploaded?.();
       heliosToast(t('cargador.imageOk'));
     } catch (err) {
       console.error('[imagen]', err);
diff --git a/app/src/pages/Cargador.tsx b/app/src/pages/Cargador.tsx
index 22cb2ef..1adf9db 100644
--- a/app/src/pages/Cargador.tsx
+++ b/app/src/pages/Cargador.tsx
@@ -124,6 +124,8 @@ function ChargerView({ charger, live }: { charger: ChargerCfg; live?: ChargerLiv
   const { getHistory } = useEnergyData();
 
   const [curve, setCurve] = useState<ChargerCurvePoint[] | null>(null);
+  // cache-bust de la foto tras subirla (sin recargar la config global)
+  const [imgBust, setImgBust] = useState(0);
   const [history, setHistory] = useState<HistoryDay[] | null>(null);
   const [pwrBusy, setPwrBusy] = useState(false);
   const [ampBusy, setAmpBusy] = useState(false);
@@ -319,7 +321,7 @@ function ChargerView({ charger, live }: { charger: ChargerCfg; live?: ChargerLiv
               <stateChip.Icon size={14} />
               {stateChip.text}
             </span>
-              <ChargerImageButtons charger={charger} />
+              <ChargerImageButtons charger={charger} onUploaded={() => setImgBust(Date.now())} />
           </div>
 
           <div className="flex flex-col gap-5 lg:flex-row lg:items-stretch">
@@ -331,7 +333,7 @@ function ChargerView({ charger, live }: { charger: ChargerCfg; live?: ChargerLiv
             >
               {charger.imageUrl ? (
                 <img
-                  src={charger.imageUrl}
+                  src={`${charger.imageUrl}${imgBust ? `?t=${imgBust}` : ''}`}
                   alt={charger.name}
                   draggable={false}
                   className="h-full max-h-full w-full object-contain select-none"