Adapt all Teks components to new api

components/teks/teks-drawer.js

@@ -99,8 +99,7 @@ const formatJsonString = stringToFormat => {
   return stringToFormat.split('\n').map((string, index) => <div key={index}>{`${string}`}<br /></div>) // eslint-disable-line react/no-array-index-key
 }
 
-export default function TeksDrawer({miziks, mizik}) {
-  const teks = mizik ? mizik[0] : null
+export default function TeksDrawer({teks, anTeks}) {
   const classes = useStyles()
   const theme = useTheme()
   const [mobileOpen, setMobileOpen] = useState(false)
@@ -125,21 +124,21 @@ export default function TeksDrawer({miziks, mizik}) {
           >
             <MenuIcon />
           </IconButton>
-          {teks ? (
+          {anTeks ? (
             <>
               <Link href='/teks'>
                 <IconButton aria-label='return' size='medium'>
                   <KeyboardBackspaceIcon style={{fontSize: '1.5em'}} />
                 </IconButton>
               </Link>
-              {teks.liens && teks.liens.length > 0 && (
+              {anTeks.lyen && anTeks.lyen.length > 0 && (
                 <div className={classes.vwe}>
-                  <VweKouteAchte isVideo teks={teks} />
+                  <VweKouteAchte niVideyo anTeks={anTeks} />
                 </div>
               )}
-              {teks.kouteyAchtey && teks.kouteyAchtey.length > 0 && (
+              {anTeks.kouteyAchtey && anTeks.kouteyAchtey.length > 0 && (
                 <div className={classes.koute}>
-                  <VweKouteAchte isAudio teks={teks} />
+                  <VweKouteAchte niOdyo anTeks={anTeks} />
                 </div>
               )}
             </>
@@ -165,7 +164,7 @@ export default function TeksDrawer({miziks, mizik}) {
             }}
             onClose={handleDrawerToggle}
           >
-            <DrawerBar setMobileOpen={setMobileOpen} miziks={miziks} mizik={mizik} />
+            <DrawerBar setMobileOpen={setMobileOpen} teks={teks} anTeks={anTeks} />
           </Drawer>
         </Hidden>
         <Hidden xsDown implementation='css'>
@@ -176,15 +175,15 @@ export default function TeksDrawer({miziks, mizik}) {
             }}
             variant='permanent'
           >
-            <DrawerBar miziks={miziks} mizik={mizik} />
+            <DrawerBar teks={teks} anTeks={anTeks} />
           </Drawer>
         </Hidden>
       </nav>
       <main className={classes.content}>
-        {teks ? (
+        {anTeks ? (
           <>
-            <Typography noWrap align='center' style={{marginTop: '1em'}} variant='h6'>
-              {teks.titre}
+            <Typography noWrap align='center' style={{marginTop: '2em'}} variant='h6'>
+              {anTeks.tit}
             </Typography>
             <Grid container className={classes.grid} spacing={3}>
               <Grid item md className={classes.gridText}>
@@ -192,23 +191,23 @@ export default function TeksDrawer({miziks, mizik}) {
                   Transcription
                 </Typography>
                 <Typography paragraph align='justify' component='span'>
-                  {formatJsonString(teks.transcription)}
+                  {formatJsonString(anTeks.transkripsyon)}
                 </Typography>
               </Grid>
-              {teks.traductions && (
+              {anTeks.tradiksyon && (
                 <Grid item md className={classes.gridText}>
                   <Typography align='center' className={classes.text} variant='h4'>
                     Traduction
                   </Typography>
                   <Typography paragraph align='justify' component='span'>
-                    {formatJsonString(teks.traductions.francais)}
+                    {formatJsonString(anTeks.tradiksyon.francais)}
                   </Typography>
                 </Grid>
               )}
             </Grid>
           </>
         ) : (
-          <DenyeTeks {...miziks} />
+          <DenyeTeks {...teks} />
         )}
       </main>
     </div>
@@ -216,10 +215,10 @@ export default function TeksDrawer({miziks, mizik}) {
 }
 
 TeksDrawer.propTypes = {
-  miziks: PropTypes.array.isRequired,
-  mizik: PropTypes.array
+  teks: PropTypes.array.isRequired,
+  anTeks: PropTypes.object
 }
 
 TeksDrawer.defaultProps = {
-  mizik: null
+  anTeks: null
 }