Change awtis to artiste

pages/awtis/[slug].js

@@ -7,34 +7,38 @@ import HeadLayout from '../../components/head-layout'
 import {jwennAwtisEpiSlug} from '../../lib/oki-api'
 
 import Custom404 from '../404'
+import Custom500 from '../500'
 
-export default function SlugAwtis({error, anAwtis}) {
-  if (error) {
-    return <Custom404 statusCode={error} />
+export default function SlugAwtis({errorCode, error404, errorMessage, anAwtis}) {
+  if (error404) {
+    return <Custom404 statusCode={error404} />
   }
 
-  const {foto} = anAwtis
+  if (errorCode) {
+    console.log('⚠️ error', errorMessage)
+    return <Custom500 statusCode={errorCode} />
+  }
+
+  const {photo} = anAwtis
 
   const formatKouveti = () => {
-    if (foto.length === 0) {
+    if (!photo) {
       return null
     }
 
-    const [anFoto] = foto
-
-    if (anFoto && anFoto.formats && anFoto.formats.large) {
-      return anFoto.formats.large
+    if (photo && photo.formats && photo.formats.large) {
+      return photo.formats.large
     }
 
-    if (anFoto && anFoto.formats && anFoto.formats.medium) {
-      return anFoto.formats.medium
+    if (photo && photo.formats && photo.formats.medium) {
+      return photo.formats.medium
     }
 
-    if (anFoto && anFoto.formats && anFoto.formats.small) {
-      return anFoto.formats.small
+    if (photo && photo.formats && photo.formats.small) {
+      return photo.formats.small
     }
 
-    return anFoto
+    return photo
   }
 
   return (
@@ -43,10 +47,10 @@ export default function SlugAwtis({error, anAwtis}) {
       imageWidth={formatKouveti() ? formatKouveti().width : null}
       imageHeight={formatKouveti() ? formatKouveti().height : null}
       imageMime={formatKouveti() ? formatKouveti().mime : null}
-      title={`${anAwtis.alias} - Paroles et Traductions`} tab={2} slug={`awtis/${anAwtis.slug}`}
+      title={`${anAwtis.attributes.alias} - Paroles et Traductions`} tab={2} slug={`awtis/${anAwtis.attributes.slug}`}
     >
       <Box sx={{display: 'flex', flexDirection: 'column', minHeight: '100vh'}}>
-        <AwtisDetay anAwtis={anAwtis} />
+        <AwtisDetay anAwtis={anAwtis.attributes} />
       </Box>
       <Footer />
     </HeadLayout>
@@ -55,21 +59,42 @@ export default function SlugAwtis({error, anAwtis}) {
 
 export async function getServerSideProps({query}) {
   const {slug} = query
-  const anAwtis = await jwennAwtisEpiSlug(slug)
+  let anAwtis
+  let error404
+  let errorCode
+  let errorMessage
+
+  try {
+    anAwtis = await jwennAwtisEpiSlug(slug)
+  } catch (error) {
+    errorMessage = error.message
+    errorCode = true
+  }
+
+  if (!anAwtis) {
+    error404 = true
+  }
 
   return {
     props: {
-      error: Boolean(!anAwtis),
-      anAwtis: anAwtis ? anAwtis : null
+      error404: error404 || null,
+      errorCode: errorCode || null,
+      errorMessage: errorMessage || null,
+      anAwtis: anAwtis || null
     }
   }
 }
 
 SlugAwtis.defaultProps = {
-  anAwtis: null
+  anAwtis: null,
+  error404: null,
+  errorCode: null,
+  errorMessage: null,
 }
 
 SlugAwtis.propTypes = {
-  error: PropTypes.bool.isRequired,
+  error404: PropTypes.bool,
+  errorCode: PropTypes.bool,
+  errorMessage: PropTypes.string,
   anAwtis: PropTypes.object
 }

pages/awtis/index.js

@@ -1,51 +1,86 @@
 import PropTypes from 'prop-types'
-import {Container, Grid} from '@mui/material'
+import {Box, Container, Grid} from '@mui/material'
 
-import {jwennAwtisKantite, jwennAwtisPajinasyon} from '../../lib/oki-api'
+import {jwennAwtisPajinasyon} from '../../lib/oki-api'
 
 import AwtisKat from '../../components/awtis/awtis-kat'
 import Pajinasyon from '../../components/awtis/pajinasyon'
 import HeadLayout from '../../components/head-layout'
+import Footer from '../../components/footer'
 
-const AWTIS_POU_CHAK_PAJ = process.env.NEXT_PUBLIC_AWTIS_POU_CHAK_PAJ || 6
+import Custom404 from '../404'
+import Custom500 from '../500'
+
+export default function Awtis({errorCode, error404, errorMessage, pajTotal, awtisPouChakPaj, paj}) {
+  if (error404) {
+    return <Custom404 statusCode={error404} />
+  }
+
+  if (errorCode) {
+    console.log('⚠️ error', errorMessage)
+    return <Custom500 statusCode={errorCode} />
+  }
 
-export default function Awtis({pajTotal, awtisPouChakPaj, paj}) {
   return (
     <HeadLayout title='Awtis - Liste des artistes' tab={2} slug='awtis'>
-      <Pajinasyon pajTotal={pajTotal} paj={paj} />
-      <Container>
-        <Grid container spacing={{xs: 2, md: 3}}>
-          {awtisPouChakPaj.map(anAwtis => <AwtisKat key={anAwtis.id} anAwtis={anAwtis} />)}
-        </Grid>
-      </Container>
+      <Box sx={{display: 'flex', flexDirection: 'column', minHeight: '100vh'}}>
+        <Pajinasyon pajTotal={pajTotal} paj={paj} />
+        <Container sx={{marginBottom: 5, flexGrow: 100}}>
+          <Grid container spacing={{xs: 2, md: 3}}>
+            {awtisPouChakPaj.map(artiste => <AwtisKat key={artiste.id} artiste={artiste.attributes} />)}
+          </Grid>
+        </Container>
+        <Footer />
+      </Box>
     </HeadLayout>
   )
 }
 
-Awtis.propTypes = {
-  pajTotal: PropTypes.number.isRequired,
-  awtisPouChakPaj: PropTypes.array.isRequired,
-  paj: PropTypes.number.isRequired
-}
-
 export async function getServerSideProps({query}) {
   const {paj} = query
+  let error404
+  let errorCode
+  let errorMessage
+  let awtisPouChakPaj
 
   const pajParsed = Array.isArray(paj) ? Number.parseInt(paj[1], 10) : Number.parseInt(paj, 10)
-  const awtisPouChakPaj = await jwennAwtisPajinasyon(pajParsed)
-  const awtisCountRequest = await jwennAwtisKantite()
-  const awtisCount = Number.parseInt(awtisCountRequest, 10)
-  const pajTotal = Math.ceil(awtisCount / AWTIS_POU_CHAK_PAJ)
 
-  if (pajParsed > pajTotal) {
-    throw new Error('Pa twouvé paj-la')
+  try {
+    awtisPouChakPaj = await jwennAwtisPajinasyon(pajParsed)
+  } catch (error) {
+    errorMessage = error.message
+    errorCode = true
+  }
+
+  const pajTotal = Math.ceil(awtisPouChakPaj.meta.pagination.total / awtisPouChakPaj.meta.pagination.limit)
+
+  if (pajParsed > pajTotal || pajParsed < 1) {
+    error404 = true
   }
 
   return {
     props: {
+      error404: error404 || null,
+      errorCode: errorCode || null,
+      errorMessage: errorMessage || null,
       pajTotal,
-      awtisPouChakPaj,
+      awtisPouChakPaj: awtisPouChakPaj.data,
       paj: pajParsed
     }
   }
 }
+
+Awtis.defaultProps = {
+  error404: null,
+  errorCode: null,
+  errorMessage: null,
+}
+
+Awtis.propTypes = {
+  error404: PropTypes.bool,
+  errorCode: PropTypes.bool,
+  errorMessage: PropTypes.string,
+  pajTotal: PropTypes.number.isRequired,
+  awtisPouChakPaj: PropTypes.array.isRequired,
+  paj: PropTypes.number.isRequired
+}