base volto logout component and user in header appears if token and u…

…ser id exists

src/customizations/volto/components/theme/Header/Header.jsx

@@ -159,6 +159,7 @@ class Header extends Component {
    * @returns {string} Markup for the component.
    */
   render() {
+    console.log('this.props', this.props);
     return (
       <div>
         <header className="ccl-header">
@@ -216,7 +217,7 @@ class Header extends Component {
                   <li className="header-vertical-line">
                     <div>|</div>
                   </li>
-                  {(this.props.user?.id && (
+                  {(this.props.token && this.props.user?.id && (
                     <>
                       <li className="header-dropdown">
                         <HeaderDropdown user={this.props.user} />

src/customizations/volto/components/theme/Logout/Logout.jsx

@@ -1,36 +1,108 @@
-import { useEffect, useMemo } from 'react';
-import { useDispatch, useSelector, shallowEqual } from 'react-redux';
-import { useHistory } from 'react-router-dom';
+/**
+ * Login container.
+ * @module components/theme/Logout/Logout
+ */
+
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+import { defineMessages, injectIntl } from 'react-intl';
 import qs from 'query-string';
+
+import { Login } from '@plone/volto/components';
 import { logout, purgeMessages } from '@plone/volto/actions';
+import { toast } from 'react-toastify';
+import { Toast } from '@plone/volto/components';
 
-const Logout = ({ location }) => {
-  const token = useSelector((state) => state.userSession.token, shallowEqual);
-  const history = useHistory();
-  const dispatch = useDispatch();
-
-  const returnUrl = useMemo(
-    () =>
-      qs.parse(location.search).return_url ||
-      location.pathname
-        .replace(/\/login\/?$/, '')
-        .replace(/\/logout\/?$/, '') ||
-      '/',
-    [location],
-  );
-
-  useEffect(() => {
-    dispatch(logout());
-    dispatch(purgeMessages());
-  }, [dispatch]);
-
-  useEffect(() => {
-    if (!token) {
-      window.location.href = '/';
-    }
-  }, [history, returnUrl, token]);
+const messages = defineMessages({
+  loggedOut: {
+    id: 'Logged out',
+    defaultMessage: 'Logged out',
+  },
+  loggedOutContent: {
+    id: 'You have been logged out from the site.',
+    defaultMessage: 'You have been logged out from the site.',
+  },
+});
+
+/**
+ * Logout class.
+ * @class Logout
+ * @extends Component
+ */
+class Logout extends Component {
+  /**
+   * Property types.
+   * @property {Object} propTypes Property types.
+   * @static
+   */
+  static propTypes = {
+    logout: PropTypes.func.isRequired,
+    purgeMessages: PropTypes.func.isRequired,
+    query: PropTypes.shape({
+      return_url: PropTypes.string,
+    }),
+  };
 
-  return '';
-};
+  /**
+   * Default properties.
+   * @property {Object} defaultProps Default properties.
+   * @static
+   */
+  static defaultProps = {
+    query: null,
+  };
+
+  componentDidMount() {
+    this.props.logout();
+    this.props.purgeMessages();
+  }
+
+  /**
+   * Component will receive props
+   * @method componentWillReceiveProps
+   * @param {Object} nextProps Next properties
+   * @returns {undefined}
+   */
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (!nextProps.token) {
+      this.props.history.replace(this.props.returnUrl || '/');
+      if (!toast.isActive('loggedOut')) {
+        toast.success(
+          <Toast
+            success
+            title={this.props.intl.formatMessage(messages.loggedOut)}
+            content={this.props.intl.formatMessage(messages.loggedOutContent)}
+          />,
+          { autoClose: false, toastId: 'loggedOut' },
+        );
+      }
+    }
+  }
 
-export default Logout;
+  /**
+   * Render method.
+   * @method render
+   * @returns {string} Markup for the component.
+   */
+  render() {
+    return <Login location={{ query: this.props.location.query }} />;
+  }
+}
+export default compose(
+  injectIntl,
+  connect(
+    (state, props) => ({
+      query: qs.parse(props.location.search),
+      token: state.userSession.token,
+      returnUrl:
+        qs.parse(props.location.search).return_url ||
+        props.location.pathname
+          .replace(/\/login\/?$/, '')
+          .replace(/\/logout\/?$/, '') ||
+        '/',
+    }),
+    { logout, purgeMessages },
+  ),
+)(Logout);