Adapt Navigasyon component to nextjs 13 and change soumet route to pwopose

components/navigasyon.js

@@ -38,19 +38,19 @@ const Appdiv = styled('div')((
 
 const tabRouteHref = [
   '/',
-  '/soutyen',
+  '/sipote',
   '/paroles',
-  '/awtis?paj&paj=1',
-  '/soumet'
+  '/awtis',
+  '/pwopose'
 ]
 
-const tabRouteAs = [
-  '/',
-  '/soutyen',
-  '/paroles',
-  '/awtis/paj/1',
-  '/soumet',
-]
+const tabPath = {
+  akey: 0,
+  sipote: 1,
+  paroles: 2,
+  awtis: 3,
+  pwopose: 4
+}
 
 function TabPanel(props) {
   const {children, value, index, ...other} = props
@@ -85,8 +85,12 @@ function a11yProps(index) {
   }
 }
 
-export default function Navigasyon({selectedTab}) {
+export default function Navigasyon() {
   const router = useRouter()
+  const pathname = usePathname()
+  const selectedPath = pathname === '/' ? 'akey' : pathname.split('/')[1]
+  const selectedTab = tabPath[selectedPath]
+
   const isMobile = useMediaQuery('(max-width:422px)')
   const [value, setValue] = useState(0)
 
@@ -94,14 +98,14 @@ export default function Navigasyon({selectedTab}) {
     setValue(newValue)
 
     if (newValue !== selectedTab) {
-      router.push(tabRouteHref[newValue], tabRouteAs[newValue]).then(() => window.scrollTo(0, 0))
+      router.push(tabRouteHref[newValue])
     }
   }
 
   return (
     <Appdiv>
       <div className={classes.root}>
-        <AppBar style={{zIndex: 10, boxShadow: 'none'}} position='fixed' color='default'>
+        <AppBar style={{zIndex: 1, boxShadow: 'none'}} position='fixed' color='default'>
           <Tabs
             allowScrollButtonsMobile
             scrollButtons
@@ -122,7 +126,7 @@ export default function Navigasyon({selectedTab}) {
             <Tab icon={<VolunteerActivismIcon />} aria-label='Nous soutenir' {...a11yProps(1)} />
             <Tab icon={<MusicNoteIcon />} aria-label='Paroles' {...a11yProps(2)} />
             <Tab icon={<RecordVoiceOverIcon />} aria-label='Artistes' {...a11yProps(3)} />
-            <Tab icon={<EditNoteIcon />} aria-label='Soumettre' {...a11yProps(4)} />
+            <Tab icon={<EditNoteIcon />} aria-label='Proposer des paroles' {...a11yProps(4)} />
           </Tabs>
         </AppBar>
         <TabPanel value={value} index={0} />
@@ -134,7 +138,3 @@ export default function Navigasyon({selectedTab}) {
     </Appdiv>
   )
 }
-
-Navigasyon.propTypes = {
-  selectedTab: PropTypes.number.isRequired
-}

components/password/new-password.js

@@ -42,7 +42,7 @@ export default function NewPassword({code}) {
       setLoading(false)
       setPasswordSuccess(true)
       setTimeout(() => {
-        router.push('/soumet')
+        router.push('/pwopose')
       }, 10_000)
     } catch {
       setOpen(true)
@@ -165,7 +165,7 @@ export default function NewPassword({code}) {
           style={{marginTop: 20}}
           variant='outlined'
           color='primary'
-          onClick={() => router.push('/soumet')}
+          onClick={() => router.push('/pwopose')}
         >
           <Typography style={{fontWeight: 'bold'}}>
             Retour à la page de connexion
@@ -190,7 +190,7 @@ export default function NewPassword({code}) {
           open={passwordSuccess}
           onClose={handleClose}
         >
-          <Alert severity='info' onClose={handleClose}>Votre changement de mot de passe a été pris en compte. Vous serez redirigé vers la page de connexion. <Link underline='hover' color='inherit' href='/soumet'><strong>Cliquez ici si vous n’êtes pas redirigé vers la page de connexion</strong></Link></Alert>
+          <Alert severity='info' onClose={handleClose}>Votre changement de mot de passe a été pris en compte. Vous serez redirigé vers la page de connexion. <Link underline='hover' color='inherit' href='/pwopose'><strong>Cliquez ici si vous n’êtes pas redirigé vers la page de connexion</strong></Link></Alert>
         </Snackbar>
       )}
     </Container>

components/pwopose.js

@@ -0,0 +1,113 @@
+'use client'
+
+import {useState, useEffect, forwardRef} from 'react'
+import PropTypes from 'prop-types'
+import {useSession} from 'next-auth/react'
+import MuiAlert from '@mui/material/Alert'
+import Snackbar from '@mui/material/Snackbar'
+import Box from '@mui/material/Box'
+
+import Koneksyon from '../../components/sesyon/koneksyon'
+import Dekoneksyon from '../../components/sesyon/dekoneksyon'
+import EkriTeks from '../../components/soumet/ekri-teks'
+import Footer from '../../components/footer'
+
+import {jwennUserEpiToken, jwennUserEpiUsername} from '../../lib/oki-api'
+import NewPassword from '../../components/password/new-password'
+import ChwaTeks from '../../components/soumet/chwa-teks'
+
+const Alert = forwardRef(function Alert(props, ref) {
+  return <MuiAlert ref={ref} elevation={6} variant='filled' {...props} />
+})
+
+export default function Pwopose({code}) {
+  const {data: session} = useSession()
+  const [localUsername, setLocalUsername] = useState(null)
+  const [username, setUsername] = useState(null)
+  const [open, setOpen] = useState(true)
+  const [selectedTeks, setSelectedTeks] = useState(null)
+  const [canAutoTranslate, setCanAutoTranslate] = useState(false)
+
+  const handleClose = (event, reason) => {
+    if (reason === 'clickaway') {
+      return
+    }
+
+    setOpen(false)
+  }
+
+  useEffect(() => {
+    if (session?.jwt) {
+      const getUser = async token => {
+        const user = await jwennUserEpiToken(token)
+        setCanAutoTranslate(user.canAutoTranslate)
+      }
+
+      getUser(session.jwt)
+    }
+  })
+
+  useEffect(() => {
+    if (localStorage.getItem('username')) {
+      const username = localStorage.getItem('username')
+      setLocalUsername(username)
+    }
+  }, [])
+
+  useEffect(() => {
+    if (localUsername) {
+      const getUser = async username => {
+        const user = await jwennUserEpiUsername(username)
+        setUsername(user?.username)
+      }
+
+      getUser(localUsername)
+    }
+  }, [localUsername])
+
+  useEffect(() => {
+    if (username && localStorage.getItem('username')) {
+      localStorage.removeItem('username')
+    }
+  }, [username])
+
+  return (
+    <Box sx={{display: 'flex', flexDirection: 'column', minHeight: '100vh'}}>
+      <Box sx={{flexGrow: 1, marginTop: 1, marginBottom: 10}}>
+        {!session && !code && (
+          <Koneksyon
+            chimen='/pwopose'
+          />
+        )}
+
+        {!session && code && (
+          <NewPassword code={code} />
+        )}
+        {session && session.user && (
+          <>
+            <Dekoneksyon position='absolute' top={95} left={5} chimen='/pwopose' />
+            <ChwaTeks selectedTeks={selectedTeks} setSelectedTeks={setSelectedTeks} />
+            <EkriTeks canAutoTranslate={canAutoTranslate} selectedTeks={selectedTeks} setSelectedTeks={setSelectedTeks} />
+          </>
+        )}
+        {session && !session.user && (
+          <Dekoneksyon position='absolute' top={95} left={5} chimen='/pwopose' />
+        )}
+        {username && (
+          <Snackbar
+            open={open}
+            autoHideDuration={10_000}
+            onClose={handleClose}
+          >
+            <Alert severity='success' onClose={handleClose}><strong>Bonjour {username}, votre compte a été activé avec succès. Vous pouvez vous connecter.</strong></Alert>
+          </Snackbar>
+        )}
+      </Box>
+      <Footer />
+    </Box>
+  )
+}
+
+Pwopose.propTypes = {
+  code: PropTypes.string
+}

components/soumet/ekri-teks.js

@@ -287,7 +287,7 @@ function EkriTeks({canAutoTranslate, selectedTeks, setSelectedTeks}) {
     <StyledContainer maxWidth='sm'>
       <Box sx={{textAlign: 'center', marginBottom: 2}}>
         <Typography display='inline' variant='h6' component='h1'>
-          Soumettre une parole
+          Proposer une parole
         </Typography>
       </Box>
       <form noValidate autoComplete='off'>
@@ -424,11 +424,6 @@ function EkriTeks({canAutoTranslate, selectedTeks, setSelectedTeks}) {
   )
 }
 
-EkriTeks.defaultProps = {
-  selectedTeks: null,
-  canAutoTranslate: null
-}
-
 EkriTeks.propTypes = {
   canAutoTranslate: PropTypes.bool,
   selectedTeks: PropTypes.object,