Split post body into parts to test JSON API included objects editing

Author: tb

app/models/post.rb

@@ -1,9 +1,10 @@
 class Post < ApplicationRecord
   belongs_to :category
   has_many :comments, dependent: :destroy
+  has_many :parts, class_name: PostPart, dependent: :destroy
 
   validates :title, presence: true, uniqueness: true
-  validates :body, presence: true
+  validates :parts, presence: true
 
   scope :title_contains, -> (value) { where('title ILIKE ?', "%#{value.join}%") }
 end

app/models/post_part.rb

@@ -0,0 +1,5 @@
+class PostPart < ApplicationRecord
+  belongs_to :post
+
+  validates :body, presence: true
+end

app/resources/post_part_resource.rb

@@ -0,0 +1,5 @@
+class PostPartResource < JSONAPI::Resource
+  attributes :body
+
+  has_one :post
+end

app/resources/post_resource.rb

@@ -4,10 +4,12 @@ class PostResource < JSONAPI::Resource
   attributes :title, :body, :created_at
 
   has_many :comments
+  has_many :parts
   has_one :category
 
   paginator :paged
 
   filters :category
   custom_filter :title_contains
 end
+

client/src/api/__snapshots__/normalize.spec.js.snap

@@ -34,9 +34,37 @@ Object {
           "type": "categories",
         },
       },
+      "parts": Object {
+        "data": Array [
+          Object {
+            "id": "1",
+            "type": "postParts",
+          },
+          Object {
+            "id": "2",
+            "type": "postParts",
+          },
+        ],
+      },
     },
     "type": "posts",
   },
+  "included": Array [
+    Object {
+      "attributes": Object {
+        "body": "Part 1",
+      },
+      "id": "1",
+      "type": "postParts",
+    },
+    Object {
+      "attributes": Object {
+        "body": "Part 2",
+      },
+      "id": "2",
+      "type": "postParts",
+    },
+  ],
 }
 `;
 
@@ -48,6 +76,16 @@ Object {
     "name": undefined,
   },
   "id": "1",
+  "parts": Array [
+    Object {
+      "body": "Part 1",
+      "id": "1",
+    },
+    Object {
+      "body": "Part 2",
+      "id": "2",
+    },
+  ],
   "title": "Title 1",
 }
 `;

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);

client/src/api/normalize.js

@@ -17,16 +17,28 @@ const serializers = {
   posts: {
     serializer: new Serializer('posts', {
       keyForAttribute: 'camelCase',
+      typeForAttribute: (attribute) => {
+        switch(attribute) {
+          case 'parts': return 'postParts';
+          default: attribute;
+        }
+      },
       attributes: [
         'title',
         'body',
         'category',
+        'parts',
       ],
       category: {
         ref: 'id',
         included: false,
         attributes: ['name'],
       },
+      parts: {
+        ref: 'id',
+        included: true,
+        attributes: ['body'],
+      },
     }),
     deserializer: new Deserializer({
       keyForAttribute: 'camelCase',
@@ -36,6 +48,24 @@ const serializers = {
           name: relationship.name,
         }),
       },
+      parts: {
+        valueForRelationship: relationship => ({
+          id: relationship.id,
+          body: relationship.body,
+        }),
+      },
+    }),
+  },
+
+  postParts: {
+    serializer: new Serializer('postParts', {
+      keyForAttribute: 'camelCase',
+      attributes: [
+        'body',
+      ],
+    }),
+    deserializer: new Deserializer({
+      keyForAttribute: 'camelCase',
     }),
   },
 

client/src/api/normalize.spec.js

@@ -25,5 +25,15 @@ describe('normalize', () => {
       id: 11,
       name: 'Category 11',
     },
+    parts: [
+      {
+        body: 'Part 1',
+        id: 1,
+      },
+      {
+        body: 'Part 2',
+        id: 2,
+      },
+    ],
   });
 });

client/src/components/Posts/PostEdit.js

@@ -18,17 +18,18 @@ export class PostEdit extends Component {
     fetchCategories();
 
     if (params.id) {
-      fetchResource({ id: params.id, include: 'category' });
+      fetchResource({ id: params.id, include: 'category,parts' });
     }
   }
 
   render() {
     const { isNew, resource, onSubmit, categories } = this.props;
+    const onSubmitWithInclude = (values) => onSubmit(values, { include: 'parts' });
 
     return (
       <div>
         <EditHeader {...this.props}>{ isNew ? 'New Post' : resource.title }</EditHeader>
-        <PostForm initialValues={resource} categories={categories} onSubmit={onSubmit} />
+        <PostForm initialValues={resource} categories={categories} onSubmit={onSubmitWithInclude} />
       </div>
     );
   }
@@ -44,5 +45,5 @@ export const mapDispatchToProps = dispatch => ({
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(
-  withResource('posts')(PostEdit),
+  withResource('posts', { include: 'parts' })(PostEdit),
 );

client/src/components/Posts/PostForm.js

@@ -1,11 +1,32 @@
 import React, { Component, PropTypes } from 'react';
 import { isEmpty } from 'lodash';
-import { Field, reduxForm } from 'redux-form';
-import { Button, Form } from 'reactstrap';
+import { Field, FieldArray, 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 PostFormParts = ({ fields, meta: { error } }) => (
+  <div className="my-3">
+    {fields.map((part, index) =>
+      <Row key={index}>
+        <Col xs="10">
+          <Field
+            name={`${part}.body`}
+            component={TextArea}
+            rows={5}
+          />
+        </Col>
+        <Col xs="2">
+          <Button color="danger" onClick={() => fields.remove(index)}>X</Button>
+        </Col>
+      </Row>
+    )}
+    {error && <FormFeedback>{error}</FormFeedback>}
+    <Button onClick={() => fields.push()}>Add Part</Button>
+  </div>
+);
+
+export class PostForm extends Component {
   render() {
     const { categories, handleSubmit, pristine, reset, submitting } = this.props;
 
@@ -18,7 +39,7 @@ class PostForm extends Component {
     })));
 
     return (
-      <Form onSubmit={handleSubmit}>
+      <Form onSubmit={handleSubmit} className="py-3">
         <Field
           name="title"
           label="Title"
@@ -30,13 +51,11 @@ class PostForm extends Component {
           component={SelectField}
           options={categoriesOptions}
         />
-        <Field
-          name="body"
-          label="Body"
-          component={TextArea}
-          rows="10"
+        <FieldArray
+          name="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,7 +66,7 @@ const validate = (values) => {
   const errors = required(values,
     'title',
     'category.id',
-    'body',
+    'parts',
   );
   return errors;
 };