{"size": 3132, "ext": "js", "max_stars_repo_path": "src/components/ipo-modules/AddThing.js", "max_stars_repo_name": "enryco/ipotables-react-firebase", "max_stars_repo_stars_event_min_datetime": "2021-10-03T20:49:25.000Z", "max_stars_repo_stars_event_max_datetime": "2022-02-26T03:01:32.000Z", "max_issues_repo_path": "src/components/ipo-modules/AddThing.js", "max_issues_repo_name": "enryco/ipotables-react-firebase", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/ipo-modules/AddThing.js", "max_forks_repo_name": "enryco/ipotables-react-firebase", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 2, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 28.2162162162, "max_line_length": 129, "alphanum_fraction": 0.6411238825}
import React, { Component } from 'react'
import styled from 'styled-components'
import Creatable from 'react-select/lib/Creatable';
import slugify from 'slugify';
import firebaseApp from '../../functions/firebaseApp'
import PropTypes from 'prop-types'

class AddThing extends Component {

  state = {
    selectedOption: '',
    inputValue: '',
    submitOnEnter: false,
  }

  getOptionValueAndLabel = option => ({ value: option.key, label: option.name })

  getNewOptionData = (value, label) => {
    const key = firebaseApp.database().ref().push().key
    return { key, name: label, isNewOption: true }
  }

  isValidNewOption = (inputValue, selectValue, selectOptions) => {

    // helper functions
    const slug = str => slugify(str, { lower: true })

    const compareOption = (inputValue, option) => {

      const candidate = slug(inputValue);

      return (
        slug(this.getOptionValueAndLabel(option).value) === candidate ||
        slug(this.getOptionValueAndLabel(option).label) === candidate
      );
    }

    // comparisons
    return !(!inputValue ||
      selectValue.some(option => compareOption(inputValue, option)) ||
      selectOptions.some(option => compareOption(inputValue, option)));

  }

  handleSubmit = async (selectedOption) => {

    console.log(selectedOption)
    if (!selectedOption) return null

    const { key, name, isNewOption } = selectedOption

    // update firebase
    if (isNewOption) await firebaseApp.database().ref(`/things/${key}/name`).set(name)

    // send selected data to parent component
    this.props.addThing(key)

    this.setState({ selectedOption: null, submitOnEnter: false })
  }


  render() {

    const { options } = this.props

    return (
      <Container onKeyDownCapture={event => {
        const key = event.key
        this.setState((state) => ({ ...state, submitOnEnter: key === 'Enter' }))
      }}>
        <Creatable
          placeholder={'Add thing…'}
          options={options}
          getOptionLabel={option => this.getOptionValueAndLabel(option).label}
          getOptionValue={option => this.getOptionValueAndLabel(option).value}
          getNewOptionData={this.getNewOptionData}
          isValidNewOption={this.isValidNewOption}
          isClearable
          value={this.state.selectedOption}
          onChange={(selectedOption, action) => this.handleSubmit(selectedOption)}
          onKeyDown={event => console.log(event.key)}
          onInputChange={inputValue => this.setState((state) => ({ ...state, inputValue }))}
          menuIsOpen={this.state.inputValue.length > 0}
        />
        {/* <Seperator height={5} /> */}
        {/* <ButtonColored title='Add' color='yellow' icon={<FontAwesomeIcon icon={faPlus} />} onClick={this.handleSubmit} /> */}
      </Container>
    )
  }
}


AddThing.propTypes = {
  options: PropTypes.arrayOf(
    PropTypes.shape({
      key: PropTypes.string.isRequired,
      name: PropTypes.string.isRequired,
    }).isRequired
  )
}


export default AddThing


const Container = styled.div`
  background: #F6F6F6;
  /* border-radius: 4px; */
  /* padding: 8px; */
  /* margin-top: 8px; */
`