alcides/index.html

## index.html
<style>
#username {
	float: right;
	margin-right: 100px;
}

#files {
	clear: right;
	width: 20%;
	float: left;
}

#editor {
	clear: right;
	float: left;
	width: 35%;
	margin-left: 20px;
}
#marker {
	clear: right;
	float: left;
	width: 35%;
	margin-left: 20px;
	padding-left: 20px;
	margin-left: solid black 1px;
}
</style>


<!-- index.html -->
<html>
  <head>
    <title>Hello React</title>
    <script src="http://fb.me/react-0.12.2.js"></script>
    <script src="http://fb.me/JSXTransformer-0.12.2.js"></script>
    <script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script>

	<script src="//cdnjs.cloudflare.com/ajax/libs/dropbox.js/0.10.2/dropbox.min.js"></script>
  </head>
  <body>
    <div id="content"></div>
    <script type="text/jsx">

var converter = new Showdown.converter();

var client = new Dropbox.Client({ key: "b0sttyzj1vqr7z8" });

var Username = React.createClass({
	getInitialState: function() {
		return {username: ''};
	},
	render: function() {
		return (
			<div id="username" dangerouslySetInnerHTML={{__html: this.state.username}}>
			</div>
		);
	}
});

var FileList = React.createClass({
	getInitialState: function() {
		return {files: []};
	},
	selectFile: function(e) {
		this.props.onSelect(e.target.innerHTML);
	},
	render: function() {
		var sel = this.selectFile
		var files = this.state.files.map(function (f) {
			return (<li><a href="#" onClick={sel}>{f}</a></li>);
		});
		return (<div id="files"><ul id="filedir">{files}</ul></div>);
	}
});

var Editor = React.createClass({
	getInitialState: function() {
		return {data: ""};
	},
	changeText: function(e) {
		this.props.onChange(e.target.value);
	},
	render: function() {
		return (
			<div id="editor">
				<textarea id="text" rows="50" cols="60" onChange={this.changeText}>{this.props.data}</textarea>
				<button id="save_button">Save</button>
			</div>
		);
	}
});

var Marker = React.createClass({
	getInitialState: function() {
		return {value: ''};
	},
	render: function() {
		return (
		<div id="marker" dangerouslySetInnerHTML={{__html: converter.makeHtml(this.state.value)}}></div>
		);
	}
});

var Container = React.createClass({
	handleChange: function(e) {
		return this.refs.marker.setState({value: e});
	},
	selectFile: function(f) {
		var ed = this.refs.editor;
		client.readFile(f, function(error, data) {
			if (error) {
				return handleError(error);
			}
			ed.setState({data: data});

			document.getElementById("save_button").onclick = function() {
				var data = document.getElementById("text").value;
			}
		});
	},
	render: function() {
		return (
 <div><Username ref="user" /><FileList ref="list" onSelect={this.selectFile} /><Editor ref="editor" onChange={this.handleChange} /><Marker ref="marker" /></div>
		)
	}
})

var app = React.render( <Container />, document.getElementById('content') );


var loadFiles = function(client) {

	client.getAccountInfo(function(error, accountInfo) {
		if (error) {
			return showError(error);  // Something went wrong.
		}
		app.refs.user.setState({username: accountInfo.name});
	});

	client.readdir("/", function(error, entries) {
		if (error) {
			return showError(error);  // Something went wrong.
		}
		app.refs.list.setState({files: entries});
	});
};


function saveFile(fname, data) {
	client.writeFile(fname, data, function(error, stat) {
		if (error) {
			return handleError(error);
		}
	});
}

function showError(e) {
	alert(e);
}

client.authenticate(function(error, client) {
	if (error) {
		return showError(error);
	}

	client.onError.addListener(function(error) {
		if (window.console) {  // Skip the "if" in node.js code.
			console.error(error);
		}
	});
	loadFiles(client);
});


    </script>
  </body>
