add support for custom fields

src/components/Card.jsx

@@ -1,6 +1,7 @@
 import copy from '../common/data/copy.json'
 import React from 'react'
 
+import CardCustomField from './presentational/Card/CustomField'
 import CardTime from './presentational/Card/Time'
 import CardLocation from './presentational/Card/Location'
 import CardCaret from './presentational/Card/Caret'
@@ -132,6 +133,16 @@ class Card extends React.Component {
     }
   }
 
+  renderCustomFields () {
+    return this.props.features.CUSTOM_EVENT_FIELDS
+      .map(field => {
+        const value = this.props.event[field.key]
+        return value ? (
+          <CardCustomField field={field} value={this.props.event[field.key]} />
+        ) : null
+      })
+  }
+
   renderMain () {
     return (
       <div className='card-container'>
@@ -140,6 +151,7 @@ class Card extends React.Component {
           {this.renderLocation()}
         </div>
         {this.renderSummary()}
+        {this.renderCustomFields()}
       </div>
     )
   }

src/components/presentational/Card/CustomField.js

@@ -0,0 +1,14 @@
+import React from 'react'
+import marked from 'marked'
+
+const CardCustomField = ({ field, value }) => (
+  <div className='card-cell'>
+    <p>
+      <i className='material-icons left'>{field.icon}</i>
+      <b>{field.title ? `${field.title}: ` : '- '}</b>
+      {field.kind === 'text' ? value : marked(`[${value}](${field.value})`)}
+    </p>
+  </div>
+)
+
+export default CardCustomField

src/reducers/validate/eventSchema.js

@@ -1,30 +1,42 @@
 import Joi from 'joi'
 
-const eventSchema = Joi.object().keys({
-  id: Joi.string().allow(''),
-  description: Joi.string().allow('').required(),
-  date: Joi.string().allow(''),
-  time: Joi.string().allow(''),
-  time_precision: Joi.string().allow(''),
-  location: Joi.string().allow(''),
-  latitude: Joi.string().allow(''),
-  longitude: Joi.string().allow(''),
-  type: Joi.string().allow(''),
-  category: Joi.string().allow(''),
-  category_full: Joi.string().allow(''),
-  narratives: Joi.array(),
-  sources: Joi.array(),
-  filters: Joi.array().allow(''),
-  tags: Joi.array().allow(''),
-  comments: Joi.string().allow(''),
-  time_display: Joi.string().allow(''),
+function joiFromCustom (custom) {
+  const output = {}
+  custom.forEach(field => {
+    if (field.kind === 'text' || field.kind === 'link') {
+      output[field.key] = Joi.string().allow('')
+    }
+  })
+  return output
+}
 
-  // nested
-  narrative___stepStyles: Joi.array(),
-  shape: Joi.string().allow(''),
-  colour: Joi.string().allow('')
-})
-  .and('latitude', 'longitude')
-  .or('date', 'latitude')
+function createEventSchema (custom) {
+  return Joi.object().keys({
+    id: Joi.string().allow(''),
+    description: Joi.string().allow('').required(),
+    date: Joi.string().allow(''),
+    time: Joi.string().allow(''),
+    time_precision: Joi.string().allow(''),
+    location: Joi.string().allow(''),
+    latitude: Joi.string().allow(''),
+    longitude: Joi.string().allow(''),
+    type: Joi.string().allow(''),
+    category: Joi.string().allow(''),
+    category_full: Joi.string().allow(''),
+    narratives: Joi.array(),
+    sources: Joi.array(),
+    filters: Joi.array().allow(''),
+    tags: Joi.array().allow(''),
+    comments: Joi.string().allow(''),
+    time_display: Joi.string().allow(''),
+    // nested
+    narrative___stepStyles: Joi.array(),
+    shape: Joi.string().allow(''),
+    colour: Joi.string().allow(''),
+    ...joiFromCustom(custom)
+  })
+    .and('latitude', 'longitude')
+    .or('date', 'latitude')
+}
 
-export default eventSchema
+export default createEventSchema

src/reducers/validate/validators.js

@@ -1,6 +1,6 @@
 import Joi from 'joi'
 
-import eventSchema from './eventSchema'
+import createEventSchema from './eventSchema'
 import categorySchema from './categorySchema'
 import siteSchema from './siteSchema'
 import narrativeSchema from './narrativeSchema'
@@ -141,6 +141,11 @@ export function validateDomain (domain, features) {
     })
   }
 
+  if (!Array.isArray(features.CUSTOM_EVENT_FIELDS)) {
+    features.CUSTOM_EVENT_FIELDS = []
+  }
+
+  const eventSchema = createEventSchema(features.CUSTOM_EVENT_FIELDS)
   validateArray(domain.events, 'events', eventSchema)
   validateArray(domain.categories, 'categories', categorySchema)
   validateArray(domain.sites, 'sites', siteSchema)