enhancer.js

import { reduxForm } from 'redux-form';
import { connect } from 'react-redux';
import {
  compose,
  withState,
  withHandlers,
  lifecycle,
  setStatic,
} from 'recompose';
import validate from 'Components/Generics/Forms/validate';
import { loadCompany, saveCompany } from './redux/actions';

const requiredFields = {
  company_name: 'Company Name',
  website: 'Website',
};

const mapStateToProps = (state) => {
  const { company } = state.profile.companyReducer;
  return {
    getCompany: state.profile.companyReducer,
    initialValues: company.records,
  };
};

const mapDispatchToProps = dispatch => ({
  loadCompany: () => dispatch(loadCompany()),
  saveCompany: companyData => dispatch(saveCompany(companyData)),
});

const withConnect = connect(
  mapStateToProps,
  mapDispatchToProps,
);

const withReduxForm = reduxForm({
  form: 'companyForm',
  fields: requiredFields,
  validate,
  // initialValues: {
  //   company_name: 'company',
  // },
  destroyOnUnmount: false,
  enableReinitialize: true,
  keepDirtyOnReinitialize: true,
});

const initialState = {
  company_name: 'hello',
  website: '',
  industry: '',
  number_of_employees: '',
  phone_number: '',
  founded: '',
  address: '',
  city: '',
  state: '',
  zip_code: '',
  country: '',
  wiki: '',
  headquarter: '',
  speciality: '',
  type: '',
};

const enhance = compose(
  withReduxForm,
  withConnect,
  withState('company', 'updateCompany', initialState),
  withHandlers({
    handleChange: props => ({ target: { name, value } }) => {
      props.updateCompany({ ...props.company, [name]: value });
    },
    handleSubmit: props => (event) => {
      event.preventDefault();
      props.saveCompany(props.company);
    },
  }),
  setStatic('getDerivedStateFromProps', (nextProps) => {
    const { company } = nextProps.getCompany;
    if (company && company.records !== undefined) {
      return {
        company: company.records,
      };
    }
    return null;
  }),
  lifecycle({
    componentDidMount() {
      this.props.loadCompany();
    },
  }),
);

export default enhance;

index.js

import React from 'react';
import { Field } from 'redux-form';
import { PrimaryButton, TransparentButton } from 'Components/Generics/Buttons';
import { GTextField } from 'Components/Generics/Forms';
import FormHeadline from '../Generics/FormHeadline';
import {
  Wrapper,
  GridContainer,
  FormWrapper,
  InlineForm,
  ButtonGrid,
  StyledForm,
} from '../Generics/FormStyle';
import enhance from './enhancer';

const Company = ({
  company,
  handleChange,
  handleSubmit,
  ...props
}: {
  company: Object,
  handleChange: Function,
  handleSubmit: Function
}) => {
  console.log('props', props);
  return (
    <React.Fragment>
      <FormHeadline headline="Company" weight="400" />
      <Wrapper>
        <GridContainer container spacing={24}>
          <StyledForm autoComplete="off" onSubmit={handleSubmit}>
            <FormWrapper>
              {/* <input
                name="company_name"
                id="company_name"
                type="text"
                label="Company Name"
                className="input-field"
                value={company.company_name}
                onChange={handleChange}
              /> */}
              <Field
                id="company_name"
                name="company_name"
                type="text"
                label="Company Name"
                className="input-field"
                onChange={handleChange}
                component={GTextField}
                required
                margin="normal"
              />
              <Field
                id="website"
                name="website"
                type="text"
                label="Website"
                placeholder="Website"
                className="input-field"
                value={company.website}
                onChange={handleChange}
                component={GTextField}
                required
                margin="normal"
              />
              <InlineForm>
                <Field
                  id="industry"
                  name="industry"
                  type="text"
                  label="Industry"
                  className="input-field"
                  value={company.industry}
                  onChange={handleChange}
                  component={GTextField}
                  margin="normal"
                />
                <Field
                  id="number_of_employee"
                  name="number_of_employee"
                  type="text"
                  label="No. of Employees"
                  className="input-field"
                  value={company.number_of_employees}
                  onChange={handleChange}
                  component={GTextField}
                  margin="normal"
                />
              </InlineForm>
              <InlineForm>
                <Field
                  id="phone_number"
                  name="phone_number"
                  type="text"
                  label="Phone Number"
                  placeholder="Phone Number"
                  className="input-field"
                  value={company.phone_number}
                  onChange={handleChange}
                  component={GTextField}
                  margin="normal"
                />
                <Field
                  id="founded"
                  name="founded"
                  type="text"
                  label="Founded"
                  placeholder="Founded"
                  className="input-field"
                  value={company.founded}
                  onChange={handleChange}
                  component={GTextField}
                  margin="normal"
                />
              </InlineForm>
              <Field
                id="address"
                name="address"
                type="text"
                label="Address"
                placeholder="Address"
                className="input-field"
                value={company.address}
                onChange={handleChange}
                component={GTextField}
                margin="normal"
              />
              <InlineForm>
                <Field
                  id="state"
                  name="state"
                  type="text"
                  label="State"
                  placeholder="State"
                  className="input-field"
                  value={company.state}
                  onChange={handleChange}
                  component={GTextField}
                  margin="normal"
                />
                <Field
                  id="city"
                  name="city"
                  type="text"
                  label="City"
                  placeholder="City"
                  className="input-field"
                  value={company.city}
                  onChange={handleChange}
                  component={GTextField}
                  margin="normal"
                />
              </InlineForm>
              <InlineForm>
                <Field
                  id="zip"
                  name="zip"
                  type="text"
                  label="Zip Code"
                  placeholder="Zip Code"
                  className="input-field"
                  value={company.zip_code}
                  onChange={handleChange}
                  component={GTextField}
                  margin="normal"
                />
                <Field
                  id="country"
                  name="country"
                  type="text"
                  label="Country"
                  placeholder="Country"
                  className="input-field"
                  value={company.country}
                  onChange={handleChange}
                  component={GTextField}
                  margin="normal"
                />
              </InlineForm>
              <InlineForm>
                <Field
                  id="wiki"
                  name="wiki"
                  type="text"
                  label="Wiki"
                  placeholder="Wiki"
                  className="input-field"
                  value={company.wiki}
                  onChange={handleChange}
                  component={GTextField}
                  margin="normal"
                />
                <Field
                  id="headquarter"
                  name="headquarter"
                  type="text"
                  label="Headquarter"
                  placeholder="Headquarter"
                  className="input-field"
                  value={company.headquarter}
                  onChange={handleChange}
                  component={GTextField}
                  margin="normal"
                />
              </InlineForm>
              <InlineForm>
                <Field
                  id="speciality"
                  name="speciality"
                  type="text"
                  label="Speciality"
                  placeholder="Speciality"
                  className="input-field"
                  value={company.speciality}
                  onChange={handleChange}
                  component={GTextField}
                  margin="normal"
                />
                <Field
                  id="type"
                  name="type"
                  type="text"
                  label="Type"
                  placeholder="Type"
                  className="input-field"
                  value={company.type}
                  onChange={handleChange}
                  component={GTextField}
                  margin="normal"
                />
              </InlineForm>
              <ButtonGrid>
                <PrimaryButton variant="raised" marginRight radius="2px">
                  Save
                </PrimaryButton>
                <TransparentButton variant="raised" radius="2px">
                  Cancel
                </TransparentButton>
              </ButtonGrid>
            </FormWrapper>
          </StyledForm>
        </GridContainer>
      </Wrapper>
    </React.Fragment>
  );
};

export default enhance(Company);