feat(activity): activity page / feed separate

src/app/activity-page.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import Page from './page';
+
+import RecentTorrents from './recent-torrents'
+
+export default class ActivityPage extends Page {
+  constructor(props) {
+    super(props)
+    this.setTitle('Rats On The Boat - Content Search Engine');
+  }
+  render() {
+    return (
+      <div className='column center'>
+      	<div className='column center w100p pad0-75'>
+        	<RecentTorrents />
+        </div>
+      </div>
+    );
+  }
+}

src/app/css/izi/components.css

@@ -85,12 +85,12 @@
 	}
 }
 
-@media only screen and (max-width: 840px) 
+@media only screen and (max-width: 912px) 
 { 
 	.header-row {
 		flex-wrap: wrap;
 		align-content: flex-start;
-		justify-content: flex-start;
+		justify-content: center;
 	}
 
 	.search-panel {

src/app/header.js

@@ -163,7 +163,7 @@ class Header extends React.Component {
             transition: '1s'
           }}>
           <RaisedButton
-            label={__('Search')}
+            label={__('Feed')}
             onClick={() => {
               window.router('/')
             }}
@@ -171,29 +171,15 @@ class Header extends React.Component {
             labelColor='white'
             style={{height: 60, borderRadius: 6, margin: 5, zIndex: 1}}
             buttonStyle={{borderRadius: 5}}
-            icon={<svg fill='white' style={{height: 28}} viewBox="0 0 512 512">
+            icon={<svg fill='white' style={{height: 28}} viewBox="0 0 64.051 64.051">
           <g>
-             <path d="M310,190c-5.52,0-10,4.48-10,10s4.48,10,10,10c5.52,0,10-4.48,10-10S315.52,190,310,190z"/>
+		<path d="M8,0v2c16,0,31.173,7.065,41.472,19.386C57.567,31.065,62.051,43.358,62.051,56h2c0-13.11-4.649-25.858-13.044-35.897
-           </g>
+			C40.326,7.327,25,0,8,0z"/>
-           <g>
+		<path d="M50.769,56h2C52.769,31.343,33,11.282,8,11.282v2C32,13.282,50.769,32.445,50.769,56z"/>
-             <path d="M500.281,443.719l-133.48-133.48C388.546,277.485,400,239.555,400,200C400,89.72,310.28,0,200,0S0,89.72,0,200
+		<path d="M8,22.564v2c17,0,31.486,14.102,31.486,31.436h2C41.486,37.563,26,22.564,8,22.564z"/>
-               s89.72,200,200,200c39.556,0,77.486-11.455,110.239-33.198l36.895,36.895c0.005,0.005,0.01,0.01,0.016,0.016l96.568,96.568
+		<path d="M30.205,56C30.205,43.784,20,33.846,8,33.846v2c11,0,20.205,9.041,20.205,20.154H30.205z"/>
-               C451.276,507.838,461.319,512,472,512c10.681,0,20.724-4.162,28.278-11.716C507.837,492.731,512,482.687,512,472
+		<path d="M16.103,56c0-4.439-3.612-8.051-8.052-8.051S0,51.561,0,56s3.611,8.051,8.051,8.051S16.103,60.439,16.103,56z M2,56
-               S507.837,451.269,500.281,443.719z M305.536,345.727c0,0.001-0.001,0.001-0.002,0.002C274.667,368.149,238.175,380,200,380
+			c0-3.336,2.715-6.051,6.051-6.051c3.337,0,6.052,2.715,6.052,6.051s-2.715,6.051-6.052,6.051C4.715,62.051,2,59.336,2,56z"/>
-               c-99.252,0-180-80.748-180-180S100.748,20,200,20s180,80.748,180,180c0,38.175-11.851,74.667-34.272,105.535
-               C334.511,320.988,320.989,334.511,305.536,345.727z M326.516,354.793c10.35-8.467,19.811-17.928,28.277-28.277l28.371,28.371
-               c-8.628,10.183-18.094,19.65-28.277,28.277L326.516,354.793z M486.139,486.139c-3.78,3.78-8.801,5.861-14.139,5.861
-               s-10.359-2.081-14.139-5.861l-88.795-88.795c10.127-8.691,19.587-18.15,28.277-28.277l88.798,88.798
-               C489.919,461.639,492,466.658,492,472C492,477.342,489.919,482.361,486.139,486.139z"/>
-           </g>
-           <g>
-             <path d="M200,40c-88.225,0-160,71.775-160,160s71.775,160,160,160s160-71.775,160-160S288.225,40,200,40z M200,340
-               c-77.196,0-140-62.804-140-140S122.804,60,200,60s140,62.804,140,140S277.196,340,200,340z"/>
-           </g>
-           <g>
-             <path d="M312.065,157.073c-8.611-22.412-23.604-41.574-43.36-55.413C248.479,87.49,224.721,80,200,80c-5.522,0-10,4.478-10,10
-               c0,5.522,4.478,10,10,10c41.099,0,78.631,25.818,93.396,64.247c1.528,3.976,5.317,6.416,9.337,6.416
-               c1.192,0,2.405-0.215,3.584-0.668C311.472,168.014,314.046,162.229,312.065,157.073z"/>
 	</g>
          </svg>
          
@@ -246,6 +232,40 @@ class Header extends React.Component {
                     </g>
                   </svg>
              }
+          />
+          <RaisedButton
+            label={__('Activity')}
+            onClick={() => {
+              window.router('/activity')
+            }}
+            backgroundColor='#2a5cba'
+            labelColor='white'
+            style={{height: 60, width: 150, borderRadius: 5, margin: 5, zIndex: 1}}
+            buttonStyle={{borderRadius: 5}}
+            icon={<svg fill='white' style={{height: 30}} viewBox="0 0 352.352 352.352">
+                    <g>
+                      <path d="M255.432,37.172c-7.956-15.3-20.808-28.152-36.107-36.108c-4.284-2.448-10.404-0.612-11.628,4.896
+                        c-1.225,4.284-3.061,8.568-4.896,12.24C153.84-4.444,95.699,20.036,58.979,54.308c-41.616,39.168-62.424,102.816-45.9,157.896
+                        c1.837,7.344,12.24,4.283,11.017-3.061c-7.956-51.408,6.12-99.756,40.392-138.924c37.332-42.228,82.008-45.9,133.416-40.392
+                        c-1.224,3.672-1.836,7.344-1.836,11.016c0,3.06,1.225,4.896,3.673,5.508c0,1.224,0,3.06,0.611,4.284
+                        c3.672,7.956,12.853,6.732,20.196,5.508c11.016-1.224,22.644-3.672,32.436-8.568C256.656,45.74,257.268,40.231,255.432,37.172z
+                        M210.144,40.844c-0.611,0-1.224,0-2.447,0c1.224-7.344,5.508-14.688,9.791-22.032c7.345,4.896,13.465,11.016,18.973,18.36
+                        c-5.508,1.836-11.017,2.448-16.524,3.06C216.876,40.844,213.204,40.844,210.144,40.844z"/>
+                      <path d="M297.048,318.08c58.752-74.664,80.172-204.408-9.18-265.608c-5.509-3.672-11.628,4.896-6.732,9.18
+                        c71.604,67.32,63.036,173.196,4.896,246.636c-1.836-1.837-4.284-3.061-6.12-4.284c0-6.12-7.956-11.017-12.853-5.508
+                        c-11.016,12.239-14.688,27.539-18.972,43.451c-1.224,4.896,2.448,10.404,7.956,10.404c17.136,0,34.884-3.672,50.796-11.016
+                        c4.284-2.448,4.896-9.181,1.836-12.24C303.78,324.812,300.72,321.752,297.048,318.08z M273.18,314.407
+                        c5.508,4.896,10.404,10.404,15.3,15.912c-7.344,2.448-15.3,3.672-23.256,4.896C267.06,327.872,269.508,320.527,273.18,314.407z"/>
+                      <path d="M219.936,321.14c-36.72,14.076-63.648,15.912-100.979-0.612c-27.54-12.239-51.408-31.212-71.604-52.02
+                        c4.896-3.672,9.792-7.344,15.3-11.016c4.896-3.673,4.896-9.793,0-13.465c-13.464-9.18-29.376-16.523-45.288-20.808
+                        c-4.284-1.224-8.567,1.224-9.792,5.508c-3.06,11.017-4.284,21.42-2.447,33.048c1.224,7.956,5.508,20.809,13.464,24.48
+                        c3.672,1.836,9.792,0,9.18-5.508l0,0c3.06-1.836,6.12-3.061,9.18-4.896c19.584,28.764,51.408,50.796,83.232,63.036
+                        c30.6,12.24,80.784,22.644,105.264-7.344C229.728,327.26,226.668,318.691,219.936,321.14z M21.035,260.552
+                        c-1.836-6.732-1.224-13.464,0-19.584c9.181,3.06,17.748,7.344,26.316,12.24c-6.732,6.731-14.688,11.628-22.644,17.136
+                        C23.483,266.06,21.647,263.611,21.035,260.552z"/>
+                    </g>
+                  </svg>
+             }
           />
 						<div className='fs0-85 pad0-75 column search-panel' style={{
               marginLeft: 'auto', 

src/app/index-page.js

@@ -1,98 +0,0 @@
-import React from 'react';
-import Page from './page';
-
-import RecentTorrents from './recent-torrents'
-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 IndexPage 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 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 />
-        	<RecentTorrents />
-        </div>
-      </div>
-    );
-  }
-}

src/app/router.js

@@ -1,7 +1,8 @@
 //import router from 'page';
 import PagesPie from './pages-pie.js';
 
-import IndexPage from './index-page.js'
+import FeedPage from './feed-page.js'
+import ActivityPage from './activity-page'
 import TorrentPage from './torrent-page.js'
 import DMCAPage from './dmca-page.js'
 import ConfigPage from './config-page.js'
@@ -54,7 +55,7 @@ window.router = router;
 
 router('/', () => {
 	//singleton
-	PagesPie.instance().open(IndexPage, {replace: 'all'});
+	PagesPie.instance().open(FeedPage, {replace: 'all'});
 });
 
 router('/torrent/:hash', (e) => {
@@ -91,6 +92,11 @@ router('/downloads', () => {
 	PagesPie.instance().open(DownloadPage, {replace: 'all'});
 });
 
+router('/activity', () => {
+	//singleton
+	PagesPie.instance().open(ActivityPage, {replace: 'all'});
+});
+
 router('/changelog', () => {
 	//singleton
 	PagesPie.instance().open(ChangelogPage, {replace: 'all'});

src/background/api.js

@@ -779,7 +779,7 @@ module.exports = async ({
 
 	// call once to get bigest feed
 	let feedLock = false
-	this.p2p.events.on('peer', () => {
+	p2p.events.on('peer', () => {
 		if(feedLock)
 			return
 		feedLock = true