Result of Multiple Ajax requests, one depends on other Ajax Output

I am developing a web application on Perl Catalyst and using ReactJS for the view, jQuery for AJAX, and JSX added as a script in the header.

I am able to fetch AJAX JSON data on a page and refresh the data every 10 seconds. We found this option we create on load on server to fetch data on every 10 seconds. This application is going to be used by a number of users together, so we autogenerate a key which will be incremented if any data is updated on that database table. We set this key on the rest, and it can be accessed by AJAX JSON.

I want to implement a React component which will check this autogenerated AJAX JSON key and will compare it to its previous value every 10 seconds. If they are not equal then it will call the other AJAX function or React component which will update the data on the view page, and older values will be replaced by new.

I have searched a lot but don't get the logic to implement this in ReactJS. Any logic or reference link will be helpful.

Solution

Think about the "Refresh_token" component as your controller. It will handle all of the checking token and get the new order when token has changed. The "Order list" should not know when a token has changed, its job is to re-render its view when a new list has arrived.

//Section 1 Starts Here
var Orderlist = React.createClass({
	render: function(){
        var orderlist11 = [];
        for(var i = 0; i < this.props.list.length; i++){
        	var orderItem = this.props.list[i];
	        orderlist11.push(
	        	<div className="card">
	        		<div className="title">
	        			Order Number {orderItem.ordernumber} 
	        		</div>
        			<div className="content"> 
        				Date & Time : {orderItem.bizorderdate} <br />
         				Username : {orderItem.userid}
        			</div>
                </div>
            );
		}
        return (
            <div> {orderlist11} </div>
        );
 	}
});
 
////// Section 1 ends here
 
 
var RefreshToken = React.createClass({
 	
    getInitialState : function(){
        return {
            token : -1 , //Or anything that is not a token.
            orderlist : []
        }                      
    },

    refreshTimer : null,
    componentDidMount : function(){
    	this.get_order_list(); //Get the intial order list
        this.refreshTimer = setInterval(this.refresh_token, 10000); //Call to check the new token every 10s
    },
     
    refresh_token : function(){
        $.ajax({
            type: 'GET',
            url: "/order/refresh",
            headers: {
                Accept : "application/json","Content-Type": "application/json"
            },
            success: function (resp){
            	var newToken = resp;
           		console.log(newToken); //it give the value of refresh eg. ["20150925313"] //Assume this will give the new value of the order list changed.
                if(newToken != this.state.token){
                    this.setState({ token: newToken});
                    this.get_order_list() //Get the new list when token has changed.
            //      console.log(this.state.resp);
                } 
            }.bind(this)
        });
    },

   	get_order_list : function(){
        $.ajax({
            type: 'GET',
            url: "/order/list/10/1",
            headers: {
            Accept : "application/json", "Content-Type": "application/json"
            },
            success: function(orderlist) {
	            //      console.log(orderlist);
	            //      console.log(this.state.orderlist);
           		this.setState({orderlist: orderlist});
           	}.bind(this),
           	error: function(xhr, status, err) {
       		}
        });
    },

    render: function(){
    	return <Orderlist list={this.state.orderlist} />
    }
});
 
React.render(
  <RefreshToken  />,
  document.getElementById('list_of_orders')
);