Refactored code a bit and moved getCustomNumberValidation to function.js

Author: zaxovaiko

components/Checkout/Billing.component.jsx

@@ -1,14 +1,15 @@
 import { useForm } from 'react-hook-form';
 import { InputField } from '../Input/InputField.component';
+import { getCustomNumberValidation } from '../../functions/functions';
 
-const getCustomNumberValidation = (
-  value,
-  { minLength, maxLength, pattern }
-) => ({
-  minLength: { value, message: minLength },
-  maxLength: { value, message: maxLength },
-  pattern: { value: /^\d+$/i, message: pattern },
-});
+const customPostNumberValidation = getCustomNumberValidation(
+  {
+    minLength: 'Postnummer må være minimum 4 tall',
+    maxLength: 'Postnummer må være maksimalt 4 tall',
+    pattern: 'Postnummer må bare være tall',
+  },
+  4
+);
 
 const inputs = [
   { label: 'Fornavn', name: 'firstName' },
@@ -17,31 +18,34 @@ const inputs = [
   {
     label: 'Postnummer',
     name: 'postcode',
-    customValidation: getCustomNumberValidation(4, {
-      minLength: 'Postnummer må være minimum 4 tall',
-      maxLength: 'Postnummer må være maksimalt 4 tall',
-      pattern: 'Postnummer må bare være tall',
-    }),
+    customValidation: customPostNumberValidation,
   },
   { label: 'Sted', name: 'city' },
   {
     label: 'Epost',
     name: 'email',
-    customValidation: {
-      pattern: {
-        value: /[^@]+@[^@]+\.[^@]+/i,
-        message: 'Du må oppgi en gyldig epost',
-      },
-    },
+    customValidation: getCustomNumberValidation(
+      { pattern: 'Du må oppgi en gyldig epost' },
+      undefined,
+      /[^@]+@[^@]+\.[^@]+/i
+    ),
   },
   {
     label: 'Telefon',
     name: 'phone',
-    customValidation: getCustomNumberValidation(8, {
-      minLength: 'Minimum 8 tall i telefonnummeret',
-      maxLength: 'Maksimalt 8 tall i telefonnummeret',
-      pattern: 'Ikke gyldig telefonnummer',
-    }),
+    customValidation: getCustomNumberValidation(
+      {
+        minLength: 'Minimum 8 tall i telefonnummeret',
+        maxLength: 'Maksimalt 8 tall i telefonnummeret',
+        pattern: 'Ikke gyldig telefonnummer',
+      },
+      8
+    ),
+  },
+  {
+    label: 'Postnummer',
+    name: 'postcode',
+    customValidation: customPostNumberValidation,
   },
 ];
 
@@ -66,26 +70,6 @@ const Billing = ({ onSubmit }) => {
               register={register}
             />
           ))}
-          <InputField
-            label="Postnummer"
-            name="postcode"
-            errors={errors}
-            register={register}
-            customValidation={{
-              minLength: {
-                value: 4,
-                message: 'Postnummer må være minimum 4 tall',
-              },
-              maxLength: {
-                value: 4,
-                message: 'Postnummer må være maksimalt 4 tall',
-              },
-              pattern: {
-                value: /^\d+$/i,
-                message: 'Postnummer må bare være tall',
-              },
-            }}
-          />
           <OrderButton register={register} />
         </div>
       </form>

utils/functions/functions.js

@@ -5,7 +5,6 @@ import { v4 as uuidv4 } from 'uuid';
  * @param {String} price The price string that we input
  * @param {String} symbol Currency symbol to add empty character/padding after
  */
-
 export const paddedPrice = (price, symbol) =>
   price.split(symbol).join(`${symbol} `);
 
@@ -22,6 +21,35 @@ export const trimmedStringToLength = (string, length) => {
   return string;
 };
 
+/**
+ * Creates a validation object with passed custom error messages.
+ * If value is not passed than returned object will contain only pattern message.
+ * @param {Object} messages Custom error messages
+ * @param {String} messages.minLength Message for min length attribute validation
+ * @param {String} messages.maxLength Message for max length attribute vlidation
+ * @param {String} messages.pattern Message for custom pattern vlidation
+ * @param {Integer=} value The number value used as limit for min/max attribute
+ * @param {RegExp} patternValue Regular expression pattern for validation
+ */
+export const getCustomNumberValidation = (
+  { minLength, maxLength, pattern },
+  value,
+  patternValue = /^\d+$/i
+) => {
+  const validationObj = {
+    minLength: { value, message: minLength },
+    maxLength: { value, message: maxLength },
+    pattern: { value: patternValue, message: pattern },
+  };
+
+  return Object.keys(validationObj).reduce((acc, key) => {
+    if (validationObj[key].value) {
+      acc[key] = validationObj[key];
+    }
+    return acc;
+  }, {});
+};
+
 /**
  * Filter variant price. Changes "kr198.00 - kr299.00" to kr299.00 or kr198 depending on the side variable
  * @param {String} side Which side of the string to return (which side of the "-" symbol)