feat(events): support scheduling public events in advance

Makefile

@@ -40,7 +40,10 @@ run_all:
 run:
 	cd server/src && go install # Install first so that we keep cached build objects around.
 
-	set -a && . server/debug.env && set +a && \
+	set -a && \
+	. server/debug.env && \
+	{ [ -f .env ] && . ./.env || true; } && \
+	set +a && \
 	cd server/src && \
 	PORT=$(PORT) go run main.go
 

cli/cmd/db.go

@@ -103,7 +103,9 @@ INSERT INTO activists
   VALUES
   (`+ch+`, 1000, 'nnn', 'test2@gmail.com', '', 'United States', 'Supporter', 'Petition: no-more-bad-things', '`+currentDateString(1)+`');
 
-INSERT INTO events VALUES
+INSERT INTO events
+  (id, name, date, event_type, survey_sent, suppress_survey, circle_id, chapter_id)
+  VALUES
   %s
 
 INSERT INTO event_attendance (activist_id, event_id) VALUES

frontend-v2/src/app/(authed)/events/[id]/confirmation/event-confirmation.tsx

@@ -0,0 +1,116 @@
+'use client'
+
+import { useRouter } from 'next/navigation'
+import { useQuery } from '@tanstack/react-query'
+import { format, parseISO } from 'date-fns'
+import {
+  CheckCircle2,
+  Users,
+  Pencil,
+  CalendarPlus,
+  Home,
+  Clock,
+  MapPin,
+  Globe,
+} from 'lucide-react'
+import { API_PATH, apiClient } from '@/lib/api'
+import { Button } from '@/components/ui/button'
+import { formatEventTimeRange } from '@/lib/timezone'
+
+export function EventConfirmation({ eventId }: { eventId: number }) {
+  const router = useRouter()
+
+  // Hydrated by the server page (same query key as the event form), so this
+  // resolves immediately on first render.
+  const { data: event } = useQuery({
+    queryKey: [API_PATH.EVENT_GET, String(eventId)],
+    queryFn: ({ signal }) => apiClient.getEvent(eventId, signal),
+  })
+
+  const timeRange = event
+    ? formatEventTimeRange(
+        event.event_date,
+        event.start_time ?? '',
+        event.end_time ?? '',
+        event.timezone ?? '',
+      )
+    : ''
+  const locationLabel =
+    event?.location?.name || event?.location?.formatted_address
+
+  return (
+    <div className="flex flex-col gap-6">
+      <div className="flex flex-col items-center gap-3 text-center">
+        <CheckCircle2 className="h-12 w-12 text-green-600" />
+        <div>
+          <h2 className="text-xl font-semibold">Event created</h2>
+          <p className="mt-1 text-sm text-muted-foreground">
+            Your event is scheduled. Take attendance when the event happens.
+          </p>
+        </div>
+      </div>
+
+      {event && (
+        <div className="rounded-xl border bg-card p-5 shadow-sm">
+          <p className="text-base font-semibold">{event.event_name}</p>
+          <div className="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1.5 text-sm text-muted-foreground">
+            <span className="inline-flex items-center rounded-full bg-muted px-2 py-0.5 text-xs font-medium">
+              {event.event_type}
+            </span>
+            <span>{format(parseISO(event.event_date), 'PPP')}</span>
+            {timeRange && (
+              <span className="inline-flex items-center gap-1">
+                <Clock className="h-3.5 w-3.5" />
+                {timeRange}
+              </span>
+            )}
+            {event.is_online ? (
+              <span className="inline-flex items-center gap-1">
+                <Globe className="h-3.5 w-3.5" />
+                Online
+              </span>
+            ) : (
+              locationLabel && (
+                <span className="inline-flex items-center gap-1">
+                  <MapPin className="h-3.5 w-3.5" />
+                  {locationLabel}
+                </span>
+              )
+            )}
+          </div>
+        </div>
+      )}
+
+      <div className="flex flex-col gap-2">
+        <Button type="button" onClick={() => router.push(`/events/${eventId}`)}>
+          <Users className="h-4 w-4" />
+          Take attendance now
+        </Button>
+        <Button
+          type="button"
+          variant="outline"
+          onClick={() => router.push(`/events/${eventId}?edit=1`)}
+        >
+          <Pencil className="h-4 w-4" />
+          Edit event
+        </Button>
+        <Button
+          type="button"
+          variant="outline"
+          onClick={() => router.push('/events/new')}
+        >
+          <CalendarPlus className="h-4 w-4" />
+          Create another event
+        </Button>
+        <Button
+          type="button"
+          variant="ghost"
+          onClick={() => router.push('/home')}
+        >
+          <Home className="h-4 w-4" />
+          Done
+        </Button>
+      </div>
+    </div>
+  )
+}

frontend-v2/src/app/(authed)/events/[id]/confirmation/page.tsx

@@ -0,0 +1,45 @@
+import {
+  dehydrate,
+  HydrationBoundary,
+  QueryClient,
+} from '@tanstack/react-query'
+import { notFound } from 'next/navigation'
+import { ContentWrapper } from '@/app/content-wrapper'
+import { EventConfirmation } from './event-confirmation'
+import { API_PATH, ApiClient } from '@/lib/api'
+import { getCookies } from '@/lib/auth'
+import { redirectForHttpError } from '@/lib/server-auth'
+
+// Shown right after a scheduled (public) event is created. Attendance happens
+// later, at the event, so we confirm the event is on the schedule and offer the
+// natural next steps instead of dropping the user on the attendance page.
+export default async function EventConfirmationPage({
+  params,
+}: {
+  params: Promise<{ id: string }>
+}) {
+  const { id } = await params
+  const eventId = parseInt(id)
+  if (Number.isNaN(eventId)) {
+    notFound()
+  }
+
+  const apiClient = new ApiClient(await getCookies())
+  const queryClient = new QueryClient()
+
+  await redirectForHttpError(() =>
+    // Intentionally use fetchQuery instead of prefetchQuery; see redirectForHttpError for details.
+    queryClient.fetchQuery({
+      queryKey: [API_PATH.EVENT_GET, String(eventId)],
+      queryFn: ({ signal }) => apiClient.getEvent(eventId, signal),
+    }),
+  )
+
+  return (
+    <ContentWrapper size="sm" className="gap-8">
+      <HydrationBoundary state={dehydrate(queryClient)}>
+        <EventConfirmation eventId={eventId} />
+      </HydrationBoundary>
+    </ContentWrapper>
+  )
+}

frontend-v2/src/app/(authed)/events/[id]/page.tsx

@@ -12,10 +12,13 @@ import { redirectForHttpError } from '@/lib/server-auth'
 
 export default async function EditEventPage({
   params,
+  searchParams,
 }: {
   params: Promise<{ id: string }>
+  searchParams: Promise<{ edit?: string }>
 }) {
   const { id } = await params
+  const { edit } = await searchParams
   const eventId = parseInt(id)
   if (Number.isNaN(eventId)) {
     notFound()
@@ -35,8 +38,8 @@ export default async function EditEventPage({
   return (
     <ContentWrapper size="sm" className="gap-8">
       <HydrationBoundary state={dehydrate(queryClient)}>
-        <h1 className="text-3xl font-bold">Attendance</h1>
-        <EventForm mode="event" />
+        <h1 className="text-3xl font-bold">Event</h1>
+        <EventForm mode="event" startExpanded={edit === '1'} />
       </HydrationBoundary>
     </ContentWrapper>
   )