<commit_before><!DOCTYPE html>
<html>
	<head>
		<meta charset=utf-8>
		<title>React - Hello World</title>
		<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
	</head>
	<body>

		<!-- container node -->
		<div id="app"></div>
		
		<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
		<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
		
		<script type="text/jsx">
		/** @jsx React.DOM */

		var DashBoard = React.createClass({

			//load data
			loadData: function(url){
				return $.get('https://test-react.firebaseio.com/' + url + '.json ');
			},

			//before the component is mounted
			componentWillMount: function(){
				
			},

			//after the component is mounted and now we will have access to this.getDOMNode
			//this function primary purpose is to setup any initial request in the state
			componentDidMount: function(){
				this.loadData(this.props.url).then(function(data){
					this.setState({
						metric: data
					});
				}.bind(this));
			},

			//this method is fired as soon as it sees changes in the props
			// we will retrieve new props and check them against old one's
			componentWillReceiveProps: function(nextProps){
				//this.props.url gives access to old url, this method is invoked as soon as the props change , test this from console
				//dashComponent.setProps({url : 'url'});
				var lastUrl = this.props.url;
				this.loadData(nextProps.url).then(function(data){
					this.setState({
						lastRoute: lastUrl,
						metric: data
					});
				}.bind(this));
			},

			//this method is fired if there is any change in the props and decides to re-render the component or not based on the return value
			//controls the re-render of a component
			shouldComponentUpdate: function(nextProps, nextState){
				if(nextState.metric < 100)
					console.log("will not re-render as the metric is less than 100")
				return nextState.metric > 145;
			},

			getInitialState: function(){
				return{
					metric: 0,
					lastRoute: 'metric'
				}; 
			},

			render: function(){
				return(
					<div className="jumbotron">
						<h2>Last Url was : {this.state.lastRoute}</h2>
						<h3>The New Metric : {this.state.metric}</h3>
					</div>
				);
			}
		});

		var dashComponent= React.render(
			<DashBoard url="metric"/>,
			document.getElementById('app')
		)


		</script>
	</body>
</html><commit_msg>Implemented component life cycle - unmount phase, incorporated bootstrap javascript and performed clean up upon unmounting component from the DOM<commit_after><!DOCTYPE html>
<html>
	<head>
		<meta charset=utf-8>
		<title>React - Hello World</title>
		<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
	</head>
	<body>

		<!-- container node -->
		<div id="app"></div>
		
		<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
		<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> 
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
		
		<script type="text/jsx">
		/** @jsx React.DOM */

		var DashBoard = React.createClass({

			//load data
			loadData: function(url){
				return $.get('https://test-react.firebaseio.com/' + url + '.json ');
			},

			//before the component is mounted
			componentWillMount: function(){
				
			},

			//after the component is mounted and now we will have access to this.getDOMNode
			//this function primary purpose is to setup any initial request in the state
			componentDidMount: function(){
				this.loadData(this.props.url).then(function(data){
					this.setState({
						metric: data
					});
				$('#bootstrapTip').tooltip();  
				}.bind(this));
			},

			//this method is fired as soon as it sees changes in the props
			// we will retrieve new props and check them against old one's
			componentWillReceiveProps: function(nextProps){
				//this.props.url gives access to old url, this method is invoked as soon as the props change , test this from console
				//dashComponent.setProps({url : 'url'});
				var lastUrl = this.props.url;
				this.loadData(nextProps.url).then(function(data){
					this.setState({
						lastRoute: lastUrl,
						metric: data
					});
				}.bind(this));
			},

			//this method is fired if there is any change in the props and decides to re-render the component or not based on the return value
			//controls the re-render of a component
			shouldComponentUpdate: function(nextProps, nextState){
				if(nextState.metric < 100)
					console.log("will not re-render as the metric is less than 100")
				return nextState.metric > 145;
			},

			//this method is used to perform any cleanup when a component has to be removed from the DOM
			// to remove a component in console : React.unmountComponentAtNode(document.getElementById('componentId'))
			componentWillUnmount: function(){
				debugger;
				$('#bootstrapTip').tooltip('destroy');  
			},

			getInitialState: function(){
				return{
					metric: 0,
					lastRoute: 'metric'
				}; 
			},

			render: function(){
				return(
					<div className="well jumbotron">
						<h2>Last Url was : {this.state.lastRoute}</h2>
						<a id="bootstrapTip" href="#" data-toggle="toolTip" title="This is the tooltip feature from Bootstrap">Bootstrap Hover!</a> 
						<h3>The New Metric : {this.state.metric}</h3>
					</div>
				);
			}
		});

		var dashComponent= React.render(
			<DashBoard url="metric"/>,
			document.getElementById('app')
		)


		</script>
	</body>
</html>
{'fraction_non_alphanumeric': 0.14268377253814146, 'fraction_numerical': 0.010575589459084605, 'mean_word_length': 3.1236597569692637, 'pattern_counts': {'":': 0, '<': 67, '<?xml version=': 0, '>': 67, 'https://': 11, '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': '1971332', 'n_tokens_mistral': 2222, 'n_tokens_neox': 1772, 'n_words': 494}