konstitisyon.nu/components/session/sign.js

'use client'

import PropTypes from 'prop-types'
import {useEffect, useState, useMemo} from 'react'
import {signOut} from 'next-auth/react'
import {useRouter} from 'next/navigation'
import Box from '@mui/material/Box'
import Stack from '@mui/material/Stack'
import Fab from '@mui/material/Fab'
import {styled} from '@mui/material/styles'
import Tooltip, {tooltipClasses} from '@mui/material/Tooltip'
import LogoutIcon from '@mui/icons-material/Logout'
import LoginIcon from '@mui/icons-material/Login'
import PersonAddIcon from '@mui/icons-material/PersonAdd'
import {createDirectus, realtime, staticToken} from '@directus/sdk'
import ConfirmationAlert from './confirmation-alert.js'

const apiUrl = process.env.DIRECTUS_API_URL || process.env.NEXT_PUBLIC_DIRECTUS_API_URL
const disableWebSocket = process.env.NEXT_PUBLIC_DISABLE_WEBSOCKET === 'true'

const LightTooltip = styled(({className, ...props}) => (
  <Tooltip {...props} classes={{popper: className}} />
))(({theme}) => ({
  [`& .${tooltipClasses.tooltip}`]: {
    backgroundColor: theme.palette.common.white,
    color: 'rgba(0, 0, 0, 0.87)',
    boxShadow: theme.shadows[1],
    fontSize: 15,
  },
}))

export default function Sign({session, navButton}) {
  const router = useRouter()
  const [isOpen, setIsOpen] = useState(false)

  const handleSignout = () => {
    setIsOpen(false)
    signOut()
  }

  useEffect(() => {
    let cleanup = () => {}

    if (disableWebSocket) {
      return () => cleanup()
    }

    if (session?.user?.accessToken) {
      (async () => {
        try {
          console.log('Creating WebSocket client with token...')

          // Create client with static token
          const client = createDirectus(apiUrl)
            .with(staticToken(session.user.accessToken))
            .with(realtime())

          console.log('Connecting to WebSocket...')
          await client.connect()

          client.onWebSocket('open', () => {
            console.log({event: 'onopen', message: 'WebSocket connection opened'})
          })

          client.onWebSocket('message', message => {
            console.log({event: 'onmessage', message})

            // Once authenticated, subscribe
            if (message.type === 'auth' && message.status === 'ok') {
              console.log('WebSocket authenticated successfully!')

              // Subscribe to version changes
              ;(async () => {
                const {subscription} = await client.subscribe('directus_versions', {
                  event: 'create',
                  query: {
                    fields: ['*'],
                    filter: {
                      collection: {
                        _eq: 'titres'
                      }
                    }
                  }
                })

                for await (const item of subscription) {
                  console.log('New version created:', item)
                }
              })()
            }
          })

          client.onWebSocket('close', () => {
            console.log({event: 'onclose', message: 'WebSocket connection closed'})
          })

          client.onWebSocket('error', error => {
            console.log({event: 'onerror', error})
          })

          cleanup = () => {
            console.log('Disconnecting WebSocket...')
            client.disconnect()
          }
        } catch (error) {
          console.error('WebSocket connection error:', error)
        }
      })()
    }

    return () => cleanup()
  }, [session?.user?.accessToken])

  return (
    <>
      <Box sx={{display: 'flex', justifyContent: session ? 'start' : 'center', marginTop: 2}}>
        {session ? (
          <Stack direction='row' spacing={2}>
            <LightTooltip title='Se déconnecter' placement='right'>
              <Fab size='large' color='error' onClick={() => setIsOpen(true)}>
                <LogoutIcon fontSize='large' />
              </Fab>
            </LightTooltip>
            <LightTooltip title={navButton.title} placement='right'>
              <Fab sx={{mr: 3}} size='large' color={navButton.color} onClick={() => router.push(navButton.path)}>
                {navButton.icon}
              </Fab>
            </LightTooltip>
          </Stack>
        ) : (
          <Stack direction='row' spacing={2}>
            <LightTooltip title='Se connecter' placement='left'>
              <Fab size='large' color='success' onClick={() => router.push('/login')}>
                <LoginIcon fontSize='large' />
              </Fab>
            </LightTooltip>
            <LightTooltip title='S’enregistrer' placement='right'>
              <Fab size='large' color='success' onClick={() => router.push('/register')}>
                <PersonAddIcon fontSize='large' />
              </Fab>
            </LightTooltip>
          </Stack>
        )}
      </Box>
      <ConfirmationAlert
        title='Se déconnecter'
        description='Vous êtes sur le point de vous déconnecter. Voulez-vous continuer ?'
        isOpen={isOpen}
        setIsOpen={setIsOpen}
        handleConfirmation={handleSignout}
      />
    </>
  )
}

Sign.propTypes = {
  session: PropTypes.object,
  navButton: PropTypes.object.isRequired
}