<commit_before>import React, { Component } from 'react';
import ImageUpload from './ImageUpload.js';
import { connect } from 'react-redux';
import { push } from 'react-router-redux';
import actions from '../actions/index.js';
import { createRecipe, editRecipe } from '../utils/utils.js';
import '../scss/_createRecipe.scss';

class CreateRecipe extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    const { user, recipe, addField, removeField, updateRecipe, submitRecipe } = this.props;

    let userValidation;
    !user.id ? userValidation = "*Please Sign In To Create A Recipe" : null;

    let recipeTags;
    if (recipe.tags) {
      recipeTags = (
        <div>
          <h2> Tags: </h2>
          <h3> {recipe.tags.map((i, key) =>
            <input
            type="text"
            value={i}
            data-index={key}
            onChange={(e) => updateRecipe(e, { tags: recipe.tags })}
            >
            </input>)}
            </h3>
          </div>
        );
     }

    return (
      <div>
        <div className="edit-recipe-content">
          <form className="edit-recipe-form">
            <div className="user-validation">
              {userValidation}
            </div>

            <label for="title"><h2> Recipe Title: </h2></label>
            <input
              type="text"
              name="title"
              value={recipe.title}
              className="create-input xl-input"
              onChange={(e) => updateRecipe(e)}
            /><br />
            <h2> Images: </h2>
            <div
              className="thumbs"
            >
              {recipe.images.map((i, key) =>
                <div className="thumb">
                  <img src={i} data-index={key} />
                </div>
              )}
            </div>

            <ImageUpload />
            <div className="section">
              <div className="input-container left">
                <label><h2>Yield:</h2></label>
                <input
                  type="number"
                  name="yield"
                  value={recipe.yield}
                  className="create-input small-input"
                  onChange={(e) => updateRecipe(e)}
                />
              </div>
              <div className="input-container">
                <label><h2>Yield unit:</h2></label>
                <input
                  type="text"
                  name="yield_unit"
                  value={recipe.yield_unit}
                  className="create-input medium-input"
                  onChange={(e) => updateRecipe(e)}
                />
              </div>
            </div>
            <div className="section">
              <h2> Ingredients: </h2>
              <ol>
                {recipe.ingredients.map((i, key) =>
                  <li className="input-list-item">
                    <input
                      type="text"
                      value={i}
                      data-index={key}
                      className="create-input xl-input"
                      onChange={(e) => updateRecipe(e, { ingredients: recipe.ingredients })}
                    />
                  </li>)}
              </ol>
              <button
                className="btn btn-add"
                onClick={(e) => {
                  e.stopPropagation();
                  e.preventDefault();
                  addField('ingredients');
                }}
              > Add Ingredient </button>
              <button
                className="btn btn-warning"
                onClick={(e) => {
                  e.stopPropagation();
                  e.preventDefault();
                  removeField('ingredients');
                }}
              > Remove Ingredient </button>
            </div>

            <div className="section">
              <h2> Prep Steps: </h2>
              <ol> {recipe.prep_steps.map((i, key) =>
                <li className="input-list-item">
                  <input
                    type="text"
                    value={i}
                    data-index={key}
                    className="create-input xl-input"
                    onChange={(e) => updateRecipe(e, { prep_steps: recipe.prep_steps })}
                  />
                </li>)}
              </ol>
              <button
                className="btn btn-add"
                onClick={(e) => {
                  e.stopPropagation();
                  e.preventDefault();
                  addField('prep_steps');
                }}
              > Add Step </button>
              <button
                className="btn btn-warning"
                onClick={(e) => {
                  e.stopPropagation();
                  e.preventDefault();
                  removeField('prep_steps');
                }}
              > Remove Step </button>
            </div>

            <div className="section">
              <label><h2>Prep Time:</h2></label>
              <input
                type="text"
                name="prep_time"
                value={recipe.prep_time}
                className="create-input"
                onChange={(e) => updateRecipe(e)}
              />
            </div>

            <div className="section">
              <h2> Cook Steps: </h2>
              <ol> {recipe.cook_steps.map((i, key) =>
                <li className="input-list-item">
                  <input
                    type="text"
                    value={i}
                    data-index={key}
                    className="create-input xl-input"
                    onChange={(e) => updateRecipe(e, { cook_steps: recipe.cook_steps })}
                  />
                </li>)}
              </ol>
              <button
                className="btn btn-add"
                onClick={(e) => {
                  e.stopPropagation();
                  e.preventDefault();
                  addField('cook_steps');
                }}
              > Add Step </button>
              <button
                className="btn btn-warning"
                onClick={(e) => {
                  e.stopPropagation();
                  e.preventDefault();
                  removeField('cook_steps');
                }}
              > Remove Step </button>
            </div>

            <div className="section">
              <h2>Cook Time:</h2>
              <input
                type="text"
                name="cook_time"
                value={recipe.cook_times}
                className="create-input medium-input"
                onChange={(e) => updateRecipe(e)}
              />
            </div>

            <div className="section">
              <h2> Finish Steps: </h2>
              <ol> {recipe.finish_steps.map((i, key) =>
                <li className="input-list-item">
                  <input
                    type="text"
                    value={i}
                    data-index={key}
                    className="create-input xl-input"
                    onChange={
                      (e) => updateRecipe(e, { finish_steps: recipe.finish_steps })}
                  />
                </li>
              )}
              </ol>
              <button
                className="btn btn-add"
                onClick={(e) => {
                  e.stopPropagation();
                  e.preventDefault();
                  addField('finish_steps');
                }}
              > Add Step </button>
              <button
                className="btn btn-warning"
                onClick={(e) => {
                  e.stopPropagation();
                  e.preventDefault();
                  removeField('finish_steps');
                }}
              > Remove Step </button>
            </div>

            <div className="section">
              <h2> Tags: </h2>
              <ol> {recipe.tags.map((i, key) =>
                <li className="input-list-item">
                  <input
                    type="text"
                    value={i}
                    data-index={key}
                    className="create-input xl-input"
                    onChange={(e) => updateRecipe(e, { tags: recipe.tags })}
                  />
                </li>)}
              </ol>
              <button
                className="btn btn-add"
                onClick={(e) => {
                  e.stopPropagation();
                  e.preventDefault();<commit_msg>add null field checks for createRecipe.js<commit_after>import React, { Component } from 'react';
import ImageUpload from './ImageUpload.js';
import { connect } from 'react-redux';
import { push } from 'react-router-redux';
import actions from '../actions/index.js';
import { createRecipe, editRecipe } from '../utils/utils.js';
import '../scss/_createRecipe.scss';

class CreateRecipe extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    const { user, recipe, addField, removeField, updateRecipe, submitRecipe } = this.props;

    let userValidation;
    !user.id ? userValidation = "*Please Sign In To Create A Recipe" : null;

    let images;
    if (recipe.images) {
      images = (
        <div
          className="thumbs"
        >
          {recipe.images.map((i, key) =>
            <div className="thumb">
              <img src={i} data-index={key} />
            </div>
          )}
        </div>
      );
    }
    let ingredients;
    if (recipe.ingredients) {
      ingredients = (
        <ol>
          {recipe.ingredients.map((i, key) =>
            <li className="input-list-item">
              <input
                type="text"
                value={i}
                data-index={key}
                className="create-input xl-input"
                onChange={(e) => updateRecipe(e, { ingredients: recipe.ingredients })}
              />
            </li>)}
        </ol>
      );
    }
    let prep_steps;
    if (recipe.prep_steps) {
      prep_steps = (
        <ol> {recipe.prep_steps.map((i, key) =>
          <li className="input-list-item">
            <input
              type="text"
              value={i}
              data-index={key}
              className="create-input xl-input"
              onChange={(e) => updateRecipe(e, { prep_steps: recipe.prep_steps })}
            />
          </li>)}
        </ol>
      )
    }
    let prep_time;
    let cook_steps;
    if (recipe.cook_steps) {
      cook_steps = (
        <ol> {recipe.cook_steps.map((i, key) =>
          <li className="input-list-item">
            <input
              type="text"
              value={i}
              data-index={key}
              className="create-input xl-input"
              onChange={(e) => updateRecipe(e, { cook_steps: recipe.cook_steps })}
            />
          </li>)}
        </ol>
      );
    }
    let finish_steps;
    if (recipe.finish_steps) {
      finish_steps = (
        <ol> {recipe.finish_steps.map((i, key) =>
          <li className="input-list-item">
            <input
              type="text"
              value={i}
              data-index={key}
              className="create-input xl-input"
              onChange={
                (e) => updateRecipe(e, { finish_steps: recipe.finish_steps })}
            />
          </li>
        )}
        </ol>
      );
    }
    let tags;
    if (recipe.tags) {
      tags = (
        <ol> {recipe.tags.map((i, key) =>
          <li className="input-list-item">
            <input
              type="text"
              value={i}
              data-index={key}
              className="create-input xl-input"
              onChange={(e) => updateRecipe(e, { tags: recipe.tags })}
            />
          </li>)}
        </ol>
      );
    }

    return (
      <div>
        <div className="edit-recipe-content">
          <form className="edit-recipe-form">
            <div className="user-validation">
              {userValidation}
            </div>

            <label for="title"><h2> Recipe Title: </h2></label>
            <input
              type="text"
              name="title"
              value={recipe.title}
              className="create-input xl-input"
              onChange={(e) => updateRecipe(e)}
            /><br />
            <h2> Images: </h2>
            {images}
            <ImageUpload />
            <div className="section">
              <div className="input-container left">
                <label><h2>Yield:</h2></label>
                <input
                  type="number"
                  name="yield"
                  value={recipe.yield}
                  className="create-input small-input"
                  onChange={(e) => updateRecipe(e)}
                />
              </div>
              <div className="input-container">
                <label><h2>Yield unit:</h2></label>
                <input
                  type="text"
                  name="yield_unit"
                  value={recipe.yield_unit}
                  className="create-input medium-input"
                  onChange={(e) => updateRecipe(e)}
                />
              </div>
            </div>
            <div className="section">
              <h2> Ingredients: </h2>
              {ingredients}
              <button
                className="btn btn-add"
                onClick={(e) => {
                  e.stopPropagation();
                  e.preventDefault();
                  addField('ingredients');
                }}
              > Add Ingredient </button>
              <button
                className="btn btn-warning"
                onClick={(e) => {
                  e.stopPropagation();
                  e.preventDefault();
                  removeField('ingredients');
                }}
              > Remove Ingredient </button>
            </div>

            <div className="section">
              <h2> Prep Steps: </h2>
              {prep_steps}
              <button
                className="btn btn-add"
                onClick={(e) => {
                  e.stopPropagation();
                  e.preventDefault();
                  addField('prep_steps');
                }}
              > Add Step </button>
              <button
                className="btn btn-warning"
                onClick={(e) => {
                  e.stopPropagation();
                  e.preventDefault();
                  removeField('prep_steps');
                }}
              > Remove Step </button>
            </div>

            <div className="section">
              <label><h2>Prep Time:</h2></label>
              <input
                type="text"
                name="prep_time"
                value={recipe.prep_time}
                className="create-input"
                onChange={(e) => updateRecipe(e)}
              />
            </div>

            <div className="section">
              <h2> Cook Steps: </h2>
              {cook_steps}
              <button
                className="btn btn-add"
                onClick={(e) => {
                  e.stopPropagation();
                  e.preventDefault();
                  addField('cook_steps');
                }}
              > Add Step </button>
              <button
                className="btn btn-warning"
                onClick={(e) => {
                  e.stopPropagation();
                  e.preventDefault();
                  removeField('cook_steps');
                }}
              > Remove Step </button>
            </div>

            <div className="section">
              <h2>Cook Time:</h2>
              <input
                type="text"
                name="cook_time"
                value={recipe.cook_times}
                className="create-input medium-input"
                onChange={(e) => updateRecipe(e)}
              />
            </div>

            <div className="section">
              <h2> Finish Steps: </h2>
              {finish_steps}
              <button
                className="btn btn-add"
                onClick={(e) => {
                  e.stopPropagation();
                  e.preventDefault();
                  addField('finish_steps');
                }}
              > Add Step </button>
              <button
                className="btn btn-warning"
                onClick={(e) => {
                  e.stopPropagation();
                  e.preventDefault();
                  removeField('finish_steps');
                }}
              > Remove Step </button>
            </div>

            <div className="section">
              <h2> Tags: </h2>
              {tags}
              <button
                className="btn btn-add"
                onClick={(e) => {
                  e.stopPropagation();
                  e.preventDefault();
{'fraction_non_alphanumeric': 0.12992526158445442, 'fraction_numerical': 0.0028699551569506725, 'mean_word_length': 1.070818373158351, 'pattern_counts': {'":': 0, '<': 227, '<?xml version=': 0, '>': 277, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1665342', 'n_tokens_mistral': 4447, 'n_tokens_neox': 4238, 'n_words': 769}