InitiativesForm.js

import React, { useState, useEffect } from 'react'
import { connect } from 'react-redux'
import { Row, Col, Form, Input, Select, Button, Popover, Icon } from 'antd'
import withStyles from "isomorphic-style-loader/lib/withStyles"

import { updateStatePartnerFocusAreaInitiativeForm } from '../../../../actions/statePartner/updateActions'
import { getOtherOptionId } from '../../../../actions/statePartner/OtherOptionsHelper'
import { updateFormFieldNameById, updateFormFieldNameByIndex, addDeleteToRecordById, addDeleteToRecordByIndex,
  updateFormFieldDescriptionById, updateFormFieldDescriptionByIndex } from '../helpers/FormHelpers'
import { AddMoreInitiativePopOver } from '../../../../components/PopOverHelpers'
import s from './FocusAreaInitiativesForm.module.scss'


const FocusAreaInitiativesForm = (props) => {
  const [focusAreaInitiatives, setFocusAreaInitiatives] = useState(props.statePartnerReducer.focusAreaInitiatives)
  const { focusAreas } = props.initalStatePartnerDataReducer
  
  const [ otherFocusAreaId, setOtherFocusAreaId ] = useState()

  useEffect(() => {
    if (focusAreas) {
      setOtherFocusAreaId(getOtherOptionId(focusAreas, 'FocusAreaInitiativesForm'))
    }
  }, [focusAreas])


  const [form, setForm] = useState({
    focusAreas: focusAreaInitiatives.focusAreas,
    focusAreasText: focusAreaInitiatives.focusAreasText,
    otherFocusArea: focusAreaInitiatives.otherFocusArea,
    currentInitiatives: focusAreaInitiatives.currentInitiatives
  })
  // No required field in this form

  useEffect(() => {
    // Always update state with form, because state will be passed to API
    props.updateStatePartnerFocusAreaInitiativeForm(form)
  }, [form])

  const { Option } = Select

  const addNewInitiativeForm = () => {
    setForm((p) => ({ ...p, currentInitiatives: [...form.currentInitiatives, { id: "", name: "", description: "", _delete: false }] }))
  }

  const handleInitiativeNameChangeById = (id, value) => {
    const _currentInitiatives = updateFormFieldNameById(id, value, form.currentInitiatives)
    setForm((p) => ({ ...p, currentInitiatives: _currentInitiatives }))
  }

  const handleInitiativeNameChangeByIndex = (index, value) => {
    const _currentInitiatives = updateFormFieldNameByIndex(index, value, form.currentInitiatives)
    setForm((p) => ({ ...p, currentInitiatives: _currentInitiatives }))
  }

  const handleInitiativeDescriptionChangeById = (id, value) => {
    const _currentInitiatives = updateFormFieldDescriptionById(id, value, form.currentInitiatives)
    setForm((p) => ({ ...p, currentInitiatives: _currentInitiatives }))
  }

  const handleInitiativeDescriptionChangeByIndex = (index, value) => {
    const _currentInitiatives = updateFormFieldDescriptionByIndex(index, value, form.currentInitiatives)
    setForm((p) => ({ ...p, currentInitiatives: _currentInitiatives }))
  }

  const onDeleteCurrentInitiativeById = (id) => {
    const toDelete = addDeleteToRecordById(id, form.currentInitiatives)
    setForm((p) => ({ ...p, currentInitiatives: toDelete }))
  }

  const onDeleteCurrentInitiativeByIndex = (index) => {
    const toDelete = addDeleteToRecordByIndex(index, form.currentInitiatives)
    setForm((p) => ({ ...p, currentInitiatives: toDelete }))
  }

  const handlePreviousButtonClick = () => {
    props.previousTab("2")
    submitForm()
    saveForm()
  }

  const handleNextButtonClick = () => {
    props.nextTab("4")
    submitForm()
    saveForm()
  }

  const saveForm = () => {
    const GOTOGENERALFORM = false
    const RELOADPAGE = false
    props.pushStatePartnerProfileToAPI(GOTOGENERALFORM, RELOADPAGE)
  }

  const submitForm = () => {
    // update state
    props.updateStatePartnerFocusAreaInitiativeForm(form)
  }

  // Ensure that at least one current initiative form shows when page loads even if non was gotten from the API
  if (form.currentInitiatives && form.currentInitiatives.length === 0) {
    setForm((p) => ({ ...p, currentInitiatives: [...form.currentInitiatives, { id: 0, name: "", description: "", _delete: false }] }))
  }


  function* yieldCounter(index) {
    // used to create consitent numbering for current initiatives
    while (index <= form.currentInitiatives.length) {
      yield index
      index++
    }
  }

  const iterator = yieldCounter(1)

  return (
    <div className={s.container}>
      {form && props.profileLoading == false && (
        <div>
          {/* ************************************************ */}
          <Row>
            <Col span={5}>
              <p className={s.form_label}>Focus Areas</p>
            </Col>
            <Col span={14}>
              <Form.Item>
                <Select
                  mode="multiple"
                  placeholder="Check all that apply"
                  onChange={(value) => setForm((p) => ({ ...p, focusAreas: value }))}
                  defaultValue={form.focusAreas}
                  allowClear
                  style={{ "width": "100%", "border": "1px solid #e9ebee", "borderRadius": "2px", "padding": "0 20px 0 20px", "margin": "0px 0 10px 0" }}
                >
                  {
                    focusAreas && (
                      focusAreas.map(focusArea => (
                        <Option key={focusArea.id} value={focusArea.id}>{focusArea.name}</Option>
                      ))
                    )
                  }
                </Select>
              </Form.Item>
            </Col>
          </Row>

          {/* ************************************************ */}
          {
            form.focusAreas === otherFocusAreaId || form.focusAreas.includes(otherFocusAreaId) && (
              <Row>
                <Col span={5}>
                  <p className={s.form_label}>Other Focus Areas</p>
                </Col>
                <Col span={14}>
                  <Form.Item>
                    <Input
                      value={form.otherFocusArea}
                      onChange={({ target: { value } }) => setForm((p) => ({ ...p, otherFocusArea: value }))}
                    />
                  </Form.Item>
                </Col>
              </Row>
            )
          }

          {
            form.currentInitiatives && form.currentInitiatives.map((initiative, index) => (
              <div key={index} className={initiative._delete ? `${s.DisplayNone}` : ''}>
                <h3 className={s.currentInitiativeHeader}>
                  Current Initiative #
                  {
                    initiative._delete === undefined || initiative._delete === false
                      ? iterator.next().value
                      : ''
                  }
                </h3>
                <Row>
                  <Col span={5}>
                    <p className={s.form_label}>Initiative Name</p>
                  </Col>
                  <Col span={14}>
                    <Form.Item>
                      <Input
                        value={initiative.name}
                        onChange={
                          initiative.id 
                          ?
                          ({ target: { value } }) => handleInitiativeNameChangeById(initiative.id, value)
                          :
                          ({ target: { value } }) => handleInitiativeNameChangeByIndex(index, value)
                        }
                        />
                    </Form.Item>
                  </Col>
                  <Col span={1}>
                    <div style={{ "paddingLeft": "10px" }}>
                      <Popover
                        placement="top"
                        content={"Remove"}
                        trigger="hover"
                      >
                        <span
                          className={s.IconWrapper}
                          onClick={
                            initiative.id
                              ?
                              () => onDeleteCurrentInitiativeById(initiative.id)
                              :
                              () => onDeleteCurrentInitiativeByIndex(index)
                          }
                        >
                          <Icon type="close" />
                        </span>
                      </Popover>
                    </div>
                  </Col>
                </Row>
                <Row>
                  <Col span={5}>
                    <p className={s.form_label}>Description of Initative</p>
                  </Col>
                  <Col span={14}>
                    <Form.Item>
                      <Input.TextArea
                        placeholder="Give a brief description of the initiative."
                        value={initiative.description}
                        maxLength={1000}
                        onChange={
                          initiative.id 
                          ?
                          ({ target: { value } }) => handleInitiativeDescriptionChangeById(initiative.id, value)
                          :
                          ({ target: { value } }) => handleInitiativeDescriptionChangeByIndex(index, value)
                        }
                        
                        />
                      <p style={{ "marginTop": "-20px" }}>{initiative.description ? initiative.description.length : 0} / 1,000 Characters</p>
                    </Form.Item>
                  </Col>

                </Row>
              </div>
            ))
          }

          {/* ******************************** Add More Button ********************* */}
          <div className={s.Subgrouping}>
            <Row>
              <Col span={5}></Col>
              <Col>
                <AddMoreInitiativePopOver>
                  <Button
                    className={s.AddMoreButton}
                    type="default"
                    onClick={() => addNewInitiativeForm()}
                  >
                    Add more
                  </Button>
                </AddMoreInitiativePopOver>
              </Col>
            </Row>
          </div>
          {/* ******************************** Add More Button ********************* */}

          <Row type="flex" justify="center" className={s.bottomNavButtons}>
            <Button type="default" onClick={() => handlePreviousButtonClick()}>Previous</Button>
            <Button type="default" onClick={() => saveForm()}>Save</Button>
            <Button type="default" onClick={() => handleNextButtonClick()}>Next</Button>
          </Row>
        </div>
      )}
    </div>

  )
}

const mapStateToProps = ({ statePartnerReducer, initalStatePartnerDataReducer }) => ({ statePartnerReducer, initalStatePartnerDataReducer })

const mapDispatchToProps = dispatch => ({
  updateStatePartnerFocusAreaInitiativeForm: (form) => dispatch(updateStatePartnerFocusAreaInitiativeForm(form)),
})

export default connect(mapStateToProps, mapDispatchToProps)(withStyles(s)(FocusAreaInitiativesForm))