CODEWITHSUNDEEP
reactjs
user13986186
user13986186

Reputation:

How to make User Logout After Countdown React

I'm trying to achieve making the user log out after the countdown ends, I'm sorry because I am just new in react still learning, anyways this is my code. Thank you so much for your help I really appreciate it. Has an error that says TypeError: this.props.onLogout is not a function :)

My Code:

 import React, { Component } from 'react';
import Countdown from "react-countdown";
import {
  Redirect,
} from 'react-router-dom';
import { logoutUser } from '../../../actions/authActions';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';


export class OnlineOrders extends Component {
 
  onLogout = (e) => {
    e.preventDefault();
    this.props.logoutUser();
  };

  render() {
 
    
    const renderer = ({ days, hours, minutes, seconds, completed }) => {
      if (completed) {
        this.props.onLogout();
        return <>
          <Redirect to='/billing/plans' />
        
        </>;
      } else {
        return (
          <span>
            {days}:{hours}:{minutes}:{seconds}
          </span>
        );
      }
    };

    return (
      <>
          <div className='note primary'>
            You have <strong><Countdown date={Date.now() + 5000} renderer={renderer} /></strong>  remaining on your free trial.
                <a href='/billing/plans'> Activate Now</a> to stay alive!
              </div>
      </>
    );
  };
}

OnlineOrders.propTypes = {
  logoutUser: PropTypes.func.isRequired,
  auth: PropTypes.object.isRequired,
};

const mapStateToProps = (state) => ({
  auth: state.auth,
});

export default connect(mapStateToProps, { logoutUser })(OnlineOrders);

Upvotes: 1

Views: 460

Answers (1)

Drew Reese
Drew Reese

Reputation: 203542

Looks like you need to invoke onLogout correctly.

if (completed) {
  this.onLogout();
  return <Redirect to='/billing/plans' />;
} else {
  return (
    <span>
      {days}:{hours}:{minutes}:{seconds}
    </span>
  );
}

Side note: You can invoke the callback from props directly and save a function declaration.

if (completed) {
  this.props.logoutUser();
  return <Redirect to='/billing/plans' />;
} else {
  return (
    <span>
      {days}:{hours}:{minutes}:{seconds}
    </span>
  );
}

The else is actually also superfluous, it can be removed.

const renderer = ({ days, hours, minutes, seconds, completed }) => {
  if (completed) {
    this.props.logoutUser();
    return <Redirect to='/billing/plans' />;
  }
  return (
    <span>
      {days}:{hours}:{minutes}:{seconds}
    </span>
  );
};

Upvotes: 2

Related Questions