Fix: auto refreshing on requesting member number in some cards in prod.

This commit is contained in:
Jose
2026-01-31 14:25:33 +01:00
parent f426b8e34e
commit 3c7de7e71d
5 changed files with 116 additions and 102 deletions

View File

@@ -54,11 +54,11 @@ function App() {
<Balance /> <Balance />
</ProtectedRoute> </ProtectedRoute>
} /> } />
<Route path="/documentacion" element={ {/*<Route path="/documentacion" element={
<ProtectedRoute> <ProtectedRoute>
<Documentacion /> <Documentacion />
</ProtectedRoute> </ProtectedRoute>
} /> } />*/}
<Route path="/anuncios" element={ <Route path="/anuncios" element={
<ProtectedRoute> <ProtectedRoute>
<Anuncios /> <Anuncios />

View File

@@ -36,7 +36,7 @@ const NavBar = () => {
const handleResize = () => { const handleResize = () => {
setIsLg(window.innerWidth >= 992 && window.innerWidth < 1200); setIsLg(window.innerWidth >= 992 && window.innerWidth < 1200);
}; };
handleResize(); // inicializar handleResize(); // inicializar
window.addEventListener('resize', handleResize); window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize); return () => window.removeEventListener('resize', handleResize);
@@ -55,114 +55,119 @@ const NavBar = () => {
return ( return (
<Navbar expand="lg" sticky="top" expanded={expanded} onToggle={() => setExpanded(!expanded)}> <>
<Container fluid> <Navbar expand="lg" sticky="top" expanded={expanded} onToggle={() => setExpanded(!expanded)}>
<Navbar.Toggle aria-controls="navbar" className="custom-toggler"> <Container fluid>
<svg width="30" height="30" viewBox="0 0 30 30"> <Navbar.Toggle aria-controls="navbar" className="custom-toggler">
<path <svg width="30" height="30" viewBox="0 0 30 30">
d="M4 7h22M4 15h22M4 23h22" <path
stroke="var(--navbar-link-color)" d="M4 7h22M4 15h22M4 23h22"
strokeWidth="3" stroke="var(--navbar-link-color)"
strokeLinecap="round" strokeWidth="3"
strokeMiterlimit="10" strokeLinecap="round"
/> strokeMiterlimit="10"
</svg> />
</Navbar.Toggle> </svg>
</Navbar.Toggle>
<Navbar.Collapse id="main-navbar"> <Navbar.Collapse id="main-navbar">
<Nav className="me-auto gap-2"> <Nav className="me-auto gap-2">
<Nav.Link
as={Link}
to="/"
title="Inicio"
href="/"
className={`text-truncate ${expanded ? "mt-3" : ""}`}
onClick={() => setExpanded(false)}
>
<FontAwesomeIcon icon={faHouse} className="me-2" />
Inicio
</Nav.Link>
<Nav.Link
as={Link}
to="/lista-espera"
title="Lista de espera"
className={`text-truncate ${expanded ? "mt-3" : ""}`}
onClick={() => setExpanded(false)}
>
<FontAwesomeIcon icon={faList} className="me-2" />
Lista de espera
</Nav.Link>
<IfAuthenticated>
<Nav.Link <Nav.Link
as={Link} as={Link}
to="/anuncios" to="/"
title="Anuncios" title="Inicio"
href="/"
className={`text-truncate ${expanded ? "mt-3" : ""}`} className={`text-truncate ${expanded ? "mt-3" : ""}`}
onClick={() => setExpanded(false)} onClick={() => setExpanded(false)}
> >
<FontAwesomeIcon icon={faBullhorn} className="me-2" />Anuncios <FontAwesomeIcon icon={faHouse} className="me-2" />
Inicio
</Nav.Link> </Nav.Link>
<Nav.Link
as={Link}
to="/lista-espera"
title="Lista de espera"
className={`text-truncate ${expanded ? "mt-3" : ""}`}
onClick={() => setExpanded(false)}
>
<FontAwesomeIcon icon={faList} className="me-2" />
Lista de espera
</Nav.Link>
<IfAuthenticated>
<Nav.Link
as={Link}
to="/anuncios"
title="Anuncios"
className={`text-truncate ${expanded ? "mt-3" : ""}`}
onClick={() => setExpanded(false)}
>
<FontAwesomeIcon icon={faBullhorn} className="me-2" />Anuncios
</Nav.Link>
</IfAuthenticated>
<Nav.Link <Nav.Link
as={Link} as={Link}
to="/documentacion" to="#" // /documentacion
title="Documentación" title="Documentación"
className={`text-truncate ${expanded ? "mt-3" : ""}`} className={`text-truncate ${expanded ? "mt-3" : ""}`}
onClick={() => setExpanded(false)} onClick={() => {
window.open("https://miarma.net/files/huertos/", "_blank");
setExpanded(false);
}}
> >
<FontAwesomeIcon icon={faFile} className="me-2" />Documentación <FontAwesomeIcon icon={faFile} className="me-2" />Documentación
</Nav.Link> </Nav.Link>
<IfRole roles={[CONSTANTS.ROLE_ADMIN, CONSTANTS.ROLE_DEV]}>
<NavGestion onNavigate={() => setExpanded(false)} externalExpanded={expanded} />
</IfRole>
<div className="d-lg-none mt-2 ms-2">
<ThemeButton onlyIcon={isLg} />
</div>
</Nav>
</Navbar.Collapse>
<div className="d-none d-lg-block me-3">
<ThemeButton onlyIcon={isLg} />
</div>
<Nav className="d-flex flex-md-row flex-column gap-2 ms-auto align-items-center">
<IfAuthenticated>
<AnimatedDropdown
className='end-0 position-absolute'
show={showingUserDropdown}
onMouseEnter={() => setShowingUserDropdown(true)}
onMouseLeave={() => setShowingUserDropdown(false)}
onToggle={(isOpen) => setShowingUserDropdown(isOpen)}
trigger={
<Link className="nav-link dropdown-toggle fw-bold">
@{identity?.account?.username}
</Link>
}
>
<Link to="/perfil" className="text-muted dropdown-item nav-link">
<FontAwesomeIcon icon={faUser} className="me-2" />
Mi perfil
</Link>
<hr className="dropdown-divider" />
<Link to="#" className="dropdown-item nav-link" onClick={logout}>
<FontAwesomeIcon icon={faSignOut} className="me-2" />
Cerrar sesión
</Link>
</AnimatedDropdown>
</IfAuthenticated> </IfAuthenticated>
<IfRole roles={[CONSTANTS.ROLE_ADMIN, CONSTANTS.ROLE_DEV]}> <IfNotAuthenticated>
<NavGestion onNavigate={() => setExpanded(false)} externalExpanded={expanded} /> <Nav.Link as={Link} to="/login" title="Iniciar sesión">
</IfRole> <FontAwesomeIcon icon={faSignIn} className="me-2" />
<div className="d-lg-none mt-2 ms-2"> Iniciar sesión
<ThemeButton onlyIcon={isLg} /> </Nav.Link>
</div> </IfNotAuthenticated>
</Nav> </Nav>
</Navbar.Collapse> </Container>
</Navbar>
<div className="d-none d-lg-block me-3"> </>
<ThemeButton onlyIcon={isLg} />
</div>
<Nav className="d-flex flex-md-row flex-column gap-2 ms-auto align-items-center">
<IfAuthenticated>
<AnimatedDropdown
className='end-0 position-absolute'
show={showingUserDropdown}
onMouseEnter={() => setShowingUserDropdown(true)}
onMouseLeave={() => setShowingUserDropdown(false)}
onToggle={(isOpen) => setShowingUserDropdown(isOpen)}
trigger={
<Link className="nav-link dropdown-toggle fw-bold">
@{identity?.account?.username}
</Link>
}
>
<Link to="/perfil" className="text-muted dropdown-item nav-link">
<FontAwesomeIcon icon={faUser} className="me-2" />
Mi perfil
</Link>
<hr className="dropdown-divider" />
<Link to="#" className="dropdown-item nav-link" onClick={logout}>
<FontAwesomeIcon icon={faSignOut} className="me-2" />
Cerrar sesión
</Link>
</AnimatedDropdown>
</IfAuthenticated>
<IfNotAuthenticated>
<Nav.Link as={Link} to="/login" title="Iniciar sesión">
<FontAwesomeIcon icon={faSignIn} className="me-2" />
Iniciar sesión
</Nav.Link>
</IfNotAuthenticated>
</Nav>
</Container>
</Navbar>
); );
}; };

View File

@@ -145,7 +145,9 @@ const SocioCard = ({ identity, isNew = false, onCreate, onUpdate, onDelete, onCa
try { try {
if (!(createMode || editMode)) return; if (!(createMode || editMode)) return;
const latestNumber = await getData("http://localhost:8081/v2/huertos/users/latest-number", {}, false); const latestNumber = import.meta.env.MODE === 'production' ?
await getData("https://api.miarma.net/v2/huertos/users/latest-number", {}, false)
: await getData("http://localhost:8081/v2/huertos/users/latest-number", {}, false);
const nuevoNumero = latestNumber + 1; const nuevoNumero = latestNumber + 1;
setLatestNumber(nuevoNumero); setLatestNumber(nuevoNumero);

View File

@@ -27,7 +27,9 @@ const NewUserForm = ({ onSubmit, userType, plotNumber, fieldErrors }) => {
fetchedOnce.current = true; fetchedOnce.current = true;
try { try {
const latestNumber = await getData("http://localhost:8081/v2/huertos/users/latest-number", {}, false); const latestNumber = import.meta.env.MODE === 'production' ?
await getData("https://api.miarma.net/v2/huertos/users/latest-number", {}, false)
: await getData("http://localhost:8081/v2/huertos/users/latest-number", {}, false);
setForm((prev) => ({ setForm((prev) => ({
...prev, ...prev,
memberNumber: latestNumber + 1 memberNumber: latestNumber + 1

View File

@@ -13,13 +13,17 @@ export const useData = (config, onError) => {
} }
}, [config]); }, [config]);
const getAuthHeaders = () => { const getAuthHeaders = (isFormData = false) => {
const token = localStorage.getItem("token"); const token = localStorage.getItem("token");
if (!token) return { "Content-Type": "application/json" };
return { const headers = {};
"Content-Type": "application/json", if (token) headers.Authorization = `Bearer ${token}`;
"Authorization": `Bearer ${token}`,
}; if (!isFormData) {
headers["Content-Type"] = "application/json";
}
return headers;
}; };
const handleAxiosError = (err) => { const handleAxiosError = (err) => {
@@ -90,7 +94,8 @@ export const useData = (config, onError) => {
const requestWrapper = async (method, endpoint, payload = null, refresh = false) => { const requestWrapper = async (method, endpoint, payload = null, refresh = false) => {
try { try {
const headers = getAuthHeaders(); const isFormData = payload instanceof FormData;
const headers = getAuthHeaders(isFormData);
const cfg = { headers }; const cfg = { headers };
let response; let response;