Logout Refactor

cypress/tests/core/basic/logout.js

@@ -0,0 +1,20 @@
+import { ploneAuth } from '../../../support/constants';
+
+describe('Logout Tests', () => {
+  beforeEach(() => {
+    cy.visit('/');
+    cy.contains('Log in').click();
+    const user = ploneAuth[0];
+    const password = ploneAuth[1];
+
+    cy.get('#login').type(user).should('have.value', user);
+    cy.get('#password').type(password).should('have.value', password);
+    cy.get('#login-form-submit').click();
+    cy.get('body').should('have.class', 'has-toolbar');
+  });
+  it('As registered user I can logout', function () {
+    cy.get('#toolbar-personal').click();
+    cy.get('#toolbar-logout').click();
+    cy.getCookie('auth_key').should('not.exist');
+  });
+});

news/4860.feature

@@ -0,0 +1 @@
+Refactor Logout component @Tishasoumya-02

src/components/theme/Logout/Logout.jsx

@@ -1,19 +1,11 @@
-/**
- * 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 { useEffect, useMemo } from 'react';
+import { useDispatch, useSelector, shallowEqual } from 'react-redux';
+import { useHistory } from 'react-router-dom';
+import { defineMessages, useIntl } from 'react-intl';
 import qs from 'query-string';
-
-import { Login } from '@plone/volto/components';
+import { Login, Toast } from '@plone/volto/components';
 import { logout, purgeMessages } from '@plone/volto/actions';
 import { toast } from 'react-toastify';
-import { Toast } from '@plone/volto/components';
 
 const messages = defineMessages({
   loggedOut: {
@@ -26,83 +18,44 @@ const messages = defineMessages({
   },
 });
 
-/**
- * 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,
-    }),
-  };
-
-  /**
-   * 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 || '/');
+const Logout = ({ location }) => {
+  const token = useSelector((state) => state.userSession.token, shallowEqual);
+  const history = useHistory();
+  const dispatch = useDispatch();
+  const intl = useIntl();
+
+  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) {
+      history.replace(returnUrl || '/');
       if (!toast.isActive('loggedOut')) {
         toast.info(
           <Toast
             info
-            title={this.props.intl.formatMessage(messages.loggedOut)}
-            content={this.props.intl.formatMessage(messages.loggedOutContent)}
+            title={intl.formatMessage(messages.loggedOut)}
+            content={intl.formatMessage(messages.loggedOutContent)}
           />,
           { autoClose: false, toastId: 'loggedOut' },
         );
       }
     }
-  }
+  }, [history, returnUrl, intl, token]);
+
+  return <Login location={{ query: location.query }} />;
+};
 
-  /**
-   * 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);
+export default Logout;

src/hooks/userSession/useToken.js

@@ -0,0 +1,14 @@
+import { useSelector, shallowEqual } from 'react-redux';
+
+/**
+ * useToken hook
+ *
+ * This hook returns the current token that is stored in the Redux store in the
+ * `userSession` reducer, and returns it along with the related state (token).
+ *
+ * @export
+ * @return {{ token }}
+ */
+export function useToken() {
+  return useSelector((state) => state.userSession.token, shallowEqual);
+}