diff --git a/src/containers/EditListingForm/EditListingForm.example.js b/src/containers/EditListingForm/EditListingForm.example.js new file mode 100644 index 00000000..b6300b72 --- /dev/null +++ b/src/containers/EditListingForm/EditListingForm.example.js @@ -0,0 +1,11 @@ +/* eslint-disable no-console, import/prefer-default-export */ +import EditListingForm from './EditListingForm'; + +export const Empty = { + component: EditListingForm, + props: { + onSubmit(values) { + console.log('submit new password form values:', values); + }, + }, +}; diff --git a/src/containers/EditListingForm/EditListingForm.js b/src/containers/EditListingForm/EditListingForm.js new file mode 100644 index 00000000..169c3f79 --- /dev/null +++ b/src/containers/EditListingForm/EditListingForm.js @@ -0,0 +1,54 @@ +import React, { Component, PropTypes } from 'react'; +import { Field, reduxForm, propTypes as formPropTypes } from 'redux-form'; +import { intlShape, injectIntl } from 'react-intl'; +import { maxLength, required } from '../../util/validators'; + +const MAX_LENGTH = 60; +const maxLength60 = maxLength(`Must be ${MAX_LENGTH} characters or less`, MAX_LENGTH); + +class EditListingForm extends Component { + componentDidMount() { + this.handleInitialize(); + } + + handleInitialize() { + const { initData = {}, initialize } = this.props; + initialize(initData); + } + + render() { + const { + disabled, + handleSubmit, + pristine, + saveActionMsg = 'Save listing', + submitting, + } = this.props; + return ( +
+ + + + + + + ); + } +} + +EditListingForm.defaultProps = { initData: {} }; + +const { shape, string } = PropTypes; + +EditListingForm.propTypes = { + ...formPropTypes, + initData: shape({ title: string, description: string }), + intl: intlShape.isRequired, +}; + +export default reduxForm({ form: 'EditListingForm' })(injectIntl(EditListingForm)); diff --git a/src/containers/EditListingForm/EditListingForm.test.js b/src/containers/EditListingForm/EditListingForm.test.js new file mode 100644 index 00000000..18902da9 --- /dev/null +++ b/src/containers/EditListingForm/EditListingForm.test.js @@ -0,0 +1,10 @@ +import React from 'react'; +import { renderDeep } from '../../util/test-helpers'; +import EditListingForm from './EditListingForm'; + +describe('EditListingForm', () => { + it('matches snapshot', () => { + const tree = renderDeep(); + expect(tree).toMatchSnapshot(); + }); +}); diff --git a/src/containers/EditListingForm/__snapshots__/EditListingForm.test.js.snap b/src/containers/EditListingForm/__snapshots__/EditListingForm.test.js.snap new file mode 100644 index 00000000..d2bb4a2c --- /dev/null +++ b/src/containers/EditListingForm/__snapshots__/EditListingForm.test.js.snap @@ -0,0 +1,36 @@ +exports[`EditListingForm matches snapshot 1`] = ` +
+ + + + + +
+`; diff --git a/src/containers/index.js b/src/containers/index.js index 0942c704..0af79c0a 100644 --- a/src/containers/index.js +++ b/src/containers/index.js @@ -3,6 +3,7 @@ import ChangeAccountPasswordForm from './ChangeAccountPasswordForm/ChangeAccount import ChangePasswordForm from './ChangePasswordForm/ChangePasswordForm'; import CheckoutPage from './CheckoutPage/CheckoutPage'; import ContactDetailsPage from './ContactDetailsPage/ContactDetailsPage'; +import EditListingForm from './EditListingForm/EditListingForm'; import EditProfilePage from './EditProfilePage/EditProfilePage'; import HeroSearchForm from './HeroSearchForm/HeroSearchForm'; import InboxPage from './InboxPage/InboxPage'; @@ -30,6 +31,7 @@ export { ChangePasswordForm, CheckoutPage, ContactDetailsPage, + EditListingForm, EditProfilePage, HeroSearchForm, InboxPage, diff --git a/src/examples.js b/src/examples.js index b5af30d0..5966afe4 100644 --- a/src/examples.js +++ b/src/examples.js @@ -7,6 +7,7 @@ import * as NamedLink from './components/NamedLink/NamedLink.example'; import * as ChangeAccountPasswordForm from './containers/ChangeAccountPasswordForm/ChangeAccountPasswordForm.example'; import * as ChangePasswordForm from './containers/ChangePasswordForm/ChangePasswordForm.example'; +import * as EditListingForm from './containers/EditListingForm/EditListingForm.example'; import * as HeroSearchForm from './containers/HeroSearchForm/HeroSearchForm.example'; import * as LoginForm from './containers/LoginForm/LoginForm.example'; import * as PasswordForgottenForm @@ -17,6 +18,7 @@ export { BookingInfo, ChangeAccountPasswordForm, ChangePasswordForm, + EditListingForm, HeroSearchForm, ListingCard, LoginForm, diff --git a/src/util/validators.js b/src/util/validators.js new file mode 100644 index 00000000..bd0fd942 --- /dev/null +++ b/src/util/validators.js @@ -0,0 +1,14 @@ +/** + * Validator functions and helpers for Redux Forms + */ + +// Redux Form expects and undefined value for a successful validation +const VALID = undefined; + +export const required = message => value => { + return value ? VALID : message; +}; + +export const maxLength = (message, maximumLength) => value => { + return !value || value.length <= maximumLength ? VALID : message; +};