Random Quote Machine - Timeout Issues?

Random Quote Machine - Timeout Issues?
0

#1

I’m working through the Random Quote Machine project and I have it at a point where it sometimes passes all the tests, and sometimes it doesn’t. I attempted to create the project using a combination of React and Bootstrap, since I wanted to gain more practical experience using both.

Right now, I only have three quotes loaded into a variable - array containing three objects. The tests that most often get caught are #8 and #9 - “when the #new-quote button is clicked, my quote machine should fetch a new quote/ author and display it in the #text/ #author element.” Also worth noting is that sometimes the tests run quick, while others it seems to churn for a bit.

I’m not sure if this is because of how I’m using React, the efficiency of my newQuote() function, or something else entirely. Any help and/ or feedback is greatly appreciated.

Once I get consistent passes, my next step will be to use a JSON file to pull from a larger quote pool.

My codepen is here: https://codepen.io/bloo0178/pen/YOKYNj


#2

You seem to have two different versions of redux running. Maybe take one of them out?


#3

I noticed even on the FCC demo, the tests are failing sometimes. It seems like something may have been changed recently in the test scripts which is causing these timeout failures.

I was able to just use https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.0/redux.min.js and your code still works sometimes (even when the test cooperate). I say sometimes, because your newQuote function is not correct. Because your are adding 1 to the result of Math.floor(Math.random() * quotes.length) , sometimes you are referencing a 4th element which does not exits (you only have 3 quote objects). The following would correct that and simply your code:

const newQuote = () => quotes[Math.floor(Math.random() * quotes.length)];

Your QuoteContent component could really just be an SFC (stateless functional component) and be written as the following. Whenever possible, try to use SFCs.

const QuoteContent = props => (
  <div>
    <h3 id="text" className="quote-text text-primary">{props.quote}</h3>
    <h4 id="author" className="author">- {props.author}</h4>
  </div>
);

Also, since your newQuote function returns an object with quote and author properties, you could simplify your QuoteBox constructor method to be:

  constructor(props) {
    super(props);
    this.state = newQuote();
    this.handleClick = this.handleClick.bind(this);
  }

and then your handleClick method just becomes:

  handleClick() {
    this.setState(newQuote());
  }

#4

Thanks for taking a thorough look through my code - much appreciated! I ended up pulling all the Redux code I had commented out, as well as the Redux libraries. I started off wanting to use Redux for this project, but found I was over-complicating my solution to a fault.

I also implemented your other suggestions. The tests I mentioned still fail randomly - like you said, I think it’s a bug with the test scripts - but the code is certainly much easier to digest. I particularly appreciate your feedback on using SFC’s. That made that particular concept click with me finally.

For others viewing this, my QuoteBox constructor previously included the following code (the handleClick contained similar code, but contained within this.setState):

let randomQuote = newQuote();
    this.state = {
      quote: randomQuote.quote,
      author: randomQuote.author
    }

Also, for the benefit of others viewing this, my QuoteContent component was previously set up with a constructor similar to the main QuoteBox. Modifying it to the code Randell provided changed it into a stateless functional component, which served the purpose of what I intended it for perfectly.