withForm.js

import React, { useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { updateField } from '@/redux/form.slice';


const withForm = (WrappedComponent) => {
    const FormComponent = (props) => {
        const dispatch = useDispatch();
        const formFields = useSelector((state) => state.form.fields);
        const [fields, setFields] = useState(formFields);

        const handleFieldChange = (fieldId, value) => {
            const updatedFields = fields.map((field) => {
                if (field.id === fieldId) {
                    return { ...field, value };
                }
                return field;
            });
            setFields(updatedFields);
            dispatch(updateField({ fieldId, value }));
        };

        return (
            <WrappedComponent
                {...props}
                fields={fields}
                setFields={setFields}
                handleFieldChange={handleFieldChange}
            />
        );
    };

    return FormComponent;
};

export default withForm;