import React from "react"; import { Link as RouterLink } from "react-router-dom"; import { useForm } from "react-hook-form"; import { Container, Box, Flex } from "@chakra-ui/react"; import { Link, Input, Button } from "@chakra-ui/react"; import { Table, Thead, Tbody, Tr, Th, Td } from "@chakra-ui/react"; import { ControlApi } from "./ControlApi"; import { ErrorAlert } from "./ErrorAlert"; export const ControlTrackCardsPage: React.FC = () => { const [query, setQuery] = React.useState<string | null>(null); const [errorAlert, setErrorAlert] = React.useState<JSX.Element | null>(null); const { register, handleSubmit } = useForm<{ query: string; }>({ defaultValues: { query: "" } }); const { data: list, isValidating } = ControlApi.useAttendeeList(query); const onSubmit = handleSubmit(async (data) => { setQuery(data.query); }); // TODO: link to registration page and support email return ( <> {errorAlert} <Container mt="20px" maxW={["auto", "auto", "auto", "1400px"]}> <Box> <form onSubmit={onSubmit}> <Input {...register("query")} placeholder="Name, reference code (or submit empty to list all attendees)" /> <Button mt={4} size="lg" type="submit" isLoading={isValidating}> Search </Button> </form> </Box> {list ? ( <Box> <Table> <Thead> <Tr> <Th>Name</Th> <Th>Reference</Th> <Th>Flag</Th> </Tr> </Thead> <Tbody> {list.items.map((item) => ( <Tr key={item.ticket.id}> <Td> <Link as={RouterLink} to={`/control/attendees/${item.ticket.id}`}> {item.attendee.is_ready ? ( <span>{item.attendee.name}</span> ) : ( <i> {item.ticket.first_name} {item.ticket.last_name} </i> )} </Link> </Td> <Td> <Link href={item.ticket.admin_url} isExternal> {item.ticket.reference} </Link> </Td> <Td> {[ item.attendee.is_speaker ? "Speaker" : null, item.attendee.is_committer ? "Committer" : null, item.attendee.is_staff ? "Staff" : null, ] .filter((v): v is string => !!v) .join(", ")} </Td> </Tr> ))} </Tbody> </Table> </Box> ) : null} </Container> </> ); }; export default ControlTrackCardsPage;