108 lines
2.9 KiB
JavaScript
108 lines
2.9 KiB
JavaScript
'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>
|
|
)
|
|
}
|