dispatch.diff

import * as React from 'react';

import axios from 'axios';
import { connect } from 'react-redux';
import { getFormSubmitErrors } from 'redux-form';
+ import { push } from 'react-router-redux';

import { globals, GridContainer } from '@shared/atoms';
import styled from '@shared/ui';
import { buildFormData } from '@shared/lib/formatters';
import { authHeader, urlPath } from '@shared/lib/http';
import { FlashMessageSuccess } from '@shared/molecules';

import { FlashMessageError } from '@shared/atoms';
import BrandForm from '@manager/forms/Brand';

interface IProps {
  className?: string;
  submitErrors?: any;
  formValues?: any;
+  goToBrands?: () => void;
}

interface ICreateBrandData {
  name: string;
  logo?: string;
}

interface IState {
  shouldRenderFailure: boolean;
  submitSucceeded: boolean;
  errors?: string;
}

const FormContainer = styled.div`
  height: 100%;

  ${globals.bpMedium} {
    height: auto;
  }
`;

class BrandCreateContainer extends React.Component<any, IState> {
  constructor(props: any) {
    super(props);
    this.state = {
      errors: '',
      shouldRenderFailure: false,
      submitSucceeded: false,
    };
  }

  private handleCreateBrand = (values: ICreateBrandData) => {
    const options = {
      headers: {
        ...authHeader(),
        'Content-Type': 'multipart/form-data',
      },
    };

    const data = buildFormData('brand', {
      ...values,
    });

    return axios
      .post(urlPath('/brands'), data, options)
      .then((response: any) => {
        const redirect = () => {
-         const redirectUrl = `/brands`;
-         window.location.href = redirectUrl;
+         this.props.goToBrands();
        };
        setTimeout(redirect, 3000);
        this.setState({ submitSucceeded: true });
      })
      .catch((err: any) => {
        this.setState({ shouldRenderFailure: true });
        if (!err.response.data.logo) {
          this.setState({ errors: err.response.data.name.toLocaleString() });
        } else {
          this.setState({ errors: err.response.data.logo });
        }
      });
  };

  public render() {
    if (this.state.submitSucceeded) {
      return <FlashMessageSuccess text="Brand Created!" />;
    }

    return (
      <FormContainer className={this.props.className}>
        <GridContainer>
          <h1 className="form-title">Create Brand</h1>
          {this.state.shouldRenderFailure ? (
            <FlashMessageError text={this.state.errors} />
          ) : null}
          <div>
            <BrandForm onSubmit={this.handleCreateBrand} />
          </div>
        </GridContainer>
      </FormContainer>
    );
  }
}

const StyledBrandCreateContainer = styled(BrandCreateContainer)`
  .active {
    font-size: 1.5rem;
  }

  .form-title {
    text-align: center;
    margin: 2.5rem 0;
  }
`;

+const mapStateToProps = (state) => ({
+  submitErrors: getFormSubmitErrors('createBrand')(state),
+});
+const mapDispatchToProps = (dispatch) => ({
+  goToBrands: () => dispatch(push('/brands')),
+})
+export default connect<IProps>(
+  mapStateToProps, 
+  mapDispatchToProps,
+)(StyledBrandCreateContainer) as any;
-export default connect<IProps>((state) => ({
-  submitErrors: getFormSubmitErrors('createBrand')(state),
-}))(StyledBrandCreateContainer) as any;