Change teks to parole

components/teks/teks.js

@@ -66,30 +66,30 @@ const Root = styled('div')((
   }
 }))
 
-const langToArray = anTeks => {
+const langToArray = parole => {
   const langArray = []
 
-  if (anTeks && anTeks.tradiksyon) {
-    const {francais, english, espagnol, deutsch, italiano} = anTeks.tradiksyon
+  if (parole && parole.traductions) {
+    const {francais, anglais, espagnol, allemand, italien} = parole.traductions
 
     if (francais) {
       langArray.push({title: 'Traduction', flag: 'fr', lang: francais})
     }
 
-    if (english) {
-      langArray.push({title: 'Translation', flag: 'en', lang: english})
+    if (anglais) {
+      langArray.push({title: 'Translation', flag: 'en', lang: anglais})
     }
 
     if (espagnol) {
       langArray.push({title: 'Traducción', flag: 'es', lang: espagnol})
     }
 
-    if (deutsch) {
-      langArray.push({title: 'Übersetzung', flag: 'de', lang: deutsch})
+    if (allemand) {
+      langArray.push({title: 'Übersetzung', flag: 'de', lang: allemand})
     }
 
-    if (italiano) {
-      langArray.push({title: 'Traduzione', flag: 'it', lang: italiano})
+    if (italien) {
+      langArray.push({title: 'Traduzione', flag: 'it', lang: italien})
     }
   }
 
@@ -120,15 +120,15 @@ const Alert = forwardRef(function Alert(props, ref) {
 
 const ExplicitTooltip = Tooltip
 
-export default function Teks({anTeks, komante, open, success, error, setSuccess, setError, handleClose}) {
+export default function Teks({parole, paroleId, commentaires, open, success, error, setSuccess, setError, handleClose}) {
   const isMobile = useMediaQuery('(max-width:800px)')
-  const langArray = langToArray(anTeks)
-  const awtis = anTeks.awtis.map(({alias}) => alias)
+  const langArray = langToArray(parole)
+  const awtis = parole.artistes.data.map(({attributes}) => attributes.alias)
 
   return (
     <Root>
       <div className={classes.pataje}>
-        <Pataje teks={anTeks} setError={setError} setSuccess={setSuccess} />
+        <Pataje parole={parole} setError={setError} setSuccess={setSuccess} />
       </div>
       <Box sx={{textAlign: 'center', marginTop: 9}}>
         <Typography style={{marginTop: '0.8em'}} variant='h4' component='div' display='block'>
@@ -136,8 +136,8 @@ export default function Teks({anTeks, komante, open, success, error, setSuccess,
             {new Intl.ListFormat('fr').format(awtis)}
           </Typography>
           <Typography variant='h5' component='div'>
-            {anTeks.tit} <small>({anTeks?.lanne})</small>
-            {anTeks.eksplisit && (
+            {parole.titre} <small>({parole?.annee})</small>
+            {parole.explicite && (
               <ExplicitTooltip
                 title='Explicit Lyrics'
                 placement='bottom'
@@ -151,29 +151,29 @@ export default function Teks({anTeks, komante, open, success, error, setSuccess,
             )}
           </Typography>
           <Grid container alignItems='center' justifyContent='center'>
-            {komante && (
-              <VweKomante komante={komante} teks={anTeks} />
+            {commentaires && (
+              <VweKomante commentaires={commentaires} parole={parole} paroleId={paroleId} />
             )}
           </Grid>
         </Typography>
-        {anTeks.user && (
+        {parole?.user?.data && (
           <Typography style={{marginBottom: '1.5em'}} display='block' variant='caption'>
-            <i>texte soumis par {anTeks.user.username}</i>
+            <i>texte soumis par {parole.user.data.attributes.username}</i>
           </Typography>
         )}
-        {anTeks.userAdmin && !anTeks.user && (
+        {parole.userAdmin && !parole.user && (
           <Typography style={{marginBottom: '1.5em'}} display='block' variant='caption'>
-            <i>texte soumis par {anTeks.userAdmin}</i>
+            <i>texte soumis par {parole.userAdmin}</i>
           </Typography>
         )}
       </Box>
-      {(anTeks.okiMizikID || anTeks.kouteyAchtey.length > 0) && (
+      {(parole.okiMizikID || parole.streamAudio.length > 0) && (
         <Box sx={{textAlign: 'center'}}>
-          <EntegreMizik anTeks={anTeks} isMobile={isMobile} />
+          <EntegreMizik parole={parole} isMobile={isMobile} />
         </Box>
       )}
-      {anTeks.okiMizikID && (
-        <OkiMizik id={anTeks.okiMizikID} teks={anTeks} />
+      {parole.okiMizikID && (
+        <OkiMizik id={parole.okiMizikID} parole={parole} />
       )}
       <Grid container justifyContent='start' spacing={1}>
         <Grid item xs={12} md={langArray.length > 0 ? 6 : null}>
@@ -182,7 +182,7 @@ export default function Teks({anTeks, komante, open, success, error, setSuccess,
               Transcription
             </Typography>
             <Typography paragraph align={alignTeks(langArray, isMobile)} component='span'>
-              {formatJsonString(anTeks.transkripsyon)}
+              {formatJsonString(parole.transcription)}
             </Typography>
           </div>
         </Grid>
@@ -242,8 +242,9 @@ export default function Teks({anTeks, komante, open, success, error, setSuccess,
 }
 
 Teks.propTypes = {
-  anTeks: PropTypes.object.isRequired,
-  komante: PropTypes.array,
+  parole: PropTypes.object.isRequired,
+  paroleId: PropTypes.number.isRequired,
+  commentaires: PropTypes.array,
   open: PropTypes.bool.isRequired,
   success: PropTypes.string,
   error: PropTypes.string,
@@ -253,7 +254,7 @@ Teks.propTypes = {
 }
 
 Teks.defaultProps = {
-  komante: null,
+  commentaires: null,
   success: '',
   error: ''
 }