frontPage.tsx

import { Button, InputAdornment, MenuItem, TextField } from '@mui/material'
import Page from 'components/page'
import { Link } from 'react-router-dom'
import SponsorGuestButtons from 'routes/components/sponsorGuestButtons'
import SearchIcon from '@mui/icons-material/Search'
import { useTranslation } from 'react-i18next'
import { debounce } from 'lodash'
import React, { useState } from 'react'

type Guest = {
  first: string
  last: string
  pid: string
  value: string
}

function FrontPage() {
  const [t] = useTranslation('common')
  const [guests, setGuests] = useState<Guest[]>([])

  const getGuests = async (event: React.ChangeEvent<HTMLInputElement>) => {
    if (event.target.value) {
      console.log('searching')
      const response = await fetch(
        `/api/ui/v1/person/search/${event.target.value}?format=json`
      )
      const repjson = await response.json()
      console.log(repjson)
      if (response.ok) {
        setGuests(repjson)
      }
    }
  }
  return (
    <Page>
      <SponsorGuestButtons registerNewGuestActive />
      <h4>{t('register.registerHeading')}</h4>
      <p>{t('register.registerText')}</p>
      <TextField
        InputProps={{
          endAdornment: (
            <InputAdornment position="end">
              <SearchIcon />
            </InputAdornment>
          ),
        }}
        fullWidth
        placeholder="Mobile phone, e-mail"
        onChange={debounce(getGuests, 600)}
      />
      {guests ? (
        guests.map((guest) => {
          const guestTo = `/sponsor/guest/${guest.pid}`
          return (
            <MenuItem
              key={`${guest.pid}-${guest.value}`}
              component={Link}
              to={guestTo}
            >
              {guest.first} {guest.last}
              <br />
              {guest.value}
            </MenuItem>
          )
        })
      ) : (
        <></>
      )}
      <Button
        variant="contained"
        color="secondary"
        component={Link}
        to="register/new"
      >
        {t('register.registerButtonText')}
      </Button>
    </Page>
  )
}
export default FrontPage