{
+ // Use onMouseDown instead of onClick to fire before onBlur.
+ e.preventDefault()
+ handleSelectSuggestion(suggestion)
+ }}
+ >
+ {suggestion}
+
+ ))}
+
+ )}
+
+
+ {field.state.meta.errors[0] && (
+
+ {field.state.meta.errors[0]?.message}
+
+ )}
+ {isDuplicate && (
+
Duplicate entry
+ )}
+
+ )
+}
diff --git a/frontend-v2/src/app/event/event-form.tsx b/frontend-v2/src/app/event/event-form.tsx
new file mode 100644
index 00000000..621141d9
--- /dev/null
+++ b/frontend-v2/src/app/event/event-form.tsx
@@ -0,0 +1,527 @@
+'use client'
+
+import { useRef, useState, useEffect, useMemo } from 'react'
+import { useForm, useStore } from '@tanstack/react-form'
+import { z } from 'zod'
+import { Input } from '@/components/ui/input'
+import { Button } from '@/components/ui/button'
+import { Label } from '@/components/ui/label'
+import { Checkbox } from '@/components/ui/checkbox'
+import { cn } from '@/lib/utils'
+import { API_PATH, apiClient } from '@/lib/api'
+import { useQuery, useQueryClient, useMutation } from '@tanstack/react-query'
+import { useParams, useRouter } from 'next/navigation'
+import toast from 'react-hot-toast'
+import { useAuthedPageContext } from '@/hooks/useAuthedPageContext'
+import { SF_BAY_CHAPTER_ID } from '@/lib/constants'
+import { AttendeeInputField } from './attendee-input-field'
+import { ActivistRegistry } from './activist-registry'
+
+// TODO(jh):
+// - test in prod
+// - improve styling
+// - replace vue page w/ react page & update api to not return a redirect response on save
+
+// TODO: store list of names from server in indexed db & only update what's been created, updated, or deleted since last load?
+// - https://app.asana.com/1/71341131816665/project/1209217418568645/task/1212688232815554
+
+// TODO: store unsaved data in session storage to prevent accidental loss?
+// - https://app.asana.com/1/71341131816665/project/1209217418568645/task/1212688232815556
+
+const EVENT_TYPES = [
+ 'Action',
+ 'Campaign Action',
+ 'Community',
+ 'Frontline Surveillance',
+ 'Meeting',
+ 'Outreach',
+ 'Animal Care',
+ 'Training',
+] as const
+
+const DEFAULT_FIELD_COUNT = 5
+const MIN_EMPTY_FIELDS = 1
+
+// Zod schema for form validation.
+const attendeeSchema = z.object({
+ name: z.string().refine(
+ (name) => {
+ const trimmed = name.trim()
+ // Empty is ok, as it will be filtered out.
+ if (trimmed === '') return true
+ // Must have at least first and last name (contains a space).
+ return trimmed.indexOf(' ') !== -1
+ },
+ {
+ message: 'First & last name are required',
+ },
+ ),
+})
+
+const formSchema = z.object({
+ eventName: z.string().min(1, 'Event name is required'),
+ eventType: z.string().min(1, 'Event type is required'),
+ eventDate: z.string().min(1, 'Event date is required'),
+ suppressSurvey: z.boolean(),
+ attendees: z.array(attendeeSchema),
+})
+
+type FormValues = z.infer
+
+type EventFormProps = {
+ mode: 'event' | 'connection'
+}
+
+export const EventForm = ({ mode }: EventFormProps) => {
+ const router = useRouter()
+ const params = useParams()
+ const queryClient = useQueryClient()
+ const { user } = useAuthedPageContext()
+ const eventId = params.id ? String(params.id) : undefined
+ const isConnection = mode === 'connection'
+
+ const inputRefs = useRef<(HTMLInputElement | null)[]>(
+ Array(DEFAULT_FIELD_COUNT).fill(null),
+ )
+ const [activeInputIndex, setActiveInputIndex] = useState(0)
+
+ // Fetch activist list from server.
+ // We don't want to do this during SSR b/c it's several MB,
+ // and eventually we'd like to cache this data on the client
+ // to avoid sending it on every page load.
+ const { data: activistData, isLoading: isLoadingActivists } = useQuery({
+ queryKey: [API_PATH.ACTIVIST_LIST_BASIC],
+ queryFn: apiClient.getActivistListBasic,
+ })
+
+ // Fetch existing event/connection, if editing.
+ // (Note: This data is prefetched during SSR for edit pages.)
+ const { data: eventData } = useQuery({
+ queryKey: [API_PATH.EVENT_GET, eventId],
+ queryFn: () => apiClient.getEvent(Number(eventId)),
+ enabled: !!eventId,
+ })
+
+ // Create activist registry for autocomplete.
+ const activistRegistry = useMemo(
+ () => new ActivistRegistry(activistData?.activists || []),
+ [activistData?.activists],
+ )
+
+ const saveEventMutation = useMutation({
+ mutationFn: apiClient.saveEvent,
+ onSuccess: (result, variables) => {
+ toast.success(`${isConnection ? 'Connection' : 'Event'} saved!`)
+
+ // TODO(jh): once the vue page is removed, update the api to just
+ // return a json payload w/ the event id instead of a redirect.
+ // for now, we'll extract the id from the redirect url to stay
+ // in the react app for testing.
+ if (result.redirect) {
+ // Parse redirect like "/update_event/8" or "/update_connection/5"
+ const match = result.redirect.match(
+ /\/(update_event|update_connection)\/(\d+)/,
+ )
+ if (match) {
+ const newEventId = match[2]
+ // Update URL to include the new event ID.
+ const newPath = isConnection
+ ? `/coaching/${newEventId}`
+ : `/event/${newEventId}`
+ router.push(newPath)
+ } else {
+ // Fallback: redirect to legacy route if we can't parse it.
+ window.location.href = result.redirect
+ return
+ }
+ }
+
+ // Reset the form's dirty state after successful save.
+ // This prevents "unsaved changes" warning after successful save.
+ // TanStack form has a bug requiring the `keepDefaultValues` option:
+ // https://github.com/TanStack/form/issues/1798.
+ form.reset(
+ {
+ eventName: variables.event_name,
+ eventType: variables.event_type,
+ eventDate: variables.event_date,
+ suppressSurvey: variables.suppress_survey,
+ attendees: (result.attendees ?? [])
+ .map((name) => ({ name }))
+ .concat(
+ Array(MIN_EMPTY_FIELDS)
+ .fill(null)
+ .map(() => ({ name: '' })),
+ ),
+ },
+ { keepDefaultValues: true },
+ )
+
+ // Refresh activist list to include newly created activists.
+ // This ensures they appear in autocomplete suggestions.
+ queryClient.invalidateQueries({
+ queryKey: [API_PATH.ACTIVIST_LIST_BASIC],
+ })
+ queryClient.invalidateQueries({
+ queryKey: [API_PATH.EVENT_GET, eventId],
+ })
+ },
+ onError: (error: Error) => {
+ toast.error(error.message || 'Error saving event')
+ },
+ })
+
+ const initialValues: FormValues = useMemo(() => {
+ if (eventId && !eventData) {
+ throw new Error('Expected event data to be prefetched')
+ }
+ return {
+ eventName: eventData?.event_name || '',
+ eventType: eventData?.event_type || (isConnection ? 'Connection' : ''),
+ eventDate: eventData?.event_date || '',
+ // For new events, non-SF Bay chapters default to not sending surveys.
+ suppressSurvey:
+ eventData?.suppress_survey ?? user.ChapterID !== SF_BAY_CHAPTER_ID,
+ attendees:
+ eventData?.attendees && eventData.attendees.length > 0
+ ? [
+ ...eventData.attendees.map((name) => ({ name })),
+ ...Array(MIN_EMPTY_FIELDS)
+ .fill(null)
+ .map(() => ({ name: '' })),
+ ]
+ : Array(DEFAULT_FIELD_COUNT)
+ .fill(null)
+ .map(() => ({ name: '' })),
+ }
+ }, [eventData, eventId, isConnection, user.ChapterID])
+
+ const form = useForm({
+ defaultValues: initialValues,
+ validators: {
+ onSubmit: formSchema,
+ },
+ onSubmitInvalid: () => {
+ toast.error('Please fix the errors before saving')
+ },
+ onSubmit: async ({ value }) => {
+ // Filter out empty attendees.
+ const attendeeNames = value.attendees
+ .map((a) => a.name.trim())
+ .filter((n) => n !== '')
+
+ if (attendeeNames.length === 0) {
+ toast.error('At least one attendee is required')
+ return
+ }
+
+ // Check for duplicates.
+ const uniqueNames = new Set(attendeeNames)
+ if (uniqueNames.size !== attendeeNames.length) {
+ toast.error('Please remove duplicates before saving')
+ return
+ }
+
+ // Calculate diff from original.
+ const oldAttendeesSet = new Set(
+ (form.options.defaultValues?.attendees || [])
+ .map((a) => a.name.trim())
+ .filter((n) => n !== ''),
+ )
+
+ const addedAttendees = attendeeNames.filter(
+ (name) => !oldAttendeesSet.has(name),
+ )
+ const deletedAttendees = Array.from(oldAttendeesSet).filter(
+ (name) => !uniqueNames.has(name),
+ )
+
+ await saveEventMutation.mutateAsync({
+ event_id: Number(eventId || '0'),
+ event_name: value.eventName.trim(),
+ event_date: value.eventDate,
+ event_type: value.eventType,
+ added_attendees: addedAttendees,
+ deleted_attendees: deletedAttendees,
+ suppress_survey: value.suppressSurvey,
+ })
+ },
+ })
+
+ const checkForDuplicate = (value: string, currentIndex: number): boolean => {
+ const attendees = form.state.values.attendees
+ const matches = attendees.filter(
+ (a, idx) => idx !== currentIndex && a.name === value,
+ )
+ return matches.length > 0
+ }
+
+ // Subscribe to form state to reactively show/hide the survey checkbox.
+ const eventType = useStore(form.store, (state) => state.values.eventType)
+ const eventName = useStore(form.store, (state) => state.values.eventName)
+
+ // Predicts whether the server will send a survey by default.
+ const shouldShowSuppressSurveyCheckbox = useMemo(() => {
+ if (user.ChapterID !== SF_BAY_CHAPTER_ID) return false
+
+ const surveyMatchers = [
+ // Surveys are sent for events containing these strings in the name.
+ { nameContains: 'chapter meeting' },
+ // Surveys are sent for all events of these types.
+ { type: 'Action' },
+ { type: 'Campaign Action' },
+ { type: 'Community' },
+ { type: 'Animal Care' },
+ ]
+
+ return surveyMatchers.some((matcher) => {
+ // If event name, check if included (case-insensitive).
+ if (
+ matcher.nameContains &&
+ !eventName.toLowerCase().includes(matcher.nameContains)
+ ) {
+ return false
+ }
+ // If event type, check for match.
+ if (matcher.type && matcher.type !== eventType) {
+ return false
+ }
+ return true
+ })
+ }, [eventName, eventType, user.ChapterID])
+
+ const attendeeCount = useMemo(
+ () =>
+ form.state.values.attendees.filter((a) => a.name.trim() !== '').length,
+ [form.state.values.attendees],
+ )
+
+ const ensureMinimumEmptyFields = () => {
+ const emptyCount = form.state.values.attendees.filter(
+ (it) => !it.name.length,
+ ).length
+ if (emptyCount < MIN_EMPTY_FIELDS) {
+ form.pushFieldValue('attendees', { name: '' })
+ }
+ }
+
+ // Warn before leaving with unsaved changes.
+ useEffect(() => {
+ const handleBeforeUnload = (e: BeforeUnloadEvent) => {
+ if (form.state.isDirty) {
+ // `preventDefault()` + setting `returnValue` triggers the
+ // browser's native unsaved changes warning dialog. Modern
+ // browsers ignore custom messages in returnValue for security,
+ // so we use empty string.
+ e.preventDefault()
+ e.returnValue = ''
+ }
+ }
+
+ window.addEventListener('beforeunload', handleBeforeUnload)
+ return () => window.removeEventListener('beforeunload', handleBeforeUnload)
+ }, [form.state.isDirty])
+
+ const setDateToToday = () => {
+ // Get today's date in YYYY-MM-DD format in the browser's local timezone
+ const today = new Date()
+ const year = today.getFullYear()
+ const month = String(today.getMonth() + 1).padStart(2, '0')
+ const day = String(today.getDate()).padStart(2, '0')
+ form.setFieldValue('eventDate', `${year}-${month}-${day}`)
+ }
+
+ // Only show loading for activist list since event data is prefetched during SSR
+ if (isLoadingActivists) {
+ return (
+
+
+
+
Loading activist names...
+
+
+ )
+ }
+
+ return (
+
+ )
+}
diff --git a/frontend-v2/src/app/event/page.tsx b/frontend-v2/src/app/event/page.tsx
new file mode 100644
index 00000000..dac38f3e
--- /dev/null
+++ b/frontend-v2/src/app/event/page.tsx
@@ -0,0 +1,19 @@
+import { ContentWrapper } from '@/app/content-wrapper'
+import { AuthedPageLayout } from '@/app/authed-page-layout'
+import { EventForm } from './event-form'
+import { Navbar } from '@/components/nav'
+import { Suspense } from 'react'
+
+export default async function AttendancePage() {
+ return (
+
+
+
+
Attendance
+ Loading form...
}>
+
+
+
+
+ )
+}
diff --git a/frontend-v2/src/app/login/page.tsx b/frontend-v2/src/app/login/page.tsx
index 28686501..7d9d65be 100644
--- a/frontend-v2/src/app/login/page.tsx
+++ b/frontend-v2/src/app/login/page.tsx
@@ -25,7 +25,7 @@ export default async function LoginPage() {
//
// This invokes the Sign-in-with-Google HTML API. Note that Google also provides a JavaScript API for more complex
// use cases.
- let signInwithGoogleHtmlInvocation = (
+ const signInwithGoogleHtmlInvocation = (
<>
({
+ const form = useForm({
defaultValues: initialValues,
validators: {
onSubmit: userFormSubmitSchema,
@@ -211,7 +211,7 @@ export function UserForm({ userId }: { userId?: number }) {
/>
{field.state.meta.errors[0] && (