EditListingForm

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

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 (
+      <form onSubmit={handleSubmit}>
+        <label htmlFor="title">Title</label>
+        <Field
+          name="title"
+          component="input"
+          type="text"
+          validate={[required('Required'), maxLength60]}
+        />
+        <label htmlFor="description">Description</label>
+        <Field name="description" component="input" type="textarea" />
+        <button type="submit" disabled={pristine || submitting || disabled}>{saveActionMsg}</button>
+      </form>
+    );
+  }
+}
+
+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));

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(<EditListingForm />);
+    expect(tree).toMatchSnapshot();
+  });
+});

src/containers/EditListingForm/__snapshots__/EditListingForm.test.js.snap

@@ -0,0 +1,36 @@
+exports[`EditListingForm matches snapshot 1`] = `
+<form
+  onSubmit={[Function]}>
+  <label
+    htmlFor="title">
+    Title
+  </label>
+  <input
+    name="title"
+    onBlur={[Function]}
+    onChange={[Function]}
+    onDragStart={[Function]}
+    onDrop={[Function]}
+    onFocus={[Function]}
+    type="text"
+    value="" />
+  <label
+    htmlFor="description">
+    Description
+  </label>
+  <input
+    name="description"
+    onBlur={[Function]}
+    onChange={[Function]}
+    onDragStart={[Function]}
+    onDrop={[Function]}
+    onFocus={[Function]}
+    type="textarea"
+    value="" />
+  <button
+    disabled={true}
+    type="submit">
+    Save listing
+  </button>
+</form>
+`;

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,

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,

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