Prototipo YB01 #1
+26
-7
@@ -11,6 +11,10 @@ import {
|
||||
import { obtenerCategoria } from "./constants/categorias.js";
|
||||
import { enlaceGoogleMapsDesdeLocal, enlaceWazeDesdeLocal } from "./utils/geo.js";
|
||||
import StarRating from "./components/StarRating.jsx";
|
||||
import Toast from "./components/Toast.jsx";
|
||||
import useToast from "./hooks/useToast.js";
|
||||
|
||||
const CLAVE_TOAST_LOGIN = "localesp_mostrar_toast_login";
|
||||
|
||||
const S = {
|
||||
page: { minHeight:"100vh", background:"#F2EDE8", fontFamily:"-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif" },
|
||||
@@ -41,7 +45,10 @@ function PantallaAuth() {
|
||||
if (!email || !pass) { setErr("Rellena todos los campos."); return; }
|
||||
if (modo === "registro" && pass !== pass2) { setErr("Las contraseñas no coinciden."); return; }
|
||||
setBusy(true);
|
||||
try { modo === "login" ? await loginAdmin(email, pass) : await registrarAdmin(email, pass); }
|
||||
try {
|
||||
modo === "login" ? await loginAdmin(email, pass) : await registrarAdmin(email, pass);
|
||||
try { sessionStorage.setItem(CLAVE_TOAST_LOGIN, modo === "login" ? "1" : "0"); } catch { /* sessionStorage no disponible */ }
|
||||
}
|
||||
catch(e) { setErr(errMsg(e.code)); }
|
||||
setBusy(false);
|
||||
};
|
||||
@@ -127,9 +134,20 @@ function PanelAdmin({ email }) {
|
||||
const [busy, setBusy] = useState(false);
|
||||
const [guardando, setGuardando] = useState(false);
|
||||
const [buscador, setBuscador] = useState("");
|
||||
const { toast, mostrarToast } = useToast();
|
||||
|
||||
const cargarReportes = () => obtenerReportes().then(setReportes).catch(() => {});
|
||||
|
||||
useEffect(() => {
|
||||
try {
|
||||
const marca = sessionStorage.getItem(CLAVE_TOAST_LOGIN);
|
||||
if (marca !== null) {
|
||||
mostrarToast(marca === "1" ? `Sesión iniciada como ${email}` : "Cuenta de administrador creada", "exito");
|
||||
sessionStorage.removeItem(CLAVE_TOAST_LOGIN);
|
||||
}
|
||||
} catch { /* sessionStorage no disponible */ }
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
setCargando(true);
|
||||
let cancelado = false;
|
||||
@@ -143,10 +161,10 @@ function PanelAdmin({ email }) {
|
||||
return () => { cancelado = true; limpiarPendientes?.(); limpiarPublicados?.(); };
|
||||
}, []);
|
||||
|
||||
const aprobar = async (p) => { setBusy(true); try { await aprobarPropuesta(p); } catch(e) { alert("Error: "+e.message); } setBusy(false); };
|
||||
const rechazar = async (id) => { if (!confirm("¿Rechazar y eliminar esta propuesta?")) return; try { await rechazarPropuesta(id); } catch(e) { alert("Error: "+e.message); } };
|
||||
const eliminar = async (id) => { if (!confirm("¿Eliminar este local publicado?")) return; try { await deleteLocal(id); cargarReportes(); } catch(e) { alert("Error: "+e.message); } };
|
||||
const descartar = async (id) => { try { await descartarReporte(id); setReportes(r => r.filter(x => x.id !== id)); } catch(e) { alert("Error: "+e.message); } };
|
||||
const aprobar = async (p) => { setBusy(true); try { await aprobarPropuesta(p); mostrarToast(`✅ "${p.nombre}" aprobado y publicado`, "exito"); } catch(e) { mostrarToast("Error: "+e.message, "error"); } setBusy(false); };
|
||||
const rechazar = async (id) => { if (!confirm("¿Rechazar y eliminar esta propuesta?")) return; try { await rechazarPropuesta(id); mostrarToast("Propuesta rechazada", "info"); } catch(e) { mostrarToast("Error: "+e.message, "error"); } };
|
||||
const eliminar = async (id) => { if (!confirm("¿Eliminar este local publicado?")) return; try { await deleteLocal(id); cargarReportes(); mostrarToast("Local eliminado", "info"); } catch(e) { mostrarToast("Error: "+e.message, "error"); } };
|
||||
const descartar = async (id) => { try { await descartarReporte(id); setReportes(r => r.filter(x => x.id !== id)); mostrarToast("Aviso descartado", "info"); } catch(e) { mostrarToast("Error: "+e.message, "error"); } };
|
||||
|
||||
const addPalabra = () => {
|
||||
const p = nuevaP.trim().toLowerCase();
|
||||
@@ -155,8 +173,8 @@ function PanelAdmin({ email }) {
|
||||
};
|
||||
const guardarFiltro = async () => {
|
||||
setGuardando(true);
|
||||
try { await guardarPalabrasFiltradas(palabras); alert("✅ Filtro guardado."); }
|
||||
catch(e) { alert("Error: "+e.message); }
|
||||
try { await guardarPalabrasFiltradas(palabras); mostrarToast("💾 Filtro de palabras guardado", "exito"); }
|
||||
catch(e) { mostrarToast("Error: "+e.message, "error"); }
|
||||
setGuardando(false);
|
||||
};
|
||||
|
||||
@@ -318,6 +336,7 @@ function PanelAdmin({ email }) {
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<Toast toast={toast} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
+12
-4
@@ -167,11 +167,19 @@ export default function App() {
|
||||
return a.nombre.localeCompare(b.nombre);
|
||||
});
|
||||
|
||||
// Mapa Leaflet
|
||||
// Mapa Leaflet. El contenedor se mantiene siempre montado (ver más abajo,
|
||||
// solo se oculta con CSS) para que la instancia de Leaflet no se pierda al
|
||||
// cambiar de pestaña. Si ya existe, solo recalculamos su tamaño: Leaflet no
|
||||
// lo hace solo cuando el contenedor pasa de display:none a visible, y por
|
||||
// eso antes hacía falta refrescar la página para que el mapa se viera bien.
|
||||
useEffect(() => {
|
||||
if (vista !== "mapa") return;
|
||||
const timer = setTimeout(() => {
|
||||
if (!mapRef.current) return;
|
||||
if (mapInstanceRef.current) {
|
||||
mapInstanceRef.current.invalidateSize();
|
||||
return;
|
||||
}
|
||||
if (!window.L) {
|
||||
const link = document.createElement("link");
|
||||
link.rel = "stylesheet";
|
||||
@@ -468,8 +476,9 @@ export default function App() {
|
||||
</>
|
||||
)}
|
||||
|
||||
{vista === "mapa" && (
|
||||
<div style={{ borderRadius: "var(--border-radius-lg)", overflow: "hidden", border: "0.5px solid var(--color-border-tertiary)" }}>
|
||||
{/* El contenedor del mapa se mantiene siempre montado (solo se oculta con
|
||||
CSS) para que Leaflet no pierda su instancia al cambiar de pestaña. */}
|
||||
<div style={{ display: vista === "mapa" ? "block" : "none", borderRadius: "var(--border-radius-lg)", overflow: "hidden", border: "0.5px solid var(--color-border-tertiary)" }}>
|
||||
<div style={{ padding: "8px 12px", background: "var(--color-background-secondary)", borderBottom: "0.5px solid var(--color-border-tertiary)", display: "flex", flexWrap: "wrap", gap: 10 }}>
|
||||
{NOMBRES_CATEGORIAS.map((cat) => (
|
||||
<span key={cat} style={{ fontSize: 11, display: "flex", alignItems: "center", gap: 4, color: "var(--color-text-secondary)" }}>
|
||||
@@ -489,7 +498,6 @@ export default function App() {
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<p style={{ fontSize: 11, color: "var(--color-text-tertiary)", textAlign: "center", marginTop: "1.5rem" }}>
|
||||
Los locales pasan por revisión antes de publicarse · ¿Tienes un negocio? Proponlo arriba
|
||||
|
||||
@@ -2,7 +2,9 @@ import { useState } from "react";
|
||||
import CategoriaBadge from "./CategoriaBadge.jsx";
|
||||
import StarRating from "./StarRating.jsx";
|
||||
import ReportarLocal from "./ReportarLocal.jsx";
|
||||
import Toast from "./Toast.jsx";
|
||||
import useFavoritos from "../hooks/useFavoritos.js";
|
||||
import useToast from "../hooks/useToast.js";
|
||||
import { confirmarLocal } from "../firebase.js";
|
||||
import { enlaceGoogleMapsDesdeLocal, enlaceWazeDesdeLocal, formatearDistancia } from "../utils/geo.js";
|
||||
|
||||
@@ -24,6 +26,7 @@ function mesesDesde(fecha) {
|
||||
|
||||
export default function LocalCard({ local, distanciaKm }) {
|
||||
const { esFavorito, alternarFavorito } = useFavoritos();
|
||||
const { toast, mostrarToast } = useToast();
|
||||
const [confirmando, setConfirmando] = useState(false);
|
||||
const [confirmado, setConfirmado] = useState(false);
|
||||
const [fechaConfirmacion, setFechaConfirmacion] = useState(local.fechaConfirmacion || local.fecha);
|
||||
@@ -47,6 +50,12 @@ export default function LocalCard({ local, distanciaKm }) {
|
||||
setConfirmando(false);
|
||||
};
|
||||
|
||||
const handleAlternarFavorito = () => {
|
||||
const nuevoEstado = !favorito;
|
||||
alternarFavorito(local.id);
|
||||
mostrarToast(nuevoEstado ? "❤️ Añadido a favoritos" : "Quitado de favoritos", nuevoEstado ? "exito" : "info");
|
||||
};
|
||||
|
||||
const compartir = async () => {
|
||||
const url = `${window.location.origin}${window.location.pathname}?local=${local.id}`;
|
||||
const texto = `${local.nombre}${local.provincia ? ` · ${local.provincia}` : ""}`;
|
||||
@@ -82,7 +91,7 @@ export default function LocalCard({ local, distanciaKm }) {
|
||||
style={{ background: "none", border: "none", cursor: "pointer", fontSize: 16, color: "var(--color-text-tertiary)", padding: 4 }}>
|
||||
<i className="ti ti-share-2" aria-hidden="true"></i>
|
||||
</button>
|
||||
<button type="button" onClick={() => alternarFavorito(local.id)} title={favorito ? "Quitar de favoritos" : "Guardar en favoritos"}
|
||||
<button type="button" onClick={handleAlternarFavorito} title={favorito ? "Quitar de favoritos" : "Guardar en favoritos"}
|
||||
aria-pressed={favorito}
|
||||
style={{ background: "none", border: "none", cursor: "pointer", fontSize: 16, color: favorito ? "#8B0000" : "var(--color-text-tertiary)", padding: 4 }}>
|
||||
<i className={favorito ? "ti ti-heart-filled" : "ti ti-heart"} aria-hidden="true"></i>
|
||||
@@ -152,6 +161,8 @@ export default function LocalCard({ local, distanciaKm }) {
|
||||
)}
|
||||
<ReportarLocal localId={local.id} />
|
||||
</div>
|
||||
|
||||
<Toast toast={toast} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,24 @@
|
||||
const ESTILOS = {
|
||||
info: { bg: "#2C3E50", color: "white", icono: "ti-info-circle" },
|
||||
exito: { bg: "#1E8449", color: "white", icono: "ti-check" },
|
||||
error: { bg: "#C0392B", color: "white", icono: "ti-x" },
|
||||
};
|
||||
|
||||
// Aviso flotante breve, de solo lectura: se controla desde el hook useToast.
|
||||
export default function Toast({ toast }) {
|
||||
if (!toast) return null;
|
||||
const { bg, color, icono } = ESTILOS[toast.tipo] || ESTILOS.info;
|
||||
return (
|
||||
<div key={toast.key} role="status" aria-live="polite" style={{
|
||||
position: "fixed", left: "50%", bottom: 24, transform: "translateX(-50%)",
|
||||
background: bg, color, padding: "10px 18px", borderRadius: 999, fontSize: 13,
|
||||
fontWeight: 500, boxShadow: "0 6px 20px rgba(0,0,0,0.18)", zIndex: 2000,
|
||||
display: "flex", alignItems: "center", gap: 8, maxWidth: "90vw",
|
||||
animation: "localesp-toast-in 0.25s ease-out",
|
||||
}}>
|
||||
<i className={`ti ${icono}`} aria-hidden="true" style={{ fontSize: 15 }}></i>
|
||||
{toast.mensaje}
|
||||
<style>{"@keyframes localesp-toast-in{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}"}</style>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
import { useCallback, useRef, useState } from "react";
|
||||
|
||||
// Aviso breve tipo "snackbar" que aparece y desaparece solo. Uso:
|
||||
// const { toast, mostrarToast } = useToast();
|
||||
// mostrarToast("Añadido a favoritos", "exito");
|
||||
// <Toast toast={toast} />
|
||||
export default function useToast() {
|
||||
const [toast, setToast] = useState(null); // { mensaje, tipo }
|
||||
const timerRef = useRef(null);
|
||||
|
||||
const mostrarToast = useCallback((mensaje, tipo = "info", duracion = 2200) => {
|
||||
clearTimeout(timerRef.current);
|
||||
setToast({ mensaje, tipo, key: Date.now() });
|
||||
timerRef.current = setTimeout(() => setToast(null), duracion);
|
||||
}, []);
|
||||
|
||||
return { toast, mostrarToast };
|
||||
}
|
||||
Reference in New Issue
Block a user