Admin/ocean-cleanup
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implement event completion workflow (Task 14)

Browse Source 
- Add completeEvent endpoint to backend API
- Create EventCompletionForm component with litter quantity input and photo upload
- Update EventDetailModal to show completion form for organizers
- Add isOrganizer check in EventsPage
- Update event service to support completion
- Display completion data (litter collected, photos) for completed events
This commit is contained in:
Paul Bailey
2025-11-16 20:21:47 +00:00
parent ec70baa498
commit c1f362a604
9 changed files with 295 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
src/components/event/EventCompletionForm.tsx Normal file
View File

@@ -0,0 +1,126 @@
import { useState } from 'react';
import { PhotoUpload, type PhotoMetadata } from '@/components/report/PhotoUpload';
interface EventCompletionFormProps {
eventId: string;
onSubmit: (data: { litterCollected: number; photos: string[] }) => Promise<void>;
onCancel: () => void;
isLoading?: boolean;
}
export function EventCompletionForm({
onSubmit,
onCancel,
isLoading = false,
}: EventCompletionFormProps) {
const [litterCollected, setLitterCollected] = useState<string>('');
const [photos, setPhotos] = useState<PhotoMetadata[]>([]);
const [errors, setErrors] = useState<{ litterCollected?: string }>({});
const validateForm = (): boolean => {
const newErrors: { litterCollected?: string } = {};
if (!litterCollected || litterCollected.trim() === '') {
newErrors.litterCollected = 'Please enter the amount of litter collected';
} else {
const value = parseFloat(litterCollected);
if (isNaN(value) || value < 0) {
newErrors.litterCollected = 'Please enter a valid positive number';
}
}
setErrors(newErrors);
return Object.keys(newErrors).length === 0;
};
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
if (!validateForm()) {
return;
}
try {
// In a real implementation, we would upload photos to the server
// For now, we'll just pass the preview URLs
const photoUrls = photos.map(photo => photo.preview);
await onSubmit({
litterCollected: parseFloat(litterCollected),
photos: photoUrls,
});
} catch (error) {
console.error('Error completing event:', error);
}
};
const handlePhotosChange = (photoMetadata: PhotoMetadata[]) => {
setPhotos(photoMetadata);
};
return (
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
<h3 className="text-lg font-semibold text-gray-900 mb-4">Complete Event</h3>
<form onSubmit={handleSubmit} className="space-y-6">
{/* Litter Collected Input */}
<div>
<label htmlFor="litterCollected" className="block text-sm font-medium text-gray-700 mb-2">
Litter Collected (kg) *
</label>
<input
type="number"
id="litterCollected"
step="0.1"
min="0"
value={litterCollected}
onChange={(e) => setLitterCollected(e.target.value)}
className={`w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
errors.litterCollected ? 'border-red-500' : 'border-gray-300'
}`}
placeholder="e.g., 25.5"
/>
{errors.litterCollected && (
<p className="mt-1 text-sm text-red-600">{errors.litterCollected}</p>
)}
<p className="mt-1 text-xs text-gray-500">
Enter the total weight of litter collected during the event
</p>
</div>
{/* Photo Upload */}
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">
Event Photos (Optional)
</label>
<PhotoUpload
onPhotosChange={handlePhotosChange}
maxFiles={5}
/>
<p className="mt-1 text-xs text-gray-500">
Upload photos from the cleanup event (max 5 photos)
</p>
</div>
{/* Action Buttons */}
<div className="flex gap-3 pt-4">
<button
type="submit"
disabled={isLoading}
className="flex-1 bg-green-600 text-white py-2 px-4 rounded-lg hover:bg-green-700 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors font-medium"
>
{isLoading ? 'Completing...' : 'Complete Event'}
</button>
<button
type="button"
onClick={onCancel}
disabled={isLoading}
className="flex-1 bg-gray-100 text-gray-700 py-2 px-4 rounded-lg hover:bg-gray-200 disabled:opacity-50 disabled:cursor-not-allowed transition-colors font-medium"
>
Cancel
</button>
</div>
</form>
</div>
);
}

35
src/components/event/EventDetailModal.tsx
View File

