Handle successful registration

pages/soumet.js

@@ -1,16 +1,33 @@
-import {useState, useEffect} from 'react'
+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 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 {jwennTeksEpiUserId} from '../lib/oki-api'
+import {jwennTeksEpiUserId, jwennUser} from '../lib/oki-api'
+
+const Alert = forwardRef(function Alert(props, ref) {
+  return <MuiAlert ref={ref} elevation={6} variant='filled' {...props} />
+})
 
 export default function Soumet() {
   const {data: session} = useSession()
   const [teksEpiUserId, setTeksEpiUserId] = useState([])
+  const [userId, setUserId] = useState(null)
+  const [username, setUsername] = useState(null)
+  const [open, setOpen] = useState(true)
+
+  const handleClose = (event, reason) => {
+    if (reason === 'clickaway') {
+      return
+    }
+
+    setOpen(false)
+  }
 
   useEffect(() => {
     if (session && session.user) {
@@ -24,12 +41,34 @@ export default function Soumet() {
     }
   }, [session])
 
+  useEffect(() => {
+    if (localStorage.getItem('user-id')) {
+      const userId = localStorage.getItem('user-id')
+      setUserId(userId)
+    }
+  }, [])
+
+  useEffect(() => {
+    if (userId) {
+      const getUsername = async id => {
+        const user = await jwennUser(id)
+        setUsername(user?.username)
+      }
+
+      getUsername(userId)
+    }
+  }, [userId])
+
+  useEffect(() => {
+    if (username && localStorage.getItem('user-id')) {
+      localStorage.removeItem('user-id')
+    }
+  }, [username])
+
   return (
     <HeadLayout title='Soumèt | Soumettre un texte' tab={3} slug='soumet'>
       {!session && (
         <Koneksyon
-          detay
-          tit='Soumettre un texte'
           chimen='/soumet'
         />
       )}
@@ -42,6 +81,15 @@ export default function Soumet() {
       {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>
+      )}
     </HeadLayout>
   )
 }