Sharing the Validation Method from 'shared/utility.js'

README.md

@@ -154,3 +154,4 @@ Dependency Installation: **`npm i --save redux-thunk`**
 ### Improving & Fixing 🛠 the 🍔🛠 Project
 
 1. Fixing the Redirect to the Front Page: [Commit Details](https://github.com/Ch-sriram/burger-builder/commit/db00f5813046fc9dc33767d3b7c972134461da5e)
+2.Sharing the Validation Method into `shared/utility.js`: [Commit Details]()

src/containers/Auth/Auth.component.jsx

@@ -9,6 +9,7 @@ import { StyledButton as Button } from "../../components/UI/Buttons/StyledButton
 import { FormDiv } from "../../components/UI/Form/FormDiv.styled";
 import Spinner from "../../components/UI/Spinner/Spinner.component";
 import * as actions from "../../store/actions/index";
+import { checkValidity } from "../../shared/utility";
 
 class Auth extends Component {
   state = {
@@ -52,21 +53,13 @@ class Auth extends Component {
       this.props.onSetAuthRedirectPath();
   }
 
-  checkValidity = (value, rules) => {
-    let isValid = true; if (!rules) return true;
-    isValid = rules.required ? value.trim() !== "" && isValid : isValid;
-    isValid = rules.minLength ? value.length >= rules.minLength && isValid : isValid;
-    isValid = rules.maxLength ? value.length <= rules.maxLength && isValid : isValid;
-    return isValid;
-  };
-
   inputChangedHandler = (event, controlName) => {
     const controls = {
       ...this.state.controls,
       [controlName]: {
         ...this.state.controls[controlName],
         value: event.target.value,
-        valid: this.checkValidity(event.target.value, this.state.controls[controlName].validation),
+        valid: checkValidity(event.target.value, this.state.controls[controlName].validation),
         touched: true,
       }
     };

src/containers/Checkout/ContactData/ContactData.component.jsx

@@ -11,6 +11,7 @@ import Input from '../../../components/UI/Input/Input.component';
 import { FormDiv } from '../../../components/UI/Form/FormDiv.styled';
 import withErrorHandler from "../../../hoc/withErrorHandler/withErrorHandler.closureHOC";
 import * as actions from "../../../store/actions/index";
+import { checkValidity } from "../../../shared/utility";
 
 
 /**
@@ -64,7 +65,8 @@ class ContactData extends Component {
         validation: {
           required: true,
           minLength: 5,
-          maxLength: 6
+          maxLength: 6,
+          isAlphaNumeric: true,
         },
         valid: false,
         touched: false,
@@ -89,7 +91,10 @@ class ContactData extends Component {
           placeholder: "Your E-Mail",
         },
         value: "",
-        validation: { required: true, },
+        validation: {
+          required: true,
+          isEmail: true,
+        },
         valid: false,
         touched: false,
       },
@@ -131,20 +136,11 @@ class ContactData extends Component {
     this.props.onOrderBurger(order);
   };
 
-  // RIGHT WAY FOR VALIDATION USING INTERPOLATION
-  checkValidity = (value, rules) => {
-    let isValid = true; if (!rules) return true;
-    isValid = rules.required ? value.trim() !== "" && isValid : isValid;
-    isValid = rules.minLength ? value.length >= rules.minLength && isValid : isValid;
-    isValid = rules.maxLength ? value.length <= rules.maxLength && isValid : isValid;
-    return isValid;
-  }
-
   inputChangedHandler = (event, inputIdentifier) => {
     const orderForm = { ...this.state.orderForm }; // deep copy of orderForm => shallow copy of its nested objects
     const formElementCopy = { ...orderForm[inputIdentifier] }; // deep copy of the first nested object
     formElementCopy.value = event.target.value;
-    formElementCopy.valid = this.checkValidity(formElementCopy.value, formElementCopy.validation);
+    formElementCopy.valid = checkValidity(formElementCopy.value, formElementCopy.validation);
     formElementCopy.touched = true;
     orderForm[inputIdentifier] = formElementCopy;
 

src/shared/utility.js

@@ -0,0 +1,15 @@
+export const updateObject = (oldObject, updatedProperties) => ({ ...oldObject, ...updatedProperties });
+
+export const checkValidity = (value, rules) => {
+  if (!rules) return true;
+  let isValid = true;
+  isValid = rules.required ? value.trim() !== "" && isValid : isValid;
+  isValid = rules.minLength ? value.length >= rules.minLength && isValid : isValid;
+  isValid = rules.maxLength ? value.length <= rules.maxLength && isValid : isValid;
+  // eslint-disable-next-line no-useless-escape
+  isValid = rules.isEmail ? /^([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5})$/.test(value) && isValid : isValid;
+  isValid = rules.isNumeric ? /^\d+$/.test(value) && isValid : isValid;
+  // eslint-disable-next-line no-useless-escape
+  isValid = rules.isAlphaNumeric ? /^[A-Za-z0-9]+[\-]*[A-Za-z0-9]$/.test(value) && isValid : isValid;
+  return isValid;
+}

src/store/reducers/auth.js

@@ -1,5 +1,5 @@
 import * as actionTypes from '../actions/actionTypes';
-import { updateObject } from '../utility';
+import { updateObject } from '../../shared/utility';
 
 const initialState = {
   token: null,

src/store/reducers/burgerBuilder.js

@@ -1,5 +1,5 @@
 import * as actionTypes from "../actions/actionTypes";
-import { updateObject } from "../utility";
+import { updateObject } from "../../shared/utility";
 
 const initialState = {
   ingredients: null,

src/store/reducers/order.js

@@ -1,5 +1,5 @@
 import * as actionTypes from "../actions/actionTypes";
-import { updateObject } from "../utility";
+import { updateObject } from "../../shared/utility";
 
 const initialState = {
   orders: [],