logs config form

client/src/components/Settings/LogsConfig/Form.tsx

@@ -1,111 +1,135 @@
 import React, { useEffect } from 'react';
-import { change, Field, formValueSelector, reduxForm } from 'redux-form';
+import { Trans } from 'react-i18next';
-import { connect } from 'react-redux';
+import i18next from 'i18next';
-import { Trans, withTranslation } from 'react-i18next';
+import { useForm } from 'react-hook-form';
-import flow from 'lodash/flow';
-
-import {
-    CheckboxField,
-    toFloatNumber,
-    renderTextareaField,
-    renderInputField,
-    renderRadioField,
-} from '../../../helpers/form';
 
 import { trimLinesAndRemoveEmpty } from '../../../helpers/helpers';
 import {
-    FORM_NAME,
     QUERY_LOG_INTERVALS_DAYS,
     HOUR,
     DAY,
     RETENTION_CUSTOM,
-    RETENTION_CUSTOM_INPUT,
     RETENTION_RANGE,
-    CUSTOM_INTERVAL,
 } from '../../../helpers/constants';
 import '../FormButton.css';
 
-const getIntervalTitle = (interval: any, t: any) => {
+const getIntervalTitle = (interval: number) => {
     switch (interval) {
         case RETENTION_CUSTOM:
-            return t('settings_custom');
+            return i18next.t('settings_custom');
         case 6 * HOUR:
-            return t('interval_6_hour');
+            return i18next.t('interval_6_hour');
         case DAY:
-            return t('interval_24_hour');
+            return i18next.t('interval_24_hour');
         default:
-            return t('interval_days', { count: interval / DAY });
+            return i18next.t('interval_days', { count: interval / DAY });
     }
 };
 
-const getIntervalFields = (processing: any, t: any, toNumber: any) =>
+type FormValues = {
-    QUERY_LOG_INTERVALS_DAYS.map((interval) => (
+    enabled: boolean;
-        <Field
+    anonymize_client_ip: boolean;
-            key={interval}
+    interval: number;
-            name="interval"
+    customInterval?: number | null;
-            type="radio"
+    ignored: string;
-            component={renderRadioField}
-            value={interval}
-            placeholder={getIntervalTitle(interval, t)}
-            normalize={toNumber}
-            disabled={processing}
-        />
-    ));
-
-interface FormProps {
-    handleSubmit: (...args: unknown[]) => string;
-    handleClear: (...args: unknown[]) => unknown;
-    submitting: boolean;
-    invalid: boolean;
-    processing: boolean;
-    processingClear: boolean;
-    t: (...args: unknown[]) => string;
-    interval?: number;
-    customInterval?: number;
-    dispatch: (...args: unknown[]) => unknown;
 }
 
-let Form = (props: FormProps) => {
+type Props = {
+    initialValues: Partial<FormValues>;
+    onSubmit: (values: FormValues) => void;
+    handleClear: () => void;
+    processing: boolean;
+    processingClear: boolean;
+}
+
+export const LogsConfigForm = ({
+    initialValues,
+    onSubmit,
+    processing,
+    processingClear,
+    handleClear,
+}: Props) => {
     const {
+        register,
         handleSubmit,
-        submitting,
+        watch,
-        invalid,
+        setValue,
-        processing,
+        formState: { isSubmitting },
-        processingClear,
+      } = useForm<FormValues>({
-        handleClear,
+        mode: 'onChange',
-        t,
+        defaultValues: {
-        interval,
+          enabled: initialValues.enabled || false,
-        customInterval,
+          anonymize_client_ip: initialValues.anonymize_client_ip || false,
-        dispatch,
+          interval: initialValues.interval || DAY,
-    } = props;
+          customInterval: initialValues.customInterval || null,
+          ignored: initialValues.ignored ?? '',
+        },
+    });
+
+    const intervalValue = watch('interval');
+    const customIntervalValue = watch('customInterval');
 
     useEffect(() => {
-        if (QUERY_LOG_INTERVALS_DAYS.includes(interval)) {
+        if (QUERY_LOG_INTERVALS_DAYS.includes(intervalValue)) {
-            dispatch(change(FORM_NAME.LOG_CONFIG, CUSTOM_INTERVAL, null));
+            setValue('customInterval', null);
         }
-    }, [interval]);
+    }, [intervalValue]);
+
+    const onSubmitForm = (data: FormValues) => {
+        onSubmit(data);
+    };
+
+    const handleIgnoredBlur = (e: React.FocusEvent<HTMLTextAreaElement>) => {
+        const trimmed = trimLinesAndRemoveEmpty(e.target.value);
+        setValue('ignored', trimmed);
+    };
+
+    const disableSubmit =
+        isSubmitting ||
+        processing ||
+        (intervalValue === RETENTION_CUSTOM && !customIntervalValue);
+
+    console.log(intervalValue, RETENTION_CUSTOM, customIntervalValue);
 
     return (
-        <form onSubmit={handleSubmit}>
+        <form onSubmit={handleSubmit(onSubmitForm)}>
             <div className="form__group form__group--settings">
-                <Field
+                <label className="checkbox">
-                    name="enabled"
+                    <span className="checkbox__marker" />
-                    type="checkbox"
+
-                    component={CheckboxField}
+                    <input
-                    placeholder={t('query_log_enable')}
+                        type="checkbox"
-                    disabled={processing}
+                        className="checkbox__input"
-                />
+                        {...register('enabled')}
+                        disabled={processing}
+                    />
+
+                    <span className="checkbox__label">
+                        <span className="checkbox__label-text checkbox__label-text--long">
+                            <span className="checkbox__label-title">{i18next.t('query_log_enable')}</span>
+                        </span>
+                    </span>
+                </label>
             </div>
 
             <div className="form__group form__group--settings">
-                <Field
+                <label className="checkbox">
-                    name="anonymize_client_ip"
+                    <span className="checkbox__marker" />
-                    type="checkbox"
+
-                    component={CheckboxField}
+                    <input
-                    placeholder={t('anonymize_client_ip')}
+                        type="checkbox"
-                    subtitle={t('anonymize_client_ip_desc')}
+                        className="checkbox__input"
-                    disabled={processing}
+                        {...register('anonymize_client_ip')}
-                />
+                        disabled={processing}
+                    />
+
+                    <span className="checkbox__label">
+                        <span className="checkbox__label-text checkbox__label-text--long">
+                            <span className="checkbox__label-title">{i18next.t('anonymize_client_ip')}</span>
+                            <span className="checkbox__label-subtitle">{i18next.t('anonymize_client_ip_desc')}</span>
+                        </span>
+                    </span>
+                </label>
             </div>
 
             <label className="form__label">
@@ -114,34 +138,55 @@ let Form = (props: FormProps) => {
 
             <div className="form__group form__group--settings">
                 <div className="custom-controls-stacked">
-                    <Field
+                    <label className="custom-control custom-radio">
-                        key={RETENTION_CUSTOM}
+                        <input
-                        name="interval"
+                            type="radio"
-                        type="radio"
+                            className="custom-control-input"
-                        component={renderRadioField}
+                            disabled={processing}
-                        value={QUERY_LOG_INTERVALS_DAYS.includes(interval) ? RETENTION_CUSTOM : interval}
+                            value={RETENTION_CUSTOM}
-                        placeholder={getIntervalTitle(RETENTION_CUSTOM, t)}
+                            checked={!QUERY_LOG_INTERVALS_DAYS.includes(intervalValue)}
-                        normalize={toFloatNumber}
+                            onChange={(e) => {
-                        disabled={processing}
+                                setValue('interval', parseInt(e.target.value, 10));
-                    />
+                            }}
-                    {!QUERY_LOG_INTERVALS_DAYS.includes(interval) && (
+                        />
-                        <div className="form__group--input">
-                            <div className="form__desc form__desc--top">{t('custom_rotation_input')}</div>
 
-                            <Field
+                        <span className="custom-control-label">{getIntervalTitle(RETENTION_CUSTOM)}</span>
-                                key={RETENTION_CUSTOM_INPUT}
+                    </label>
-                                name={CUSTOM_INTERVAL}
+
+                    {!QUERY_LOG_INTERVALS_DAYS.includes(intervalValue) && (
+                        <div className="form__group--input">
+                            <div className="form__desc form__desc--top">{i18next.t('custom_rotation_input')}</div>
+
+                            <input
                                 type="number"
                                 className="form-control"
-                                component={renderInputField}
-                                disabled={processing}
-                                normalize={toFloatNumber}
                                 min={RETENTION_RANGE.MIN}
                                 max={RETENTION_RANGE.MAX}
+                                disabled={processing}
+                                {...register('customInterval')}
+                                onChange={(e) => {
+                                    setValue('customInterval', parseInt(e.target.value, 10));
+                                }}
                             />
                         </div>
                     )}
-                    {getIntervalFields(processing, t, toFloatNumber)}
+
+                    {QUERY_LOG_INTERVALS_DAYS.map((interval) => (
+                        <label key={interval} className="custom-control custom-radio">
+                            <input
+                                type="radio"
+                                className="custom-control-input"
+                                disabled={processing}
+                                value={interval}
+                                checked={intervalValue === interval}
+                                onChange={(e) => {
+                                    setValue("interval", parseInt(e.target.value, 10));
+                                }}
+                            />
+
+                            <span className="custom-control-label">{getIntervalTitle(interval)}</span>
+                        </label>
+                    ))}
                 </div>
             </div>
 
@@ -154,14 +199,12 @@ let Form = (props: FormProps) => {
             </div>
 
             <div className="form__group form__group--settings">
-                <Field
+                <textarea
-                    name="ignored"
-                    type="textarea"
                     className="form-control form-control--textarea font-monospace text-input"
-                    component={renderTextareaField}
+                    placeholder={i18next.t('ignore_domains')}
-                    placeholder={t('ignore_domains')}
                     disabled={processing}
-                    normalizeOnBlur={trimLinesAndRemoveEmpty}
+                    {...register('ignored')}
+                    onBlur={handleIgnoredBlur}
                 />
             </div>
 
@@ -169,36 +212,20 @@ let Form = (props: FormProps) => {
                 <button
                     type="submit"
                     className="btn btn-success btn-standard btn-large"
-                    disabled={
+                    disabled={disableSubmit}
-                        submitting ||
+                >
-                        invalid ||
-                        processing ||
-                        (!QUERY_LOG_INTERVALS_DAYS.includes(interval) && !customInterval)
-                    }>
                     <Trans>save_btn</Trans>
                 </button>
 
                 <button
                     type="button"
                     className="btn btn-outline-secondary btn-standard form__button"
-                    onClick={() => handleClear()}
+                    onClick={handleClear}
-                    disabled={processingClear}>
+                    disabled={processingClear}
+                >
                     <Trans>query_log_clear</Trans>
                 </button>
             </div>
         </form>
     );
 };
-
-const selector = formValueSelector(FORM_NAME.LOG_CONFIG);
-
-Form = connect((state) => {
-    const interval = selector(state, 'interval');
-    const customInterval = selector(state, CUSTOM_INTERVAL);
-    return {
-        interval,
-        customInterval,
-    };
-})(Form);
-
-export default flow([withTranslation(), reduxForm({ form: FORM_NAME.LOG_CONFIG })])(Form);

client/src/components/Settings/LogsConfig/index.tsx

@@ -3,7 +3,7 @@ import { withTranslation } from 'react-i18next';
 
 import Card from '../../ui/Card';
 
-import Form from './Form';
+import { LogsConfigForm } from './Form';
 import { HOUR } from '../../../helpers/constants';
 
 interface LogsConfigProps {
@@ -53,26 +53,19 @@ class LogsConfig extends Component<LogsConfigProps> {
     render() {
         const {
             t,
-
             enabled,
-
             interval,
-
             processing,
-
             processingClear,
-
             anonymize_client_ip,
-
             ignored,
-
             customInterval,
         } = this.props;
 
         return (
             <Card title={t('query_log_configuration')} bodyType="card-body box-body--settings" id="logs-config">
                 <div className="form">
-                    <Form
+                    <LogsConfigForm
                         initialValues={{
                             enabled,
                             interval,