pawol.nu/components/awtis/cheche-awtis.js

'use client'

import {useEffect, useState, useMemo} from 'react'
import {useRouter} from 'next/navigation'
import TextField from '@mui/material/TextField'
import Autocomplete from '@mui/material/Autocomplete'
import Avatar from '@mui/material/Avatar'
import CircularProgress from '@mui/material/CircularProgress'
import Container from '@mui/material/Container'

import {jwennToutAwtis} from '../../lib/oki-api'

const IMAGE_URL = process.env.NEXT_PUBLIC_API_URL_ROOT || 'http://localhost:1337'

export default function ChecheAwtis() {
  const router = useRouter()
  const [open, setOpen] = useState(false)
  const [options, setOptions] = useState([])
  const loading = open && options.length === 0

  useEffect(() => {
    let active = true

    if (!loading) {
      return undefined
    }

    (async () => {
      try {
        const {data} = await jwennToutAwtis()
        
        const filteredData = data.map(artiste => {
          const firstLetter = artiste.alias[0].toUpperCase()
          return {
            firstLetter: /\d/.test(firstLetter) ? '0-9' : firstLetter,
            ...artiste
          }
        })
        if (active) {
          setOptions([...filteredData])
        }
      } catch (error) {
        console.log('⚠️  Erreur', error.message)
      }
    })()

    return () => {
      active = false
    }
  }, [loading])

  const sortedOptions = useMemo(() => {
    return [...options].sort((a, b) =>
      -b.firstLetter.localeCompare(a.firstLetter)
    );
  }, [options]);

  return (
    <Container
      sx={{ display: 'flex', justifyContent: 'center', marginBottom: 3 }}
    >
      <Autocomplete
        autoHighlight
        disableClearable
        disableCloseOnSelect
        loading={loading}
        open={open}
        loadingText='Chargement...'
        noOptionsText='Aucun résultat'
        id='cheche-awtis'
        options={sortedOptions}
        groupBy={(option) => option?.firstLetter}
        getOptionLabel={(option) => option?.alias}
        renderOption={(props, option) => {
          const {key, ...rest} = props;

          return (
            <li key={key} {...rest}>
              <Avatar
                style={{ marginRight: 8 }}
                alt={option?.alias}
                src={`${IMAGE_URL}${option?.photo?.formats?.thumbnail?.url}`}
              />
              {option?.alias}
            </li>
          );
        }}
        sx={{ width: 300 }}
        renderInput={(params) => (
          <TextField
            {...params}
            label='Rechercher un artiste'
            slotProps={{
              ...params.slotProps,
              htmlInput: { ...params.slotProps.htmlInput },
            }}
          />
        )}
        onChange={(event, newValue) => {
          router.push(`/awtis/${newValue.slug}`);
        }}
        onOpen={() => setOpen(true)}
        onClose={() => setOpen(false)}
      />
    </Container>
  )
}