Move Dekoneksyon to component/sesyon & improve it

2021-06-26 12:20:52 +02:00
parent 90c93dfc97
commit ee3849d6cf
2 changed files with 64 additions and 45 deletions
@@ -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
@@ -1,45 +0,0 @@
-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'
-
-const useStyles = makeStyles(() => ({
-  dekoneksyon: {
-    position: 'absolute',
-    top: 95,
-    left: 5
-  }
-}))
-
-const DekoneksonTooltip = withStyles(() => ({
-  tooltip: {
-    fontSize: 18
-  }
-}))(Tooltip)
-
-function Dekoneksyon() {
-  const classes = useStyles()
-
-  const handleLogout = event => {
-    event.preventDefault()
-    signOut()
-  }
-
-  return (
-    <Link href='/api/auth/signout'>
-      <DekoneksonTooltip title='Dékoneksyon' placement='left' TransitionComponent={Zoom}>
-        <Fab
-          className={classes.dekoneksyon}
-          color='secondary'
-          aria-label='logout'
-          size='small'
-          onClick={event => handleLogout(event)}
-        >
-          <ExitToAppIcon />
-        </Fab>
-      </DekoneksonTooltip>
-    </Link>
-  )
-}
-
-export default Dekoneksyon