Move soumet to app directory and rename to pwopose

app/pwopose/layout.js

@@ -0,0 +1,38 @@
+export const metadata = {
+  title: 'OKI | Proposer une parole de chanson',
+  description: 'Proposez la transcription d’une parole, accompagnée d’une ou plusieurs traductions.',
+  openGraph: {
+    title: 'OKI | Proposer une parole de chanson',
+    description: 'Proposez la transcription d’une parole, accompagnée d’une ou plusieurs traductions.',
+    url: 'https://oki.re/pwopose',
+    siteName: 'OKI | Organisation KA Internationale. Paroles et traductions.',
+    images: [
+      {
+        url: 'htts://oki.re/logo-512x512.png',
+        width: 512,
+        height: 512
+      }
+    ],
+    locale: 'fr_FR',
+    type: 'website'
+  },
+  twitter: {
+    site: '@OrganisationKA',
+    card: 'summary_large_image',
+    title: 'OKI | Proposer une parole de chanson',
+    description: 'Proposez la transcription d’une parole, accompagnée d’une ou plusieurs traductions.',
+    creator: '@OrganisationKA',
+    images: {
+      url: 'https://oki.re/logo-512x512.png',
+      alt: 'OKI Logo',
+    },
+  }
+}
+
+export default async function PwoposeLayout({children}) {
+  return (
+    <section>
+      {children}
+    </section>
+  )
+}

app/pwopose/page.js

@@ -0,0 +1,108 @@
+'use client'
+
+import {useState, useEffect, forwardRef} from 'react'
+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 {useSearchParams} from 'next/navigation'
+import Koneksyon from '../../components/sesyon/koneksyon'
+import Dekoneksyon from '../../components/sesyon/dekoneksyon'
+import EkriTeks from '../../components/soumet/ekri-teks'
+
+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() {
+  const params = useSearchParams()
+  const {code} = params
+  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>
+    </Box>
+  )
+}

pages/soumet.js

@@ -1,127 +0,0 @@
-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 HeadLayout from '../components/head-layout'
-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 Soumet({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 (
-    <HeadLayout title='Soumèt - Soumettre un texte' summary='Proposez la transcription d’un texte, accompagnée d’une ou plusieurs traductions.' tab={4} slug='soumet'>
-      <Box sx={{display: 'flex', flexDirection: 'column', minHeight: '100vh'}}>
-        <Box sx={{flexGrow: 1, marginTop: 1, marginBottom: 10}}>
-          {!session && !code && (
-            <Koneksyon
-              chimen='/soumet'
-            />
-          )}
-
-          {!session && code && (
-            <NewPassword code={code} />
-          )}
-          {session && session.user && (
-            <>
-              <Dekoneksyon position='absolute' top={95} left={5} chimen='/soumet' />
-              <ChwaTeks selectedTeks={selectedTeks} setSelectedTeks={setSelectedTeks} />
-              <EkriTeks canAutoTranslate={canAutoTranslate} selectedTeks={selectedTeks} setSelectedTeks={setSelectedTeks} />
-            </>
-          )}
-          {session && !session.user && (
-            <Dekoneksyon position='absolute' top={95} left={5} chimen='/soumet' />
-          )}
-          {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>
-    </HeadLayout>
-  )
-}
-
-Soumet.defaultProps = {
-  code: null
-}
-
-Soumet.propTypes = {
-  code: PropTypes.string
-}
-
-export async function getServerSideProps({query}) {
-  const {code} = query
-  return {
-    props: {
-      code: code || null
-    }
-  }
-}