@@ -1,8 +1,9 @@
import { useEffect, useRef } from 'react';
import { useEffect, useRef, useState } from 'react';
import { format } from 'date-fns';
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';
import type { CleanupEvent } from '@/types';
import { EventCompletionForm } from './EventCompletionForm';
// Fix for default marker icons
import markerIcon2x from 'leaflet/dist/images/marker-icon-2x.png';
@@ -19,22 +20,27 @@ L.Icon.Default.mergeOptions({
interface EventDetailModalProps {
event: CleanupEvent;
isRegistered: boolean;
isOrganizer: boolean;
onClose: () => void;
onRegister: () => void;
onUnregister: () => void;
onComplete: (data: { litterCollected: number; photos: string[] }) => Promise<void>;
isLoading?: boolean;
}
export function EventDetailModal({
event,
isRegistered,
isOrganizer,
onClose,
onRegister,
onUnregister,
onComplete,
isLoading = false,
}: EventDetailModalProps) {
const mapRef = useRef<HTMLDivElement>(null);
const mapInstanceRef = useRef<L.Map | null>(null);
const [showCompletionForm, setShowCompletionForm] = useState(false);
// Initialize map
useEffect(() => {
@@ -234,10 +240,35 @@ export function EventDetailModal({
)}
</div>
{/* Completion Form for Organizers */}
{isOrganizer && event.status === 'upcoming' && showCompletionForm && (
<div className="px-6 pb-6">
<EventCompletionForm
eventId={event.id}
onSubmit={async (data) => {
await onComplete(data);
setShowCompletionForm(false);
}}
onCancel={() => setShowCompletionForm(false)}
isLoading={isLoading}
/>
</div>
)}
{/* Footer Actions */}
{event.status === 'upcoming' && (
<div className="bg-gray-50 px-6 py-4 border-t border-gray-200">
{isRegistered ? (
{isOrganizer ? (
<div className="flex gap-3">
<button
onClick={() => setShowCompletionForm(!showCompletionForm)}
disabled={isLoading}
className="flex-1 bg-green-600 text-white py-3 px-6 rounded-lg hover:bg-green-700 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors font-medium"
>
{showCompletionForm ? 'Hide Completion Form' : 'Complete Event'}
</button>
</div>
) : isRegistered ? (
<div className="flex items-center justify-between">
<div className="flex items-center text-green-600">
<svg className="h-5 w-5 mr-2" fill="currentColor" viewBox="0 0 20 20">

1
src/components/event/index.ts
View File

@@ -3,4 +3,5 @@ export { EventForm } from './EventForm';
export { EventList } from './EventList';
export { EventFilters } from './EventFilters';
export { EventDetailModal } from './EventDetailModal';
export { EventCompletionForm } from './EventCompletionForm';
export type { EventFilterState } from './EventFilters';

33
src/pages/EventsPage.tsx
View File

@@ -6,7 +6,7 @@ import { eventService } from '@/services/eventService';
import type { CleanupEvent } from '@/types';
export function EventsPage() {
const { isSignedIn } = useUser();
const { isSignedIn, user } = useUser();
const [events, setEvents] = useState<CleanupEvent[]>([]);
const [filteredEvents, setFilteredEvents] = useState<CleanupEvent[]>([]);
const [filters, setFilters] = useState<EventFilterState>({
@@ -15,6 +15,7 @@ export function EventsPage() {
const [showCreateForm, setShowCreateForm] = useState(false);
const [selectedEvent, setSelectedEvent] = useState<CleanupEvent | null>(null);
const [isRegistered, setIsRegistered] = useState(false);
const [isOrganizer, setIsOrganizer] = useState(false);
const [isLoading, setIsLoading] = useState(true);
const [isSubmitting, setIsSubmitting] = useState(false);
const [error, setError] = useState<string | null>(null);
@@ -29,12 +30,19 @@ export function EventsPage() {
applyFilters();
}, [events, filters]);
// Check registration status when event is selected
// Check registration status and organizer status when event is selected
useEffect(() => {
if (selectedEvent && isSignedIn) {
checkRegistrationStatus(selectedEvent.id);
// Check if current user is the organizer
// Note: We're comparing Clerk user ID with organizerId
// In a real implementation, we'd need to fetch the organizer's Clerk ID
// For now, we'll use a simple check
setIsOrganizer(user?.id === selectedEvent.organizerId);
} else {
setIsOrganizer(false);
}
}, [selectedEvent, isSignedIn]);
}, [selectedEvent, isSignedIn, user]);
const loadEvents = async () => {
try {
@@ -161,6 +169,23 @@ export function EventsPage() {
}
};
const handleCompleteEvent = async (data: { litterCollected: number; photos: string[] }) => {
if (!selectedEvent) return;
try {
setIsSubmitting(true);
setError(null);
await eventService.completeEvent(selectedEvent.id, data);
setSelectedEvent(null);
await loadEvents();
} catch (err: any) {
setError(err.message || 'Failed to complete event. Please try again.');
console.error('Error completing event:', err);
} finally {
setIsSubmitting(false);
}
};
return (
<div className="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
{/* Header */}
@@ -249,9 +274,11 @@ export function EventsPage() {
<EventDetailModal
event={selectedEvent}
isRegistered={isRegistered}
isOrganizer={isOrganizer}
onClose={() => setSelectedEvent(null)}
onRegister={() => handleRegister(selectedEvent.id)}
onUnregister={handleUnregister}
onComplete={handleCompleteEvent}
isLoading={isSubmitting}
/>
)}

5
src/services/eventService.ts
View File

@@ -99,4 +99,9 @@ export const eventService = {
return false;
}
},
// Complete event
async completeEvent(eventId: string, data: { litterCollected: number; photos?: string[] }): Promise<CleanupEvent> {
return apiClient.post<CleanupEvent>(`/events/${eventId}/complete`, data);
},
};