From b5f07b4a0b1f51c430fe0799e77f193158255a86 Mon Sep 17 00:00:00 2001
From: Cassio Cardoso <caugusto.cardoso@gmail.com>
Date: Sun, 3 May 2020 11:27:18 +0200
Subject: [PATCH] refactor validCardTypes

- use class getter and setter to store the validCardTypes value instead of using the component state
- refactor config function name to be more explicit about its implementation
---
 src/index.js             | 34 ++++++++++++++++------------------
 src/utils/cardHelpers.js |  4 ++--
 2 files changed, 18 insertions(+), 20 deletions(-)

diff --git a/src/index.js b/src/index.js
index 08a914a..8458bb6 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,21 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { cardTypesMap, configure, getCardType, validateLuhn } from './utils/cardHelpers';
+import { cardTypesMap, getCardType, setInitialValidCardTypes, validateLuhn } from './utils/cardHelpers';
 
 class ReactCreditCards extends React.Component {
-  constructor(props) {
-    super(props);
-
-    const validCardTypes = configure();
-
-    this.state = {
-      validCardTypes,
-    };
-
-    this.setCards();
-  }
-
   componentDidUpdate(prevProps) {
     const { acceptedCards, callback, number } = this.props;
 
@@ -27,7 +15,7 @@ class ReactCreditCards extends React.Component {
     }
 
     if (prevProps.acceptedCards.toString() !== acceptedCards.toString()) {
-      this.setCards();
+      this.validCardTypes = acceptedCards;
     }
   }
 
@@ -110,13 +98,12 @@ class ReactCreditCards extends React.Component {
 
   get options() {
     const { number } = this.props;
-    const { validCardTypes } = this.state;
     let updatedIssuer = 'unknown';
 
     if (number) {
       const validatedIssuer = getCardType(number);
 
-      if (validCardTypes.includes(validatedIssuer)) {
+      if (this.validCardTypes.includes(validatedIssuer)) {
         updatedIssuer = validatedIssuer;
       }
     }
@@ -139,12 +126,23 @@ class ReactCreditCards extends React.Component {
     };
   }
 
-  setCards() {
+  get validCardTypes() {
     const { acceptedCards } = this.props;
+    const initialValidCardTypes = setInitialValidCardTypes();
 
     if (acceptedCards.length) {
-      this.setState((prevState) => ({ validCardTypes: prevState.validCardTypes.filter(card => acceptedCards.includes(card)) }));
+      return initialValidCardTypes.filter(card => acceptedCards.includes(card));
     }
+
+    return initialValidCardTypes;
+  }
+
+  set validCardTypes(acceptedCards) {
+    if (acceptedCards.length) {
+      return this.validCardTypes.filter(card => acceptedCards.includes(card));
+    }
+
+    return this.validCardTypes;
   }
 
   render() {
diff --git a/src/utils/cardHelpers.js b/src/utils/cardHelpers.js
index 3cb5f5a..8b1f51c 100644
--- a/src/utils/cardHelpers.js
+++ b/src/utils/cardHelpers.js
@@ -34,10 +34,10 @@ export const getCardType = (cardNumber) => {
 };
 
 /**
- * Configure credit cards and return an array of valid types
+ * Configure the credit card types supported and return an array of valid types
  * @returns {string[]} validCardTypes
  */
-export const configure = () => {
+export const setInitialValidCardTypes = () => {
   creditCardType.updateCard(cardTypes.MAESTRO, {
     patterns: [
       493698,