Render advanced metafield for categories (#588)

Author: ashmaroli

src/components/metadata/MetaSimple.js

@@ -95,16 +95,16 @@ export class MetaSimple extends Component {
     );
   }
 
-  renderTagsInput() {
+  renderTagsInput(key) {
     const { fieldValue, nameAttr, updateFieldValue, siteMeta } = this.props;
-    const siteTags = (siteMeta && siteMeta.tags) || [];
+    const suggestions = (siteMeta && siteMeta[key]) || [];
 
     return (
       <MetaTags
         fieldValue={fieldValue}
         nameAttr={nameAttr}
         updateFieldValue={updateFieldValue}
-        suggestions={siteTags}
+        suggestions={suggestions}
       />
     );
   }
@@ -122,7 +122,8 @@ export class MetaSimple extends Component {
         node = this.renderStaticFilePicker();
         break;
       case 'tags':
-        node = this.renderTagsInput();
+      case 'categories':
+        node = this.renderTagsInput(fieldKey);
         break;
       default:
         node = this.renderEditable();

src/components/metadata/MetaTags.js

@@ -109,7 +109,7 @@ export default class MetaTags extends Component {
     if (!(pageTags instanceof Array)) {
       return (
         <span className="meta-error">
-          Invalid array of tags! Found: <strong>{pageTags}</strong>
+          Expected an array of items. Found: <strong>{pageTags}</strong>
           <br />
           <span onClick={() => this.rectifyTag(pageTags)}>Click here</span>
           to correct.

src/components/metadata/tests/metatags.spec.js

@@ -42,7 +42,7 @@ describe('Components::MetaTags', () => {
       ...defaultProps,
       fieldValue: 'foo',
     });
-    const error = 'Invalid array of tags! Found: fooClick hereto correct.';
+    const error = 'Expected an array of items. Found: fooClick hereto correct.';
     const error_element = component.find('.meta-error');
     const rectifier = error_element.find('span').last();
 

src/utils/metadata.js

@@ -159,7 +159,7 @@ export const injectDefaultFields = (config, path, type, front_matter = {}) => {
  */
 export const computeFieldType = (value, key = null) => {
   let type = 'simple';
-  const specialKeys = ['tags'];
+  const specialKeys = ['tags', 'categories'];
   if (specialKeys.includes(key) && _.isArray(value)) return type;
 
   if (_.isObject(value)) type = 'object';