топ торрентов

src/recent-torrents.js

@@ -139,6 +139,9 @@ export default class RecentTorrents extends Component {
     return (
       <List className='animated recent-torrents'>
         <Subheader className='recent-title' inset={true}>
+          <FlatButton style={{marginRight: '8px'}} primary={true} label='top' labelStyle={{color: "#a4c639"}} onClick={() =>{
+	            window.router('/top');
+	        }} />
         	<FlatButton style={{marginRight: '8px'}} label={!this.state.pause ? 'running' : 'stoped'} secondary={this.state.pause} primary={!this.state.pause} onClick={() =>{
 	            this.pauseAndContinue()
 	        }} />

src/router.js

@@ -6,6 +6,7 @@ import IndexPage from './index-page.js'
 import TorrentPage from './torrent-page.js'
 import DMCAPage from './dmca-page.js'
 import AdminPage from './admin-page.js'
+import TopPage from './top-page.js'
 
 router('/', () => {
 	//singleton
@@ -33,4 +34,10 @@ router('/admi5p', () => {
 	//singleton
 	let pie = new PagesPie;
 	pie.open(AdminPage, {replace: 'all'});
+});
+
+router('/top', () => {
+	//singleton
+	let pie = new PagesPie;
+	pie.open(TopPage, {replace: 'all'});
 });

src/top-page.js

@@ -0,0 +1,78 @@
+import React from 'react';
+import Page from './page';
+import Footer from './footer';
+import { Header } from './index-page'
+
+import TorrentLine from './torrent'
+import {List} from 'material-ui/List';
+import Subheader from 'material-ui/Subheader';
+import RaisedButton from 'material-ui/RaisedButton';
+
+export default class TopPage extends Page {
+  constructor(props) {
+    super(props)
+    this.setTitle('Rats On The Boat - Torrents top');
+    this.topTorrents = {};
+    this.types = ['main', 'week', 'hours', 'month', 'video', 'audio', 'books', 'pictures', 'application', 'archive']
+    this.descriptions = {
+      main: 'All',
+      video: 'Video',
+      audio: 'Audio/Music',
+      books: 'Books',
+      pictures: 'Pictures/Images',
+      application: 'Applications/Games',
+      archive: 'Archives',
+      week: 'Last week',
+      hours: 'Last 24 hours',
+      month: 'Last month'
+    }
+  }
+  componentDidMount()
+  {
+    super.componentDidMount();
+    for(const type of this.types)
+    {
+      window.torrentSocket.emit('topTorrents', type == 'main' ? null : type, window.customLoader((data) => {
+        this.topTorrents[type] = data;
+        this.forceUpdate()
+      }))
+    }
+  }
+  render() {
+    return (
+      <div>
+      	<Header />
+      	<div className='column center w100p pad0-75'>
+          <RaisedButton label="Back to main page" primary={true} onClick={() => {
+            window.router('/')
+          }} />
+          {
+            this.types.map((type) => {
+              const torrents = this.topTorrents[type];
+
+              if(!torrents)
+                return null;
+
+              return (
+                <List style={{paddingBottom: '70px'}} className='animated recent-torrents'>
+                  <Subheader inset={true}>
+                  {
+                    this.descriptions[type]
+                  }
+                  </Subheader>
+                {
+                  torrents.map((torrent, index) => {
+                    return <TorrentLine key={index} torrent={torrent} />
+                  })
+                }
+                </List>
+              )
+              
+            })
+          }
+          <Footer />
+        </div>
+      </div>
+    );
+  }
+}