147 lines
4.4 KiB
JavaScript
147 lines
4.4 KiB
JavaScript
'use client'
|
||
|
||
import PropTypes from 'prop-types'
|
||
import {useEffect, useState} 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 apiWsUrl = process.env.DIRECTUS_API_WS_URL || process.env.NEXT_PUBLIC_DIRECTUS_API_WS_URL
|
||
|
||
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 directusClientWS = createDirectus(apiWsUrl)
|
||
.with(staticToken(session?.user?.accessToken))
|
||
.with(realtime())
|
||
|
||
const handleSignout = () => {
|
||
setIsOpen(false)
|
||
signOut()
|
||
}
|
||
|
||
async function subscribe() {
|
||
const {subscription} = await directusClientWS.subscribe('directus_versions', {
|
||
event: 'create',
|
||
query: {
|
||
fields: ['*'],
|
||
filter: {
|
||
collection: {
|
||
_eq: 'titres'
|
||
}
|
||
}
|
||
}
|
||
})
|
||
|
||
for await (const item of subscription) {
|
||
console.log('New version created:', item)
|
||
}
|
||
}
|
||
|
||
useEffect(() => {
|
||
let cleanup = () => {}
|
||
|
||
if (session) {
|
||
(async () => {
|
||
try {
|
||
await directusClientWS.connect()
|
||
|
||
directusClientWS.onWebSocket('open', () => {
|
||
console.log({event: 'onopen'})
|
||
subscribe()
|
||
})
|
||
|
||
directusClientWS.onWebSocket('message', message => {
|
||
if (message.type === 'auth' && message.status === 'ok') {
|
||
console.log({event: 'onmessage', message})
|
||
}
|
||
})
|
||
|
||
directusClientWS.onWebSocket('close', () => {
|
||
console.log({event: 'onclose'})
|
||
})
|
||
|
||
directusClientWS.onWebSocket('error', error => {
|
||
console.log({event: 'onerror', error})
|
||
})
|
||
|
||
cleanup = () => {
|
||
directusClientWS.disconnect()
|
||
}
|
||
} catch (error) {
|
||
console.error('WebSocket connection error:', error)
|
||
}
|
||
})()
|
||
}
|
||
|
||
return () => cleanup()
|
||
}, [session]) // eslint-disable-line react-hooks/exhaustive-deps
|
||
|
||
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
|
||
}
|