Prevent errors from index and paroles pages

components/teks/denye-teks.js

@@ -1,4 +1,5 @@
-import {Container, Grid} from '@mui/material'
+import PropTypes from 'prop-types'
+import {Container, Grid, Typography} from '@mui/material'
 
 import {styled} from '@mui/material/styles'
 
@@ -17,14 +18,25 @@ const Root = styled('div')(() => ({
   }
 }))
 
-export default function DenyeTeks(denyeTeks) {
+export default function DenyeTeks({denyeTeks}) {
   return (
     <Root className={classes.container}>
       <Container>
+        {denyeTeks.length === 0 && (
+          <Container sx={{marginTop: 2}} align='center'>
+            <Typography sx={{fontWeight: 'bold'}} variant='h6' component='h4'>
+              Aucun résultat
+            </Typography>
+          </Container>
+        )}
         <Grid container spacing={3}>
-          {Object.values(denyeTeks).map(t => <TeksKat key={t.id} teks={t} />)}
+          {denyeTeks.map(t => <TeksKat key={t.id} teks={t} />)}
         </Grid>
       </Container>
     </Root>
   )
 }
+
+DenyeTeks.propTypes = {
+  denyeTeks: PropTypes.array.isRequired
+}

components/teks/teks-drawer.js

@@ -230,7 +230,7 @@ export default function TeksDrawer({teks, anTeks, komante, denyeTeks}) {
           />
         ) : (
           <Box sx={{marginTop: '5em'}}>
-            <DenyeTeks {...denyeTeks} />
+            <DenyeTeks denyeTeks={denyeTeks} />
           </Box>
         )}
       </main>

pages/index.js

@@ -8,7 +8,14 @@ import RezoDialog from '../components/rezo/rezo-dialog'
 import DenyeTeks from '../components/teks/denye-teks'
 import {jwennDenyeTeks} from '../lib/oki-api'
 
