From 9ff9f7f949f476e00104d217a82b55289a56e458 Mon Sep 17 00:00:00 2001
From: hendraaagil <hendraaagil@gmail.com>
Date: Wed, 10 Feb 2021 11:22:19 +0700
Subject: [PATCH] Add feedback to input if invalid

---
 src/components/complaints/Create.js   | 18 ++++++++++++++++--
 src/components/complaints/Edit.js     | 18 ++++++++++++++++--
 src/components/layouts/CustomInput.js |  2 ++
 3 files changed, 34 insertions(+), 4 deletions(-)

diff --git a/src/components/complaints/Create.js b/src/components/complaints/Create.js
index a4bdb17..a49d9f4 100644
--- a/src/components/complaints/Create.js
+++ b/src/components/complaints/Create.js
@@ -44,6 +44,7 @@ const Create = () => {
   const [date, setDate] = useState(new Date());
   const [file, setFile] = useState(null);
   const [load, setLoad] = useState(false);
+  const [valid, setValid] = useState(true);
 
   const inputs = [
     {
@@ -74,6 +75,7 @@ const Create = () => {
       label: 'Nomor Telepon',
       type: 'number',
       value: state.no_telp,
+      inValid: !valid,
       change: e => setState({ ...state, no_telp: e.target.value }),
     },
     {
@@ -130,10 +132,21 @@ const Create = () => {
       .catch(error => {
         setLoad(false);
         console.log(error);
-        error?.response?.data?.data?.no_telp &&
+        const noTelpErr = error?.response?.data?.data?.no_telp;
+        const number = noTelpErr && noTelpErr[0].replace(/\D/g, '');
+        const title = 'Nomor telepon tidak valid!';
+        let description = '';
+        if (+number === 13) {
+          description = `Tidak boleh lebih dari ${number} karakter!`;
+        } else {
+          description = `Tidak boleh kurang dari ${number} karakter!`;
+        }
+        noTelpErr && setValid(false);
+        noTelpErr &&
           toast({
             position: 'top',
-            title: error.response.data.data.no_telp[0],
+            title,
+            description,
             status: 'error',
             duration: 4000,
             isClosable: true,
@@ -161,6 +174,7 @@ const Create = () => {
               readOnly={input.readOnly}
               value={input.value}
               onChange={input.change}
+              isInvalid={input.inValid}
               required
               useLabel
             />
diff --git a/src/components/complaints/Edit.js b/src/components/complaints/Edit.js
index 591aa96..e344b53 100644
--- a/src/components/complaints/Edit.js
+++ b/src/components/complaints/Edit.js
@@ -31,6 +31,7 @@ const Edit = ({ match, history }) => {
   const [date, setDate] = useState(new Date());
   const [file, setFile] = useState(null);
   const [load, setLoad] = useState(false);
+  const [valid, setValid] = useState(true);
   const [disabled, setDisabled] = useState(true);
 
   useEffect(() => {
@@ -77,6 +78,7 @@ const Edit = ({ match, history }) => {
       label: 'Nomor Telepon',
       type: 'number',
       value: state?.no_telp,
+      inValid: !valid,
       change: e => setState({ ...state, no_telp: e.target.value }),
     },
     {
@@ -142,10 +144,21 @@ const Edit = ({ match, history }) => {
       .catch(error => {
         setLoad(false);
         console.log(error);
-        error?.response?.data?.data?.no_telp &&
+        const noTelpErr = error?.response?.data?.data?.no_telp;
+        const number = noTelpErr && noTelpErr[0].replace(/\D/g, '');
+        const title = 'Nomor telepon tidak valid!';
+        let description = '';
+        if (+number === 13) {
+          description = `Tidak boleh lebih dari ${number} karakter!`;
+        } else {
+          description = `Tidak boleh kurang dari ${number} karakter!`;
+        }
+        noTelpErr && setValid(false);
+        noTelpErr &&
           toast({
             position: 'top',
-            title: error.response.data.data.no_telp[0],
+            title,
+            description,
             status: 'error',
             duration: 4000,
             isClosable: true,
@@ -174,6 +187,7 @@ const Edit = ({ match, history }) => {
                 readOnly={input.readOnly}
                 value={input.value}
                 onChange={input.change}
+                isInvalid={input.inValid}
                 required
                 useLabel
               />
diff --git a/src/components/layouts/CustomInput.js b/src/components/layouts/CustomInput.js
index 65c9216..e0e999f 100644
--- a/src/components/layouts/CustomInput.js
+++ b/src/components/layouts/CustomInput.js
@@ -9,6 +9,7 @@ const CustomInput = props => {
     value,
     readOnly,
     onChange,
+    isInvalid,
     useLabel,
     required,
     accept,
@@ -26,6 +27,7 @@ const CustomInput = props => {
         placeholder={label}
         value={value}
         onChange={onChange}
+        isInvalid={isInvalid}
         isReadOnly={readOnly}
         accept={accept}
       />