Adapt all Teks components to new api

components/teks/denye-teks.js

@@ -8,9 +8,9 @@ const useStyles = makeStyles(() => ({
   }
 }))
 
-export default function DenyeTeks(miziks) {
+export default function DenyeTeks(teks) {
   const classes = useStyles()
-  const sortedMiziksByPublishedAt = Object.values(miziks).sort((a, b) => {
+  const teksKlasePaPibilikasyon = Object.values(teks).sort((a, b) => {
     const aDate = new Date(a.published_at)
     const bDate = new Date(b.published_at)
     return bDate.getTime() - aDate.getTime()
@@ -20,7 +20,7 @@ export default function DenyeTeks(miziks) {
     <div className={classes.container}>
       <Container>
         <Grid container spacing={3}>
-          {sortedMiziksByPublishedAt.map(m => <TeksKat key={m._id} teks={m} />)}
+          {teksKlasePaPibilikasyon.map(t => <TeksKat key={t._id} teks={t} />)}
         </Grid>
       </Container>
     </div>

components/teks/drawer-bar.js

@@ -27,13 +27,13 @@ const useStyles = makeStyles(theme => ({
   }
 }))
 
-const getMizikFiltered = (miziks, filter) => {
+const getMizikFiltered = (teks, filter) => {
-  if (miziks) {
+  if (teks) {
-    const filteredTitre = miziks.filter(({titre}) => {
+    const filteredTitre = teks.filter(({tit}) => {
-      return titre.toLowerCase().includes(filter.toLowerCase())
+      return tit.toLowerCase().includes(filter.toLowerCase())
     })
 
-    const filteredAlias = miziks.filter(({awtis}) => {
+    const filteredAlias = teks.filter(({awtis}) => {
       const aliasLis = awtis.map(({alias}) => alias).join()
       return aliasLis.toLowerCase().includes(filter.toLowerCase())
     })
@@ -42,14 +42,14 @@ const getMizikFiltered = (miziks, filter) => {
   }
 }
 
-export default function DrawerBar({setMobileOpen, miziks, mizik}) {
+export default function DrawerBar({setMobileOpen, teks, anTeks}) {
-  const slug = mizik ? mizik[0].slug : null
+  const slug = anTeks ? anTeks.slug : null
   const classes = useStyles()
 
   const [search, setSearch] = useState('')
-  const [selectedMizikSlug, setSelectedMizikSlug] = useState(slug)
+  const [slugTeksChwazi, meteSlugTeksChwazi] = useState(slug)
 
-  const mizikFiltered = getMizikFiltered(miziks, search)
+  const mizikFiltered = getMizikFiltered(teks, search)
 
   const handleSearch = event => {
     event.preventDefault()
@@ -75,11 +75,11 @@ export default function DrawerBar({setMobileOpen, miziks, mizik}) {
       <Divider />
       <div className={classes.list}>
         <MizikLis
-          hasAwtis
+          niAwtis
           setMobileOpen={setMobileOpen}
-          miziks={mizikFiltered}
+          teks={mizikFiltered}
-          selectedMizikSlug={selectedMizikSlug}
+          slugTeksChwazi={slugTeksChwazi}
-          setSelectedMizikSlug={setSelectedMizikSlug}
+          meteSlugTeksChwazi={meteSlugTeksChwazi}
         />
       </div>
     </div>
@@ -88,11 +88,11 @@ export default function DrawerBar({setMobileOpen, miziks, mizik}) {
 
 DrawerBar.propTypes = {
   setMobileOpen: PropTypes.func,
-  miziks: PropTypes.array.isRequired,
+  teks: PropTypes.array.isRequired,
-  mizik: PropTypes.array
+  anTeks: PropTypes.object
 }
 
 DrawerBar.defaultProps = {
   setMobileOpen: null,
-  mizik: null
+  anTeks: null
 }

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}) {
+export default function TeksDrawer({teks, anTeks}) {
-  const teks = mizik ? mizik[0] : null
   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'>
+            <Typography noWrap align='center' style={{marginTop: '2em'}} variant='h6'>
-              {teks.titre}
+              {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,
+  teks: PropTypes.array.isRequired,
-  mizik: PropTypes.array
+  anTeks: PropTypes.object
 }
 
 TeksDrawer.defaultProps = {
-  mizik: null
+  anTeks: null
 }

components/teks/teks-kat.js

@@ -26,7 +26,7 @@ export default function TeksKat({teks}) {
   const classes = useStyles()
   const router = useRouter()
   const noImageUrl = 'https://place-hold.it/140x140?text=Pa%20ni%20imaj'
-  const {titre, awtis, annee, cover, published_at, slug} = teks
+  const {tit, awtis, lanne, kouveti, published_at, slug} = teks
   const datPiblikasyon = format(new Date(published_at), 'Pp', {locale: fr})
 
   const handleClick = slug => {
@@ -40,19 +40,19 @@ export default function TeksKat({teks}) {
           <CardMedia
             className={classes.media}
             component='img'
-            alt={titre}
+            alt={tit}
-            image={cover ? `${process.env.NEXT_PUBLIC_API_URL}${cover.url}` : noImageUrl}
+            image={kouveti ? `${process.env.NEXT_PUBLIC_API_URL}${kouveti.url}` : noImageUrl}
-            title={titre}
+            title={tit}
           />
           <CardContent>
             <Typography gutterBottom variant='h5' component='h2'>
-              {titre}
+              {tit}
             </Typography>
             <Typography variant='body2' color='textSecondary' component='p'>
               {awtis.map(a => a.alias).join()}
             </Typography>
             <Typography variant='body2' color='textSecondary' component='p'>
-              {annee}
+              {lanne}
             </Typography>
             <Typography align='center' style={{marginTop: '0.5em'}} variant='body1' color='textSecondary' component='p'>
               Piblikasyon : {datPiblikasyon}

pages/teks/[slug].js

@@ -1,36 +1,36 @@
 import PropTypes from 'prop-types'
 
-import {jwennMizikEpiSlug, jwennTeks} from '../../lib/oki-api'
+import {jwennTeksEpiSlug, jwennTeks} from '../../lib/oki-api'
 
 import TeksDrawer from '../../components/teks/teks-drawer'
 import HeadLayout from '../../components/head-layout'
 
-export default function Mizik({miziks, mizik}) {
+export default function SlugTeks({teks, anTeks}) {
   return (
-    <HeadLayout title={`Tèks | ${mizik[0].titre}`} tab={2}>
+    <HeadLayout title={`Tèks | ${anTeks.tit}`} tab={2}>
-      <TeksDrawer miziks={miziks} mizik={mizik} />
+      <TeksDrawer teks={teks} anTeks={anTeks} />
     </HeadLayout>
   )
 }
 
 export async function getServerSideProps({query}) {
   const {slug} = query
-  const miziks = await jwennTeks()
+  const teks = await jwennTeks()
-  const mizik = await jwennMizikEpiSlug(slug)
+  const anTeks = await jwennTeksEpiSlug(slug)
 
-  if (mizik.length === 0) {
+  if (!anTeks) {
     throw new Error('San répons')
   }
 
   return {
     props: {
-      miziks,
+      teks,
-      mizik
+      anTeks
     }
   }
 }
 
-Mizik.propTypes = {
+SlugTeks.propTypes = {
-  miziks: PropTypes.array.isRequired,
+  teks: PropTypes.array.isRequired,
-  mizik: PropTypes.array.isRequired
+  anTeks: PropTypes.object.isRequired
 }

pages/teks/index.js

@@ -5,24 +5,24 @@ import {jwennTeks} from '../../lib/oki-api'
 import TeksDrawer from '../../components/teks/teks-drawer'
 import HeadLayout from '../../components/head-layout'
 
-export default function Teks({miziks}) {
+export default function Teks({teks}) {
   return (
     <HeadLayout title='Tèks' tab={2}>
-      <TeksDrawer miziks={miziks} />
+      <TeksDrawer teks={teks} />
     </HeadLayout>
   )
 }
 
 export async function getServerSideProps() {
-  const miziks = await jwennTeks()
+  const teks = await jwennTeks()
 
   return {
     props: {
-      miziks
+      teks
     }
   }
 }
 
 Teks.propTypes = {
-  miziks: PropTypes.array.isRequired
+  teks: PropTypes.array.isRequired
 }