diff --git a/src/containers/EditListingForm/EditListingForm.css b/src/containers/EditListingForm/EditListingForm.css
new file mode 100644
index 00000000..ee7dba23
--- /dev/null
+++ b/src/containers/EditListingForm/EditListingForm.css
@@ -0,0 +1,3 @@
+.error {
+ color: red;
+}
diff --git a/src/containers/EditListingForm/EditListingForm.js b/src/containers/EditListingForm/EditListingForm.js
index 169c3f79..16c84f3a 100644
--- a/src/containers/EditListingForm/EditListingForm.js
+++ b/src/containers/EditListingForm/EditListingForm.js
@@ -2,9 +2,36 @@ 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';
+import css from './EditListingForm.css';
const MAX_LENGTH = 60;
-const maxLength60 = maxLength(`Must be ${MAX_LENGTH} characters or less`, MAX_LENGTH);
+
+const RenderField = ({ input, label, type, meta: { touched, error } }) => {
+ const component = type === 'textarea'
+ ?
+ : ;
+ return (
+
+
+
+ {component}
+ {touched && (error && {error})}
+
+
+ )
+};
+
+const { any, bool, shape, string } = PropTypes;
+
+RenderField.propTypes = {
+ input: any.isRequired,
+ label: string.isRequired,
+ type: string.isRequired,
+ meta: shape({
+ touched: bool,
+ error: string,
+ }).isRequired,
+};
class EditListingForm extends Component {
componentDidMount() {
@@ -20,21 +47,34 @@ class EditListingForm extends Component {
const {
disabled,
handleSubmit,
+ intl,
pristine,
saveActionMsg = 'Save listing',
submitting,
} = this.props;
+ const requiredStr = intl.formatMessage({ id: 'EditListingForm.required' });
+ const maxLengthStr = intl.formatMessage({ id: 'EditListingForm.maxLength' }, {
+ maxLength: MAX_LENGTH,
+ });
+ const maxLength60 = maxLength(maxLengthStr, MAX_LENGTH);
+
return (
);
@@ -43,8 +83,6 @@ class EditListingForm extends Component {
EditListingForm.defaultProps = { initData: {} };
-const { shape, string } = PropTypes;
-
EditListingForm.propTypes = {
...formPropTypes,
initData: shape({ title: string, description: string }),
diff --git a/src/containers/EditListingForm/__snapshots__/EditListingForm.test.js.snap b/src/containers/EditListingForm/__snapshots__/EditListingForm.test.js.snap
index d2bb4a2c..12a9a802 100644
--- a/src/containers/EditListingForm/__snapshots__/EditListingForm.test.js.snap
+++ b/src/containers/EditListingForm/__snapshots__/EditListingForm.test.js.snap
@@ -1,32 +1,41 @@
exports[`EditListingForm matches snapshot 1`] = `