Change teks to parole

components/teks/lekte.js

@@ -14,7 +14,7 @@ import Image from 'next/image'
 import {grey} from '@mui/material/colors'
 import {Link} from '@mui/material'
 
-const apiUrl = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:1337'
+const IMAGE_URL = process.env.NEXT_PUBLIC_API_URL_ROOT || 'http://localhost:1337'
 
 const Widget = styled('div')(({theme}) => ({
   padding: 16,
@@ -49,7 +49,7 @@ const TinyText = styled(Typography)({
   letterSpacing: 0.2,
 })
 
-export default function Lekte({audio, url, teks}) {
+export default function Lekte({audio, url, parole}) {
   const audioRef = useRef(new Audio(audio))
   const intervalRef = useRef()
   const isReady = useRef(false)
@@ -58,7 +58,7 @@ export default function Lekte({audio, url, teks}) {
   const [position, setPosition] = useState(0)
   const [volume, setVolume] = useState(100)
   const [isPlaying, setIsPlaying] = useState(false)
-  const awtis = teks.awtis.map(({alias}) => alias)
+  const awtis = parole.artistes.data.map(({attributes}) => attributes.alias)
 
   function formatDuration(value) {
     const minute = Math.floor(value / 60)
@@ -139,10 +139,10 @@ export default function Lekte({audio, url, teks}) {
         <Box sx={{display: 'flex', alignItems: 'center'}}>
           <CoverImage>
             <Image
-              alt={teks.tit}
-              src={teks?.kouveti?.formats?.thumbnail ? `${apiUrl}${teks.kouveti.formats.thumbnail.url}` : '/oki-logo-192x192.png'}
-              width={teks?.kouveti?.formats?.thumbnail ? teks.kouveti.formats.thumbnail.width : 192}
-              height={teks?.kouveti?.formats?.thumbnail ? teks.kouveti.formats.thumbnail.height : 192}
+              alt={parole.titre}
+              src={parole?.couverture?.data?.attributes?.formats?.thumbnail ? `${IMAGE_URL}${parole.couverture.data.attributes.formats.thumbnail.url}` : '/oki-logo-192x192.png'}
+              width={parole?.kouveti?.data?.attributes?.formats?.thumbnail ? parole.couverture.data.attributes.formats.thumbnail.width : 192}
+              height={parole?.kouveti?.data?.attributes?.formats?.thumbnail ? parole.couverture.data.attributes.formats.thumbnail.height : 192}
             />
           </CoverImage>
           <Box sx={{ml: 1.5, minWidth: 0}}>
@@ -151,11 +151,11 @@ export default function Lekte({audio, url, teks}) {
             </Typography>
             <Typography>
               <Link underline='hover' sx={{cursor: 'pointer'}} target='_blank' rel='noreferrer' href={url}>
-                <strong>{teks.tit}</strong>
+                <strong>{parole.titre}</strong>
               </Link>
             </Typography>
             <Typography variant='caption'>
-              <i>{teks.lanne}</i>
+              <i>{parole.annee}</i>
             </Typography>
           </Box>
         </Box>
@@ -263,5 +263,5 @@ export default function Lekte({audio, url, teks}) {
 Lekte.propTypes = {
   audio: PropTypes.string.isRequired,
   url: PropTypes.string.isRequired,
-  teks: PropTypes.object.isRequired
+  parole: PropTypes.object.isRequired
 }