feat(search): new search navigation

src/app/feed-page.js

@@ -1,10 +1,6 @@
 import React from 'react';
 import Page from './page';
 
-import SearchResults from './search-results'
-import Search from './search'
-import SelectField from 'material-ui/SelectField';
-import MenuItem from 'material-ui/MenuItem';
 import Feed from './feed';
 
 export default class FeedPage extends Page {
@@ -12,81 +8,9 @@ export default class FeedPage extends Page {
 		super(props)
 		this.setTitle('Rats On The Boat - Content Search Engine');
 	}
-	componentDidMount()
-	{
-		Search.instance().onSearchUpdate = () => this.forceUpdate()
-	}
-	componentWillUnmount()
-	{
-		Search.instance().onSearchUpdate = () => {}
-	}
 	render() {
-		const orderText = (text, field) => {
-			if(field !== Search.instance().state.orderBy)
-				return text;
-
-			if(Search.instance().state.orderDesc)
-				return text + ' ⇩'
-			else
-				return text + ' ⇧'
-		}
-
 		return (
 			<div id='index-window' className='column center'>
-				<div className='torrents-container'>
-					<SearchResults 
-						torrentsSearchResults={Search.instance().searchTorrents} 
-						filesSearchResults={Search.instance().searchFiles}
-						currentSearching={Search.instance().state.searchingIndicator}
-						searchText={Search.instance().currentSearch}
-						resultSelector={
-							<SelectField
-								floatingLabelText={__("Sort by")}
-								floatingLabelFixed={true}
-								value={Search.instance().state.orderBy}
-								onChange={(event, index, value) => {
-									event.preventDefault(); // fix overclick on torrent
-									if(value === 'none') {
-										Search.instance().setState({orderBy: null}, () => {
-											Search.instance().search(true)
-										})
-										return;
-									}
-
-									if(value === Search.instance().state.orderBy)
-									{
-										Search.instance().setState({orderDesc: !Search.instance().state.orderDesc}, () => {
-											Search.instance().search(true)
-										})
-										return;
-									}
-
-									Search.instance().setState({
-										orderBy: value, 
-										orderDesc: (value === 'seeders' || value === 'completed' || value === 'added') ? true : Search.instance().state.orderDesc
-									}, () => {
-										Search.instance().search(true)
-									})
-								}}
-							>
-								<MenuItem value='none' primaryText={__('None')} />
-								<MenuItem value='seeders' primaryText={orderText(__('Seeders'), 'seeders')} />
-								<MenuItem value='name' primaryText={orderText(__('Name'), 'name')} />
-								<MenuItem value='files' primaryText={orderText(__('Files'), 'files')} />
-								<MenuItem value='size' primaryText={orderText(__('Size'), 'size')} />
-								<MenuItem value='added' primaryText={orderText(__('Added date'), 'added')} />
-								<MenuItem value='completed' primaryText={orderText(__('Completed'), 'completed')} />
-							</SelectField>
-						}
-
-						moreTorrentsEnabled={Search.instance().moreSearchTorrents && !Search.instance().state.searchingIndicator}
-						moreFilesEnabled={Search.instance().moreSearchFiles && !Search.instance().state.searchingIndicator}
-						onMoreTorrents={() => Search.instance().moreTorrents()}
-						onMoreFiles={() => Search.instance().moreFiles()}
-						moreTorrentsIndicator={Search.instance().state.moreTorrentsIndicator}
-						moreFilesIndicator={Search.instance().state.moreFilesIndicator}
-					/>
-				</div>
 				<div className='column center w100p pad0-75'>
 					<Feed />
 				</div>

src/app/router.js

@@ -2,6 +2,7 @@
 import PagesPie from './pages-pie.js';
 
 import FeedPage from './feed-page.js'
+import SearchPage from './search-page.js'
 import ActivityPage from './activity-page'
 import TorrentPage from './torrent-page.js'
 import DMCAPage from './dmca-page.js'
@@ -11,10 +12,18 @@ import DownloadPage from './download-page.js'
 import ChangelogPage from './changelog-page.js'
 import FiltersPage from './filters-page.js'
 
+const history = []
+let currentPage
+
 let routers = {}
 const router = (page, callback) => {
 	if(!callback)
 	{
+		currentPage = page ? page : '/'
+		if(history.length >= 10)
+			history.shift()
+		history.push(currentPage)
+
 		if(!page)
 			routers['/'].callback()
 		else
@@ -52,12 +61,34 @@ const router = (page, callback) => {
 
 
 window.router = router;
+window.routerOpenPrev = () => {
+	console.log(history)
+	if(history.length < 2)
+		return
+	history.pop() // last page
+	router(history.pop())
+}
+
+window.routerFix = () => {
+	if(history.length >= 10)
+		history.shift()
+	history.push(currentPage)
+	currentPage = ''
+}
+
+window.routerCurrent = () => currentPage
 
 router('/', () => {
 	//singleton
 	PagesPie.instance().open(FeedPage, {replace: 'all'});
 });
 
+router('/search', () => {
+	//singleton
+	PagesPie.instance().open(SearchPage, {replace: 'all'});
+});
+
+
 router('/torrent/:hash', (e) => {
 	//singleton
 	PagesPie.instance().open(TorrentPage, {

src/app/search-page.js

@@ -0,0 +1,92 @@
+import React from 'react';
+import Page from './page';
+
+import SearchResults from './search-results'
+import Search from './search'
+import SelectField from 'material-ui/SelectField';
+import MenuItem from 'material-ui/MenuItem';
+
+export default class SearchPage extends Page {
+	constructor(props) {
+		super(props)
+		this.setTitle('Rats On The Boat - Content Search Engine');
+	}
+	componentDidMount()
+	{
+		Search.instance().onSearchUpdate = () => this.forceUpdate()
+	}
+	componentWillUnmount()
+	{
+		Search.instance().onSearchUpdate = () => {}
+	}
+	render() {
+		const orderText = (text, field) => {
+			if(field !== Search.instance().state.orderBy)
+				return text;
+
+			if(Search.instance().state.orderDesc)
+				return text + ' ⇩'
+			else
+				return text + ' ⇧'
+		}
+
+		return (
+			<div className='column center'>
+				<div className='torrents-container'>
+					<SearchResults 
+						torrentsSearchResults={Search.instance().searchTorrents} 
+						filesSearchResults={Search.instance().searchFiles}
+						currentSearching={Search.instance().state.searchingIndicator}
+						searchText={Search.instance().currentSearch}
+						resultSelector={
+							<SelectField
+								floatingLabelText={__("Sort by")}
+								floatingLabelFixed={true}
+								value={Search.instance().state.orderBy}
+								onChange={(event, index, value) => {
+									event.preventDefault(); // fix overclick on torrent
+									if(value === 'none') {
+										Search.instance().setState({orderBy: null}, () => {
+											Search.instance().search(true)
+										})
+										return;
+									}
+
+									if(value === Search.instance().state.orderBy)
+									{
+										Search.instance().setState({orderDesc: !Search.instance().state.orderDesc}, () => {
+											Search.instance().search(true)
+										})
+										return;
+									}
+
+									Search.instance().setState({
+										orderBy: value, 
+										orderDesc: (value === 'seeders' || value === 'completed' || value === 'added') ? true : Search.instance().state.orderDesc
+									}, () => {
+										Search.instance().search(true)
+									})
+								}}
+							>
+								<MenuItem value='none' primaryText={__('None')} />
+								<MenuItem value='seeders' primaryText={orderText(__('Seeders'), 'seeders')} />
+								<MenuItem value='name' primaryText={orderText(__('Name'), 'name')} />
+								<MenuItem value='files' primaryText={orderText(__('Files'), 'files')} />
+								<MenuItem value='size' primaryText={orderText(__('Size'), 'size')} />
+								<MenuItem value='added' primaryText={orderText(__('Added date'), 'added')} />
+								<MenuItem value='completed' primaryText={orderText(__('Completed'), 'completed')} />
+							</SelectField>
+						}
+
+						moreTorrentsEnabled={Search.instance().moreSearchTorrents && !Search.instance().state.searchingIndicator}
+						moreFilesEnabled={Search.instance().moreSearchFiles && !Search.instance().state.searchingIndicator}
+						onMoreTorrents={() => Search.instance().moreTorrents()}
+						onMoreFiles={() => Search.instance().moreFiles()}
+						moreTorrentsIndicator={Search.instance().state.moreTorrentsIndicator}
+						moreFilesIndicator={Search.instance().state.moreFilesIndicator}
+					/>
+				</div>
+			</div>
+		);
+	}
+}

src/app/search.js

@@ -38,7 +38,7 @@ class Search extends Component {
 	}
 
 	search(oldSearch) {
-		window.router('/')
+		window.router('/search')
 		this.setState({
 			searchingIndicator: true
 		});
@@ -257,6 +257,27 @@ class Search extends Component {
 		return (
 			<div className="column w100p center">
 				<div className='row inline w100p pad0-75 search-row' style={{minWidth: '35em', backgroundColor: 'white', paddingTop: 0, paddingBottom: this.searchError ? 17 : 0, margin: 5, borderRadius: 3}}>
+					{
+						((this.searchTorrents && this.searchTorrents.length > 0) || (this.searchFiles && this.searchFiles.length > 0))
+						&&
+						<div style={{width: 25, height: 25, margin: 2, marginRight: 8}}>
+							<Checkbox
+								checked={false}
+								uncheckedIcon={<svg viewBox="0 0 459 459">
+							<g>
+								<path d="M178.5,382.5h102v-51h-102V382.5z M0,76.5v51h459v-51H0z M76.5,255h306v-51h-306V255z"/>
+							</g>
+						</svg>
+						}
+								iconStyle={{fill: '#27ce74'}}
+								onCheck={() => {
+									if(window.routerCurrent() !== '/search')
+										window.router('/search')
+								}}
+								style={{paddingTop: '0.6em', paddingLeft: '0.2em'}}
+							/>
+						</div>
+					}
 					<TextField
 						style={{marginTop: -12}}
 						hintText={__('Search torrent or file')}

src/app/torrent-page.js

@@ -170,7 +170,7 @@ export default class TorrentPage extends Page {
 
   handleChange = (value) => {
   	if(value == 'main') {
-  		window.router('/');
+  		window.routerOpenPrev();
   		return;
   	}
 
@@ -338,7 +338,7 @@ export default class TorrentPage extends Page {
   						value={this.state.value}
   						onChange={this.handleChange}
   					>
-  						<Tab label={__('Back to main')} value="main" />
+  						<Tab label={__('Back to previus')} value="main" />
   						<Tab label={__('Information')} value="info" >
   							<div className='column w100p'>
   								<div className='row w100p torrent-information-row'>

src/app/torrent.js

@@ -238,7 +238,7 @@ export default class Torrent extends Component {
               return true;
             }
             */
-
+					window.routerFix()
   					PagesPie.instance().open(TorrentPage, {replace: 'all', hash: torrent.hash, peer: torrent.peer})
   				}} 
   				primaryText={