Remove state and deprecated lifecycles

Author: gilbarbara

src/index.js

@@ -6,13 +6,6 @@ class ReactCreditCards extends React.Component {
   constructor(props) {
     super(props);
 
-    this.state = {
-      type: {
-        name: 'unknown',
-        maxLength: 16,
-      },
-    };
-
     this.setCards();
   }
 
@@ -54,41 +47,31 @@ class ReactCreditCards extends React.Component {
     preview: false,
   };
 
-  componentDidMount() {
-    const { number } = this.props;
-
-    this.updateType(number);
-  }
-
-  componentWillReceiveProps(nextProps) {
-    const { acceptedCards, number } = this.props;
-
-    const {
-      acceptedCards: nextAcceptedCards,
-      number: nextNumber,
-    } = nextProps;
+  componentDidUpdate(prevProps) {
+    const { acceptedCards, callback, number } = this.props;
 
-    if (number !== nextNumber) {
-      this.updateType(nextNumber);
+    if (prevProps.number !== number) {
+      /* istanbul ignore else */
+      if (typeof callback === 'function') {
+        callback(this.options, Payment.fns.validateCardNumber(number));
+      }
     }
 
-    if (acceptedCards.toString() !== nextAcceptedCards.toString()) {
-      this.setCards(nextProps);
+    if (prevProps.acceptedCards.toString() !== acceptedCards.toString()) {
+      this.setCards();
     }
   }
 
   get issuer() {
-    const { type } = this.state;
     const { issuer, preview } = this.props;
 
-    return preview && issuer ? issuer.toLowerCase() : type.issuer;
+    return preview && issuer ? issuer.toLowerCase() : this.options.issuer;
   }
 
   get number() {
-    const { type } = this.state;
     const { number, preview } = this.props;
 
-    let maxLength = preview ? 19 : type.maxLength;
+    let maxLength = preview ? 19 : this.options.maxLength;
     let nextNumber = typeof number === 'number' ? number.toString() : number.replace(/[A-Za-z]| /g, '');
 
     if (isNaN(parseInt(nextNumber, 10)) && !preview) {
@@ -156,55 +139,45 @@ class ReactCreditCards extends React.Component {
     return `${month}/${year}`;
   }
 
-  setCards(props = this.props) {
-    const { acceptedCards } = props;
-    let newCardArray = [];
-
-    if (acceptedCards.length) {
-      Payment.getCardArray()
-        .forEach(d => {
-          if (acceptedCards.includes(d.type)) {
-            newCardArray.push(d);
-          }
-        });
-    }
-    else {
-      newCardArray = newCardArray.concat(Payment.getCardArray());
-    }
-
-    Payment.setCardArray(newCardArray);
-  }
-
-  updateType(number) {
-    const { callback } = this.props;
-    const type = Payment.fns.cardType(number) || 'unknown';
+  get options() {
+    const { number } = this.props;
+    const issuer = Payment.fns.cardType(number) || 'unknown';
 
     let maxLength = 16;
 
-    if (type === 'amex') {
+    if (issuer === 'amex') {
       maxLength = 15;
     }
-    else if (type === 'dinersclub') {
+    else if (issuer === 'dinersclub') {
       maxLength = 14;
     }
-    else if (['hipercard', 'mastercard', 'visa'].includes(type)) {
+    else if (['hipercard', 'mastercard', 'visa'].includes(issuer)) {
       maxLength = 19;
     }
 
-    const typeState = {
-      issuer: type,
+    return {
+      issuer,
       maxLength,
     };
-    const isValid = Payment.fns.validateCardNumber(number);
+  }
 
-    this.setState({
-      type: typeState,
-    });
+  setCards() {
+    const { acceptedCards } = this.props;
+    let newCardArray = [];
 
-    /* istanbul ignore else */
-    if (typeof callback === 'function') {
-      callback(typeState, isValid);
+    if (acceptedCards.length) {
+      Payment.getCardArray()
+        .forEach(d => {
+          if (acceptedCards.includes(d.type)) {
+            newCardArray.push(d);
+          }
+        });
     }
+    else {
+      newCardArray = newCardArray.concat(Payment.getCardArray());
+    }
+
+    Payment.setCardArray(newCardArray);
   }
 
   render() {