Add feedback to input if invalid

erpeel-a · Feb 10, 2021 · 9ff9f7f · 9ff9f7f
1 parent 57cf023
commit 9ff9f7f
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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}
       />