nextjs-demo

EventsPage.tsx

(2398B)

 "use client"
 
 import { Checkbox, ComboBox, Select, Loading, Alert, Form, FormDataMap, Button } from '../../headless'
 import { useNumberFormatter } from '../../hooks'
 import { SHEvent } from './useSHEvents'
 import { FilteredSHEventsInput, useFilteredSHEvents } from './useFilteredSHEvents'
 import { invariant, isSortType, SORT_TYPES } from '../../../lib'
 import { Suspense, use, useTransition } from 'react'
 import { eventsAction } from './eventsAction'
 
 type EventsProps = {
   events: Promise<SHEvent[]>
   cities: Promise<string[]>
 }
 
 export function EventsPage({ events, cities }: EventsProps) {
   const [isPending, startTransition] = useTransition()
   // const { events, filterSHEvents } = useFilteredSHEvents(loadedEvents)
   
   return (
     <Alert.Context>
       <Alert />
       <Form aria-label='Filter Events' action={eventsAction} validator={validator}>
         <ComboBox label="City" name="city" options={[]} />
         <Select label="Sort by price" name="priceSort" options={SORT_TYPES} />
         <Checkbox label="Find Cheapest" name="cheapest" />
         <Button type="submit" disabled={false}>Search</Button>
         <Form.Error>{(error) => error}</Form.Error>
       </Form>
       <Alert.ErrorBoundary fallback="Failed to get list of events">
         <Suspense fallback={<Loading />}>
           <EventList events={events} />
         </Suspense>
       </Alert.ErrorBoundary>
     </Alert.Context>
   )
 }
 
 type EventListProps = {
   events: Promise<SHEvent[]>
 }
 
 function EventList({ events }: EventListProps) {
   const priceFormatter = useNumberFormatter({ 
     style: 'currency', 
     currency: 'USD',
     maximumFractionDigits: 0
   })
   
   return (
     <ul>
       {use(events).map(({ id, city, price }) => (
         <li key={id}>
           <div>City: {city}</div>
           <div>Price: {priceFormatter.format(price)}</div>
         </li>
       ))}
     </ul>
   )
 }
 
 
 function validator ({ city, priceSort, cheapest }: FormDataMap): FilteredSHEventsInput {
   invariant(
     typeof city === 'string' && city.length < 255, 
     "City is invalid"
   )
   
   invariant(
     cheapest === undefined || cheapest === 'on', 
     "Find cheapest input is invalid"
   )
   
   invariant(
     priceSort === '' || (typeof priceSort === 'string' && isSortType(priceSort)),
     "Sort by price is invalid"
   )
 
   return { 
     city, 
     priceSort: priceSort || undefined, 
     cheapest: cheapest === 'on', 
   }
 }