роутинг, исправления в занесении торрентов

src/app.js

@@ -1,21 +1,22 @@
 import React, { Component } from 'react';
 import './app.css';
+import './router';
+import PagesPie from './pages-pie.js';
 
 var io = require("socket.io-client");
 window.torrentSocket = io('http://localhost:8099/');
 
-import RecentTorrents from './recent-torrents'
-import Search from './search'
-
 class App extends Component {
-  render() {
-    return (
-      <div className="App">
-      	<RecentTorrents />
-      	<Search />
-      </div>
-    );
-  }
+	componentDidMount() {
+		window.router()
+	}
+	render() {
+		return (
+			<div className="App">
+				<PagesPie />
+			</div>
+		);
+	}
 }
 
 export default App;

src/index-page.js

@@ -0,0 +1,15 @@
+import React, { Component } from 'react';
+
+import RecentTorrents from './recent-torrents'
+import Search from './search'
+
+export default class IndexPage extends Component {
+  render() {
+    return (
+      <div className="column">
+        <RecentTorrents />
+        <Search />
+      </div>
+    );
+  }
+}

src/pages-pie.js

@@ -0,0 +1,89 @@
+import React, { Component } from 'react';
+
+export default class PagesPie extends Component {
+	constructor(props) {
+		super(props);
+		// синглтон
+		if ( PagesPie.instance ) {
+    		return PagesPie.instance;
+		}
+  		PagesPie.instance = this;
+		this.pie = [];
+	}
+	open(pages, params) {
+		if (params && params.replace) {
+			if (params.replace === 'all') {
+				this.pie = [];
+			} else
+			if (params.replace === 'last') {
+				this.pie.pop();		
+			}
+			this.forceUpdate();
+			delete params.replace;
+		}
+		setTimeout(() => {
+			if (Array.isArray(pages)) {
+				for (let i in pages) {
+					this.pie.push({
+						Page: pages[i],
+						params: params
+					});				
+				}
+			} else {
+				this.pie.push({
+					Page: pages,
+					params: params
+				});
+			}
+			this.forceUpdate();			
+		}, 0);
+	}
+	close(count) {
+		if (count && typeof count === 'number') {
+			for (let i = 0; i < count; i++) {
+				this.pie.pop();
+			}
+		} else {
+			this.pie.pop();			
+		}
+		this.forceUpdate();		
+	}
+	findOpened(windowType) {
+		for (let i in this.refs) {
+			if(this.refs[i] instanceof windowType)
+				return this.refs[i];
+		}
+	}
+	// ОТРИСОВКА
+	render() {
+		if (this.pie.length > 0) {
+			return (
+				<div
+					className={'pie full-size ' + (this.props.className || '')}
+				>
+					{
+						this.pie.map(({Page, params}, index) => {
+							let focus = false;
+							if (index === this.pie.length-1) {
+								focus = true;
+							}
+							return (
+								<Page
+									focused={focus}
+									closeHandler={() => { index> 0 ? this.close() : null}}
+									index={index}
+									key={index}
+									ref={index}
+									{...params}
+								>
+								</Page>
+							)
+						})
+					}
+				</div>
+			)
+		} else {
+			return null
+		}
+	}
+}

src/router.js

@@ -0,0 +1,21 @@
+import router from 'page';
+window.router = router;
+import PagesPie from './pages-pie.js';
+
+import IndexPage from './index-page.js'
+import TorrentPage from './torrent-page.js'
+
+router('/', () => {
+	//singleton
+	let pie = new PagesPie;
+	pie.open(IndexPage, {replace: 'all'});
+});
+
+router('/torrent/:hash', (e) => {
+	//singleton
+	let pie = new PagesPie;
+	pie.open(TorrentPage, {
+		replace: 'all',
+		hash: e.params.hash,
+	});
+});

src/search-results.js

@@ -3,19 +3,19 @@ import React, { Component } from 'react';
 export default class SearchResults extends Component {
   render() {
     return (
-      <div className="column">
+      <div className="list column">
       {
-         this.props.results && this.props.results.length > 0
-         ?
-         this.props.results.map((torrent, index) => {
-            return (
-              <div key={index}>
-              {torrent.name}
-              </div>
-            );
-         })
-         :
-         null
+      	this.props.results && this.props.results.length > 0
+      	?
+      	this.props.results.map((torrent, index) =>{
+      		return(
+      			<div key={index}>
+      			{torrent.name}
+      			</div>
+      		);
+      	})
+      	:
+      	null
       }
       </div>
     );

src/torrent-page.js

@@ -0,0 +1,26 @@
+import React, { Component } from 'react';
+
+export default class TorrentPage extends Component {
+  componentDidMount() {
+  	window.torrentSocket.emit('torrent', this.props.hash, {files: true}, (data) => {
+  		console.log(data);
+  		this.torrent = data
+  		this.forceUpdate();
+  	});
+  }
+  render() {
+    return (
+      <div className="column">
+      {
+   			this.torrent
+   			?
+   			<div>
+   				{this.torrent.name}
+   			</div>
+   			:
+   			null
+      }
+      </div>
+    );
+  }
+}