filter check form

client/src/components/Filters/Check/index.tsx

@@ -1,53 +1,57 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-
-import { Field, reduxForm } from 'redux-form';
 import { useSelector } from 'react-redux';
+import { useForm } from 'react-hook-form';
 
 import Card from '../../ui/Card';
-
-import { renderInputField } from '../../../helpers/form';
-
 import Info from './Info';
-import { FORM_NAME } from '../../../helpers/constants';
+
 import { RootState } from '../../../initialState';
 
-interface CheckProps {
+interface FormValues {
-    handleSubmit: (...args: unknown[]) => string;
+    name: string;
-    pristine: boolean;
-    invalid: boolean;
 }
 
-const Check = (props: CheckProps) => {
+type Props = {
-    const { pristine, invalid, handleSubmit } = props;
+    onSubmit?: (data: FormValues) => void;
+}
 
+const Check = ({ onSubmit }: Props) => {
     const { t } = useTranslation();
 
     const processingCheck = useSelector((state: RootState) => state.filtering.processingCheck);
-
     const hostname = useSelector((state: RootState) => state.filtering.check.hostname);
 
+    const {
+        register,
+        handleSubmit,
+        formState: { isDirty, isValid },
+    } = useForm<FormValues>({
+        mode: 'onChange',
+        defaultValues: {
+            name: '',
+        },
+    });
+
     return (
         <Card title={t('check_title')} subtitle={t('check_desc')}>
-            <form onSubmit={handleSubmit}>
+            <form onSubmit={handleSubmit(onSubmit)}>
                 <div className="row">
                     <div className="col-12 col-md-6">
                         <div className="input-group">
-                            <Field
+                            <input
                                 id="name"
-                                name="name"
-                                component={renderInputField}
                                 type="text"
                                 className="form-control"
-                                placeholder={t('form_enter_host')}
+                                placeholder={t('form_enter_host') ?? ''}
+                                {...register('name', { required: true })}
                             />
-
                             <span className="input-group-append">
                                 <button
                                     className="btn btn-success btn-standard btn-large"
                                     type="submit"
-                                    onClick={handleSubmit}
+                                    disabled={!isDirty || !isValid || processingCheck}
-                                    disabled={pristine || invalid || processingCheck}>
+                                >
                                     {t('check')}
                                 </button>
                             </span>
@@ -56,7 +60,6 @@ const Check = (props: CheckProps) => {
                         {hostname && (
                             <>
                                 <hr />
-
                                 <Info />
                             </>
                         )}
@@ -67,4 +70,4 @@ const Check = (props: CheckProps) => {
     );
 };
 
-export default reduxForm({ form: FORM_NAME.DOMAIN_CHECK })(Check);
+export default Check;