Primer prototipo
This commit is contained in:
+53
@@ -0,0 +1,53 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import MapView from "./components/MapView.jsx";
|
||||
import Sidebar from "./components/Sidebar.jsx";
|
||||
import SubmitForm from "./components/SubmitForm.jsx";
|
||||
import { getApproved, submit } from "./services/businessRepository.js";
|
||||
|
||||
export default function App() {
|
||||
const [businesses, setBusinesses] = useState([]);
|
||||
const [selectedId, setSelectedId] = useState(null);
|
||||
const [formOpen, setFormOpen] = useState(false);
|
||||
const [pickedLocation, setPickedLocation] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
setBusinesses(getApproved());
|
||||
}, []);
|
||||
|
||||
const selected = businesses.find((b) => b.id === selectedId) || null;
|
||||
|
||||
function handleSubmit(data) {
|
||||
submit(data);
|
||||
setFormOpen(false);
|
||||
setPickedLocation(null);
|
||||
alert("¡Gracias! Tu propuesta queda pendiente de revisión.");
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="app">
|
||||
<Sidebar
|
||||
business={selected}
|
||||
onContribute={() => setFormOpen(true)}
|
||||
onClose={() => setSelectedId(null)}
|
||||
/>
|
||||
<MapView
|
||||
businesses={businesses}
|
||||
selectedId={selectedId}
|
||||
onSelect={setSelectedId}
|
||||
pickingLocation={formOpen}
|
||||
onPickLocation={setPickedLocation}
|
||||
pickedLocation={pickedLocation}
|
||||
/>
|
||||
{formOpen && (
|
||||
<SubmitForm
|
||||
pickedLocation={pickedLocation}
|
||||
onSubmit={handleSubmit}
|
||||
onCancel={() => {
|
||||
setFormOpen(false);
|
||||
setPickedLocation(null);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,68 @@
|
||||
import { MapContainer, TileLayer, Marker, useMapEvents } from "react-leaflet";
|
||||
import L from "leaflet";
|
||||
|
||||
// Configuración del icono por defecto. Leaflet no encuentra sus iconos cuando
|
||||
// se empaqueta con Vite; los referenciamos desde el CDN para no copiar
|
||||
// archivos a public/.
|
||||
const icon = new L.Icon({
|
||||
iconUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png",
|
||||
iconRetinaUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon-2x.png",
|
||||
shadowUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png",
|
||||
iconSize: [25, 41],
|
||||
iconAnchor: [12, 41],
|
||||
});
|
||||
|
||||
const DEFAULT_CENTER = [40.4168, -3.7038];
|
||||
const DEFAULT_ZOOM = 13;
|
||||
|
||||
function LocationPicker({ onPick }) {
|
||||
useMapEvents({
|
||||
click(e) {
|
||||
onPick({ lat: e.latlng.lat, lng: e.latlng.lng });
|
||||
},
|
||||
});
|
||||
return null;
|
||||
}
|
||||
|
||||
export default function MapView({
|
||||
businesses,
|
||||
selectedId,
|
||||
onSelect,
|
||||
pickingLocation,
|
||||
onPickLocation,
|
||||
pickedLocation,
|
||||
}) {
|
||||
return (
|
||||
<div className="map">
|
||||
<MapContainer
|
||||
center={DEFAULT_CENTER}
|
||||
zoom={DEFAULT_ZOOM}
|
||||
style={{ height: "100%", width: "100%" }}
|
||||
>
|
||||
<TileLayer
|
||||
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
|
||||
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
|
||||
/>
|
||||
{businesses.map((b) => (
|
||||
<Marker
|
||||
key={b.id}
|
||||
position={[b.lat, b.lng]}
|
||||
icon={icon}
|
||||
eventHandlers={{ click: () => onSelect(b.id) }}
|
||||
opacity={selectedId && selectedId !== b.id ? 0.6 : 1}
|
||||
/>
|
||||
))}
|
||||
{pickingLocation && <LocationPicker onPick={onPickLocation} />}
|
||||
{pickedLocation && (
|
||||
<Marker
|
||||
position={[pickedLocation.lat, pickedLocation.lng]}
|
||||
icon={icon}
|
||||
/>
|
||||
)}
|
||||
</MapContainer>
|
||||
{pickingLocation && (
|
||||
<div className="map-hint">Haz clic en el mapa para fijar la ubicación</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
export default function Sidebar({ business, onContribute, onClose }) {
|
||||
return (
|
||||
<aside className="sidebar">
|
||||
<header className="sidebar-header">
|
||||
<h1>Business Map</h1>
|
||||
<p className="tagline">Registro colaborativo de negocios</p>
|
||||
</header>
|
||||
|
||||
<div className="sidebar-body">
|
||||
{business ? (
|
||||
<BusinessDetails business={business} onClose={onClose} />
|
||||
) : (
|
||||
<Empty />
|
||||
)}
|
||||
</div>
|
||||
|
||||
<footer className="sidebar-footer">
|
||||
<button className="primary" onClick={onContribute}>
|
||||
+ Añadir un negocio
|
||||
</button>
|
||||
</footer>
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
|
||||
function Empty() {
|
||||
return (
|
||||
<div className="empty">
|
||||
<p>Selecciona un punto del mapa para ver sus detalles.</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function BusinessDetails({ business, onClose }) {
|
||||
return (
|
||||
<article className="details">
|
||||
<button className="close" onClick={onClose} aria-label="Cerrar">
|
||||
×
|
||||
</button>
|
||||
<span className="badge">{business.category}</span>
|
||||
<h2>{business.name}</h2>
|
||||
<p className="address">{business.address}</p>
|
||||
<p className="description">{business.description}</p>
|
||||
{business.contact && (
|
||||
<p className="contact">
|
||||
<strong>Contacto:</strong> {business.contact}
|
||||
</p>
|
||||
)}
|
||||
</article>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,103 @@
|
||||
import { useState } from "react";
|
||||
|
||||
const EMPTY = {
|
||||
name: "",
|
||||
category: "",
|
||||
address: "",
|
||||
description: "",
|
||||
contact: "",
|
||||
};
|
||||
|
||||
export default function SubmitForm({ pickedLocation, onSubmit, onCancel }) {
|
||||
const [values, setValues] = useState(EMPTY);
|
||||
|
||||
function update(field) {
|
||||
return (e) => setValues({ ...values, [field]: e.target.value });
|
||||
}
|
||||
|
||||
function handleSubmit(e) {
|
||||
e.preventDefault();
|
||||
if (!pickedLocation) {
|
||||
alert("Selecciona una ubicación haciendo clic en el mapa.");
|
||||
return;
|
||||
}
|
||||
onSubmit({ ...values, lat: pickedLocation.lat, lng: pickedLocation.lng });
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="modal-backdrop" onClick={onCancel}>
|
||||
<form
|
||||
className="modal"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
onSubmit={handleSubmit}
|
||||
>
|
||||
<h2>Proponer un negocio</h2>
|
||||
<p className="hint">
|
||||
Los datos se revisarán antes de aparecer en el mapa.
|
||||
</p>
|
||||
|
||||
<label>
|
||||
Nombre
|
||||
<input
|
||||
required
|
||||
value={values.name}
|
||||
onChange={update("name")}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label>
|
||||
Categoría
|
||||
<input
|
||||
required
|
||||
placeholder="Cafetería, librería, taller…"
|
||||
value={values.category}
|
||||
onChange={update("category")}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label>
|
||||
Dirección
|
||||
<input
|
||||
required
|
||||
value={values.address}
|
||||
onChange={update("address")}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label>
|
||||
Descripción
|
||||
<textarea
|
||||
required
|
||||
rows={3}
|
||||
value={values.description}
|
||||
onChange={update("description")}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label>
|
||||
Contacto (opcional)
|
||||
<input
|
||||
placeholder="Email, teléfono o web"
|
||||
value={values.contact}
|
||||
onChange={update("contact")}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<div className="location-status">
|
||||
{pickedLocation
|
||||
? `Ubicación: ${pickedLocation.lat.toFixed(4)}, ${pickedLocation.lng.toFixed(4)}`
|
||||
: "Haz clic en el mapa para fijar la ubicación."}
|
||||
</div>
|
||||
|
||||
<div className="actions">
|
||||
<button type="button" onClick={onCancel}>
|
||||
Cancelar
|
||||
</button>
|
||||
<button type="submit" className="primary">
|
||||
Enviar
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom/client";
|
||||
import App from "./App.jsx";
|
||||
import "./styles.css";
|
||||
|
||||
ReactDOM.createRoot(document.getElementById("root")).render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>
|
||||
);
|
||||
@@ -0,0 +1,65 @@
|
||||
// Capa de acceso a datos. Toda la app habla con el backend a través de este
|
||||
// módulo. Para cambiar a Supabase u otro BaaS, basta con reescribir las dos
|
||||
// funciones exportadas manteniendo la misma firma.
|
||||
//
|
||||
// Modelo de negocio:
|
||||
// { id, name, category, address, description, contact, lat, lng, status, createdAt }
|
||||
//
|
||||
// `status` es uno de: "pending" | "approved" | "rejected".
|
||||
|
||||
const sampleBusinesses = [
|
||||
{
|
||||
id: "1",
|
||||
name: "Café del Mercado",
|
||||
category: "Cafetería",
|
||||
address: "Plaza Mayor 3, Madrid",
|
||||
description: "Café de especialidad y bollería artesana.",
|
||||
contact: "hola@cafedelmercado.example",
|
||||
lat: 40.4155,
|
||||
lng: -3.7074,
|
||||
status: "approved",
|
||||
createdAt: "2025-01-10T10:00:00Z",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Librería El Faro",
|
||||
category: "Librería",
|
||||
address: "Calle Luna 12, Madrid",
|
||||
description: "Librería independiente con sección infantil.",
|
||||
contact: "",
|
||||
lat: 40.4221,
|
||||
lng: -3.7059,
|
||||
status: "approved",
|
||||
createdAt: "2025-01-12T10:00:00Z",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Taller Bicicletas Rueda",
|
||||
category: "Servicios",
|
||||
address: "Calle Embajadores 45, Madrid",
|
||||
description: "Reparación y venta de segunda mano.",
|
||||
contact: "+34 600 000 000",
|
||||
lat: 40.4078,
|
||||
lng: -3.7053,
|
||||
status: "approved",
|
||||
createdAt: "2025-01-15T10:00:00Z",
|
||||
},
|
||||
];
|
||||
|
||||
// Estado en memoria. Se reinicia al recargar. Suficiente para el prototipo.
|
||||
let businesses = [...sampleBusinesses];
|
||||
|
||||
export function getApproved() {
|
||||
return businesses.filter((b) => b.status === "approved");
|
||||
}
|
||||
|
||||
export function submit(data) {
|
||||
const newBusiness = {
|
||||
...data,
|
||||
id: crypto.randomUUID(),
|
||||
status: "pending",
|
||||
createdAt: new Date().toISOString(),
|
||||
};
|
||||
businesses = [...businesses, newBusiness];
|
||||
return newBusiness;
|
||||
}
|
||||
+262
@@ -0,0 +1,262 @@
|
||||
:root {
|
||||
--bg: #fafaf7;
|
||||
--surface: #ffffff;
|
||||
--text: #1a1a1a;
|
||||
--muted: #6b6b6b;
|
||||
--border: #e6e6e2;
|
||||
--accent: #2f6f4f;
|
||||
--accent-hover: #245a3f;
|
||||
--shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
|
||||
--sidebar-width: 360px;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html, body, #root {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
|
||||
color: var(--text);
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
.app {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Sidebar */
|
||||
.sidebar {
|
||||
width: var(--sidebar-width);
|
||||
background: var(--surface);
|
||||
border-right: 1px solid var(--border);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
padding: 20px 24px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.sidebar-header h1 {
|
||||
margin: 0;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.tagline {
|
||||
margin: 4px 0 0;
|
||||
font-size: 0.85rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.sidebar-body {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.sidebar-footer {
|
||||
padding: 16px 24px;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.empty {
|
||||
color: var(--muted);
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* Detalles */
|
||||
.details {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.close {
|
||||
position: absolute;
|
||||
top: -8px;
|
||||
right: -8px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
color: var(--muted);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.close:hover {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: inline-block;
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--border);
|
||||
padding: 2px 10px;
|
||||
border-radius: 12px;
|
||||
font-size: 0.75rem;
|
||||
color: var(--muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.details h2 {
|
||||
margin: 12px 0 4px;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.address {
|
||||
margin: 0 0 16px;
|
||||
color: var(--muted);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.description {
|
||||
line-height: 1.55;
|
||||
margin: 0 0 16px;
|
||||
}
|
||||
|
||||
.contact {
|
||||
font-size: 0.9rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Mapa */
|
||||
.map {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.map-hint {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: var(--surface);
|
||||
padding: 8px 16px;
|
||||
border-radius: 4px;
|
||||
box-shadow: var(--shadow);
|
||||
font-size: 0.9rem;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
/* Botones */
|
||||
button {
|
||||
font: inherit;
|
||||
padding: 10px 18px;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--surface);
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
button.primary {
|
||||
background: var(--accent);
|
||||
border-color: var(--accent);
|
||||
color: white;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
button.primary:hover {
|
||||
background: var(--accent-hover);
|
||||
}
|
||||
|
||||
/* Modal */
|
||||
.modal-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 2000;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.modal {
|
||||
background: var(--surface);
|
||||
border-radius: 6px;
|
||||
padding: 28px;
|
||||
width: 100%;
|
||||
max-width: 460px;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.modal h2 {
|
||||
margin: 0 0 4px;
|
||||
}
|
||||
|
||||
.modal .hint {
|
||||
color: var(--muted);
|
||||
font-size: 0.9rem;
|
||||
margin: 0 0 20px;
|
||||
}
|
||||
|
||||
.modal label {
|
||||
display: block;
|
||||
margin-bottom: 14px;
|
||||
font-size: 0.9rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.modal input,
|
||||
.modal textarea {
|
||||
width: 100%;
|
||||
padding: 8px 10px;
|
||||
margin-top: 4px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 4px;
|
||||
font: inherit;
|
||||
color: var(--text);
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.modal input:focus,
|
||||
.modal textarea:focus {
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: -1px;
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.location-status {
|
||||
background: var(--bg);
|
||||
padding: 10px 12px;
|
||||
border-radius: 4px;
|
||||
font-size: 0.85rem;
|
||||
color: var(--muted);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 720px) {
|
||||
.app {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
.sidebar {
|
||||
width: 100%;
|
||||
max-height: 45%;
|
||||
border-right: none;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user