-export default function Home({teks}) {
+import Custom500 from './500'
+
+export default function Home({errorCode, errorMessage, teks}) {
+  if (errorCode) {
+    console.log('⚠️ error', errorMessage)
+    return <Custom500 statusCode={errorCode} />
+  }
+
   return (
     <HeadLayout tab={0}>
       <Box sx={{display: 'flex', flexDirection: 'column', minHeight: '100vh'}}>
@@ -28,11 +35,11 @@ export default function Home({teks}) {
             <RezoDialog />
           </Container>
         </Box>
-        <Container>
+        <Container sx={{flexGrow: 100}}>
           <Divider variant='middle' sx={{marginBottom: 1}}>
             <Chip sx={{fontWeight: 'bold'}} color='primary' icon={<ArrowCircleDownIcon />} label='Derniers textes publiés ' variant='outlined' />
           </Divider>
-          <DenyeTeks {...teks} />
+          <DenyeTeks denyeTeks={teks} />
         </Container>
         <Footer />
       </Box>
@@ -41,15 +48,34 @@ export default function Home({teks}) {
 }
 
 export async function getServerSideProps() {
-  const denyeTeks = await jwennDenyeTeks()
+  let denyeTeks
+  let errorCode
+  let errorMessage
+
+  try {
+    denyeTeks = await jwennDenyeTeks()
+  } catch (error) {
+    errorMessage = error.message
+    errorCode = true
+  }
 
   return {
     props: {
-      teks: denyeTeks
+      errorCode: errorCode || null,
+      errorMessage: errorMessage || null,
+      teks: denyeTeks || null
     }
   }
 }
 
-Home.propTypes = {
+Home.defaultProps = {
-  teks: PropTypes.array.isRequired
+  errorCode: null,
+  errorMessage: null,
+  teks: null
+}
+
+Home.propTypes = {
+  errorCode: PropTypes.bool,
+  errorMessage: PropTypes.string,
+  teks: PropTypes.array
 }

pages/paroles/[slug].js

@@ -5,12 +5,24 @@ import {jwennTeksEpiSlug, jwennTeks, jwennKomanteEpiTeksId} from '../../lib/oki-
 import TeksDrawer from '../../components/teks/teks-drawer'
 import HeadLayout from '../../components/head-layout'
 
+import Custom500 from '../500'
+import Custom404 from '../404'
+
 const jwennAwtis = awtis => {
   const alias = awtis.map(({alias}) => alias)
   return new Intl.ListFormat('fr').format(alias)
 }
 
-export default function SlugTeks({teks, anTeks, slug, komante}) {
+export default function SlugTeks({hasError, errorMessage, teks, anTeks, slug, komante}) {
+  if (hasError) {
+    console.log('⚠️ error :', errorMessage)
+    return <Custom500 />
+  }
+
+  if (!anTeks) {
+    return <Custom404 />
+  }
+
   const awtis = anTeks.awtis.length === 1 ? anTeks.awtis[0].alias : jwennAwtis(anTeks.awtis)
   const {kouveti} = anTeks
   const formatKouveti = () => {
@@ -48,29 +60,46 @@ export default function SlugTeks({teks, anTeks, slug, komante}) {
 
 export async function getServerSideProps({query}) {
   const {slug} = query
-  const teks = await jwennTeks()
+  let teks
-  const anTeks = await jwennTeksEpiSlug(slug)
+  let anTeks
+  let hasError
+  let errorMessage
+  let komante
 
-  if (!anTeks) {
+  try {
-    throw new Error('San répons')
+    teks = await jwennTeks()
+    anTeks = await jwennTeksEpiSlug(slug)
+    komante = await jwennKomanteEpiTeksId(anTeks?.id)
+  } catch (error) {
+    errorMessage = error
+    hasError = true
   }
 
-  const {id} = anTeks
-  const komante = await jwennKomanteEpiTeksId(id)
-
   return {
     props: {
-      teks,
+      hasError: hasError || null,
-      anTeks,
+      errorMessage: errorMessage ? errorMessage.message : null,
+      teks: teks || null,
+      anTeks: anTeks || null,
       slug,
-      komante
+      komante: komante || null
     }
   }
 }
 
-SlugTeks.propTypes = {
+SlugTeks.defaultProps = {
-  teks: PropTypes.array.isRequired,
+  hasError: null,
-  anTeks: PropTypes.object.isRequired,
+  errorMessage: null,
-  slug: PropTypes.string.isRequired,
+  teks: null,
-  komante: PropTypes.array.isRequired
+  anTeks: null,
+  komante: null
+}
+
+SlugTeks.propTypes = {
+  hasError: PropTypes.bool,
+  errorMessage: PropTypes.string,
+  teks: PropTypes.array,
+  anTeks: PropTypes.object,
+  slug: PropTypes.string.isRequired,
+  komante: PropTypes.array
 }

pages/paroles/index.js

@@ -5,7 +5,14 @@ import {jwennDenyeTeks, jwennTeks} from '../../lib/oki-api'
 import TeksDrawer from '../../components/teks/teks-drawer'
 import HeadLayout from '../../components/head-layout'
 
-export default function Teks({teks, denyeTeks}) {
+import Custom500 from '../500'
+
+export default function Teks({errorCode, errorMessage, teks, denyeTeks}) {
+  if (errorCode) {
+    console.log('⚠️ error', errorMessage)
+    return <Custom500 />
+  }
+
   return (
     <HeadLayout title='Paroles et Traductions' tab={1} slug='paroles'>
       <TeksDrawer teks={teks} denyeTeks={denyeTeks} />
@@ -14,18 +21,39 @@ export default function Teks({teks, denyeTeks}) {
 }
 
 export async function getServerSideProps() {
-  const teks = await jwennTeks()
+  let teks
-  const denyeTeks = await jwennDenyeTeks()
+  let denyeTeks
+  let hasError
+  let errorMessage
+
+  try {
+    teks = await jwennTeks()
+    denyeTeks = await jwennDenyeTeks()
+  } catch (error) {
+    errorMessage = error.message
+    hasError = true
+  }
 
   return {
     props: {
-      teks,
+      errorCode: hasError || null,
-      denyeTeks
+      errorMessage: errorMessage || null,
+      teks: teks || null,
+      denyeTeks: denyeTeks || null
     }
   }
 }
 
-Teks.propTypes = {
+Teks.defaultProps = {
-  teks: PropTypes.array.isRequired,
+  errorCode: null,
-  denyeTeks: PropTypes.array.isRequired
+  errorMessage: null,
+  teks: null,
+  denyeTeks: null
+}
+
+Teks.propTypes = {
+  errorCode: PropTypes.bool,
+  errorMessage: PropTypes.string,
+  teks: PropTypes.array,
+  denyeTeks: PropTypes.array
 }