Adapt all Awtis components to new api

components/awtis/awtis-biyografi.js

@@ -14,33 +14,33 @@ import {
 
 import MizikBadjMeni from './mizik-badj-meni'
 
-export default function AwtisBiyografi({alias, miziks, biyografi, isBioOpen, setIsBioOpen}) {
+export default function AwtisBiyografi({alias, teks, biyografi, esByografiOuve, meteEsByografiOuve}) {
   const handleClose = () => {
-    setIsBioOpen(false)
+    meteEsByografiOuve(false)
   }
 
   const descriptionElementRef = React.useRef(null)
   React.useEffect(() => {
-    if (isBioOpen) {
+    if (esByografiOuve) {
       const {current: descriptionElement} = descriptionElementRef
       if (descriptionElement !== null) {
         descriptionElement.focus()
       }
     }
-  }, [isBioOpen])
+  }, [esByografiOuve])
 
   return (
     <div>
       <Dialog
         scroll='paper'
-        open={isBioOpen}
+        open={esByografiOuve}
         aria-labelledby='scroll-dialog-title'
         aria-describedby='scroll-dialog-description'
         onClose={handleClose}
       >
         <Box display='flex' justifyContent='center' alignItems='center'>
           <DialogTitle id='scroll-dialog-title' align='center'>{alias}</DialogTitle>
-          <MizikBadjMeni miziks={miziks} />
+          <MizikBadjMeni teks={teks} />
         </Box>
         <DialogContent dividers>
           <DialogContentText
@@ -72,10 +72,10 @@ export default function AwtisBiyografi({alias, miziks, biyografi, isBioOpen, set
 
 AwtisBiyografi.propTypes = {
   alias: PropTypes.string.isRequired,
-  miziks: PropTypes.array.isRequired,
+  teks: PropTypes.array.isRequired,
   biyografi: PropTypes.string,
-  isBioOpen: PropTypes.bool.isRequired,
-  setIsBioOpen: PropTypes.func.isRequired
+  esByografiOuve: PropTypes.bool.isRequired,
+  meteEsByografiOuve: PropTypes.func.isRequired
 }
 
 AwtisBiyografi.defaultProps = {

components/awtis/awtis-kat.js

@@ -41,9 +41,10 @@ const useStyles = makeStyles(theme => ({
 }))
 
 export default function AwtisKat({anAwtis}) {
-  const [isBioOpen, setIsBioOpen] = useState(false)
+  const [esByografiOuve, meteEsByografiOuve] = useState(false)
+  const noImageUrl = 'https://place-hold.it/140x140?text=Pa%20ni%20imaj'
 
-  const {alias, biyografi, miziks, foto} = anAwtis
+  const {alias, biyografi, teks, foto} = anAwtis
   const classes = useStyles()
   const [expanded, setExpanded] = useState(false)
 
@@ -52,7 +53,7 @@ export default function AwtisKat({anAwtis}) {
   }
 
   const handleClick = () => {
-    setIsBioOpen(true)
+    meteEsByografiOuve(true)
   }
 
   return (
@@ -64,7 +65,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}` : null}`}
+              image={`${foto.length > 0 ? `${process.env.NEXT_PUBLIC_API_URL}${foto[0].url}` : noImageUrl}`}
               title={alias}
             />
             <CardContent>
@@ -72,7 +73,7 @@ export default function AwtisKat({anAwtis}) {
                 {alias}
               </Typography>
               <Typography align='center' variant='body2' color='textSecondary' component='h5'>
-                {anAwtis.miziks.length} tèks
+                {anAwtis.teks.length} tèks
               </Typography>
             </CardContent>
           </CardActionArea>
@@ -91,18 +92,18 @@ export default function AwtisKat({anAwtis}) {
           </CardActions>
           <Collapse unmountOnExit in={expanded} timeout='auto'>
             <CardContent>
-              <MizikLis miziks={miziks} />
+              <MizikLis teks={teks} />
             </CardContent>
           </Collapse>
         </Card>
       </Grid>
-      {isBioOpen && (
+      {esByografiOuve && (
         <AwtisBiyografi
           alias={alias}
-          miziks={miziks}
+          teks={teks}
           biyografi={biyografi}
-          isBioOpen={isBioOpen}
-          setIsBioOpen={setIsBioOpen}
+          esByografiOuve={esByografiOuve}
+          meteEsByografiOuve={meteEsByografiOuve}
         />
       )}
     </>

components/awtis/mizik-badj-meni.js

@@ -25,7 +25,7 @@ const useStyles = makeStyles(theme => ({
   }
 }))
 
-export default function MizikBadjMeni({miziks}) {
+export default function MizikBadjMeni({teks}) {
   const classes = useStyles()
   const [open, setOpen] = useState(false)
   const anchorRef = useRef(null)
@@ -76,7 +76,7 @@ export default function MizikBadjMeni({miziks}) {
             vertical: 'top',
             horizontal: 'right'
           }}
-          badgeContent={miziks.length}
+          badgeContent={teks.length}
           color='primary'
         >
           <MenuBookIcon style={{fontSize: 30}} />
@@ -91,7 +91,7 @@ export default function MizikBadjMeni({miziks}) {
             <Paper>
               <ClickAwayListener onClickAway={handleClose}>
                 <MenuList autoFocusItem={open} id='menu-list-grow' onKeyDown={handleListKeyDown}>
-                  {miziks.map(m => <MenuItem key={m._id} onClick={() => handleClick(m.slug)}>{m.titre}</MenuItem>)}
+                  {teks.map(t => <MenuItem key={t._id} onClick={() => handleClick(t.slug)}>{t.tit}</MenuItem>)}
                 </MenuList>
               </ClickAwayListener>
             </Paper>
@@ -103,5 +103,5 @@ export default function MizikBadjMeni({miziks}) {
 }
 
 MizikBadjMeni.propTypes = {
-  miziks: PropTypes.array.isRequired
+  teks: PropTypes.array.isRequired
 }

components/awtis/mizik-lis.js

@@ -12,17 +12,17 @@ const useStyles = makeStyles(theme => ({
   }
 }))
 
-export default function MizikLis({setMobileOpen, hasAwtis, miziks, selectedMizikSlug, setSelectedMizikSlug}) {
+export default function MizikLis({setMobileOpen, niAwtis, teks, slugTeksChwazi, meteSlugTeksChwazi}) {
   const classes = useStyles()
   const router = useRouter()
 
   const handleClick = slug => {
-    if (setSelectedMizikSlug) {
-      setSelectedMizikSlug(slug)
+    if (meteSlugTeksChwazi) {
+      meteSlugTeksChwazi(slug)
     }
 
-    if (slug !== selectedMizikSlug) {
-      if (hasAwtis) {
+    if (slug !== slugTeksChwazi) {
+      if (niAwtis) {
         router.push(`/teks/${slug}`).then(() => window.scrollTo(0, 0))
       } else {
         router.push(`/teks/${slug}#${slug}`).then(() => window.scrollTo(0, 0))
@@ -36,15 +36,15 @@ export default function MizikLis({setMobileOpen, hasAwtis, miziks, selectedMizik
 
   return (
     <List component='nav' className={classes.root} aria-label='mizik'>
-      {miziks.map(({slug, titre, awtis}) => (
+      {teks.map(({slug, tit, awtis}) => (
         <ListItem
           key={slug}
           button
           id={slug}
-          selected={selectedMizikSlug === slug}
+          selected={slugTeksChwazi === slug}
           onClick={() => handleClick(slug)}
         >
-          <ListItemText primary={titre} secondary={hasAwtis ? awtis.map(a => a.alias).join() : null} />
+          <ListItemText primary={tit} secondary={niAwtis ? awtis.map(a => a.alias).join() : null} />
         </ListItem>
       ))}
     </List>
@@ -53,15 +53,15 @@ export default function MizikLis({setMobileOpen, hasAwtis, miziks, selectedMizik
 
 MizikLis.propTypes = {
   setMobileOpen: PropTypes.func,
-  hasAwtis: PropTypes.bool,
-  miziks: PropTypes.array.isRequired,
-  selectedMizikSlug: PropTypes.string,
-  setSelectedMizikSlug: PropTypes.func
+  niAwtis: PropTypes.bool,
+  teks: PropTypes.array.isRequired,
+  slugTeksChwazi: PropTypes.string,
+  meteSlugTeksChwazi: PropTypes.func
 }
 
 MizikLis.defaultProps = {
   setMobileOpen: null,
-  hasAwtis: false,
-  selectedMizikSlug: null,
-  setSelectedMizikSlug: null
+  niAwtis: false,
+  slugTeksChwazi: null,
+  meteSlugTeksChwazi: null
 }