Improve blog updater [WIP]

backend/api/v1/contributors.js

@@ -1,17 +1,63 @@
 const express = require('express')
+import { orderBy } from 'lodash'
 
-const ContributorsService = require('../../modules/contributors/services/ContributorsService')
+const axios = require('axios')
+const c = require('../../../config/config.json')
+
+const env = process.env.NODE_ENV === 'dev' ? 'dev' : 'prod'
+const base_api = c[env]['base_api'] + env
+
+
+const filterItems = (items, query) => {
+  if (!query) {
+    return items
+  }
+
+  return items.filter(item => {
+    return (
+      item.prettyname.toLowerCase().indexOf(query) > -1 ||
+      item.bio.toLowerCase().indexOf(query) > -1
+    )
+  })
+}
+
+const addContributor = (data ) => {
+  return axios.post(base_api + '/blog/contributors/add', data).then(res => res.data)
+}
 
 module.exports = cache => {
   const router = express.Router()
-  router.get('/list', function(req, res) {
-    ContributorsService.getAllContributors()
-      .then(contributors => {
-        res.send(contributors)
-      })
-      .catch(err => {
-        res.send(err)
-      })
+
+  router.get('/', (req, res) => {
+    const { q } = req.query
+    let contributors = cache().contributors
+
+    contributors = filterItems(
+      orderBy(
+        Object.keys(contributors).map(id => ({
+          ...contributors[id],
+          id
+        })),
+        'sort_rank'
+      ),
+      q
+    )
+
+    return res.send(contributors)
+  })
+
+  router.get('/list', (req, res) => {
+    const contributors = cache().contributors
+    res.send(contributors)
+  })
+
+  router.post('/', (req, res) => {
+    const contributor = req.body
+
+    addContributor(contributor)
+      .then(data => res.send(data))
+      .catch(error => res.send({ success: false, error: error.message }))
   })
+
   return router
 }

package.json

@@ -42,6 +42,7 @@
     "cookie-session": "^2.0.0-beta.3",
     "css-loader": "^0.26.2",
     "draft-js": "^0.10.5",
+    "draftjs-md-converter": "^0.1.7",
     "draftjs-to-html": "^0.8.3",
     "e164": "0.0.5",
     "echarts": "^4.0.4",
@@ -67,6 +68,7 @@
     "letsencrypt-express": "^2.0.7",
     "lodash": "^4.17.4",
     "lodash.isarray": "^4.0.0",
+    "markdown-draft-js": "^0.6.2",
     "marked": "^0.3.19",
     "mathjax": "^2.7.0",
     "mime": "^2.2.2",

shared/Blog/Components/RelatedContent.js

@@ -1,13 +1,7 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
-import { connect } from 'react-redux'
+import React, { Component } from 'react'
 import { Link } from 'react-router'
 
-class RelatedContent extends React.Component {
-  constructor(props) {
-    super(props)
-  }
-
+class RelatedContent extends Component {
   render() {
     var { items } = this.props
     if (!items) {
@@ -19,14 +13,17 @@ class RelatedContent extends React.Component {
     }
     return (
       <div>
-        {items.map(function(item) {
+        {items.map((item, index) => {
           var dest = item.dest
           var title = item.title
           var body = item.body
           var type = item.type
           if (type == 'person') {
             return (
-              <div className="related-content-container row">
+              <div
+                className="related-content-container row"
+                key={item.content_id}
+              >
                 <div className="related-content-person-left col-xs-12 col-sm-4">
                   <img className="related-content-person-img" src={dest} />
                 </div>
@@ -45,7 +42,7 @@ class RelatedContent extends React.Component {
             var publish_date = item.publish_date
             var guid = item.guid
             return (
-              <div className="related-content-container">
+              <div className="related-content-container" key={item.content_id}>
                 <div className="related-content-imageless-inner">
                   <Link to={to}>
                     <h3 className="related-content-h3">{title}</h3>
@@ -63,7 +60,7 @@ class RelatedContent extends React.Component {
             var publish_date = item.publish_date
             var guid = item.guid
             return (
-              <div className="related-content-container">
+              <div className="related-content-container" key={item.content_id}>
                 <div className="related-content-imageless-inner">
                   <Link to={to}>
                     <h3 className="related-content-h3">{title}</h3>
@@ -76,8 +73,7 @@ class RelatedContent extends React.Component {
               </div>
             )
           } else {
-            console.log('UNSUPPORTED TYPE: ' + type)
-            return <div className="related-content" />
+            return <div className="related-content" key={item.content_id} />
           }
         })}
       </div>

shared/Contributors/Forms/AddContributor.js

@@ -0,0 +1,148 @@
+import React from 'react'
+import moment from 'moment'
+import { isEmpty } from 'lodash'
+import { Field, reduxForm } from 'redux-form'
+import FormController from '../../Forms/Components/FormController/FormController'
+import {
+  renderField,
+  renderSelect,
+  renderZip
+} from '../../Forms/Components/Field'
+import RichTextarea from '../../Forms/Components/RichTextarea'
+import ImageUploadField from '../../Forms/Components/ImageUploadField'
+
+const env = process.env.NODE_ENV === 'dev' ? 'dev' : 'prod'
+const config = require('../../../config/config.json')
+const c = config[env]
+
+export const FORM_KEY = 'addContributor'
+
+const validate = values => {
+  let errors = {}
+
+  if (isEmpty(values.prettyname)) {
+    errors.prettyname = 'Pretty Name field is required'
+  }
+
+  if (isEmpty(values.img)) {
+    errors.img = 'Image field is required'
+  }
+
+  if (isEmpty(values.author)) {
+    errors.author = 'Author field is required'
+  }
+
+  if (isEmpty(values.twitter)) {
+    errors.twitter = 'Author field is required'
+  }
+
+  if (isEmpty(values.linkedin)) {
+    errors.linkedin = 'Linkedin field is required'
+  }
+
+  if (isEmpty(values.bio)) {
+    errors.bio = 'Bio field is required'
+  }
+
+  if (isEmpty(values.sort_rank)) {
+    errors.sort_rank = 'Sort rank field is required'
+  } else if (values.sort_rank < 0) {
+    errors.sort_rank = 'Number should be positive'
+  }
+
+  return errors
+}
+
+const AddContributorForm = ({
+  children,
+  handleSubmit,
+  pristine,
+  reset,
+  submitting,
+  allowSubmit,
+  activeStep,
+  errorMessage,
+  ready,
+  recording,
+  stop,
+  review,
+  submit,
+  complete,
+  submittedUrl,
+  error,
+  showSubmit,
+  customError,
+  customSuccess
+}) => (
+  <FormController
+    name={`addJob`}
+    showSubmit={showSubmit}
+    invalid={!allowSubmit}
+    submitValue={`Submit`}
+    handleSubmit={handleSubmit}
+    customError={customError}
+    customSuccess={customSuccess}
+  >
+    <Field
+      label="Pretty Name"
+      component={renderField}
+      name="prettyname"
+      type="text"
+      required
+    />
+
+    <Field
+      label="Image"
+      component={renderField}
+      name={`img`}
+      required
+      customComponent={ImageUploadField}
+      bucket={c['files']['site_bucket']}
+      accept="image/jpeg, image/png"
+    />
+
+    <Field
+      label="Author"
+      component={renderField}
+      name="author"
+      type="text"
+      required
+    />
+
+    <Field
+      label="Twitter"
+      component={renderField}
+      name="twitter"
+      type="text"
+      required
+    />
+
+    <Field
+      label="Linkedin"
+      component={renderField}
+      name="linkedin"
+      type="text"
+      required
+    />
+
+    <Field
+      label="Bio"
+      component={renderField}
+      customComponent={RichTextarea}
+      name="bio"
+    />
+
+    <Field
+      label="Sort Rank"
+      component={renderField}
+      name="sort_rank"
+      type="number"
+      required
+    />
+  </FormController>
+)
+
+export default reduxForm({
+  form: FORM_KEY,
+  validate
+})(AddContributorForm)

shared/Forms/Components/Field/Select.js

@@ -11,7 +11,8 @@ export const renderSelect = ({
   fieldWrapperClasses = '',
   labelWrapperClasses = '',
   inputWrapperStyles = '',
-  options = []
+  options = [],
+  blankOption = false
 }) => {
   return (
     <div className={`field-container ${fieldWrapperClasses}`}>
@@ -25,7 +26,7 @@ export const renderSelect = ({
             touched && invalid ? 'has-danger' : ''
           }`}
         >
-          <option value="" />
+          {blankOption && <option />}
           {options.map(op => (
             <option value={op.value} key={op.value}>
               {op.label}

shared/Forms/Components/FilePreview.js

@@ -34,7 +34,11 @@ const Container = styled.div`
   height: 100%;
   max-width: 100%;
   text-align: center;
+<<<<<<< HEAD
+  position: relative
+=======
   position: relative;
+>>>>>>> dev
 `
 
 const Preview = styled.img`

shared/Forms/Components/RichTextarea.js

@@ -20,15 +20,27 @@ const DEFAULT_TOOLBAR = {
 }
 
 export default class RichTextarea extends Component {
+  defaultProps = {
+    markdown: false
+  }
+
   state = {
     editorState: EditorState.createEmpty(),
     value: this.props.input.value
   }
 
+  encode = rawObject => {
+    return draftToHtml(rawObject)
+  }
+
+  decode = val => {
+    return htmlToDraft(val)
+  }
+
   onChange = editorState => {
     this.setState({ editorState })
 
-    const value = draftToHtml(convertToRaw(editorState.getCurrentContent()))
+    const value = this.encode(convertToRaw(editorState.getCurrentContent()))
 
     this.setState({
       value
@@ -45,22 +57,19 @@ export default class RichTextarea extends Component {
     const { input: { value } } = this.props
 
     const editorState = EditorState.createWithContent(
-      ContentState.createFromBlockArray(htmlToDraft(value))
+      ContentState.createFromBlockArray(this.decode(value))
     )
 
-    this.setState({ value, editorState }, this.updateVal)
+    this.setState({ value, editorState })
   }
 
   componentWillReceiveProps(nextProps) {
     if (this.props.input.value !== nextProps.input.value) {
       const editorState = EditorState.createWithContent(
-        ContentState.createFromBlockArray(htmlToDraft(nextProps.input.value))
+        ContentState.createFromBlockArray(this.decode(nextProps.input.value))
       )
 
-      this.setState(
-        { value: nextProps.input.value, editorState },
-        this.updateVal
-      )
+      this.setState({ value: nextProps.input.value, editorState })
     }
   }
 
@@ -76,6 +85,7 @@ export default class RichTextarea extends Component {
           editorClassName="richEditor"
           onEditorStateChange={this.onChange}
           onBlur={this.onBlur}
+          suppressContentEditableWarning={true}
           toolbar={toolbar}
           minHeight={minHeight}
         />