feat: add message under the textinput field

Author: mjatin-dev

admin-ui/app/routes/Apps/Gluu/GluuCommitDialog.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import {
   FormGroup,
   Col,
@@ -28,25 +28,21 @@ const GluuCommitDialog = ({
   const { t } = useTranslation()
   const [active, setActive] = useState(false)
   let [loading, setLoading] = useState(isLoading)
+  const [userMeggage, setUserMessage] = useState('')
   const USER_MESSAGE = 'user_action_message'
-  function handleStatus() {
-    var value = document.getElementById(USER_MESSAGE).value
-    if (value.length >= 10) {
+  useEffect(() => {
+    if (userMeggage.length >= 10) {
       setActive(true)
     } else {
       setActive(false)
     }
-  }
-
+  }, [userMeggage])
   function handleAccept() {
     if (formik) {
-      formik.setFieldValue(
-        'action_message',
-        document.getElementById(USER_MESSAGE).value,
-      )
+      formik.setFieldValue('action_message', userMeggage)
     }
     setLoading(true)
-    onAccept(document.getElementById(USER_MESSAGE).value)
+    onAccept(userMeggage)
   }
   return (
     <Modal isOpen={modal} toggle={handler} className="modal-outline-primary">
@@ -78,19 +74,25 @@ const GluuCommitDialog = ({
               id={USER_MESSAGE}
               type={!!inputType ? inputType : 'textarea'}
               name={USER_MESSAGE}
-              onKeyUp={handleStatus}
+              onChange={(e) => setUserMessage(e.target.value)}
               placeholder={
                 !placeholderLabel || placeholderLabel === ''
                   ? t('placeholders.action_commit_message')
                   : placeholderLabel
               }
               defaultValue=""
             />
+            {userMeggage.length <= 10 && (
+              <span className="text-danger">
+                {10 - userMeggage.length} {userMeggage.length ? ' more' : ''}{' '}
+                characters required
+              </span>
+            )}
           </Col>
         </FormGroup>
       </ModalBody>
       <ModalFooter>
-        <ClipLoader loading={loading} size={35} />
+        {/* <ClipLoader loading={loading} size={35} /> */}
         {active && (
           <Button
             color="primary"