created frontend of a form to create events
This commit is contained in:
Madeleine
parent
e6b7336440
commit
33c4e6f479
10 changed files with 950 additions and 0 deletions
24
frontend/README.md
Normal file
24
frontend/README.md
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
# Localist Frontend (React + Vite)
|
||||
|
||||
This directory contains the frontend application for Localist built with React + Vite.
|
||||
|
||||
It provides an event creation form with an embedded Leaflet map and a search bar (leaflet-geosearch). The form uses react-hook-form with a Zod schema to validate and transform outgoing payloads (the schema nests flat latitude/longitude into a `location` object before sending).
|
||||
|
||||
Quick links
|
||||
- Source: `src/`
|
||||
- Main component: `src/components/eventForm.jsx`
|
||||
- Validation/transform schema: `src/schemas/eventPostSchema.js`
|
||||
- API client: `src/services/eventService.js`
|
||||
- Vite config: `vite.config.js`
|
||||
|
||||
Prerequisites
|
||||
- Node.js (16+ recommended)
|
||||
- npm or yarn
|
||||
- Django backend running locally at http://127.0.0.1:8000 if you want the API to respond (the Vite config proxies `/api` to that address by default)
|
||||
|
||||
Install dependencies
|
||||
```bash
|
||||
cd localist/frontend
|
||||
npm install
|
||||
# or
|
||||
yarn
|
||||
41
frontend/package.json
Normal file
41
frontend/package.json
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
{
|
||||
"name": "frontend",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"lint": "eslint .",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@emotion/react": "^11.14.0",
|
||||
"@emotion/styled": "^11.14.1",
|
||||
"@hookform/resolvers": "^5.4.0",
|
||||
"@mui/material": "^9.1.1",
|
||||
"leaflet": "^1.9.4",
|
||||
"leaflet-defaulticon-compatibility": "^0.1.2",
|
||||
"leaflet-geosearch": "^4.4.0",
|
||||
"react": "^19.2.6",
|
||||
"react-dom": "^19.2.6",
|
||||
"react-hook-form": "^7.80.0",
|
||||
"react-leaflet": "^5.0.0",
|
||||
"react-router-dom": "^7.18.0",
|
||||
"zod": "^4.4.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^10.0.1",
|
||||
"@types/react": "^19.2.14",
|
||||
"@types/react-dom": "^19.2.3",
|
||||
"@vitejs/plugin-react": "^6.0.1",
|
||||
"autoprefixer": "^10.5.0",
|
||||
"eslint": "^10.3.0",
|
||||
"eslint-plugin-react-hooks": "^7.1.1",
|
||||
"eslint-plugin-react-refresh": "^0.5.2",
|
||||
"globals": "^17.6.0",
|
||||
"postcss": "^8.5.15",
|
||||
"tailwindcss": "^4.3.1",
|
||||
"vite": "^8.0.12"
|
||||
}
|
||||
}
|
||||
184
frontend/src/App.css
Normal file
184
frontend/src/App.css
Normal file
|
|
@ -0,0 +1,184 @@
|
|||
.counter {
|
||||
font-size: 16px;
|
||||
padding: 5px 10px;
|
||||
border-radius: 5px;
|
||||
color: var(--accent);
|
||||
background: var(--accent-bg);
|
||||
border: 2px solid transparent;
|
||||
transition: border-color 0.3s;
|
||||
margin-bottom: 24px;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--accent-border);
|
||||
}
|
||||
&:focus-visible {
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.hero {
|
||||
position: relative;
|
||||
|
||||
.base,
|
||||
.framework,
|
||||
.vite {
|
||||
inset-inline: 0;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.base {
|
||||
width: 170px;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.framework,
|
||||
.vite {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.framework {
|
||||
z-index: 1;
|
||||
top: 34px;
|
||||
height: 28px;
|
||||
transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg)
|
||||
scale(1.4);
|
||||
}
|
||||
|
||||
.vite {
|
||||
z-index: 0;
|
||||
top: 107px;
|
||||
height: 26px;
|
||||
width: auto;
|
||||
transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg)
|
||||
scale(0.8);
|
||||
}
|
||||
}
|
||||
|
||||
#center {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 25px;
|
||||
place-content: center;
|
||||
place-items: center;
|
||||
flex-grow: 1;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
padding: 32px 20px 24px;
|
||||
gap: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
#next-steps {
|
||||
display: flex;
|
||||
border-top: 1px solid var(--border);
|
||||
text-align: left;
|
||||
|
||||
& > div {
|
||||
flex: 1 1 0;
|
||||
padding: 32px;
|
||||
@media (max-width: 1024px) {
|
||||
padding: 24px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
margin-bottom: 16px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
#docs {
|
||||
border-right: 1px solid var(--border);
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
border-right: none;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
}
|
||||
|
||||
#next-steps ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin: 32px 0 0;
|
||||
|
||||
.logo {
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--text-h);
|
||||
font-size: 16px;
|
||||
border-radius: 6px;
|
||||
background: var(--social-bg);
|
||||
display: flex;
|
||||
padding: 6px 12px;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
text-decoration: none;
|
||||
transition: box-shadow 0.3s;
|
||||
|
||||
&:hover {
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
.button-icon {
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
margin-top: 20px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
|
||||
li {
|
||||
flex: 1 1 calc(50% - 8px);
|
||||
}
|
||||
|
||||
a {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#spacer {
|
||||
height: 88px;
|
||||
border-top: 1px solid var(--border);
|
||||
@media (max-width: 1024px) {
|
||||
height: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
.ticks {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -4.5px;
|
||||
border: 5px solid transparent;
|
||||
}
|
||||
|
||||
&::before {
|
||||
left: 0;
|
||||
border-left-color: var(--border);
|
||||
}
|
||||
&::after {
|
||||
right: 0;
|
||||
border-right-color: var(--border);
|
||||
}
|
||||
}
|
||||
62
frontend/src/App.jsx
Normal file
62
frontend/src/App.jsx
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
|
||||
import { useMapEvents } from 'react-leaflet';
|
||||
import { Routes, Route, Link } from "react-router-dom";
|
||||
import EventForm from './components/eventForm.jsx'; // <- add this import
|
||||
|
||||
function ClickHandler() {
|
||||
useMapEvents({
|
||||
click(e) {
|
||||
console.log(
|
||||
e.latlng.lat,
|
||||
e.latlng.lng
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
// src/App.jsx
|
||||
function Home() {
|
||||
return (
|
||||
<div>
|
||||
<h1>Home</h1>
|
||||
<p><Link to="/createevent">Create an event</Link></p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<div>
|
||||
<Routes>
|
||||
<Route path="/" element={<Home />} />
|
||||
<Route path="/createevent" element={<EventForm />} />
|
||||
</Routes>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// export default function App() {
|
||||
// return (
|
||||
// <div style={{ height: '100vh' }}>
|
||||
// <MapContainer
|
||||
// center={[40.437, -74.199]} // Keyport area
|
||||
// zoom={13}
|
||||
// style={{ height: '100%', width: '100%' }}
|
||||
// >
|
||||
// <TileLayer
|
||||
// attribution="© OpenStreetMap contributors"
|
||||
// url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
|
||||
// />
|
||||
// <ClickHandler />
|
||||
//
|
||||
// <Marker position={[40.437, -74.199]}>
|
||||
// <Popup>
|
||||
// Hello from Leaflet!
|
||||
// </Popup>
|
||||
// </Marker>
|
||||
// </MapContainer>
|
||||
// </div>
|
||||
// );
|
||||
// }
|
||||
124
frontend/src/components/eventForm.css
Normal file
124
frontend/src/components/eventForm.css
Normal file
|
|
@ -0,0 +1,124 @@
|
|||
/* eventForm.css */
|
||||
.event-form {
|
||||
max-width: 900px;
|
||||
margin: 28px auto;
|
||||
padding: 20px;
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 6px 20px rgba(0,0,0,0.06);
|
||||
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.form-title {
|
||||
margin: 0 0 16px;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.form-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
/* On wider screens use two columns */
|
||||
@media (min-width: 700px) {
|
||||
.form-grid {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Make these fields span both columns */
|
||||
.full-width {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.form-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.form-field label {
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 6px;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.form-field input[type="text"],
|
||||
.form-field input[type="url"],
|
||||
.form-field input[type="email"],
|
||||
.form-field input[type="tel"],
|
||||
.form-field input[type="number"],
|
||||
.form-field input[type="datetime-local"],
|
||||
.form-field textarea,
|
||||
.form-field select {
|
||||
background: #f9fafb;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 8px;
|
||||
padding: 8px 10px;
|
||||
font-size: 0.95rem;
|
||||
outline: none;
|
||||
transition: box-shadow .12s ease, border-color .12s ease;
|
||||
}
|
||||
|
||||
.form-field textarea {
|
||||
min-height: 110px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.form-field input:focus,
|
||||
.form-field textarea:focus,
|
||||
.form-field select:focus {
|
||||
border-color: #60a5fa;
|
||||
box-shadow: 0 4px 10px rgba(96,165,250,0.12);
|
||||
}
|
||||
|
||||
/* Checkbox row styling */
|
||||
.checkbox-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding-top: 6px;
|
||||
}
|
||||
|
||||
/* Actions */
|
||||
.form-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
background: linear-gradient(180deg, #2563eb, #1e40af);
|
||||
color: #fff;
|
||||
border: none;
|
||||
padding: 10px 16px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
box-shadow: 0 6px 18px rgba(30,64,175,0.12);
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 10px 22px rgba(30,64,175,0.14);
|
||||
}
|
||||
|
||||
.btn:active {
|
||||
transform: translateY(0);
|
||||
box-shadow: 0 6px 18px rgba(30,64,175,0.12);
|
||||
}
|
||||
|
||||
/* Small screens tweak */
|
||||
@media (max-width: 420px) {
|
||||
.event-form {
|
||||
padding: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.leaflet-control-attribution .leaflet-attrib-flag {
|
||||
display: none;
|
||||
}
|
||||
257
frontend/src/components/eventForm.jsx
Normal file
257
frontend/src/components/eventForm.jsx
Normal file
|
|
@ -0,0 +1,257 @@
|
|||
/*
|
||||
EventForm - create/edit event UI with Leaflet map + leaflet-geosearch.
|
||||
- Uses react-hook-form + Zod resolver for validation/coercion
|
||||
- Map provides a search bar (OpenStreetMapProvider) and click-to-place marker
|
||||
- When a place is chosen, address + coordinates are written into the form values
|
||||
- Coordinates are submitted as flat fields; the schema transforms them into `location`
|
||||
*/
|
||||
import React, {useEffect, useState} from "react";
|
||||
import {useForm} from "react-hook-form";
|
||||
import {zodResolver} from "@hookform/resolvers/zod";
|
||||
import EventService from "../services/eventService";
|
||||
import {EventPostSchema} from "../schemas/eventPostSchema";
|
||||
|
||||
// Leaflet icon compatibility helper (handles bundler issues)
|
||||
import 'leaflet-defaulticon-compatibility';
|
||||
import 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.webpack.css';
|
||||
|
||||
// Leaflet / React-Leaflet
|
||||
import {MapContainer, TileLayer, Marker, useMap, useMapEvents} from "react-leaflet";
|
||||
import "leaflet/dist/leaflet.css";
|
||||
import "./eventForm.css"
|
||||
|
||||
// GeoSearch
|
||||
import {GeoSearchControl, OpenStreetMapProvider} from "leaflet-geosearch";
|
||||
import "leaflet-geosearch/dist/geosearch.css";
|
||||
|
||||
/* Fix leaflet icon paths for many bundlers (Vite/CRA/Webpack) */
|
||||
import markerUrl from "leaflet/dist/images/marker-icon.png";
|
||||
import markerRetinaUrl from "leaflet/dist/images/marker-icon-2x.png";
|
||||
import markerShadowUrl from "leaflet/dist/images/marker-shadow.png";
|
||||
|
||||
L.Icon.Default.mergeOptions({
|
||||
iconRetinaUrl: markerRetinaUrl,
|
||||
iconUrl: markerUrl,
|
||||
shadowUrl: markerShadowUrl,
|
||||
});
|
||||
|
||||
export default function EventForm() {
|
||||
const eventService = new EventService();
|
||||
const [serverError, setServerError] = useState(null);
|
||||
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
formState: {errors, isSubmitting, isDirty},
|
||||
reset,
|
||||
setValue,
|
||||
watch,
|
||||
} = useForm({
|
||||
resolver: zodResolver(EventPostSchema),
|
||||
defaultValues: {
|
||||
name: "Madeleine's birthday",
|
||||
description: "test",
|
||||
url: "http://localhost:8080",
|
||||
address: "31 Fleetwood",
|
||||
status: "scheduled",
|
||||
price: "10",
|
||||
require_rsvp: false,
|
||||
start_time: "",
|
||||
end_time: "",
|
||||
rain_date: "",
|
||||
email: "madeleienma07@gmail.com",
|
||||
phone_number: "8482189789",
|
||||
latitude: "", // hidden field for latitude
|
||||
longitude: "", // hidden field for longitude
|
||||
},
|
||||
});
|
||||
// Status options for the select dropdown
|
||||
const STATUS_OPTIONS = [
|
||||
{value: "scheduled", label: "Scheduled"},
|
||||
{value: "completed", label: "Completed"},
|
||||
{value: "canceled", label: "Canceled"},
|
||||
];
|
||||
|
||||
// submit
|
||||
const onSubmit = async (data) => {
|
||||
setServerError(null);
|
||||
try {
|
||||
// Schema handles transformation - data is already nested as { location: { latitude, longitude } }
|
||||
await eventService.createEvent(data);
|
||||
alert("Your event has been created successfully");
|
||||
reset();
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
setServerError(err.body ?? err.message ?? "Network error");
|
||||
alert("Failed to save: " + (err.status || "") + " " + JSON.stringify(err.body || err.message));
|
||||
}
|
||||
};
|
||||
// Reading lat/lng so the marker can follow them
|
||||
const latitude = watch("latitude");
|
||||
const longitude = watch("longitude");
|
||||
|
||||
// Map child that adds the GeoSearch control and listens for results
|
||||
function GeoSearchControlComponent() {
|
||||
const map = useMap();
|
||||
useEffect(() => {
|
||||
const provider = new OpenStreetMapProvider();
|
||||
|
||||
const searchControl = new GeoSearchControl({
|
||||
provider,
|
||||
style: "bar",
|
||||
showMarker: false,
|
||||
retainZoomLevel: false,
|
||||
autoClose: true,
|
||||
keepResult: false,
|
||||
});
|
||||
|
||||
map.addControl(searchControl);
|
||||
|
||||
const onShowLocation = (e) => {
|
||||
const {x: lon, y: lat, label} = e.location;
|
||||
// Set all three fields from the search result
|
||||
setValue("address", label, {shouldDirty: true, shouldValidate: true});
|
||||
setValue("latitude", lat, {shouldDirty: true, shouldValidate: true});
|
||||
setValue("longitude", lon, {shouldDirty: true, shouldValidate: true});
|
||||
map.setView([lat, lon], Math.max(map.getZoom(), 13));
|
||||
};
|
||||
|
||||
map.on("geosearch/showlocation", onShowLocation);
|
||||
|
||||
return () => {
|
||||
map.removeControl(searchControl);
|
||||
map.off("geosearch/showlocation", onShowLocation);
|
||||
};
|
||||
}, [map, setValue]);
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
// Map child that listens for click events to set coordinates
|
||||
function ClickToSetMarker() {
|
||||
useMapEvents({
|
||||
click(e) {
|
||||
setValue("latitude", e.latlng.lat, {shouldDirty: true, shouldValidate: true});
|
||||
setValue("longitude", e.latlng.lng, {shouldDirty: true, shouldValidate: true});
|
||||
},
|
||||
});
|
||||
return null;
|
||||
}
|
||||
|
||||
// Default center if no coordinates set
|
||||
const defaultCenter = [40.35, -74.31];
|
||||
|
||||
// parse lat/lng from watched values
|
||||
const markerPosition = (latitude && longitude) ? [parseFloat(latitude), parseFloat(longitude)] : null;
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit(onSubmit)} noValidate>
|
||||
<div>
|
||||
<label>Name
|
||||
<input {...register("name")} placeholder="Name"/>
|
||||
{errors.name && <div style={{color: "red"}}>{errors.name.message}</div>}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label>Description
|
||||
<textarea {...register("description")} placeholder="Description"/>
|
||||
{errors.description && <div style={{color: "red"}}>{errors.description.message}</div>}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input {...register("url")} placeholder="URL" type="url"/>
|
||||
{errors.url && <div style={{color: "red"}}>{errors.url.message}</div>}
|
||||
</div>
|
||||
|
||||
|
||||
{/* Map and search control */}
|
||||
<div style={{marginTop: 8}}>
|
||||
<div style={{height: 320, width: "100%"}}>
|
||||
<MapContainer
|
||||
center={markerPosition || defaultCenter}
|
||||
zoom={markerPosition ? 13 : 11}
|
||||
style={{height: "100%", width: "100%"}}
|
||||
>
|
||||
<TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"/>
|
||||
<GeoSearchControlComponent/>
|
||||
<ClickToSetMarker/>
|
||||
{markerPosition && <Marker position={markerPosition}/>}
|
||||
</MapContainer>
|
||||
</div>
|
||||
<div style={{fontSize: 12, color: "#666", marginTop: 6}}>
|
||||
Tip: search an address on the map bar or click the map to set location.
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
{/* Address input - if you want you can also update address automatically from search result */}
|
||||
<input {...register("address")} placeholder="Address"/>
|
||||
{errors.address && <div style={{color: "red"}}>{errors.address.message}</div>}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="status">Status</label>
|
||||
<select id="status" {...register("status")}>
|
||||
{STATUS_OPTIONS.map(opt => (
|
||||
<option key={opt.value} value={opt.value}>{opt.label}</option>
|
||||
))}
|
||||
</select>
|
||||
{errors.status && <div style={{color: "red"}}>{errors.status.message}</div>}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input {...register("price")} placeholder="Price USD" type="number" step="1.0"/>
|
||||
{errors.price && <div style={{color: "red"}}>{errors.price.message}</div>}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label>
|
||||
<input {...register("require_rsvp")} type="checkbox"/>
|
||||
Require RSVP
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label>Start time
|
||||
<input {...register("start_time")} type="datetime-local"/>
|
||||
</label>
|
||||
{errors.start_time && <div style={{color: "red"}}>{errors.start_time.message}</div>}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label>End time
|
||||
<input {...register("end_time")} type="datetime-local"/>
|
||||
</label>
|
||||
{errors.end_time && <div style={{color: "red"}}>{errors.end_time.message}</div>}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label>Rain date
|
||||
<input {...register("rain_date")} type="datetime-local"/>
|
||||
</label>
|
||||
{errors.rain_date && <div style={{color: "red"}}>{errors.rain_date.message}</div>}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input {...register("email")} placeholder="Email" type="email"/>
|
||||
{errors.email && <div style={{color: "red"}}>{errors.email.message}</div>}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input {...register("phone_number")} placeholder="Phone number" type="tel"/>
|
||||
{errors.phone_number && <div style={{color: "red"}}>{errors.phone_number.message}</div>}
|
||||
</div>
|
||||
|
||||
{/* Hidden fields for coordinates (these will be submitted) */}
|
||||
<input type="hidden" {...register("latitude")} />
|
||||
<input type="hidden" {...register("longitude")} />
|
||||
|
||||
<div style={{marginTop: 12}}>
|
||||
<button type="submit" disabled={isSubmitting}>
|
||||
{isSubmitting ? "Saving..." : "Save Event"}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
111
frontend/src/index.css
Normal file
111
frontend/src/index.css
Normal file
|
|
@ -0,0 +1,111 @@
|
|||
:root {
|
||||
--text: #6b6375;
|
||||
--text-h: #08060d;
|
||||
--bg: #fff;
|
||||
--border: #e5e4e7;
|
||||
--code-bg: #f4f3ec;
|
||||
--accent: #aa3bff;
|
||||
--accent-bg: rgba(170, 59, 255, 0.1);
|
||||
--accent-border: rgba(170, 59, 255, 0.5);
|
||||
--social-bg: rgba(244, 243, 236, 0.5);
|
||||
--shadow:
|
||||
rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px;
|
||||
|
||||
--sans: system-ui, 'Segoe UI', Roboto, sans-serif;
|
||||
--heading: system-ui, 'Segoe UI', Roboto, sans-serif;
|
||||
--mono: ui-monospace, Consolas, monospace;
|
||||
|
||||
font: 18px/145% var(--sans);
|
||||
letter-spacing: 0.18px;
|
||||
color-scheme: light dark;
|
||||
color: var(--text);
|
||||
background: var(--bg);
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--text: #9ca3af;
|
||||
--text-h: #f3f4f6;
|
||||
--bg: #16171d;
|
||||
--border: #2e303a;
|
||||
--code-bg: #1f2028;
|
||||
--accent: #c084fc;
|
||||
--accent-bg: rgba(192, 132, 252, 0.15);
|
||||
--accent-border: rgba(192, 132, 252, 0.5);
|
||||
--social-bg: rgba(47, 48, 58, 0.5);
|
||||
--shadow:
|
||||
rgba(0, 0, 0, 0.4) 0 10px 15px -3px, rgba(0, 0, 0, 0.25) 0 4px 6px -2px;
|
||||
}
|
||||
|
||||
#social .button-icon {
|
||||
filter: invert(1) brightness(2);
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#root {
|
||||
width: 1126px;
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
border-inline: 1px solid var(--border);
|
||||
min-height: 100svh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
font-family: var(--heading);
|
||||
font-weight: 500;
|
||||
color: var(--text-h);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 56px;
|
||||
letter-spacing: -1.68px;
|
||||
margin: 32px 0;
|
||||
@media (max-width: 1024px) {
|
||||
font-size: 36px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
}
|
||||
h2 {
|
||||
font-size: 24px;
|
||||
line-height: 118%;
|
||||
letter-spacing: -0.24px;
|
||||
margin: 0 0 8px;
|
||||
@media (max-width: 1024px) {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
code,
|
||||
.counter {
|
||||
font-family: var(--mono);
|
||||
display: inline-flex;
|
||||
border-radius: 4px;
|
||||
color: var(--text-h);
|
||||
}
|
||||
|
||||
code {
|
||||
font-size: 15px;
|
||||
line-height: 135%;
|
||||
padding: 4px 8px;
|
||||
background: var(--code-bg);
|
||||
}
|
||||
16
frontend/src/main.jsx
Normal file
16
frontend/src/main.jsx
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
import { StrictMode } from 'react'
|
||||
import React from "react";
|
||||
import { createRoot } from 'react-dom/client'
|
||||
import './index.css'
|
||||
import App from './App.jsx'
|
||||
import 'leaflet/dist/leaflet.css';
|
||||
import { BrowserRouter } from "react-router-dom";
|
||||
|
||||
const root = createRoot(document.getElementById("root"));
|
||||
root.render(
|
||||
<React.StrictMode>
|
||||
<BrowserRouter>
|
||||
<App />
|
||||
</BrowserRouter>
|
||||
</React.StrictMode>
|
||||
);
|
||||
85
frontend/src/schemas/eventPostSchema.js
Normal file
85
frontend/src/schemas/eventPostSchema.js
Normal file
|
|
@ -0,0 +1,85 @@
|
|||
/*
|
||||
Schema for outgoing POST body to /api/event
|
||||
- Accepts form values (strings/numbers) and coerces where useful.
|
||||
- Transforms flat latitude/longitude fields into a nested `location` object:
|
||||
location: { latitude: number | null, longitude: number | null }
|
||||
- Removes the flat latitude/longitude fields from the final payload.
|
||||
*/
|
||||
import {z} from "zod";
|
||||
|
||||
export const EventPostSchema = z.object({
|
||||
name: z.string().min(1, "Name is required"),
|
||||
description: z.string().min(5, "Description has to be more than 5 letters."),
|
||||
url: z.string().url().nullable().optional(),
|
||||
address: z.string().min(5, "Address is required"),
|
||||
|
||||
status: z.enum(["scheduled", "completed", "canceled"]).optional(),
|
||||
|
||||
// price: allow number or string or null; coerce to number or null
|
||||
price: z
|
||||
.union([z.string(), z.number(), z.null()])
|
||||
.optional()
|
||||
.transform((val) => {
|
||||
if (val === undefined || val === null || val === "") return null;
|
||||
const n = typeof val === "string" ? parseFloat(val) : val;
|
||||
return Number.isFinite(n) ? n : null;
|
||||
}),
|
||||
|
||||
require_rsvp: z.boolean().optional().default(false),
|
||||
|
||||
// start_time: optional, but if provided must be a valid Date and in the future.
|
||||
start_time: z.preprocess((val) => {
|
||||
if (val === "" || val === undefined || val === null) return null;
|
||||
if (typeof val === "string") {
|
||||
const d = new Date(val);
|
||||
return isNaN(d.getTime()) ? val : d;
|
||||
}
|
||||
return val;
|
||||
},
|
||||
z.union([
|
||||
z.date({invalid_type_error: "Start date must be a valid datetime"}),
|
||||
z.null()
|
||||
])
|
||||
.refine((v) => v === null || v.getTime() > Date.now(), {
|
||||
message: "Start date must be in the future",
|
||||
})
|
||||
)
|
||||
.transform((val) => (val === null ? null : val.toISOString())),
|
||||
|
||||
end_time: z.union([z.string(), z.date(), z.null()])
|
||||
.optional()
|
||||
.transform((val) => {
|
||||
if (!val) return null;
|
||||
return val instanceof Date ? val.toISOString() : val;
|
||||
}),
|
||||
|
||||
rain_date: z
|
||||
.union([z.string(), z.date(), z.null()])
|
||||
.optional()
|
||||
.transform((val) => {
|
||||
if (!val) return null;
|
||||
return val instanceof Date ? val.toISOString() : val;
|
||||
}),
|
||||
|
||||
email: z.string().email().nullable().optional(),
|
||||
phone_number: z.string().nullable().optional(),
|
||||
|
||||
// Flat latitude and longitude fields for form handling
|
||||
latitude: z.union([z.string(), z.number(), z.null()]).optional(),
|
||||
longitude: z.union([z.string(), z.number(), z.null()]).optional(),
|
||||
})
|
||||
.transform((data) => {
|
||||
// Transform flat latitude/longitude into nested location object
|
||||
if (data.latitude || data.longitude) {
|
||||
data.location = {
|
||||
lat: data.latitude ? parseFloat(data.latitude) : null,
|
||||
lng: data.longitude ? parseFloat(data.longitude) : null,
|
||||
};
|
||||
}
|
||||
|
||||
// Remove flat fields from payload
|
||||
delete data.latitude;
|
||||
delete data.longitude;
|
||||
|
||||
return data;
|
||||
});
|
||||
46
frontend/src/services/eventService.js
Normal file
46
frontend/src/services/eventService.js
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
import {EventPostSchema} from "../schemas/eventPostSchema";
|
||||
|
||||
// Service responsible for sending event POST requests to the API.
|
||||
// - Validates and coerces the outgoing payload using EventPostSchema
|
||||
// - Logs validation errors (if any) and the final payload sent
|
||||
// - Sends the request with CSRF token (if available) and returns parsed JSON response
|
||||
|
||||
const API_BASE = import.meta.env.VITE_API_BASE
|
||||
|
||||
function getCSRFToken() {
|
||||
const name = "csrftoken";
|
||||
const match = document.cookie.match(new RegExp('(^|;)\\s*' + name + '\\s*=\\s*([^;]+)'));
|
||||
return match ? match.pop() : null;
|
||||
}
|
||||
|
||||
export default class EventService {
|
||||
constructor(base = API_BASE) {
|
||||
this.base = base;
|
||||
}
|
||||
|
||||
async createEvent(rawPayload) {
|
||||
// Validate and coerce the outgoing payload
|
||||
const parsed = EventPostSchema.parse(rawPayload); // will throw if invalid
|
||||
console.log("EventService sending payload:", JSON.stringify(rawPayload, null, 2)); // Log here
|
||||
const res = await fetch(`${this.base}/event`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
// X-CSRFToken if using django session auth in browser
|
||||
...(getCSRFToken() ? {"X-CSRFToken": getCSRFToken()} : {}),
|
||||
},
|
||||
credentials: "same-origin", // change to 'include' if cross-site cookies
|
||||
body: JSON.stringify(parsed),
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
const text = await res.text();
|
||||
const err = new Error("Failed to create event");
|
||||
err.status = res.status;
|
||||
err.body = text;
|
||||
throw err;
|
||||
}
|
||||
|
||||
return res.json();
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue