edgar.friendly
b36867225c
El objetivo de estos cambios es, por un lado, mantener los datos
actualizados y, por otro, mejorar la experiencia para quienes lo usan:
- Fiabilidad: los locales se pueden confirmar ("Sigue aquí") y
reportar (cerrado, datos incorrectos...), y se avisa de duplicados
antes de publicar, para que el contenido no se quede obsoleto ni
repetido.
- Usabilidad: autocompletado al proponer, favoritos, "cerca de mí",
compartir fichas, enlaces a Waze y una política de privacidad
visible, para que sea más sencillo aportar y encontrar locales.
64 lines
3.0 KiB
React
64 lines
3.0 KiB
React
import { useState } from "react";
|
|
import { reportarLocal } from "../firebase.js";
|
|
|
|
const MOTIVOS = [
|
|
{ id: "cerrado", label: "Ha cerrado / ya no existe" },
|
|
{ id: "datos_incorrectos", label: "Los datos son incorrectos" },
|
|
{ id: "inapropiado", label: "Contenido inapropiado" },
|
|
{ id: "otro", label: "Otro motivo" },
|
|
];
|
|
|
|
export default function ReportarLocal({ localId }) {
|
|
const [abierto, setAbierto] = useState(false);
|
|
const [motivo, setMotivo] = useState("cerrado");
|
|
const [comentario, setComentario] = useState("");
|
|
const [enviando, setEnviando] = useState(false);
|
|
const [enviado, setEnviado] = useState(false);
|
|
|
|
if (enviado) {
|
|
return <p style={{ fontSize: 12, color: "#1E8449", margin: 0 }}>✅ Gracias, hemos recibido tu aviso.</p>;
|
|
}
|
|
|
|
if (!abierto) {
|
|
return (
|
|
<button type="button" onClick={() => setAbierto(true)}
|
|
style={{ display: "inline-flex", alignItems: "center", gap: 4, background: "none", border: "none", padding: 0, fontSize: 12, color: "var(--color-text-tertiary)", cursor: "pointer", width: "fit-content" }}>
|
|
<i className="ti ti-flag" aria-hidden="true"></i> Reportar
|
|
</button>
|
|
);
|
|
}
|
|
|
|
const enviar = async () => {
|
|
setEnviando(true);
|
|
try {
|
|
await reportarLocal(localId, motivo, comentario);
|
|
setEnviado(true);
|
|
} catch (e) {
|
|
console.error(e);
|
|
}
|
|
setEnviando(false);
|
|
};
|
|
|
|
return (
|
|
<div style={{ background: "var(--color-background-secondary)", borderRadius: "var(--border-radius-md)", padding: "8px 10px", display: "flex", flexDirection: "column", gap: 6 }}>
|
|
<p style={{ margin: 0, fontSize: 12, fontWeight: 500 }}>¿Qué está mal con este local?</p>
|
|
<select value={motivo} onChange={(e) => setMotivo(e.target.value)}
|
|
style={{ fontSize: 12, padding: "5px 8px", borderRadius: "var(--border-radius-md)", border: "0.5px solid var(--color-border-secondary)", background: "var(--color-background-primary)", color: "var(--color-text-primary)" }}>
|
|
{MOTIVOS.map((m) => <option key={m.id} value={m.id}>{m.label}</option>)}
|
|
</select>
|
|
<textarea value={comentario} onChange={(e) => setComentario(e.target.value)} placeholder="Comentario opcional..."
|
|
style={{ fontSize: 12, padding: "5px 8px", borderRadius: "var(--border-radius-md)", border: "0.5px solid var(--color-border-secondary)", background: "var(--color-background-primary)", color: "var(--color-text-primary)", resize: "vertical", minHeight: 40 }} />
|
|
<div style={{ display: "flex", gap: 6 }}>
|
|
<button type="button" onClick={enviar} disabled={enviando}
|
|
style={{ fontSize: 12, background: "#8B0000", color: "white", border: "none", borderRadius: "var(--border-radius-md)", padding: "5px 12px", cursor: "pointer" }}>
|
|
{enviando ? "Enviando..." : "Enviar aviso"}
|
|
</button>
|
|
<button type="button" onClick={() => setAbierto(false)}
|
|
style={{ fontSize: 12, background: "none", border: "none", color: "var(--color-text-tertiary)", cursor: "pointer" }}>
|
|
Cancelar
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|