<commit_before>import React, { Component } from 'react';

class SaladDisplay extends Component{

  constructor(props) {
    super(props);
    this.state = {
      searchText: "",
      recipeError: "",
      recipeTitle: "",
      recipeUrl: "",
      recipeImg: "",
      recipePublisher: ""

    };
  }

  render() {
    return (
      <div className="salad-box">
      {this.state.recipeTitle}
      <br></br>
      <a href={this.state.recipeUrl} target="_blank">Check it out on {this.state.recipePublisher}</a>
      <img src={this.state.recipeImg}></img>
      <span>{this.state.recipeError}</span>
    </div>
    );
  }

  getRecipe(text) {
    if (text.length > 0) {
      let query = encodeURIComponent(text);
      let serverEndpoint = '/salad/' + query;
      fetch(serverEndpoint)
        .then(response => response.json())
        .then(data => {
          if (data.recipes != null) {
            this.setState({
              recipeTitle: data.recipes[0].title,
              recipeUrl: data.recipes[0].source_url,
              recipeImg: data.recipes[0].image_url,
              recipePublisher: data.recipes[0].publisher,
              recipeError: ""
            });
          } else {
            this.setState({recipeError: "No recipes found with those ingredients!"})
          }
        })
        .catch(error => {
          console.log("fetch error ", error);
        });
    }
  }
}


export default SaladDisplay;<commit_msg>salad Display now returns random recipe<commit_after>import React, { Component } from 'react';

class SaladDisplay extends Component{

  constructor(props) {
    super(props);
    this.state = {
      searchText: "",
      recipeError: "",
      recipeTitle: "",
      recipeUrl: "",
      recipeImg: "",
      recipePublisher: ""

    };
  }

  render() {
    return (
      <div className="salad-box">
      {this.state.recipeTitle}
      <br></br>
      <a href={this.state.recipeUrl} target="_blank">Check it out on {this.state.recipePublisher}</a>
      <img src={this.state.recipeImg}></img>
      <span>{this.state.recipeError}</span>
    </div>
    );
  }

  getRecipe(text) {
    if (text.length > 0) {
      let query = encodeURIComponent(text);
      let serverEndpoint = '/salad/' + query;
      fetch(serverEndpoint)
        .then(response => response.json())
        .then(data => {
          if (data.recipes != null) {
            let numberOfRecipes = data.recipes.length;
            let randomNumber = Math.floor((Math.random() * numberOfRecipes) + 1);
            this.setState({
              recipeTitle: data.recipes[randomNumber].title,
              recipeUrl: data.recipes[randomNumber].source_url,
              recipeImg: data.recipes[randomNumber].image_url,
              recipePublisher: data.recipes[randomNumber].publisher,
              recipeError: ""
            });
          } else {
            this.setState({
              recipeTitle: null,
              recipeUrl: null,
              recipeImg: null,
              recipePublisher: null,
              recipeError: "No recipes found with those ingredients!",
            })
          }
        })
        .catch(error => {
          console.log("fetch error ", error);
        });
    }
  }
}


export default SaladDisplay;
{'fraction_non_alphanumeric': 0.1374770361298224, 'fraction_numerical': 0.0021432945499081446, 'mean_word_length': 1.97, 'pattern_counts': {'":': 0, '<': 23, '<?xml version=': 0, '>': 31, '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': '68898', 'n_tokens_mistral': 966, 'n_tokens_neox': 966, 'n_words': 177}