Move Dekoneksyon to component/sesyon & improve it

components/sesyon/dekoneksyon.js

@@ -0,0 +1,64 @@
+import {useState} from 'react'
+import PropTypes from 'prop-types'
+import Link from 'next/link'
+import {signOut} from 'next-auth/client'
+import {withStyles, makeStyles, Tooltip, Fab, Zoom} from '@material-ui/core'
+import ExitToAppIcon from '@material-ui/icons/ExitToApp'
+
+import Alet from '../alet'
+
+const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3000'
+
+const useStyles = makeStyles(() => ({
+  dekoneksyon: {
+    position: props => props.position,
+    top: props => props.top,
+    left: props => props.left
+  }
+}))
+
+const DekoneksonTooltip = withStyles(() => ({
+  tooltip: {
+    fontSize: 18
+  }
+}))(Tooltip)
+
+function Dekoneksyon({chimen, tooltipPlacement, ...props}) {
+  const classes = useStyles(props)
+  const [esOuve, meteEsOuve] = useState(false)
+
+  const handleDekonekte = event => {
+    event.preventDefault()
+    signOut({callbackUrl: `${siteUrl}${chimen}`})
+  }
+
+  return (
+    <>
+      <Link href='/api/auth/signout'>
+        <DekoneksonTooltip title='Dékoneksyon' placement={tooltipPlacement} TransitionComponent={Zoom}>
+          <Fab
+            className={classes.dekoneksyon}
+            color='secondary'
+            aria-label='logout'
+            size='small'
+            onClick={() => meteEsOuve(true)}
+          >
+            <ExitToAppIcon />
+          </Fab>
+        </DekoneksonTooltip>
+      </Link>
+      <Alet esOuve={esOuve} meteEsOuve={meteEsOuve} handleKonfime={handleDekonekte} />
+    </>
+  )
+}
+
+Dekoneksyon.defaultProps = {
+  tooltipPlacement: 'left'
+}
+
+Dekoneksyon.propTypes = {
+  chimen: PropTypes.string.isRequired,
+  tooltipPlacement: PropTypes.string
+}
+
+export default Dekoneksyon