Redux form framework

redux-form-framework.ts

import * as React from 'react';
/* imports ... */
import { pick } from 'lodash';

class Form extends ModuleForm {
    fields: FieldsDefinitions = {
        id: 'none',
        email: 'none',
        picture_path: {
            type: 'image', transformations: 'h_200,w_200,r_max,c_fill'
        },
        first_name: 'string*',
        last_name: 'string*',
        username: 'string*',
        job_title: 'string',
        company_name: 'string',
        language: {
            type: 'select*',
            component: LanguageSelectView,
            valueProperty: 'code',
            values: supportedLanguages,
            moduleName: 'attachment' // TODO: fix.
        }
    };

    constructor() {
        super('UserForm', 'user');
    }
}

const ConnectedForm = ConnectedFieldForm<User>(Form);

interface WrappedFormState {
    user?: loadUserQuery['user'];
}
export default class WrappedForm extends React.Component<WrappedFormProps, WrappedFormState> {

    state: WrappedFormState = {};

    onFormSubmit = async (values: { [k: string]: string }) => {
        const entityWithParams = Object.assign({}, values, this.props.args);
        const reloadNeeded = this.state.user!.language !== values.language;
        await client.mutate<updateUserMutation>({
            mutation: updateUserMutationDocument,
            variables: {
                id: values.id,
                user: {
                    ...pick(
                        entityWithParams,
                        ['email', 'picture_path', 'first_name', 'last_name',
                            'username', 'job_title', 'company_name', 'language']
                    )
                }
            }
        });
        reduxStore.dispatch(structureActions.closeForm());
        if (reloadNeeded && confirm(t('Forms.UserForm.LanguageChangedReload'))) {
            window.location.reload();
        }
    }

    onFormChange = () => {
        // noop
    }

    get apiParams() {
        return {
            ...this.props.args,
            ...{ space_id: this.props.space_id }
        };
    }

    async componentDidMount() {
        if (this.props.args.id && !this.state.user) {
            const result = client.readQuery<loadUserQuery>({
                query: loadUserQueryDocument,
                variables: { id: this.props.args.id }
            });
            this.setState({ user: result!.user });
        }
    }

    render() {
        if (!this.props.args.id || (this.props.args.id && this.state.user)) {
            return <ConnectedForm
                type={this.props.args.id ? 'update' : 'create'}
                onSubmit={this.onFormSubmit}
                onChange={this.onFormChange}
                entity={this.state.user}
                params={this.props.args}
                spaceId={this.props.space_id} />;
        } else {
            return <MiniLoader />;
        }
    }
}