улучшена оформление главной

index.js

@@ -61,6 +61,9 @@ socketMysql.connect(function(mysqlError) {
 
 		socket.on('torrent', function(hash, options, callback)
 		{
+			if(hash.length != 40)
+				return;
+
 			socketMysql.query('SELECT * FROM `torrents` WHERE `hash` = ?', hash, function (error, rows, fields) {
 			  if(rows.length == 0) {
 			  	callback(undefined);
@@ -84,6 +87,9 @@ socketMysql.connect(function(mysqlError) {
 
 		socket.on('search', function(text, callback)
 		{
+			if(!text || text.length <= 2)
+				return;
+
 			let search = {};
 
 			console.log(text);

package.json

@@ -50,10 +50,12 @@
     "bencode": "^0.11.0",
     "bitfield": "^1.1.2",
     "express": "^4.14.0",
+    "material-ui": "^0.16.6",
     "mysql": "^2.12.0",
     "page": "^1.7.1",
     "react": "^15.4.1",
     "react-dom": "^15.4.1",
+    "react-tap-event-plugin": "^2.0.1",
     "socket.io": "^1.7.2"
   },
   "scripts": {

src/app.js

@@ -6,15 +6,23 @@ import PagesPie from './pages-pie.js';
 var io = require("socket.io-client");
 window.torrentSocket = io('http://' + document.location.hostname + ':8095/');
 
+import injectTapEventPlugin from 'react-tap-event-plugin';
+ 
+// Needed for onTouchTap 
+// http://stackoverflow.com/a/34015469/988941 
+injectTapEventPlugin();
+
+import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
+
 class App extends Component {
 	componentDidMount() {
 		window.router()
 	}
 	render() {
 		return (
-			<div className="App">
+			<MuiThemeProvider>
 				<PagesPie />
-			</div>
+			</MuiThemeProvider>
 		);
 	}
 }

src/css/izi/izi.css

@@ -21,7 +21,7 @@ body {
 	font-family: Roboto, Arial, Helvetica, sans-serif;
 	font-size: 16px;
 	margin: 0;
-	background: #ededed;
+	/* background: #ededed; */
 	cursor: default;
 }
 

src/index-page.js

@@ -20,13 +20,12 @@ export {Header}
 export default class IndexPage extends Component {
   render() {
     return (
-      <div className="column">
+      <div>
       	<Header />
-      	<div className='column center w100p pad1-25'>
+        <Search />
-      		<div>Most recent torrents:</div>
+      	<div className='column center w100p pad0-75'>
         	<RecentTorrents />
         </div>
-        <Search />
       </div>
     );
   }

src/recent-torrents.js

@@ -1,16 +1,43 @@
 import React, { Component } from 'react';
 import formatBytes from './format-bytes'
 
+import {List, ListItem} from 'material-ui/List';
+import Subheader from 'material-ui/Subheader';
+import Paper from 'material-ui/Paper';
+import Divider from 'material-ui/Divider';
+
 const TorrentLine = (props) => {
   const torrent = props.torrent;
-  return (
+return (
-    <div className='clickable row inline fs0-85 pad0-25' onClick={() => window.router('/torrent/' + torrent.hash)}>
+    <div>
-        <div>{torrent.name}</div>
+      <ListItem 
-        <div style={{marginLeft: '8px'}}>({formatBytes(torrent.size, 1)})</div>
+        onClick={() => window.router('/torrent/' + torrent.hash)} 
+        primaryText={torrent.name}
+        secondaryText={formatBytes(torrent.size, 1)}
+        secondaryText={
+            <div className='column'>
+              <div>
+              {
+                formatBytes(torrent.size, 1)
+              }
+              </div>
+              {
+                torrent.path && torrent.path.length > 0
+                ?
+                <div>{torrent.path}</div>
+                :
+                null
+              }
+            </div>
+          }
+      />
+      <Divider />
     </div>
   )
 }
 
+export { TorrentLine }
+
 export default class RecentTorrents extends Component {
   constructor() {
   	super()
@@ -30,13 +57,15 @@ export default class RecentTorrents extends Component {
   }
   render() {
     return (
-      <div className="list column">
+      <List>
-      {
+        <Subheader inset={true}>Most recent torrents</Subheader>
-      	this.torrents.map((torrent, index) =>{
+        <Divider />
-      		return <TorrentLine key={index} torrent={torrent} />;
+        {
-      	})
+        	this.torrents.map((torrent, index) =>{
-      }
+        		return <TorrentLine key={index} torrent={torrent} />;
-      </div>
+        	})
+        }
+        </List>
     );
   }
 }

src/search-results.js

@@ -1,23 +1,26 @@
 import React, { Component } from 'react';
 
+import { TorrentLine } from './recent-torrents'
+import {List, ListItem} from 'material-ui/List';
+import Subheader from 'material-ui/Subheader';
+
 export default class SearchResults extends Component {
   render() {
     return (
-      <div className="list column">
+      <List style={{minWidth: '20em'}}>
-      {
+	      <Subheader inset={true}>Search results</Subheader>
-      	this.props.results && this.props.results.length > 0
+	      {
-      	?
+	      	this.props.results && this.props.results.length > 0
-      	this.props.results.map((torrent, index) =>{
+	      	?
-      		return(
+	      	this.props.results.map((torrent, index) =>{
-      			<div key={index}>
+	      		return(
-      			{torrent.name}
+	      			<TorrentLine torrent={torrent} key={index} />
-      			</div>
+	      		);
-      		);
+	      	})
-      	})
+	      	:
-      	:
+	      	null
-      	null
+	      }
-      }
+      </List>
-      </div>
     );
   }
 }

src/search.js

@@ -1,19 +1,35 @@
 import React, { Component } from 'react';
 
 import SearchResults from './search-results'
+import TextField from 'material-ui/TextField';
+import RaisedButton from 'material-ui/RaisedButton';
 
 export default class Search extends Component {
+  search() {
+    console.log(this.searchValue);
+    window.torrentSocket.emit('search', this.searchValue, (torrents) => {
+      this.searchData = torrents;
+      this.forceUpdate();
+    });
+  }
   render() {
     return (
-      <div className="column">
+      <div className="column w100p center">
-        <div className='row'>
+        <div className='row inline w100p pad0-75' style={{maxWidth: '30em'}}>
-          <input type='text' ref='searchInput' onKeyPress={(e) => {
+          <TextField
-            if (e.key === 'Enter') {
+              hintText="Search torrent or file"
-              window.torrentSocket.emit('search', e.target.value, (torrents) => {
+              floatingLabelText="What to search?"
-                this.searchData = torrents;
+              fullWidth={true}
-                this.forceUpdate();
+              ref='searchInput'
-              });
+              onKeyPress={(e) => {
-            }
+                if (e.key === 'Enter') {
+                  this.search();
+                }
+             }}
+             onChange={e => {this.searchValue = e.target.value}}
+          />
+          <RaisedButton style={{marginTop: '15px', marginLeft: '10px'}} label="Search" primary={true} onClick={() =>{
+            this.search()
           }} />
         </div>
         <SearchResults results={this.searchData} />