otpVerification.jsx

import React, { Component } from "react";
import { Link, Redirect } from "react-router-dom";
import SweetAlert from "sweetalert2-react";
import { connect } from "react-redux";
import { Card, Form, Button, Divider } from "semantic-ui-react";

import "../../../../css/style.css";
import HomePageHeader from "../Headers/HomePageHeader";
import MainFooter from "../Footers/MainFooter";

import { verifyMobileOTP, fetchUserInfo } from "../../actions/index";

class MobVerificationOTP extends Component {
  constructor(props) {
    super(props);
    this.state = {
      OTP: "",
      isValidOTP: false,
    };

    this.updateOTP = this.updateOTP.bind(this);
    this.verifyOTP = this.verifyOTP.bind(this);
  }

  componentDidMount() {
    this.props.fetchUserInfo(this.props.location.state.mobileNumber);
  }

  updateOTP(e) {
    this.setState({
      OTP: e.target.value
    });
  }

  validate(status) {
    var otp_status = 0;
    if (status == 1 ) {
      otp_status = 1;
      this.setState({
        isValidOTP: false
      });
    } else {
      otp_status = 0;
      this.setState({
        isValidOTP: true,
        OTP: ""
      });
    }
    return otp_status;
  }

  verifyOTP(OTP, mobile_number) {
    this.props.verifyMobileOTP(OTP, mobile_number);
  }

  onSubmit(status) {
    var otpValidation = this.validate(status);
    console.log(otpValidation);
    if (otpValidation) {
      // this.setState({ redirect: true });
      console.log("success");
    }
  }

  render() {
    const { OTP, isValidOTP } = this.state;
    if (this.state.redirect) {
      return (
        <Redirect
          push
          to={{
            pathname: "/user-info",
            state: { mobileNumber: this.props.location.state.mobileNumber }
          }}
        />
      );
    }
    return (
      <div style={{ backgroundColor: "#6a5f9b" }}>
        <HomePageHeader />
        <Card centered style={{ marginTop: "7%", textAlign: "center" }}>
          <Card.Content>
            <Form onSubmit={e => this.onSubmit(this.props.status)}>
              <Form.Field>
                <label>Your Mobile</label>
                <input
                  disabled
                  value={this.props.location.state.mobileNumber}
                />
              </Form.Field>

              <Form.Field>
                <label>OTP</label>
                <input
                  type="number"
                  placeholder="Enter OTP"
                  value={OTP}
                  onChange={this.updateOTP}
                />
                {isValidOTP && (
                  <SweetAlert
                    type="error"
                    show={isValidOTP}
                    title="Invalid OTP"
                    text="Please enter a valid OTP"
                    onConfirm={() =>
                      this.setState({
                        show: false,
                        isValidOTP: false
                      })
                    }
                  />
                )}
              </Form.Field>

              <Button
                fluid
                id="green-button"
                type="submit"
                style={{ marginTop: "10%" }}
                onClick={e =>
                  this.verifyOTP(OTP, this.props.location.state.mobileNumber)
                }
              >
                SEND
              </Button>

              <Divider horizontal>OR</Divider>
              <Link to="/mobile-verification">
                <Button fluid type="submit">
                  BACK
                </Button>
              </Link>
            </Form>
          </Card.Content>
        </Card>
        <MainFooter />
      </div>
    );
  }
}

function mapStateToProps(state) {
  if (state.verifyOTPReducer.length > 0 && state.userInfoReducer.length > 0) {
    let counter = state.verifyOTPReducer.length;
    if (state.verifyOTPReducer[counter - 1].hasOwnProperty("message")) {
      return {
        status: 1,
        user_info: state.userInfoReducer[0]
      };
    } else {
      return {
        status: 0,
        user_info: state.userInfoReducer[0]
      };
    }
  } else {
    return {
      otp_message: [],
      user_info: []
    };
  }
}

function mapDispatchToProps(dispatch) {
  return {
    verifyMobileOTP(OTP, mobile_number) {
      dispatch(verifyMobileOTP(OTP, mobile_number))
    },
    fetchUserInfo(mobileNumber) {
      dispatch(fetchUserInfo(mobileNumber))
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(
  MobVerificationOTP
);