Merge pull request #9 from tb/parts

tb · web-flow · commit c8b85f253711 · 2017-05-05T00:05:52.000+02:00
Split post body into parts to test advanced nested form
diff --git a/app/models/post.rb b/app/models/post.rb
@@ -3,7 +3,6 @@ class Post < ApplicationRecord
   has_many :comments, dependent: :destroy
 
   validates :title, presence: true, uniqueness: true
-  validates :body, presence: true
 
   scope :title_contains, -> (value) { where('title ILIKE ?', "%#{value.join}%") }
 end
diff --git a/app/resources/post_resource.rb b/app/resources/post_resource.rb
@@ -1,7 +1,7 @@
 class PostResource < JSONAPI::Resource
   extend CustomFilter
 
-  attributes :title, :body, :created_at
+  attributes :title, :created_at, :parts
 
   has_many :comments
   has_one :category
diff --git a/client/src/api/client.js b/client/src/api/client.js
@@ -4,10 +4,11 @@ import {
   castArray,
   get,
   groupBy,
-  values,
   keys,
-  zipObject,
   pick,
+  set,
+  values,
+  zipObject,
 } from 'lodash';
 
 import { denormalize, normalize } from './normalize';
@@ -75,15 +76,16 @@ const normalizeResponse = (response) => {
 const normalizeErrors = (response) => {
   throw get(response, 'response.data.errors')
     .reduce((errors, error) => {
-      const attribute = /attributes\/(.*)$/.exec(get(error, 'source.pointer'))[1];
-      errors[attribute] = error.title;
+      const attribute = /\/data\/[a-z]*\/(.*)$/.exec(get(error, 'source.pointer'))[1];
+      set(errors, attribute.split('/'), error.title);
       return errors;
     }, {});
 };
 
 export default (requestType, payload, meta) => {
   const {
     url = `${meta.key}`,
+    include,
   } = meta;
 
   const params = payload;
@@ -104,13 +106,13 @@ export default (requestType, payload, meta) => {
       }).then(normalizeResponse).then(res => ({ ...res, params }));
     case CREATE:
       return client({
-        url: withParams(url),
+        url: withParams(url, { include }),
         method: 'POST',
         data: denormalize(meta.key, payload),
       }).then(normalizeResponse).catch(normalizeErrors);
     case UPDATE: {
       return client({
-        url: withParams(`${url}/${payload.id}`),
+        url: withParams(`${url}/${payload.id}`, { include }),
         method: 'PUT',
         data: denormalize(meta.key, payload),
       }).then(normalizeResponse).catch(normalizeErrors);
diff --git a/client/src/api/normalize.js b/client/src/api/normalize.js
@@ -21,6 +21,7 @@ const serializers = {
         'title',
         'body',
         'category',
+        'parts',
       ],
       category: {
         ref: 'id',
diff --git a/client/src/components/Posts/PostForm.js b/client/src/components/Posts/PostForm.js
@@ -1,13 +1,65 @@
 import React, { Component, PropTypes } from 'react';
 import { isEmpty } from 'lodash';
-import { Field, reduxForm } from 'redux-form';
-import { Button, Form } from 'reactstrap';
+import { connect } from 'react-redux';
+import { Field, FieldArray, formValueSelector, reduxForm } from 'redux-form';
+import { Button, Form, FormFeedback, Col, Row } from 'reactstrap';
 
 import { InputField, TextArea, SelectField, required } from '../../forms';
 
-class PostForm extends Component {
+export const PostFormPart = ({values, part}) => {
+  switch(values.type) {
+    case 'image':
+      return (
+        <div>
+          <img src={values.imageUrl} />
+          <div>{values.description}</div>
+          <Field
+            name={`${part}.imageUrl`}
+            placeholder={'Image url...'}
+            component={InputField}
+          />          <Field
+          name={`${part}.description`}
+          placeholder={'Image description...'}
+          component={InputField}
+        />
+        </div>
+      );
+    case 'text':
+      return (
+        <Field
+          name={`${part}.text`}
+          placeholder={'Text...'}
+          rows={5}
+          component={TextArea}
+        />
+      );
+  };
+};
+
+export const PostFormParts = ({ parts, fields, meta: { error } }) => (
+  <div className="my-3">
+    {fields.map((part, index) =>
+      <div>
+        <hr />
+        <Row key={index}>
+          <Col xs="10">
+            <PostFormPart values={parts[index]} part={part} />
+          </Col>
+          <Col xs="2">
+            <Button color="danger" onClick={() => fields.remove(index)}>X</Button>
+          </Col>
+        </Row>
+      </div>
+    )}
+    {error && <FormFeedback>{error}</FormFeedback>}
+    <Button onClick={() => fields.push({ type: 'text' })} className="mr-2">Add Text</Button>
+    <Button onClick={() => fields.push({ type: 'image' })}>Add Image</Button>
+  </div>
+);
+
+export class PostForm extends Component {
   render() {
-    const { categories, handleSubmit, pristine, reset, submitting } = this.props;
+    const { parts, categories, handleSubmit, pristine, reset, submitting } = this.props;
 
     const categoriesOptions = [{
       id: '',
@@ -18,7 +70,7 @@ class PostForm extends Component {
     })));
 
     return (
-      <Form onSubmit={handleSubmit}>
+      <Form onSubmit={handleSubmit} className="py-3">
         <Field
           name="title"
           label="Title"
@@ -30,13 +82,12 @@ class PostForm extends Component {
           component={SelectField}
           options={categoriesOptions}
         />
-        <Field
-          name="body"
-          label="Body"
-          component={TextArea}
-          rows="10"
+        <FieldArray
+          name="parts"
+          parts={parts}
+          component={PostFormParts}
         />
-        <Button disabled={pristine || submitting} color="primary">Submit</Button>
+        <Button disabled={pristine || submitting} color="primary" className="mr-2">Submit</Button>
         <Button disabled={pristine || submitting} onClick={reset}>Undo Changes</Button>
       </Form>
     );
@@ -47,13 +98,20 @@ const validate = (values) => {
   const errors = required(values,
     'title',
     'category.id',
-    'body',
   );
   return errors;
 };
 
+const selector = formValueSelector('post');
+
+export const mapStateToProps = (state) => ({
+  parts: selector(state, 'parts'),
+});
+
 export default reduxForm({
   enableReinitialize: true,
   form: 'post',
   validate,
-})(PostForm);
+})(
+  connect(mapStateToProps)(PostForm)
+);
diff --git a/client/src/forms/fields/InputField.js b/client/src/forms/fields/InputField.js
@@ -7,13 +7,13 @@ class InputField extends Component {
   };
 
   render() {
-    const { input, type, label, meta: { touched, error } } = this.props;
+    const { input, type, label, placeholder, meta: { touched, error } } = this.props;
     const showError = touched && error;
 
     return (
       <FormGroup color={showError ? 'danger' : ''}>
         {label && <Label>{label}</Label>}
-        <Input {...input} type={type} />
+        <Input {...input} type={type} placeholder={placeholder} />
         {showError && <FormFeedback>{error}</FormFeedback>}
       </FormGroup>
     );
diff --git a/client/src/forms/fields/TextArea.js b/client/src/forms/fields/TextArea.js
@@ -7,13 +7,13 @@ class TextArea extends Component {
   };
 
   render() {
-    const { input, type, label, rows, meta: { touched, error } } = this.props;
+    const { input, type, label, rows, placeholder, meta: { touched, error } } = this.props;
     const showError = touched && error;
 
     return (
       <FormGroup color={showError ? 'danger' : ''}>
         {label && <Label>{label}</Label>}
-        <Input {...input} type={type} rows={rows} />
+        <Input {...input} type={type} placeholder={placeholder} rows={rows} />
         {showError && <FormFeedback>{error}</FormFeedback>}
       </FormGroup>
     );
diff --git a/client/src/hocs/withResource.js b/client/src/hocs/withResource.js
@@ -16,11 +16,11 @@ import {
 const withResource = resourceKey => (WrappedComponent) => {
   const enhance = compose(
     withHandlers({
-      onSubmit: props => (values) => {
+      onSubmit: props => (values, meta = {}) => {
         const { params, createResource, updateResource, redirectToIndex } = props;
         const payload = { id: params.id, ...values };
-        return (params.id ? updateResource : createResource)(payload)
-          .then(redirectToIndex)
+        return (params.id ? updateResource : createResource)(payload, meta)
+          // .then(redirectToIndex)
           .catch((errors) => { throw new SubmissionError(errors); });
       },
       onDelete: props => (e) => {
@@ -37,10 +37,10 @@ const withResource = resourceKey => (WrappedComponent) => {
   });
 
   const mapDispatchToProps = dispatch => ({
-    fetchResource: payload => dispatch(fetchOne(resourceKey, payload)),
-    createResource: payload => dispatch(createResource(resourceKey, payload)),
-    updateResource: payload => dispatch(updateResource(resourceKey, payload)),
-    deleteResource: payload => dispatch(deleteResource(resourceKey, payload)),
+    fetchResource: (payload, meta) => dispatch(fetchOne(resourceKey, payload, meta)),
+    createResource: (payload, meta) => dispatch(createResource(resourceKey, payload, meta)),
+    updateResource: (payload, meta) => dispatch(updateResource(resourceKey, payload, meta)),
+    deleteResource: (payload, meta) => dispatch(deleteResource(resourceKey, payload, meta)),
   });
 
   return connect(mapStateToProps, mapDispatchToProps)(enhance(WrappedComponent));
diff --git a/client/src/hocs/withResourceList.js b/client/src/hocs/withResourceList.js
@@ -13,7 +13,7 @@ import {
   getList,
 } from '../store/api';
 
-const withResourceList = resourceKey => (WrappedComponent) => {
+const withResourceList = (resourceKey) => (WrappedComponent) => {
   const enhance = compose(
     withHandlers({
       onFilter: props => (filter) => {
@@ -37,9 +37,9 @@ const withResourceList = resourceKey => (WrappedComponent) => {
         const { page = {} } = params;
         fetchResourceList({ ...params, page: { ...page, number } });
       },
-      onSubmit: props => (values) => {
+      onSubmit: props => (values, meta = {}) => {
         const { createResource, updateResource } = props;
-        return (values.id ? updateResource : createResource)(values, { list: 'list' })
+        return (values.id ? updateResource : createResource)(values, { list: 'list', ...meta })
           .catch((errors) => { throw new SubmissionError(errors); });
       },
       onDelete: props => resource => (e) => {
@@ -55,10 +55,10 @@ const withResourceList = resourceKey => (WrappedComponent) => {
   });
 
   const mapDispatchToProps = dispatch => ({
-    fetchResourceList: (params = {}) => dispatch(fetchList(resourceKey, params)),
-    createResource: payload => dispatch(createResource(resourceKey, payload, { list: 'list' })),
-    updateResource: payload => dispatch(updateResource(resourceKey, payload)),
-    deleteResource: payload => dispatch(deleteResource(resourceKey, payload)),
+    fetchResourceList: (payload, meta) => dispatch(fetchList(resourceKey, payload, meta)),
+    createResource: (payload, meta) => dispatch(createResource(resourceKey, payload, meta)),
+    updateResource: (payload, meta) => dispatch(updateResource(resourceKey, payload, meta)),
+    deleteResource: (payload, meta) => dispatch(deleteResource(resourceKey, payload, meta)),
   });
 
   return connect(mapStateToProps, mapDispatchToProps)(enhance(WrappedComponent));
diff --git a/config/application.rb b/config/application.rb
@@ -33,5 +33,10 @@ class Application < Rails::Application
         resource '*', :headers => :any, :methods => [:get, :post, :options]
       end
     end
+
+    # Use SQL instead of Active Record's schema dumper when creating the database.
+    # This is necessary if your schema can't be completely dumped by the schema dumper,
+    # like if you have constraints or database-specific column types
+    config.active_record.schema_format = :sql
   end
 end
diff --git a/db/migrate/20170504204400_add_post_parts.rb b/db/migrate/20170504204400_add_post_parts.rb
@@ -0,0 +1,7 @@
+class AddPostParts < ActiveRecord::Migration[5.0]
+  def change
+    remove_column :posts, :body
+    add_column :posts, :parts, :json
+    execute "ALTER TABLE posts ALTER COLUMN parts SET DEFAULT '[]'::JSON"
+  end
+end
diff --git a/db/schema.rb b/db/schema.rb
diff --git a/db/structure.sql b/db/structure.sql
diff --git a/spec/factories/category.rb b/spec/factories/category.rb
diff --git a/spec/factories/post.rb b/spec/factories/post.rb
