<commit_before>import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router';
import { push } from 'react-router-redux';

import actions from '../actions/index.js';
import { forkRecipe, fetchRecipes, fetchRecipe, fetchUser } from '../utils/utils';
import RecipeContainer from './RecipeContainer';
import Fork from './Fork';
import ForkHistoryVis from './ForkHistoryVis';
import '../scss/_main.scss';
import '../scss/_mainRecipe.scss';

import Like from './Like.js';
import Follow from './Follow.js';
class MainRecipe extends Component {
  componentDidMount() {
    const { getRecipe, id, setMainRecipeImage, recipe, setRecipeOwner } = this.props;
    if (id) {
      getRecipe(id, setMainRecipeImage, setRecipeOwner);
    }
  }

  componentWillUpdate(nextProps) {
    const currId = this.props.id;
    const { getRecipe, id, setMainRecipeImage, setRecipeOwner } = nextProps;
    if (+currId !== +id) {
      getRecipe(id, setMainRecipeImage, setRecipeOwner);
    }
  }

  render() {
    const { user, navToEdit, navToProfile, recipe, historyRecipes, setMainRecipeImage, mainRecipeImage, recipeOwner, toggleParentSteps } = this.props;

    let editButton;
    if (user.id === recipe.author && user.id !== null) {
      editButton = <button
      className="btn-toggle-edit"
      onClick={(e) => {
        e.preventDefault();
        e.stopPropagation();
        navToEdit(user);
      }}>Edit Recipe</button>;
    } else {
      editButton = <button className="btn-toggle-edit" disabled>Edit Recipe</button>
    }

    let recipeImages;
    if (recipe.images) {
      recipeImages = (
        <div className="recipe-header-thumbs">
          {recipe.images.map((image) =>
            <div onClick={() => setMainRecipeImage(image)} className="recipe-header-thumb">
              <img className="recipe-header-thumbs-image" src={image} />
            </div>)}
        </div>);
    }

    let recipeTags;
    if (recipe.tags) {
      recipeTags = <h4> tags: {recipe.tags.map(t => <a> {t} </a>) } </h4>;
    }

    let recipeIngredients;
    if (recipe.ingredients) {
      recipeIngredients = (
        <div className="ingredients">
          <h4>Ingredients</h4>
          <ul>
            {recipe.ingredients.map((i) => <li> {i} </li>)}
          </ul>
        </div>
      );
    }

    let recipePrep;
    if (recipe.prep_steps) {
      recipePrep = (
        <div className="prep">
          <h4> Prep | Time: {recipe.prep_time} </h4>
          <ol>
            {recipe.prep_steps.map((s) => <li> {s} </li>)}
          </ol>
        </div>
      );
    }

    let recipeCook;
    if (recipe.cook_steps) {
      recipeCook = (
        <div className="cook">
          <h4> Cook | Time: {recipe.cook_time} </h4>
          <ol>
          { recipe.cook_steps.map((s) => <li> {s} </li>)}
          </ol>
        </div>
      );
    }

    let recipeFinish;
    if (recipe.finish_steps) {
      recipeFinish = (
        <div className="finish">
          <h4> Finish </h4>
          <ol>
          { recipe.finish_steps.map((s) => <li> {s} </li>)}
          </ol>
        </div>
      );
    }

    let parentRecipeIngredients;
    let parentRecipePrep;
    let parentRecipeCook;
    let parentRecipeFinish;


    //PARENT RECIPE LOGIC
    if (recipe.parentRecipe) {
      if (recipe.parentRecipe.ingredients) {
        parentRecipeIngredients = (
          <div className="ingredients">
            <h4>Ingredients</h4>
            <ul>
              {recipe.parentRecipe.ingredients.map((i) => <li> {i} </li>)}
            </ul>
          </div>
        );
      }


      if (recipe.parentRecipe.prep_steps) {
        parentRecipePrep = (
          <div className="prep">
            <h4> Prep | Time: {recipe.parentRecipe.prep_time} </h4>
            <ol>
              {recipe.parentRecipe.prep_steps.map((s) => <li> {s} </li>)}
            </ol>
          </div>
        );
      }

      if (recipe.parentRecipe.cook_steps) {
        parentRecipeCook = (<commit_msg>render changed items in parent entries<commit_after>import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router';
import { push } from 'react-router-redux';

import actions from '../actions/index.js';
import { forkRecipe, fetchRecipes, fetchRecipe, fetchUser } from '../utils/utils';
import RecipeContainer from './RecipeContainer';
import Fork from './Fork';
import ForkHistoryVis from './ForkHistoryVis';
import '../scss/_main.scss';
import '../scss/_mainRecipe.scss';

import Like from './Like.js';
import Follow from './Follow.js';
class MainRecipe extends Component {
  componentDidMount() {
    const { getRecipe, id, setMainRecipeImage, recipe, setRecipeOwner } = this.props;
    if (id) {
      getRecipe(id, setMainRecipeImage, setRecipeOwner);
    }
  }

  componentWillUpdate(nextProps) {
    const currId = this.props.id;
    const { getRecipe, id, setMainRecipeImage, setRecipeOwner } = nextProps;
    if (+currId !== +id) {
      getRecipe(id, setMainRecipeImage, setRecipeOwner);
    }
  }

  render() {
    const { user, navToEdit, navToProfile, recipe, historyRecipes, setMainRecipeImage, mainRecipeImage, recipeOwner, toggleParentSteps } = this.props;

    let editButton;
    if (user.id === recipe.author && user.id !== null) {
      editButton = <button
      className="btn-toggle-edit"
      onClick={(e) => {
        e.preventDefault();
        e.stopPropagation();
        navToEdit(user);
      }}>Edit Recipe</button>;
    } else {
      editButton = <button className="btn-toggle-edit" disabled>Edit Recipe</button>
    }

    let recipeImages;
    if (recipe.images) {
      recipeImages = (
        <div className="recipe-header-thumbs">
          {recipe.images.map((image) =>
            <div onClick={() => setMainRecipeImage(image)} className="recipe-header-thumb">
              <img className="recipe-header-thumbs-image" src={image} />
            </div>)}
        </div>);
    }

    let recipeTags;
    if (recipe.tags) {
      recipeTags = <h4> tags: {recipe.tags.map(t => <a> {t} </a>) } </h4>;
    }

    let recipeIngredients;
    if (recipe.ingredients) {
      recipeIngredients = (
        <div className="ingredients">
          <h4>Ingredients</h4>
          <ul>
            {recipe.ingredients.map((i) => <li> {i} </li>)}
          </ul>
        </div>
      );
    }

    let recipePrep;
    if (recipe.prep_steps) {
      recipePrep = (
        <div className="prep">
          <h4> Prep | Time: {recipe.prep_time} </h4>
          <ol>
            {recipe.prep_steps.map((s) => <li> {s} </li>)}
          </ol>
        </div>
      );
    }

    let recipeCook;
    if (recipe.cook_steps) {
      recipeCook = (
        <div className="cook">
          <h4> Cook | Time: {recipe.cook_time} </h4>
          <ol>
          { recipe.cook_steps.map((s) => <li> {s} </li>)}
          </ol>
        </div>
      );
    }

    let recipeFinish;
    if (recipe.finish_steps) {
      recipeFinish = (
        <div className="finish">
          <h4> Finish </h4>
          <ol>
          { recipe.finish_steps.map((s) => <li> {s} </li>)}
          </ol>
        </div>
      );
    }

    let parentRecipeIngredients;
    let parentRecipePrep;
    let parentRecipeCook;
    let parentRecipeFinish;


    //PARENT RECIPE LOGIC
    if (recipe.parentRecipe) {
      if (recipe.parentRecipe.ingredients) {
        parentRecipeIngredients = (
          <div className="ingredients">
            <h4>Ingredients</h4>
            <ul>
              {recipe.parentRecipe.ingredients.map((ingredient, i) => recipe.ingredients[i] === ingredient ?  <li> {ingredient} </li> :  <li> CHANGED {ingredient} </li>)}
            </ul>
          </div>
        );
      }


      if (recipe.parentRecipe.prep_steps) {
        parentRecipePrep = (
          <div className="prep">
            <h4> Prep | Time: {recipe.parentRecipe.prep_time} </h4>
            <ol>
              {recipe.parentRecipe.prep_steps.map((s) => <li> {s} </li>)}
            </ol>
          </div>
        );
      }

      if (recipe.parentRecipe.cook_steps) {
        parentRecipeCook = (
{'fraction_non_alphanumeric': 0.15252784918594686, 'fraction_numerical': 0.003427592116538132, 'mean_word_length': 2.1568778979907264, 'pattern_counts': {'":': 0, '<': 127, '<?xml version=': 0, '>': 147, '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': '2738993', 'n_tokens_mistral': 2773, 'n_tokens_neox': 2691, 'n_words': 540}