context api in react

reactContextPattern.md

Context Consumer Component

 <BasicContextConsumer >
                    {({state, actions}) => (
                    <React.Fragment>
                        <div className="row">
                            <FormGroup
                                controlId="desc-field"
                            >
                                <h3>Description</h3>
                                <FormControl
                                    type="textarea"
                                    value={state.basicDesc}
                                    placeholder="Enter Your Description Here"
                                    onChange={actions.handleChangeDesc}
                                    maxLength="512"
                                />
                                <FormControl.Feedback />
                                <HelpBlock>Characters left: {state.descCharsLeft}</HelpBlock>
                            </FormGroup>
                        </div>

                     <hr/>

                        <div className="row">
                            <div className="date-picker-duo col-sm-6">
                                <div className="col-xs-6">
                                    <h3>Start Date</h3>
                                    <DatePicker
                                    inline
                                    selected={state.startDate}
                                    selectsStart
                                    onChange={actions.handleChangeStart} 
                                    placeholderText='Click to select a date'
                                    className="start-date-field"
                                    />
                                </div>
                                <div className="col-xs-6">
                                    <h3>End Date</h3>
                                    <DatePicker
                                    inline
                                    selected={state.endDate}
                                    selectsend
                                    onChange={actions.handleChangeEnd} 
                                    placeholderText='Click to select a date'
                                    className="end-date-field"
                                    />
                                </div>
                            </div>
                            <FormGroup bsClass="col-sm-6" controlId="formControlsSelectMultiple">
                                <h3 className="days-checkbox-title">Days of the Week</h3>
                                {state.dayWeekOptions.map((day) => {
                                    return(
                                        <div className="weekday-checkbox col-xs-3">
                                            <input 
                                                value={day.name}
                                                onChange={actions.handleDaysWeek} 
                                                type="checkbox" 
                                                id={day.name}
                                                key={day.name} />
                                            <label htmlFor={day.name}>{day.name}</label>
                                        </div>
                                    )
                                })}
                            
                            </FormGroup>
                
                        </div>
                    </React.Fragment>
                    )}
                </BasicContextConsumer>

Provider Component

const BasicContext = React.createContext();
export const BasicContextConsumer = BasicContext.Consumer;

class BasicInfoProvider extends Component {
  state = {
      basicDesc: null,
  	startDate: defaultDateState,
  	endDate: defaultDateState,
  	daysOfWeek: null,
  	dayWeek: [],
      dayWeekOptions: daysWeek,
  	descCharsLeft: descMaxChars,
  };

  updateField = (propertyName) => (e) => {
      const { form } = this.state;
      const newElement = {
  		...form,
  			[propertyName]: e.target.value
  		};
      this.setState({ form: newElement }); 
  }

  

  //handle dates
  handleChangeStart = (date) => {
  	console.log(date);
  	this.setState({
  	  startDate: date
  	});
    }


    handleChangeEnd = (date) => {
  	this.setState({
  	  endDate: date
  	});
    }
  

  handleChangeDesc = (e) => {
  	var input = e.target.value;
  	this.setState({
  		basicDesc: input,
  		descCharsLeft: descMaxChars - input.length
  	});
  }

  handleDaysWeek = (e) => {
  	console.log('days week selection', e.target.value)
  	const daySelection = e.target.value;
  	let daySelectionArr;
  	if(this.state.dayWeek.indexOf(daySelection) > -1) {
  		daySelectionArr = this.state.dayWeek.filter(s => s !== daySelection)
  	} else {
  		daySelectionArr = [...this.state.dayWeek, daySelection];
  	}
  	this.setState({ dayWeek: daySelectionArr });
  }

 
  render(){
     return(
  		<React.Fragment>
  			<BasicContext.Provider value={{
  				...this.state,
  				state: this.state,
  				actions: {
  					handleChangeDesc: this.handleChangeDesc,
  					handleChangeEnd: this.handleChangeEnd,
  					handleChangeStart: this.handleChangeStart,
  					handleDaysWeek: this.handleDaysWeek
  				},
  			}}>
  				{this.props.children}
  			</BasicContext.Provider> 
  		</React.Fragment>
          
     )
  }
}

export const contextTypes = {
  	basicDesc: PropTypes.string,
  	startDate: PropTypes.number,
  	endDate: PropTypes.number,
  	daysOfWeek: PropTypes.string,
  	dayWeek: PropTypes.array,
      dayWeekOptions: PropTypes.array,
  	descCharsLeft: PropTypes.number,
}
export default BasicInfoProvider