daily pastebin goal
3%
SHARE
TWEET

Untitled

a guest May 24th, 2018 57 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /**
  2.  * This React class is intended to query an endpoint that will return an alphanumeric string, after clicking a button.
  3.  * This component is passed a prop "apiQueryDelay", which delays the endpoint request by N milliseconds. There is a
  4.  * second button to disable this functionality and have the endpoint request run immediately after button click.
  5.  * This data is then to be displayed inside a simple container.
  6.  * The "queryAPI" XHR handler will return the endpoint response in the form of a Promise (such as axios, fetch).
  7.  * The response object will look like the following: {data: "A0B3HCJ"}
  8.  * The containing element ref isn't used, but should remain within the class.
  9.  * Please identify, correct and comment on any errors or bad practices you see in the React component class below.
  10.  * Additionally, please feel free to change the code style as you see fit.
  11.  * Please note - React version for this exercise is 15.5.4
  12.  */
  13.  
  14. import React, { Component } from "react";
  15. import queryAPI from "queryAPI";
  16.  
  17. class ShowResultsFromAPI extends Component {
  18.   constructor(props) {
  19.     super(props);
  20.     this.container = null;
  21.   }
  22.  
  23.   onDisableDelay() {
  24.     this.props.apiQueryDelay = 0;
  25.   }
  26.  
  27.   click() {
  28.     if (!!this.props.apiQueryDelay) {
  29.       setTimeout(function() {
  30.         this.fetchData();
  31.       }, this.props.apiQueryDelay);
  32.     }
  33.   }
  34.  
  35.   fetchData() {
  36.     queryAPI()
  37.       .then(function(response) {
  38.         if (response.data) {
  39.           this.setState({
  40.             data: response.data,
  41.             error: false
  42.           });
  43.         }
  44.       })
  45.       .catch(e => {
  46.         this.setState({
  47.           error: true
  48.         });
  49.       });
  50.   }
  51.  
  52.   render() {
  53.     const { error, data } = this.state;
  54.     return (
  55.       <div className="content-container" ref="container">
  56.         {!!error ? (
  57.           <p>Sorry - there was an error with your request.</p>
  58.         ) : (
  59.           <p>{data}</p>
  60.         )}
  61.  
  62.         <button onClick={this.onDisableDelay.bind(this)}>
  63.           Disable request delay
  64.         </button>
  65.         <button onClick={this.click.bind(this)}>
  66.           Request data from endpoint
  67.         </button>
  68.       </div>
  69.     );
  70.   }
  71. }
  72.  
  73. ShowResultsFromAPI.displayName = {
  74.   name: "ShowResultsFromAPI"
  75. };
  76. ShowResultsFromAPI.defaultProps = {
  77.   apiQueryDelay: 0
  78. };
  79. ShowResultsFromAPI.propTypes = {
  80.   apiQueryDelay: React.propTypes.number
  81. };
  82.  
  83. export default ShowResultsFromAPI;
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top