<commit_before>// **Livecoding** is the parent component. It includes all other
// components. It listens and responds to events when necessary.
// It maintains the application's state.

// Include React.
var React   = require('react');

// Include libraries.
var PubSub         = require('pubsub-js');
var GitHub = require('../util/GitHub.js');
var _              = require('lodash');
var util           = require('../util/util.js');

// Include all top-level components.
var MenuBar = require('./MenuBar.jsx');
var Output  = require('./Output.jsx');
var Editor  = require('./Editor.jsx');
var Updates = require('./Updates.jsx');
var updateData = require('../../../.tmp/updates.json');

// Create the React component.
var Livecoding = React.createClass({

	statics: {
		TOKEN: '<PASSWORD>'
	},

	getToken: function() {
		return localStorage.getItem(Livecoding.TOKEN);
	},

	setToken: function(token) {
		localStorage.setItem(Livecoding.TOKEN, token);
	},

	// Set the initial state. As the application grows, so
	// will the number of state properties.
	getInitialState: function() {
		return {
			html: '',
			javascript: '',
			css: '',
			// Specify what mode we're currently editing.
			mode: 'html',
			gistUrl: null,
			outputAllCode: false
		};
	},

	// Each React component has a `render` method. It gets called
	// every time the application's state changes.
	render: function() {
		// Get the current mode.
		var mode = this.state.mode;

		// Get the current mode's content.
		var content = this.state[mode];

		// Should we render all?
		var renderAll = this.renderAll.pop();

		// Render the application. This will recursively call
		// `render` on all the components.
		return (
			<div className='livecoding'>
				<MenuBar
					mode={mode}
					gistUrl={this.state.gistUrl}
				/>
				<div className='content'>
					<Output
						html={this.state.html}
						javascript={this.state.javascript}
						css={this.state.css}
						mode={mode}
						renderAll={renderAll}
					/>
					<Editor content={content} mode={mode} />
				</div>
				<Updates updates={updateData} />
			</div>
		);
	},

	// This function gets called once, before the initial render.
	componentWillMount: function() {

		var self = this;

		// Setup all the subscriptions.
		PubSub.subscribe(Editor.topics().ContentChange, self.handleContentChange);
		PubSub.subscribe(MenuBar.topics().ModeChange, self.handleModeChange);
		PubSub.subscribe(MenuBar.topics().ItemClick, self.handleMenuItemClick);
		PubSub.subscribe(GitHub.topics().Token, self.handleGatekeeperToken);

		// If there's a gist id in the url, retrieve the gist.
		var match = location.href.match(/[a-z\d]+$/);
		if (match) {
			GitHub.readGist(this.getToken(), match[0])
				.then(function(response) {
					var gistUrl = 'https://gist.github.com/' + match[0];
					var state = _.assign({}, response, {gistUrl: gistUrl});
					self.renderAll.push(true);
					self.setState(state);
				}).catch(function(error) {
					console.log('Error', error);
				});
		}

	},

	// Every time **Editor**'s content changes it hands **Livecoding**
	// the new content. **Livecoding** then updates its current state
	// with the new content. This setup enforces React's one-way data
	// flow.
	handleContentChange: function(topic, content) {

		// Get the current mode.
		var mode = this.state.mode;

		// Update application state with new content.
		var change = {};
		change[mode] = content;
		this.setState(change);<commit_msg>add comments<commit_after>// **Livecoding** is the parent component. It includes all other
// components. It listens and responds to events when necessary.
// It maintains the application's state.

// Include React.
var React   = require('react');

// Include libraries.
var PubSub         = require('pubsub-js');
var GitHub = require('../util/GitHub.js');
var _              = require('lodash');
var util           = require('../util/util.js');

// Include all top-level components.
var MenuBar = require('./MenuBar.jsx');
var Output  = require('./Output.jsx');
var Editor  = require('./Editor.jsx');
var Updates = require('./Updates.jsx');
var updateData = require('../../../.tmp/updates.json');

// Create the React component.
var Livecoding = React.createClass({

	statics: {
		TOKEN: 'LIVECODING_TOKEN'
	},

	getToken: function() {
		return localStorage.getItem(Livecoding.TOKEN);
	},

	setToken: function(token) {
		localStorage.setItem(Livecoding.TOKEN, token);
	},

	// Set the initial state. As the application grows, so
	// will the number of state properties.
	getInitialState: function() {
		return {
			html: '',
			javascript: '',
			css: '',
			// Specify what mode we're currently editing.
			mode: 'html',
			gistUrl: null,
			outputAllCode: false
		};
	},

	// Each React component has a `render` method. It gets called
	// every time the application's state changes.
	render: function() {
		// Get the current mode.
		var mode = this.state.mode;

		// Get the current mode's content.
		var content = this.state[mode];

		// Should we render all?
		var renderAll = this.renderAll.pop();

		// Render the application. This will recursively call
		// `render` on all the components.
		return (
			<div className='livecoding'>
				<MenuBar
					mode={mode}
					gistUrl={this.state.gistUrl}
				/>
				<div className='content'>
					<Output
						html={this.state.html}
						javascript={this.state.javascript}
						css={this.state.css}
						mode={mode}
						renderAll={renderAll}
					/>
					<Editor content={content} mode={mode} />
				</div>
				<Updates updates={updateData} />
			</div>
		);
	},

	// This function gets called once, before the initial render.
	componentWillMount: function() {

		var self = this;

		// Setup all the subscriptions.
		PubSub.subscribe(Editor.topics().ContentChange, self.handleContentChange);
		PubSub.subscribe(MenuBar.topics().ModeChange, self.handleModeChange);
		PubSub.subscribe(MenuBar.topics().ItemClick, self.handleMenuItemClick);
		PubSub.subscribe(GitHub.topics().Token, self.handleGatekeeperToken);

		// If there's a gist id in the url, retrieve the gist.
		var match = location.href.match(/[a-z\d]+$/);
		if (match) {
			GitHub.readGist(this.getToken(), match[0])
				.then(function(response) {
					// Construct the gist url.
					var gistUrl = 'https://gist.github.com/' + match[0];
					// Instruct Output to render all code.
					self.renderAll.push(true);
					// Update the state.
					var state = _.assign({}, response, {gistUrl: gistUrl});
					self.setState(state);
				}).catch(function(error) {
					console.log('Error', error);
				});
		}

	},

	// Every time **Editor**'s content changes it hands **Livecoding**
	// the new content. **Livecoding** then updates its current state
	// with the new content. This setup enforces React's one-way data
	// flow.
	handleContentChange: function(topic, content) {

		// Get the current mode.
		var mode = this.state.mode;

		// Update application state with new content.
		var change = {};
		change[mode] = content;
		this.setState(change);
{'fraction_non_alphanumeric': 0.14737291755659973, 'fraction_numerical': 0.0005695571693008686, 'mean_word_length': 3.131764705882353, 'pattern_counts': {'":': 0, '<': 20, '<?xml version=': 0, '>': 20, 'https://': 2, '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': '4801890', 'n_tokens_mistral': 2494, 'n_tokens_neox': 2133, 'n_words': 601}