feat: directorio más fiable y más fácil de usar

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.
2026-08-10 22:23:35 +02:00
parent 257fb9c622
commit b36867225c
14 changed files with 826 additions and 58 deletions
@@ -0,0 +1,63 @@
+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>
+  );
+}