<commit_before>import React from 'react';
import axios from 'axios'
import ReviewList from './ReviewList'

class ArticleLink extends React.Component {
  constructor(props) {
    super(props);
    this.chooseArticle = this.chooseArticle.bind(this);
    this.state = {
      link: '',
      articles: []
    }
  }

  componentDidMount() {
    console.log("component, mounted");
    axios.get('http://localhost:8888/articles/api')
      .then((res) => {
        console.log("gotten!", res.data);
        this.setState({ articles: res.data });
      })
      .then(() => {
        console.log("then...", this.state);
      })
      .then(() => {
        this.chooseArticle();
      })
      .catch((err) => {
        console.error(err);
      })
  }

  chooseArticle() {
    console.log("choose!", this.state);
    let x = 0;
    let y = this.state.articles.length-1;
    let randomNum = Math.floor(Math.random() * ((y-x)+1) + x);
    this.setState({ link:this.state.articles[randomNum].url });
    console.log(randomNum, this.state, this.state.articles[randomNum].url);
    return randomNum;
  }

  shouldComponentUpdate(nextProps, nextState) {
    console.log("wtf", this.state.link, nextState.link);
    return (this.state.link !== nextState.link)
  }

  render() {

    return (
        <h4>{this.link}</h4>
    )
  }
}

export default ArticleLink;<commit_msg>update ArticleLink.js so random link from collection displays on reviewer form<commit_after>import React from 'react';
import axios from 'axios'
import ReviewList from './ReviewList'

class ArticleLink extends React.Component {
  constructor(props) {
    super(props);
    this.chooseArticle = this.chooseArticle.bind(this);
    this.state = {
      link: '',
      articles: []
    }
  }

  componentDidMount() {
    console.log("component, mounted");
    axios.get('http://localhost:8888/articles/api')
      .then((res) => {
        console.log("gotten!", res.data);
        this.setState({ articles: res.data }, function chooseArticle() {

        });
      })
      .then(() => {
        console.log("then...", this.state);
      })
      .then(() => {
        this.chooseArticle();
      })
      .catch((err) => {
        console.error(err);
      })
  }

  chooseArticle() {
    console.log("choose!", this.state);
    let x = 0;
    let y = this.state.articles.length-1;
    let randomNum = Math.floor(Math.random() * ((y-x)+1) + x);
    this.setState({ link:this.state.articles[randomNum].article.url });
    console.log(randomNum, this.state, this.state.articles[randomNum].article.url);
    return randomNum;
  }

  componentWillUpdate(nextProps, nextState) {
        //you'll see the changing state value in here
        console.log('Your prev state: ' + this.state.link);
        console.log('Your next state: ' + nextState.link);
    }

  render() {

    return (
        <h5><a href={this.state.link}>{this.state.link}</a></h5>
    )
  }
}

export default ArticleLink;
{'fraction_non_alphanumeric': 0.1671195652173913, 'fraction_numerical': 0.006114130434782609, 'mean_word_length': 2.6493184634448577, 'pattern_counts': {'":': 0, '<': 9, '<?xml version=': 0, '>': 17, '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': '6948636', 'n_tokens_mistral': 968, 'n_tokens_neox': 926, 'n_words': 172}