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;
+};