Format metadata object (#378)

* format metadata object

Author: mertkahyaoglu

lib/jekyll-admin/server.rb

@@ -59,7 +59,8 @@ def front_matter
 
     def document_body
       body = if front_matter && !front_matter.empty?
-               YAML.dump(front_matter).strip
+               YAML.dump(restored_front_matter).strip
+                 .gsub(": 'null'", ": null") # restore null values
              else
                "---"
              end
@@ -81,6 +82,14 @@ def namespace
       namespace = request.path_info.split("/")[1].to_s.downcase
       namespace if ROUTES.include?(namespace)
     end
+
+    # verbose 'null' values in front matter
+    def restored_front_matter
+      front_matter.map do |key, value|
+        value = "null" if value.nil?
+        [key, value]
+      end.to_h
+    end
   end
 end
 

src/actions/collections.js

@@ -4,7 +4,7 @@ import moment from 'moment';
 import { validationError } from '../actions/utils';
 import { get, put } from '../utils/fetch';
 import { validator } from '../utils/validation';
-import { slugify } from '../utils/helpers';
+import { slugify, trimObject } from '../utils/helpers';
 import {
   getTitleRequiredMessage,
   getFilenameRequiredMessage,
@@ -76,7 +76,7 @@ export function createDocument(collection, directory) {
     return put(
       // create or update document according to filename existence
       documentAPIUrl(collection, directory, path),
-      JSON.stringify({ raw_content, front_matter }),
+      preparePayload({ raw_content, front_matter }),
       { type: ActionTypes.PUT_DOCUMENT_SUCCESS, name: "doc"},
       { type: ActionTypes.PUT_DOCUMENT_FAILURE, name: "error"},
       dispatch
@@ -111,14 +111,30 @@ export function putDocument(collection, directory, filename) {
     return put(
       // create or update document according to filename existence
       documentAPIUrl(collection, directory, filename),
-      JSON.stringify({ path: relative_path, raw_content, front_matter }),
+      preparePayload({ path: relative_path, raw_content, front_matter }),
       { type: ActionTypes.PUT_DOCUMENT_SUCCESS, name: "doc"},
       { type: ActionTypes.PUT_DOCUMENT_FAILURE, name: "error"},
       dispatch
     );
   };
 }
 
+export function deleteDocument(collection, directory, filename) {
+  return (dispatch) => {
+    return fetch(documentAPIUrl(collection, directory, filename), {
+      method: 'DELETE'
+    })
+    .then(data => {
+      dispatch({ type: ActionTypes.DELETE_DOCUMENT_SUCCESS });
+      dispatch(fetchCollection(collection, directory));
+    })
+    .catch(error => dispatch({
+      type: ActionTypes.DELETE_DOCUMENT_FAILURE,
+      error
+    }));
+  };
+}
+
 const generateFilenameFromTitle = (metadata, collection) => {
   if (collection == 'posts') {
     // if date is provided, use it, otherwise generate it with today's date
@@ -151,18 +167,4 @@ const validateDocument = (metadata, collection) => {
   return validator(metadata, validations, messages);
 };
 
-export function deleteDocument(collection, directory, filename) {
-  return (dispatch) => {
-    return fetch(documentAPIUrl(collection, directory, filename), {
-      method: 'DELETE'
-    })
-    .then(data => {
-      dispatch({ type: ActionTypes.DELETE_DOCUMENT_SUCCESS });
-      dispatch(fetchCollection(collection, directory));
-    })
-    .catch(error => dispatch({
-      type: ActionTypes.DELETE_DOCUMENT_FAILURE,
-      error
-    }));
-  };
-}
+const preparePayload = (obj) => JSON.stringify(trimObject(obj));

src/actions/datafiles.js

@@ -1,16 +1,10 @@
 import * as ActionTypes from '../constants/actionTypes';
 import { validationError } from './utils';
 import { get, put } from '../utils/fetch';
-import { toYAML, toJSON, getExtensionFromPath } from '../utils/helpers';
+import { toYAML, toJSON, getExtensionFromPath, trimObject } from '../utils/helpers';
 import { validator } from '../utils/validation';
-import {
-  getContentRequiredMessage,
-  getFilenameRequiredMessage
-} from '../constants/lang';
-import {
-  datafilesAPIUrl,
-  datafileAPIUrl
-} from '../constants/api';
+import { getContentRequiredMessage, getFilenameRequiredMessage } from '../constants/lang';
+import { datafilesAPIUrl, datafileAPIUrl } from '../constants/api';
 
 export function fetchDataFiles(directory = '') {
   return (dispatch) => {
@@ -52,10 +46,13 @@ export function putDataFile(directory, filename, data, new_path = '', source = '
     if (source == "gui") {
       const json = /json/i.test(ext);
       let metadata = getState().metadata.metadata;
+      metadata = trimObject(metadata);
       data = json ? (JSON.stringify(metadata, null, 2)) : (toYAML(metadata));
     }
 
-    const payload = new_path ? { path: new_path, raw_content: data } : { raw_content: data };
+    const payload = new_path ?
+      { path: new_path, raw_content: data } :
+      { raw_content: data };
 
     // handle errors
     const errors = validateDatafile(filename, data);
@@ -74,17 +71,6 @@ export function putDataFile(directory, filename, data, new_path = '', source = '
   };
 }
 
-function validateDatafile(filename, data) {
-  return validator(
-    { filename, data },
-    { 'filename': 'required', 'data': 'required' },
-    {
-      'filename.required': getFilenameRequiredMessage(),
-      'data.required': getContentRequiredMessage()
-    }
-  );
-}
-
 export function deleteDataFile(directory, filename) {
   return (dispatch) => {
     return fetch(datafileAPIUrl(directory, filename), {
@@ -106,3 +92,14 @@ export function onDataFileChanged() {
     type: ActionTypes.DATAFILE_CHANGED
   };
 }
+
+const validateDatafile = (filename, data) => {
+  return validator(
+    { filename, data },
+    { 'filename': 'required', 'data': 'required' },
+    {
+      'filename.required': getFilenameRequiredMessage(),
+      'data.required': getContentRequiredMessage()
+    }
+  );
+};

src/actions/pages.js

@@ -3,15 +3,9 @@ import _ from 'underscore';
 import { validationError } from '../actions/utils';
 import { get, put } from '../utils/fetch';
 import { validator } from '../utils/validation';
-import { slugify } from '../utils/helpers';
-import {
-  getTitleRequiredMessage,
-  getFilenameNotValidMessage
-} from '../constants/lang';
-import {
-  pagesAPIUrl,
-  pageAPIUrl
-} from '../constants/api';
+import { slugify, trimObject } from '../utils/helpers';
+import { getTitleRequiredMessage, getFilenameNotValidMessage } from '../constants/lang';
+import { pagesAPIUrl, pageAPIUrl } from '../constants/api';
 
 export function fetchPages(directory = '') {
   return (dispatch) => {
@@ -55,12 +49,12 @@ export function createPage(directory) {
     dispatch({type: ActionTypes.CLEAR_ERRORS});
     // omit raw_content, path and empty-value keys in metadata state from front_matter
     const front_matter = _.omit(metadata, (value, key, object) => {
-      return key == 'raw_content' || key == 'path' || value == '';
+      return key == 'raw_content' || key == 'path' || value === '';
     });
     //send the put request
     return put(
       pageAPIUrl(directory, path),
-      JSON.stringify({ front_matter, raw_content }),
+      preparePayload({ front_matter, raw_content }),
       { type: ActionTypes.PUT_PAGE_SUCCESS, name: "page"},
       { type: ActionTypes.PUT_PAGE_FAILURE, name: "error"},
       dispatch
@@ -86,33 +80,21 @@ export function putPage(directory, filename) {
     dispatch({type: ActionTypes.CLEAR_ERRORS});
     // omit raw_content, path and empty-value keys in metadata state from front_matter
     const front_matter = _.omit(metadata, (value, key, object) => {
-      return key == 'raw_content' || key == 'path' || value == '';
+      return key == 'raw_content' || key == 'path' || value === '';
     });
-    const relative_path = directory ?
-      `${directory}/${path}` : `${path}`;
+    const relative_path = directory ? `${directory}/${path}` : `${path}`;
     //send the put request
     return put(
       // create or update page according to filename existence
       pageAPIUrl(directory, filename),
-      JSON.stringify({ path: relative_path, front_matter, raw_content }),
+      preparePayload({ path: relative_path, front_matter, raw_content }),
       { type: ActionTypes.PUT_PAGE_SUCCESS, name: "page"},
       { type: ActionTypes.PUT_PAGE_FAILURE, name: "error"},
       dispatch
     );
   };
 }
 
-function validatePage(metadata) {
-  return validator(
-    metadata,
-    { 'path': 'required|filename' },
-    {
-      'path.required': getTitleRequiredMessage(),
-      'path.filename': getFilenameNotValidMessage()
-    }
-  );
-}
-
 export function deletePage(directory, filename) {
   return (dispatch) => {
     return fetch(pageAPIUrl(directory, filename), {
@@ -128,3 +110,16 @@ export function deletePage(directory, filename) {
     }));
   };
 }
+
+const validatePage = (metadata) => {
+  return validator(
+    metadata,
+    { 'path': 'required|filename' },
+    {
+      'path.required': getTitleRequiredMessage(),
+      'path.filename': getFilenameNotValidMessage()
+    }
+  );
+};
+
+const preparePayload = (obj) => JSON.stringify(trimObject(obj));

src/components/metadata/MetaField.js

@@ -89,7 +89,7 @@ MetaField.propTypes = {
   moveArrayItem: PropTypes.func.isRequired,
   convertField: PropTypes.func.isRequired,
   fieldKey: PropTypes.string.isRequired,
-  fieldValue: PropTypes.any.isRequired,
+  fieldValue: PropTypes.any,
   nameAttr: PropTypes.string.isRequired,
   namePrefix: PropTypes.string.isRequired,
   key_prefix: PropTypes.string.isRequired

src/components/metadata/MetaSimple.js

@@ -34,17 +34,17 @@ export class MetaSimple extends Component {
     updateFieldValue(nameAttr, e.target.value);
   }
 
-  handleEditableBlur(e) {
-    const { nameAttr, updateFieldValue } = this.props;
-    updateFieldValue(nameAttr, e.target.value.trim());
-  }
-
   handleDatepickerChange(date, dateStr) {
     const { nameAttr, updateFieldValue } = this.props;
     let formatted = moment(date).format("YYYY-MM-DD HH:mm:ss");
     updateFieldValue(nameAttr, formatted);
   }
 
+  handleEditableBlur(e) {
+    const { nameAttr, updateFieldValue } = this.props;
+    updateFieldValue(nameAttr, e.target.value.trim());
+  }
+
   renderEditable() {
     const { fieldValue } = this.props;
     return (
@@ -133,7 +133,7 @@ export class MetaSimple extends Component {
 MetaSimple.propTypes = {
   parentType: PropTypes.string.isRequired,
   fieldKey: PropTypes.string.isRequired,
-  fieldValue: PropTypes.any.isRequired,
+  fieldValue: PropTypes.any,
   updateFieldValue: PropTypes.func.isRequired,
   nameAttr: PropTypes.any.isRequired
 };

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

@@ -48,10 +48,4 @@ describe('Components::MetaSimple', () => {
     editable.simulate('change');
     expect(actions.updateFieldValue).toHaveBeenCalled();
   });
-
-  it('should call updateFieldValue when the input field is blurred', () => {
-    const { actions, editable } = setup();
-    editable.simulate('blur');
-    expect(actions.updateFieldValue).toHaveBeenCalled();
-  });
 });

src/utils/helpers.js

@@ -113,3 +113,24 @@ export const preventDefault = (event) => {
     event.preventDefault();
   }
 };
+
+/**
+ * Given an object, trims every keys and values recursively.
+ * @param {Object} object
+ * @return {Object} trimmedObject
+ */
+export const trimObject = (object) => {
+  if (!_.isObject(object)) return object;
+  return _.keys(object).reduce((acc, key) => {
+    if (typeof object[key] == 'string') {
+      try {
+        acc[key.trim()] = JSON.parse(object[key].trim());
+      } catch (e) {
+        acc[key.trim()] = object[key].trim();
+      }
+    } else {
+      acc[key.trim()] = trimObject(object[key]);
+    }
+    return acc;
+  }, Array.isArray(object) ? [] : {});
+};

src/utils/tests/helpers.spec.js

@@ -1,6 +1,6 @@
 import {
   toYAML, toJSON, capitalize, toTitleCase, slugify,
-  existingUploadedFilenames, getFilenameFromPath, getExtensionFromPath
+  existingUploadedFilenames, getFilenameFromPath, getExtensionFromPath, trimObject
 } from '../helpers';
 
 describe('Helper functions', () => {
@@ -155,4 +155,46 @@ describe('Helper functions', () => {
     expected = "";
     expect(getExtensionFromPath(path)).toEqual(expected);
   });
+
+  it('should trim whitespaces in object keys and values', () => {
+    let obj = {};
+    let expected = {};
+    expect(trimObject(obj)).toEqual(expected);
+
+    obj = { ' foo ': ' bar ' };
+    expected = { foo: 'bar' };
+    expect(trimObject(obj)).toEqual(expected);
+
+    obj = {
+      foo: ' 10 ',
+      bar: ' false ',
+      baz: {
+        jekyll: 'true    '
+      }
+    };
+    expected = {
+      foo: 10,
+      bar: false,
+      baz: {
+        jekyll: true
+      }
+    };
+    expect(trimObject(obj)).toEqual(expected);
+
+    obj = {
+      foo: ' a "test" string ',
+      'baz ': {
+        foo: "this is 'also ' a test string      "
+      },
+      bar: 10
+    };
+    expected = {
+      foo: 'a "test" string',
+      baz: {
+        foo: "this is 'also ' a test string"
+      },
+      bar: 10
+    };
+    expect(trimObject(obj)).toEqual(expected);
+  });
 });