Adapt VweKouteAchte to new api

components/teks/vwe-koute-achte.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import {useState} from 'react'
 import PropTypes from 'prop-types'
 import {
   Youtube,
@@ -40,29 +40,29 @@ const vweyIcons = {
   Soundcloud: <Soundcloud />
 }
 
-export default function VweKouteAchte({teks, isVideo, isAudio}) {
+export default function VweKouteAchte({anTeks, niVideyo, niOdyo}) {
   const classes = useStyles()
-  const [open, setOpen] = React.useState(false)
-  const {kouteyAchtey, liens} = teks
+  const [ouve, meteOuve] = useState(false)
+  const {kouteyAchtey, lyen} = anTeks
 
-  const kouteyAchteyActions = kouteyAchtey.map(({store, lien}) => {
+  const kouteyAchteyActions = kouteyAchtey.map(({boutik, url}) => {
     return {
-      icon: kouteyAchteyIcons[store],
-      name: store,
-      link: lien
+      icon: kouteyAchteyIcons[boutik],
+      name: boutik,
+      link: url
     }
   })
 
-  const vweyActions = liens.map(({lien, hebergeur}) => {
+  const vweyActions = lyen.map(({url, sit}) => {
     return {
-      icon: vweyIcons[hebergeur],
-      name: hebergeur,
-      link: lien
+      icon: vweyIcons[sit],
+      name: sit,
+      link: url
     }
   })
 
   const handleOpen = () => {
-    setOpen(true)
+    meteOuve(true)
   }
 
   const handleClick = link => {
@@ -70,7 +70,7 @@ export default function VweKouteAchte({teks, isVideo, isAudio}) {
   }
 
   const handleClose = () => {
-    setOpen(false)
+    meteOuve(false)
   }
 
   return (
@@ -81,12 +81,12 @@ export default function VweKouteAchte({teks, isVideo, isAudio}) {
         ariaLabel='SpeedDial openIcon example'
         className={classes.speedDial}
         direction='down'
-        icon={<SpeedDialIcon icon={isAudio ? <MusicNoteIcon /> : <PlayArrowIcon />} />}
-        open={open}
+        icon={<SpeedDialIcon icon={niOdyo ? <MusicNoteIcon /> : <PlayArrowIcon />} />}
+        open={ouve}
         onClose={handleClose}
         onOpen={handleOpen}
       >
-        {isAudio && kouteyAchteyActions.map(action => (
+        {niOdyo && kouteyAchteyActions.map(action => (
           <SpeedDialAction
             key={action.name}
             icon={action.icon}
@@ -94,7 +94,7 @@ export default function VweKouteAchte({teks, isVideo, isAudio}) {
             onClick={() => handleClick(action.link)}
           />
         ))}
-        {isVideo && vweyActions.map(action => (
+        {niVideyo && vweyActions.map(action => (
           <SpeedDialAction
             key={action.name}
             icon={action.icon}
@@ -108,12 +108,12 @@ export default function VweKouteAchte({teks, isVideo, isAudio}) {
 }
 
 VweKouteAchte.propTypes = {
-  teks: PropTypes.object.isRequired,
-  isVideo: PropTypes.bool,
-  isAudio: PropTypes.bool
+  anTeks: PropTypes.object.isRequired,
+  niVideyo: PropTypes.bool,
+  niOdyo: PropTypes.bool
 }
 
 VweKouteAchte.defaultProps = {
-  isVideo: false,
-  isAudio: false
+  niVideyo: false,
+  niOdyo: false
 }