</html>
	<style>
	#username {
	float: right;
	margin-right: 100px;
	}

	#files {
	clear: right;
	width: 20%;
	float: left;
	}

	#editor {
	clear: right;
	float: left;
	width: 35%;
	margin-left: 20px;
	}
	#marker {
	clear: right;
	float: left;
	width: 35%;
	margin-left: 20px;
	padding-left: 20px;
	margin-left: solid black 1px;
	}
	</style>


	<!-- index.html -->
	<html>
	<head>
	<title>Hello React</title>
	<script src="http://fb.me/react-0.12.2.js"></script>
	<script src="http://fb.me/JSXTransformer-0.12.2.js"></script>
	<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script>

	<script src="//cdnjs.cloudflare.com/ajax/libs/dropbox.js/0.10.2/dropbox.min.js"></script>
	</head>
	<body>
	<div id="content"></div>
	<script type="text/jsx">

	var converter = new Showdown.converter();

	var client = new Dropbox.Client({ key: "b0sttyzj1vqr7z8" });

	var Username = React.createClass({
	getInitialState: function() {
	return {username: ''};
	},
	render: function() {
	return (
	<div id="username" dangerouslySetInnerHTML={{__html: this.state.username}}>
	</div>
	);
	}
	});

	var FileList = React.createClass({
	getInitialState: function() {
	return {files: []};
	},
	selectFile: function(e) {
	this.props.onSelect(e.target.innerHTML);
	},
	render: function() {
	var sel = this.selectFile
	var files = this.state.files.map(function (f) {
	return (<li><a href="#" onClick={sel}>{f}</a></li>);
	});
	return (<div id="files"><ul id="filedir">{files}</ul></div>);
	}
	});

	var Editor = React.createClass({
	getInitialState: function() {
	return {data: ""};
	},
	changeText: function(e) {
	this.props.onChange(e.target.value);
	},
	render: function() {
	return (
	<div id="editor">
	<textarea id="text" rows="50" cols="60" onChange={this.changeText}>{this.props.data}</textarea>
	<button id="save_button">Save</button>
	</div>
	);
	}
	});

	var Marker = React.createClass({
	getInitialState: function() {
	return {value: ''};
	},
	render: function() {
	return (
	<div id="marker" dangerouslySetInnerHTML={{__html: converter.makeHtml(this.state.value)}}></div>
	);
	}
	});

	var Container = React.createClass({
	handleChange: function(e) {
	return this.refs.marker.setState({value: e});
	},
	selectFile: function(f) {
	var ed = this.refs.editor;
	client.readFile(f, function(error, data) {
	if (error) {
	return handleError(error);
	}
	ed.setState({data: data});

	document.getElementById("save_button").onclick = function() {
	var data = document.getElementById("text").value;
	}
	});
	},
	render: function() {
	return (
	<div><Username ref="user" /><FileList ref="list" onSelect={this.selectFile} /><Editor ref="editor" onChange={this.handleChange} /><Marker ref="marker" /></div>
	)
	}
	})

	var app = React.render( <Container />, document.getElementById('content') );



	var loadFiles = function(client) {

	client.getAccountInfo(function(error, accountInfo) {
	if (error) {
	return showError(error); // Something went wrong.
	}
	app.refs.user.setState({username: accountInfo.name});
	});

	client.readdir("/", function(error, entries) {
	if (error) {
	return showError(error); // Something went wrong.
	}
	app.refs.list.setState({files: entries});
	});
	};



	function saveFile(fname, data) {
	client.writeFile(fname, data, function(error, stat) {
	if (error) {
	return handleError(error);
	}
	});
	}

	function showError(e) {
	alert(e);
	}

	client.authenticate(function(error, client) {
	if (error) {
	return showError(error);
	}

	client.onError.addListener(function(error) {
	if (window.console) { // Skip the "if" in node.js code.
	console.error(error);
	}
	});
	loadFiles(client);
	});


	</script>
	</body>
	</html>