From 40888f58357c7e91ee9e60c2fd759ecc8828f6ba Mon Sep 17 00:00:00 2001
From: James Barnsley <james@barnsley.nz>
Date: Thu, 17 Aug 2017 08:29:14 +1200
Subject: [PATCH] Render performance consideration; Cancelling processes fixed

---
 src/js/components/GridItem.js                |  4 ++
 src/js/components/Notifications.js           | 62 ++++++++++----------
 src/js/services/ui/actions.js                |  1 +
 src/js/views/discover/DiscoverCategory.js    |  2 +-
 src/js/views/discover/DiscoverNewReleases.js |  2 +-
 5 files changed, 39 insertions(+), 32 deletions(-)

diff --git a/src/js/components/GridItem.js b/src/js/components/GridItem.js
index 7fd3bf50..ac8ef211 100755
--- a/src/js/components/GridItem.js
+++ b/src/js/components/GridItem.js
@@ -25,6 +25,10 @@ export default class GridItem extends React.Component{
 		}
 	}
 
+	shouldComponentUpdate(nextProps, nextState){
+		return nextProps.item != this.props.item
+	}
+
 	renderSecondary(item){
 		var output = ''
 
diff --git a/src/js/components/Notifications.js b/src/js/components/Notifications.js
index 8cc8f478..5152b99c 100755
--- a/src/js/components/Notifications.js
+++ b/src/js/components/Notifications.js
@@ -38,44 +38,46 @@ export default class Notifications extends React.Component{
 		)
 	}
 
+	renderProcess(process){
+		switch (process.status){
+			case 'running':
+				return(
+					<div className="process notification" key={process.key}>
+						<div className="loader"></div>
+						{process.message}
+						<FontAwesome name="close" className="close-button" onClick={e => {this.props.uiActions.cancelProcess(process.key)}} />
+					</div>
+				)
+
+			case 'cancelling':
+				return(
+					<div className="process notification cancelling" key={process.key}>
+						<div className="loader"></div>
+						Cancelling
+					</div>
+				)
+
+			case 'cancelled':
+			case 'finished':
+				return null
+		}
+	}
+
 	renderProcesses(){
 		if (!this.props.processes || this.props.processes.length <= 0) return null
-		var processes = this.props.processes
-		var items = []
 
-		for (var key in processes){
-			if (processes.hasOwnProperty(key)){
-				switch (processes[key].status){
-
-					case 'running':
-						items.push(
-							<div className="process notification" key={key}>
-								<div className="loader"></div>
-								{processes[key].message}
-								<FontAwesome name="close" className="close-button" onClick={e => this.props.uiActions.cancelProcess(key)} />
-							</div>
-						)
-						break
-
-					case 'cancelling':
-						items.push(
-							<div className="process notification cancelling" key={key}>
-								<div className="loader"></div>
-								Cancelling
-							</div>
-						)
-						break
-
-					case 'cancelled':
-					case 'finished':
-						break
-				}
+		var processes = []
+		for (var key in this.props.processes){
+			if (this.props.processes.hasOwnProperty(key)){
+				processes.push(this.props.processes[key])
 			}
 		}
 
 		return (
 			<span>
-				{items}
+				{processes.map(process => {
+					return this.renderProcess(process)
+				})}
 			</span>
 		)
 	}
diff --git a/src/js/services/ui/actions.js b/src/js/services/ui/actions.js
index 3fa292f3..39a89661 100755
--- a/src/js/services/ui/actions.js
+++ b/src/js/services/ui/actions.js
@@ -201,6 +201,7 @@ export function runProcess(key,data = {}){
 }
 
 export function cancelProcess(key){
+    console.log('cancel process',key)
     return { 
         type: 'CANCEL_PROCESS',
         key: key
diff --git a/src/js/views/discover/DiscoverCategory.js b/src/js/views/discover/DiscoverCategory.js
index 18e6d11b..820cc18f 100755
--- a/src/js/views/discover/DiscoverCategory.js
+++ b/src/js/views/discover/DiscoverCategory.js
@@ -66,7 +66,7 @@ class DiscoverCategory extends React.Component{
 					<section className="grid-wrapper">
 						<PlaylistGrid playlists={playlists} />
 					</section>
-					<LazyLoadListener enabled={this.props.category.playlists_more} loadMore={ () => this.loadMore() }/>
+					<LazyLoadListener loading={this.props.category.playlists_more} loadMore={ () => this.loadMore() }/>
 				</div>
 			</div>
 		);
diff --git a/src/js/views/discover/DiscoverNewReleases.js b/src/js/views/discover/DiscoverNewReleases.js
index fe4cd7f9..b9c84ac5 100755
--- a/src/js/views/discover/DiscoverNewReleases.js
+++ b/src/js/views/discover/DiscoverNewReleases.js
@@ -112,7 +112,7 @@ class DiscoverNewReleases extends React.Component{
 				<section className="content-wrapper grid-wrapper">
 					<AlbumGrid albums={albums} />
 				</section>
-				<LazyLoadListener enabled={this.props.new_releases_more} loadMore={ () => this.loadMore() }/>
+				<LazyLoadListener loading={this.props.new_releases_more} loadMore={ () => this.loadMore() }/>
 			</div>
 		);
 	}