actions.js

actions.js

import React from 'react'
import _ from 'lodash'
import PropTypes from 'prop-types'

import lang from 'lang'
import Form from 'common/components/form'

import './actions.scss'

export default class EmotionWordActions extends Form {
  static propTypes = {
    initialEmotionActions: PropTypes.arrayOf(
      PropTypes.shape({
        id: PropTypes.string.isRequired,
        name: PropTypes.string.isRequired,
        actions: PropTypes.array.isRequired,
      }),
    ).isRequired,
    emotionWords: PropTypes.arrayOf(
      PropTypes.shape({
        id: PropTypes.string.isRequired,
        name: PropTypes.string.isRequired,
        actions: PropTypes.array.isRequired,
      }),
    ).isRequired,
    changeFormField: PropTypes.func.isRequired,
    errors: PropTypes.shape({
      emotionWords: PropTypes.string,
    }).isRequired,
  }

  state = {
    localActions: [],
  }

  get words() {
    const initial = _.clone(this.props.initialEmotionActions)
    const current = _.clone(this.props.emotionWords)
    const words = _.clone(initial)
    _.each(current, word => {
      const existing = _.findIndex(words, { id: word.id })
      if (existing < 0) {
        words.push(word)
      } else {
        words[existing].actions.concat(word.actions)
      }
    })
    return words
  }

  actionTextHandler({ wordIndex, actionIndex }) {
    return e => {
      const allWords = _.clone(this.words)
      const actionText = e.target.value
      if (_.isEmpty(actionText)) {
        allWords[wordIndex].actions.splice(actionIndex, 1)
      } else {
        allWords[wordIndex].actions[actionIndex] = actionText
      }
      this.props.changeFormField('emotionWords', allWords)
    }
  }

  deleteActionHandler({ wordIndex, actionIndex }) {
    return () => {
      const allWords = _.clone(this.words)
      allWords[wordIndex].actions.splice(actionIndex, 1)
      this.props.changeFormField('emotionWords', allWords)
    }
  }

  createAction({ wordIndex, actionText }) {
    actionText = _.trim(actionText)
    if (_.isEmpty(actionText)) {
      return
    }
    // Add word to redux state
    const allWords = _.clone(this.words)
    allWords[wordIndex].actions.push(actionText)
    this.props.changeFormField('emotionWords', allWords)
  }

  cleanLocalAction({ wordIndex }) {
    this.setState(prevState => {
      const { localActions } = prevState
      localActions.splice(wordIndex, 1)
      return { localActions }
    })
  }

  onEnterHandler({ wordIndex }) {
    return e => {
      // Submit word on Enter
      const actionText = e.target.value
      if (e.key === 'Enter') {
        this.createAction({ wordIndex, actionText })
        this.cleanLocalAction({ wordIndex })
      }
    }
  }

  newActionChangeHandler({ wordIndex }) {
    return e => {
      if (!e.target) return

      const actionText = e.target.value
      // Store word in local state
      this.setState(prevState => {
        const { localActions } = prevState
        localActions[wordIndex] = actionText
        return { localActions }
      })
    }
  }

  onBlurHandler({ wordIndex }) {
    return e => {
      const actionText = e.target.value
      this.createAction({ wordIndex, actionText })
      this.cleanLocalAction({ wordIndex })
    }
  }

  render() {
    // _.mergeWith(initial, current, (objValue, srcValue) => {
    //   // if (_.isArray(objValue)) {
    //   //   return objValue.concat(srcValue)
    //   // }
    //   console.log({ objValue, srcValue })
    //   if (objValue.id === srcValue.id) {
    //     return objValue.actions && objValue.actions.concat(srcValue.actions)
    //   }
    // })
    console.log({ words: this.words })
    return (
      <div className="emotion-actions">
        <div className="actions-label">{lang.dashboard.howToFeel.howToExperienceFeelings}</div>
        <ul className="no-bullet feeling-word-actions-list">
          {_.map(this.words, ({ id, name, actions }, wordIndex) => {
            return (
              <li key={`${id}_${wordIndex}`}>
                <div className="grid-x grid-margin-x text-left action-container">
                  <div className="cell medium-4">
                    <div className="action-label">
                      {lang.dashboard.howToFeel.inOrderToFeel}
                      <br />
                      <h3 className="lead">{name}</h3>
                    </div>
                  </div>
                  <div className="cell medium-auto action-panel">
                    <div className="action-label">
                      {lang.dashboard.howToFeel.inOrderToFeelWeWill}
                    </div>
                    {_.map(actions, (actionText, actionIndex) => {
                      return (
                        <div
                          key={`action-${id}-${actionIndex}`}
                          className="grid-x grid-margin-x action-row">
                          <div className="cell medium-11 action-record">
                            <input
                              type="text"
                              id={`action-${id}-${actionIndex}`}
                              value={actionText}
                              onChange={this.actionTextHandler({ wordIndex, actionIndex })}
                            />
                          </div>
                          <div className="cell medium-1 text-center delete-action">
                            <button
                              type="button"
                              onClick={this.deleteActionHandler({ wordIndex, actionIndex })}>
                              <span aria-hidden="true">&times;</span>
                            </button>
                          </div>
                        </div>
                      )
                    })}
                    <div className="grid-x grid-margin-x action-row">
                      <div className="cell medium-11 action-record">
                        <input
                          type="text"
                          value={this.state.localActions[wordIndex] || ''}
                          onChange={this.newActionChangeHandler({ wordIndex })}
                          onKeyDown={this.onEnterHandler({ wordIndex })}
                          onBlur={this.onBlurHandler({ wordIndex })}
                        />
                      </div>
                    </div>
                  </div>
                </div>
              </li>
            )
          })}
        </ul>
      </div>
    )
  }
}