106 lines
2.8 KiB
JavaScript
106 lines
2.8 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 Container from '@mui/material/Container'
|
|
|
|
import {jwennToutAwtis} from '../../lib/oki-api'
|
|
import {formatKuveti} from '../../lib/kuveti'
|
|
|
|
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(() => [...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={(optionProps, option) => {
|
|
const {key, ...rest} = optionProps
|
|
|
|
return (
|
|
<li key={key} {...rest}>
|
|
<Avatar
|
|
style={{marginRight: 8}}
|
|
alt={option?.alias}
|
|
src={`${IMAGE_URL}${formatKuveti(option?.photo, '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>
|
|
)
|
|
}
|