initialize project

karandidwani · Feb 13, 2016 · dd5b5c8 · dd5b5c8
commit dd5b5c8
Show file tree

Hide file tree

Showing 7 changed files with 275 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+node_modules/
+js/main.js
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,13 @@
+#wrapper {
+	width: 500px;
+	margin: 0 auto;
+}
+
+#main div {
+    margin: 20px 0;
+}
+
+#my_id {
+    font-weight: bold;
+	font-size: 20px;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>React File Sharer</title>
+
+	<link rel="stylesheet" href="css/style.css">
+</head>
+<body>
+
+	<div id="wrapper">
+		<h1>React FileSharer</h1>
+		<div id="main"></div>
+	</div>
+
+	<script src="js/main.js"></script>
+</body>
+</html>
diff --git a/js/.gitkeep b/js/.gitkeep
diff --git a/package.json b/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "react-filesharer",
+  "version": "1.0.0",
+  "description": "",
+  "main": "src/main.js",
+  "dependencies": {
+    "babel-preset-react": "^6.5.0",
+    "babelify": "^7.2.0",
+    "peerjs": "^0.3.14",
+    "randomstring": "^1.1.4",
+    "react": "^0.14.7",
+    "react-dom": "^0.14.7"
+  },
+  "devDependencies": {},
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC"
+}
diff --git a/src/components/filesharer.jsx b/src/components/filesharer.jsx
@@ -0,0 +1,203 @@
+var React = require('react');
+var randomstring = require('randomstring');
+var Peer = require('peerjs');
+
+module.exports = React.createClass({
+	getInitialState: function(){
+		return {
+			peer: new Peer({key: this.props.opts.peerjs_key}), //for testing
+			/*
+			//for production:
+			peer = new Peer({
+			  host: 'yourwebsite.com', port: 3000, path: '/peerjs',
+			  debug: 3,
+			  config: {'iceServers': [
+			    { url: 'stun:stun1.l.google.com:19302' },
+			    { url: 'turn:numb.viagenie.ca', credential: 'muazkh', username: 'webrtc@live.com' }
+			  ]}
+			})
+			*/
+			my_id: '',
+			peer_id: '',
+			initialized: false,
+			files: [
+
+			]
+		}
+	},
+	componentWillMount: function() {
+
+		this.state.peer.on('open', (id) => {
+			console.log('My peer ID is: ' + id);
+			this.setState({
+				my_id: id,
+				initialized: true
+			});
+		});
+
+
+		this.state.peer.on('connection', (connection) => {
+			console.log('someone connected');
+			console.log(connection); 
+
+			this.setState({
+				conn: connection
+			}, () => {
+
+				this.state.conn.on('open', () => {
+					this.setState({
+						connected: true
+					});
+				});
+
+				this.state.conn.on('data', this.onReceiveData);
+
+			});
+
+
+		});
+
+	},
+
+	connect: function(){
+
+		var peer_id = this.state.peer_id;
+
+		var connection = this.state.peer.connect(peer_id);
+
+		this.setState({
+		    conn: connection
+		}, () => {
+			this.state.conn.on('open', () => {
+				this.setState({
+					connected: true
+				});
+			});
+
+			this.state.conn.on('data', this.onReceiveData);
+
+		});
+
+	},
+
+	sendFile: function(event){
+	    console.log(event.target.files);
+	    var file = event.target.files[0];
+	    var blob = new Blob(event.target.files, {type: file.type});
+
+	    this.state.conn.send({
+	        file: blob,
+	        filename: file.name,
+	        filetype: file.type
+	    });
+
+	},
+
+	onReceiveData: function(data){
+
+		console.log('Received', data);
+
+		var reader = new FileReader();
+
+		var blob = new Blob([data.file], {type: data.filetype});
+
+		reader.readAsDataURL(blob);
+
+		var component = this;
+
+		reader.onload = function(){
+			var file_url = event.target.result;
+			var file_name = data.filename;
+
+			var files = component.state.files;
+			var file_id = randomstring.generate(5);
+
+			console.log(file_id);
+
+			files.push({
+				id: file_id,
+				url: file_url,
+				name: file_name
+			});
+
+			component.setState({
+				files: files
+			});
+
+		}
+
+
+
+	},
+
+	listFiles: function(){
+
+		if(this.state.files.length){
+
+			var file_list = this.state.files.map(function(file){
+				return (
+					<li key={file.id}>
+						<a href={file.url} download={file.name}>{file.name}</a>
+					</li>
+				)
+			});
+
+			return (
+				<div id="file_list">
+				<span id="has_file_message">{this.props.opts.file_list_label || 'Files shared to you: '}</span>
+					<ul>
+					{file_list}
+					</ul>
+				</div>
+			)
+
+		}
+
+		return <span id="no_files_message">{this.props.opts.no_files_label || 'No files shared to you yet'}</span>;
+	},
+
+	handleTextChange: function(event){
+
+		this.setState({
+		  peer_id: event.target.value
+		});
+
+	},
+
+	render: function() {
+		return (
+			<div>
+			{
+				this.state.initialized && 
+				<div>
+					<div id="id_container">
+						{this.props.opts.my_id_label || 'Your PeerJS ID:'} <span id="my_id">{this.state.my_id}</span>
+					</div>
+
+
+					{
+						!this.state.connected && 
+						<div id="connector_container">
+							{this.props.opts.peer_id_label || 'Peer ID'} <input type="text" id="peer_id" onChange={this.handleTextChange} />
+							<button id="connect" onClick={this.connect}>{this.props.opts.connect_label || 'connect'}</button>
+						</div>
+					}
+
+					{
+						this.state.connected && 
+						<div>
+							<div id="fileinput_container">
+								{this.props.opts.file_label || 'File'} <input type="file" name="file" id="file" onChange={this.sendFile} />
+							</div>
+							<div id="files_container">
+								{this.listFiles()}
+							</div>
+						</div>
+					}
+
+				</div>
+			}
+			</div>
+		)
+	}
+});
diff --git a/src/main.js b/src/main.js
@@ -0,0 +1,19 @@
+var React = require('react');
+var ReactDOM = require('react-dom');
+var Filesharer = require('./components/filesharer.jsx');
+
+
+
+var options = {
+	peerjs_key: 'your peer cloud service key'
+}
+
+var Main = React.createClass({
+  render: function () {
+    return <Filesharer opts={options} />;
+  }
+});
+
+var main = document.getElementById('main');
+
+ReactDOM.render(<Main/>, main);