pawol.nu/pages/soumet.js

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 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, jwennUser} from '../lib/oki-api'
import NewPassword from '../components/password/new-password'

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 [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) {
      const {_id} = session.user
      const jwennTeks = async userId => {
        const teks = await jwennTeksEpiUserId(userId)
        setTeksEpiUserId(teks)
      }

      jwennTeks(_id)
    }
  }, [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 && !code && (
        <Koneksyon
          chimen='/soumet'
        />
      )}

      {!session && code && (
        <NewPassword code={code} />
      )}
      {session && session.user && (
        <>
          <Dekoneksyon position='absolute' top={95} left={5} chimen='/soumet' />
          <EkriTeks session={session} teks={teksEpiUserId} />
        </>
      )}
      {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>
  )
}

Soumet.defaultProps = {
  code: null
}

Soumet.propTypes = {
  code: PropTypes.string
}

export async function getServerSideProps({query}) {
  const {code} = query
  return {
    props: {
      code: code || null
    }
  }
}