Change awtis to artiste

components/awtis/awtis-detay.js

@@ -13,18 +13,19 @@ import KeyboardBackspaceIcon from '@mui/icons-material/KeyboardBackspace'
 import AwtisBiyografi from './awtis-biyografi'
 import MizikLis from './mizik-lis'
 
-const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:1337'
+const IMAGE_URL = process.env.NEXT_PUBLIC_API_URL_ROOT || 'http://localhost:1337'
+const noImageUrl = 'https://place-hold.it/140x140?text=Indisponible'
 
-const sortTeks = teks => teks.sort((a, b) => b.id - a.id)
+const sortTeks = paroles => paroles.sort((a, b) => b.id - a.id)
 
 export default function AwtisDetay({anAwtis}) {
   const router = useRouter()
   const [esByografiOuve, meteEsByografiOuve] = useState(false)
-  const {alias, biyografi, teks, foto} = anAwtis
-  const sortedTeks = sortTeks(teks)
-  const gwanBiyo = anAwtis.biyografi.length > 100
+  const {alias, biographie, paroles, photo} = anAwtis
+  const sortedTeks = sortTeks(paroles.data)
+  const gwanBiyo = biographie && biographie.length > 100
 
-  const biyo = gwanBiyo ? `${anAwtis.biyografi.slice(0, 100)}...` : anAwtis.biyografi
+  const biyo = gwanBiyo ? `${biographie.slice(0, 100)}...` : biographie
 
   const handleClick = () => {
     meteEsByografiOuve(true)
@@ -45,7 +46,7 @@ export default function AwtisDetay({anAwtis}) {
       </Box>
       <Box sx={{justifyContent: 'center', display: 'flex', marginBottom: 2}}>
         <Avatar
-          src={`${API_URL}${foto[0].url}`}
+          src={`${photo?.data?.attributes?.url ? `${IMAGE_URL}${photo?.data?.attributes?.url}` : noImageUrl}`}
           alt={`Photo ${alias}`}
           sx={{width: 200, height: 200, border: `2px solid ${green[500]}`}}
         />
@@ -69,7 +70,7 @@ export default function AwtisDetay({anAwtis}) {
         )}
         <Grid item xs={12} md={6}>
           <Box marginBottom={3}>
-            {teks.length > 1 ? (
+            {paroles.data.length > 1 ? (
               <Accordion>
                 <AccordionSummary
                   expandIcon={<ExpandMoreIcon />}
@@ -77,7 +78,7 @@ export default function AwtisDetay({anAwtis}) {
                   id='panel-teks-header'
                 >
                   <Typography marginRight={2} textAlign='center' variant='body1' component='h2'><strong>Liste des textes</strong></Typography>
-                  <Chip color='primary' label={teks.length} size='small' variant='contained' />
+                  <Chip color='primary' label={paroles.data.length} size='small' variant='contained' />
                 </AccordionSummary>
                 <AccordionDetails>
                   <MizikLis teks={sortedTeks} />
@@ -87,7 +88,7 @@ export default function AwtisDetay({anAwtis}) {
               <>
                 <Typography gutterBottom textAlign='center' variant='body1' component='h2'><strong>Texte</strong></Typography>
                 <Paper>
-                  <MizikLis teks={teks} />
+                  <MizikLis paroles={paroles.data} />
                 </Paper>
               </>
             )}
@@ -102,8 +103,8 @@ export default function AwtisDetay({anAwtis}) {
       {esByografiOuve && (
         <AwtisBiyografi
           alias={alias}
-          teks={teks}
-          biyografi={biyografi}
+          paroles={paroles.data}
+          biographie={biographie}
           esByografiOuve={esByografiOuve}
           meteEsByografiOuve={meteEsByografiOuve}
         />