Change DenyeTeks commonent : add Skeleton feature

components/teks/teks-drawer.js

@@ -117,11 +117,11 @@ const Root = styled('div')((
 
 const drawerWidth = 240
 
-export default function TeksDrawer({teks, anTeks, komante, denyeTeks}) {
+export default function TeksDrawer({teks, anTeks, komante}) {
   const theme = useTheme()
   const [esMobilOuve, meteEsMobilOuve] = useState(false)
   const [open, setOpen] = useState(false)
-  const [error, setError] = useState('')
+  const [error, setError] = useState(null)
   const [success, setSuccess] = useState('')
 
   const handleClose = (event, reason) => {
@@ -230,7 +230,7 @@ export default function TeksDrawer({teks, anTeks, komante, denyeTeks}) {
           />
         ) : (
           <Box sx={{marginTop: '5em'}}>
-            <DenyeTeks {...denyeTeks} />
+            <DenyeTeks error={error} setError={setError} />
           </Box>
         )}
       </main>
@@ -241,12 +241,10 @@ export default function TeksDrawer({teks, anTeks, komante, denyeTeks}) {
 TeksDrawer.propTypes = {
   teks: PropTypes.array.isRequired,
   anTeks: PropTypes.object,
-  komante: PropTypes.array,
-  denyeTeks: PropTypes.array
+  komante: PropTypes.array
 }
 
 TeksDrawer.defaultProps = {
   anTeks: null,
-  komante: null,
-  denyeTeks: null
+  komante: null
 }

pages/index.js

@@ -1,4 +1,4 @@
-import PropTypes from 'prop-types'
+import {useState} from 'react'
 import {Container, Typography, Box, Divider, Chip} from '@mui/material'
 import ArrowCircleDownIcon from '@mui/icons-material/ArrowCircleDown'
 
@@ -6,9 +6,10 @@ import HeadLayout from '../components/head-layout'
 import Footer from '../components/footer'
 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}) {
+export default function Home() {
+  const [error, setError] = useState(null)
+
   return (
     <HeadLayout tab={0}>
       <Box sx={{display: 'flex', flexDirection: 'column', minHeight: '100vh'}}>
@@ -28,11 +29,13 @@ export default function Home({teks}) {
             <RezoDialog />
           </Container>
         </Box>
-        <Container>
+        <Container sx={{flexGrow: 300}}>
+          {!error && (
             <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 error={error} setError={setError} />
         </Container>
         <Footer />
       </Box>
@@ -40,16 +43,3 @@ export default function Home({teks}) {
   )
 }
 
-export async function getServerSideProps() {
-  const denyeTeks = await jwennDenyeTeks()
-
-  return {
-    props: {
-      teks: denyeTeks
-    }
-  }
-}
-
-Home.propTypes = {
-  teks: PropTypes.array.isRequired
-}

pages/paroles/index.js

@@ -1,31 +1,28 @@
 import PropTypes from 'prop-types'
 
-import {jwennDenyeTeks, jwennTeks} from '../../lib/oki-api'
+import {jwennTeks} from '../../lib/oki-api'
 
 import TeksDrawer from '../../components/teks/teks-drawer'
 import HeadLayout from '../../components/head-layout'
 
-export default function Teks({teks, denyeTeks}) {
+export default function Teks({teks}) {
   return (
     <HeadLayout title='Paroles et Traductions' tab={1} slug='paroles'>
-      <TeksDrawer teks={teks} denyeTeks={denyeTeks} />
+      <TeksDrawer teks={teks} />
     </HeadLayout>
   )
 }
 
 export async function getServerSideProps() {
   const teks = await jwennTeks()
-  const denyeTeks = await jwennDenyeTeks()
 
   return {
     props: {
-      teks,
-      denyeTeks
+      teks
     }
   }
 }
 
 Teks.propTypes = {
-  teks: PropTypes.array.isRequired,
-  denyeTeks: PropTypes.array.isRequired
+  teks: PropTypes.array.isRequired
 }