Change awtis to artiste

components/awtis/awtis-biyografi.js

@@ -14,7 +14,7 @@ import {
 
 import MizikBadjMeni from './mizik-badj-meni'
 
-export default function AwtisBiyografi({alias, teks, biyografi, esByografiOuve, meteEsByografiOuve}) {
+export default function AwtisBiyografi({alias, paroles, biographie, esByografiOuve, meteEsByografiOuve}) {
   const handleClose = () => {
     meteEsByografiOuve(false)
   }
@@ -40,7 +40,7 @@ export default function AwtisBiyografi({alias, teks, biyografi, esByografiOuve,
       >
         <Box display='flex' justifyContent='center' alignItems='center'>
           <DialogTitle id='scroll-dialog-title' align='center'>{alias}</DialogTitle>
-          <MizikBadjMeni teks={teks} />
+          <MizikBadjMeni paroles={paroles} />
         </Box>
         <DialogContent dividers>
           <DialogContentText
@@ -49,9 +49,9 @@ export default function AwtisBiyografi({alias, teks, biyografi, esByografiOuve,
             id='scroll-dialog-description'
             tabIndex={-1}
           >
-            {biyografi ? (
+            {biographie ? (
               <Typography component='span'>
-                {biyografi}
+                {biographie}
               </Typography>
             ) : (
               <Typography component='span'>
@@ -62,7 +62,7 @@ export default function AwtisBiyografi({alias, teks, biyografi, esByografiOuve,
         </DialogContent>
         <DialogActions style={{margin: 'auto'}}>
           <Button variant='outlined' color='primary' onClick={handleClose}>
-            Fèmen
+            Fermer
           </Button>
         </DialogActions>
       </Dialog>
@@ -72,12 +72,12 @@ export default function AwtisBiyografi({alias, teks, biyografi, esByografiOuve,
 
 AwtisBiyografi.propTypes = {
   alias: PropTypes.string.isRequired,
-  teks: PropTypes.array.isRequired,
+  paroles: PropTypes.array.isRequired,
-  biyografi: PropTypes.string,
+  biographie: PropTypes.string,
   esByografiOuve: PropTypes.bool.isRequired,
   meteEsByografiOuve: PropTypes.func.isRequired
 }
 
 AwtisBiyografi.defaultProps = {
-  biyografi: null
+  biographie: null
 }

components/awtis/awtis-detay.js

@@ -13,18 +13,19 @@ import KeyboardBackspaceIcon from '@mui/icons-material/KeyboardBackspace'
 import AwtisBiyografi from './awtis-biyografi'
 import MizikLis from './mizik-lis'
 
-const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:1337'
+const IMAGE_URL = process.env.NEXT_PUBLIC_API_URL_ROOT || 'http://localhost:1337'
+const noImageUrl = 'https://place-hold.it/140x140?text=Indisponible'
 
-const sortTeks = teks => teks.sort((a, b) => b.id - a.id)
+const sortTeks = paroles => paroles.sort((a, b) => b.id - a.id)
 
 export default function AwtisDetay({anAwtis}) {
   const router = useRouter()
   const [esByografiOuve, meteEsByografiOuve] = useState(false)
-  const {alias, biyografi, teks, foto} = anAwtis
+  const {alias, biographie, paroles, photo} = anAwtis
-  const sortedTeks = sortTeks(teks)
+  const sortedTeks = sortTeks(paroles.data)
-  const gwanBiyo = anAwtis.biyografi.length > 100
+  const gwanBiyo = biographie && biographie.length > 100
 
-  const biyo = gwanBiyo ? `${anAwtis.biyografi.slice(0, 100)}...` : anAwtis.biyografi
+  const biyo = gwanBiyo ? `${biographie.slice(0, 100)}...` : biographie
 
   const handleClick = () => {
     meteEsByografiOuve(true)
@@ -45,7 +46,7 @@ export default function AwtisDetay({anAwtis}) {
       </Box>
       <Box sx={{justifyContent: 'center', display: 'flex', marginBottom: 2}}>
         <Avatar
-          src={`${API_URL}${foto[0].url}`}
+          src={`${photo?.data?.attributes?.url ? `${IMAGE_URL}${photo?.data?.attributes?.url}` : noImageUrl}`}
           alt={`Photo ${alias}`}
           sx={{width: 200, height: 200, border: `2px solid ${green[500]}`}}
         />
@@ -69,7 +70,7 @@ export default function AwtisDetay({anAwtis}) {
         )}
         <Grid item xs={12} md={6}>
           <Box marginBottom={3}>
-            {teks.length > 1 ? (
+            {paroles.data.length > 1 ? (
               <Accordion>
                 <AccordionSummary
                   expandIcon={<ExpandMoreIcon />}
@@ -77,7 +78,7 @@ export default function AwtisDetay({anAwtis}) {
                   id='panel-teks-header'
                 >
                   <Typography marginRight={2} textAlign='center' variant='body1' component='h2'><strong>Liste des textes</strong></Typography>
-                  <Chip color='primary' label={teks.length} size='small' variant='contained' />
+                  <Chip color='primary' label={paroles.data.length} size='small' variant='contained' />
                 </AccordionSummary>
                 <AccordionDetails>
                   <MizikLis teks={sortedTeks} />
@@ -87,7 +88,7 @@ export default function AwtisDetay({anAwtis}) {
               <>
                 <Typography gutterBottom textAlign='center' variant='body1' component='h2'><strong>Texte</strong></Typography>
                 <Paper>
-                  <MizikLis teks={teks} />
+                  <MizikLis paroles={paroles.data} />
                 </Paper>
               </>
             )}
@@ -102,8 +103,8 @@ export default function AwtisDetay({anAwtis}) {
       {esByografiOuve && (
         <AwtisBiyografi
           alias={alias}
-          teks={teks}
+          paroles={paroles.data}
-          biyografi={biyografi}
+          biographie={biographie}
           esByografiOuve={esByografiOuve}
           meteEsByografiOuve={meteEsByografiOuve}
         />

components/awtis/awtis-kat.js

@@ -23,6 +23,7 @@ import AwtisBiyografi from './awtis-biyografi'
 
 const PREFIX = 'awtis-kat'
 const SITE_URL = process.env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3001'
+const IMAGE_URL = process.env.NEXT_PUBLIC_API_URL_ROOT || 'http://localhost:1337'
 
 const classes = {
   root: `${PREFIX}-root`,
@@ -54,12 +55,13 @@ const Kat = styled('div')((
   }
 }))
 
-export default function AwtisKat({anAwtis}) {
+const noImageUrl = 'https://place-hold.it/140x140?text=Indisponible'
+
+export default function AwtisKat({artiste}) {
   const router = useRouter()
   const [esByografiOuve, meteEsByografiOuve] = useState(false)
-  const noImageUrl = 'https://place-hold.it/140x140?text=Pa%20ni%20imaj'
 
-  const {alias, biyografi, teks, foto, slug} = anAwtis
+  const {alias, biographie, paroles, photo, slug} = artiste
 
   const [expanded, setExpanded] = useState(false)
 
@@ -76,7 +78,7 @@ export default function AwtisKat({anAwtis}) {
               className={classes.media}
               component='img'
               alt={alias}
-              image={`${foto.length > 0 ? `${process.env.NEXT_PUBLIC_API_URL}${foto[0].url}` : noImageUrl}`}
+              image={`${photo?.data?.attributes?.url ? `${IMAGE_URL}${photo?.data?.attributes?.url}` : noImageUrl}`}
               title={alias}
             />
             <CardContent>
@@ -84,7 +86,7 @@ export default function AwtisKat({anAwtis}) {
                 {alias}
               </Typography>
               <Typography align='center' variant='body2' color='textSecondary' component='h5'>
-                {anAwtis.teks.length} tèks
+                {`${paroles.data.length} ${paroles.data.length > 1 ? 'textes' : 'texte'}`}
               </Typography>
             </CardContent>
           </CardActionArea>
@@ -104,15 +106,15 @@ export default function AwtisKat({anAwtis}) {
           </CardActions>
           <Collapse unmountOnExit in={expanded} timeout='auto'>
             <CardContent>
-              <MizikLis teks={teks} />
+              <MizikLis paroles={paroles.data} />
             </CardContent>
           </Collapse>
         </Card>
         {esByografiOuve && (
           <AwtisBiyografi
             alias={alias}
-            teks={teks}
+            paroles={paroles.data}
-            biyografi={biyografi}
+            biographie={biographie}
             esByografiOuve={esByografiOuve}
             meteEsByografiOuve={meteEsByografiOuve}
           />
@@ -123,5 +125,5 @@ export default function AwtisKat({anAwtis}) {
 }
 
 AwtisKat.propTypes = {
-  anAwtis: PropTypes.object.isRequired
+  artiste: PropTypes.object.isRequired
 }

components/soumet/chwa-teks.js

@@ -15,7 +15,7 @@ import CircularProgress from '@mui/material/CircularProgress'
 import Typography from '@mui/material/Typography'
 import AudiotrackIcon from '@mui/icons-material/Audiotrack'
 
-import {jwennTeksEpiUserId} from '../../lib/oki-api'
+import {jwennUserEpiToken} from '../../lib/oki-api'
 
 function Chwa(props) {
   const {onClose, teksLis, selectedTeks, loading, open} = props
@@ -37,14 +37,14 @@ function Chwa(props) {
         </Container>
       ) : (
         <List sx={{pt: 0}}>
-          {teksLis.length > 0 ? teksLis.map(({id, tit, awtis}) => (
+          {teksLis.length > 0 ? teksLis.map(({id, titre, artistes}) => (
             <ListItem key={id} button onClick={() => handleListItemClick(id)}>
               <ListItemAvatar>
                 <Avatar sx={{bgcolor: green[100], color: green[600]}}>
                   <AudiotrackIcon />
                 </Avatar>
               </ListItemAvatar>
-              <ListItemText primary={`${new Intl.ListFormat('fr').format(awtis.map(({alias}) => alias))} - ${tit}`} />
+              <ListItemText primary={`${new Intl.ListFormat('fr').format(artistes.map(({alias}) => alias))} - ${titre}`} />
             </ListItem>
           )) : (
             <Typography sx={{textAlign: 'center'}} variant='button' component='div'>Aucun texte</Typography>
@@ -70,7 +70,6 @@ Chwa.propTypes = {
 export default function ChwaTeks({selectedTeks, setSelectedTeks}) {
   const {data: session} = useSession()
   const [loading, setLoading] = useState(false)
-  const {user} = session
   const [open, setOpen] = useState(false)
   const [teksLis, setTeksLis] = useState([])
 
@@ -78,9 +77,11 @@ export default function ChwaTeks({selectedTeks, setSelectedTeks}) {
     setOpen(true)
     setLoading(true)
 
-    const jwennTeks = await jwennTeksEpiUserId(user.id)
+    const user = await jwennUserEpiToken(session?.jwt)
+    const {paroles} = user
+    const parolesList = paroles && paroles.length > 0 ? paroles : []
 
-    setTeksLis(jwennTeks)
+    setTeksLis(parolesList)
     setLoading(false)
   }
 

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}) {
+export default function SlugAwtis({errorCode, error404, errorMessage, anAwtis}) {
-  if (error) {
+  if (error404) {
-    return <Custom404 statusCode={error} />
+    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 (photo && photo.formats && photo.formats.large) {
-
+      return photo.formats.large
-    if (anFoto && anFoto.formats && anFoto.formats.large) {
-      return anFoto.formats.large
     }
 
-    if (anFoto && anFoto.formats && anFoto.formats.medium) {
+    if (photo && photo.formats && photo.formats.medium) {
-      return anFoto.formats.medium
+      return photo.formats.medium
     }
 
-    if (anFoto && anFoto.formats && anFoto.formats.small) {
+    if (photo && photo.formats && photo.formats.small) {
-      return anFoto.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),
+      error404: error404 || null,
-      anAwtis: anAwtis ? anAwtis : 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'>
+      <Box sx={{display: 'flex', flexDirection: 'column', minHeight: '100vh'}}>
         <Pajinasyon pajTotal={pajTotal} paj={paj} />
-      <Container>
+        <Container sx={{marginBottom: 5, flexGrow: 100}}>
           <Grid container spacing={{xs: 2, md: 3}}>
-          {awtisPouChakPaj.map(anAwtis => <AwtisKat key={anAwtis.id} anAwtis={anAwtis} />)}
+            {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) {
+  try {
-    throw new Error('Pa twouvé paj-la')
+    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
+}