Themes: replace infinite-list with infinite-scroll

shared/components/data/themes-list-fetcher/index.jsx

@@ -85,9 +85,6 @@ const ThemesListFetcher = React.createClass( {
 	},
 
 	fetchNextPage: function( options ) {
-		// FIXME: While this function is passed on by `ThemesList` to `InfiniteList`,
-		// which has a `shouldLoadNextPage()` check (in scroll-helper.js), we can't
-		// rely on that; fetching would break without the following check.
 		if ( this.props.loading || this.props.lastPage ) {
 			return;
 		}

shared/components/themes-list/Makefile

@@ -4,7 +4,7 @@ COMPILERS ?= jsx:babel/register
 NODE_BIN := $(shell npm bin)
 MOCHA ?= $(NODE_BIN)/mocha
 BASE_DIR := $(NODE_BIN)/../..
-NODE_PATH := test:$(BASE_DIR)/shared
+NODE_PATH := test:$(BASE_DIR)/shared:$(BASE_DIR)/client
 
 # In order to simply stub modules, add test to the NODE_PATH
 test:

shared/components/themes-list/index.jsx

@@ -2,24 +2,27 @@
  * External dependencies
  */
 var React = require( 'react' ),
-	times = require( 'lodash/utility/times' );
+	times = require( 'lodash/utility/times' ),
+	isEqual = require( 'lodash/lang/isEqual' );
 
 /**
  * Internal dependencies
  */
 var Theme = require( 'components/theme' ),
 	EmptyContent = require( 'components/empty-content' ),
-	InfiniteList = require( 'components/infinite-list' ),
+	InfiniteScroll = require( 'lib/mixins/infinite-scroll' ),
 	ITEM_HEIGHT = require( 'lib/themes/constants' ).THEME_COMPONENT_HEIGHT,
 	PER_PAGE = require( 'lib/themes/constants' ).PER_PAGE;
 
 /**
  * Component
  */
 var ThemesList = React.createClass( {
+
+	mixins: [ InfiniteScroll( 'fetchNextPage' ) ],
+
 	propTypes: {
 		themes: React.PropTypes.array.isRequired,
-		lastPage: React.PropTypes.bool.isRequired,
 		emptyContent: React.PropTypes.element,
 		loading: React.PropTypes.bool.isRequired,
 		fetchNextPage: React.PropTypes.func.isRequired,
@@ -28,10 +31,13 @@ var ThemesList = React.createClass( {
 		onMoreButtonClick: React.PropTypes.func,
 	},
 
+	fetchNextPage: function( options ) {
+		this.props.fetchNextPage( options );
+	},
+
 	getDefaultProps: function() {
 		return {
 			loading: false,
-			lastPage: false,
 			themes: [],
 			fetchNextPage: function() {},
 			optionsGenerator: function() {
@@ -40,14 +46,14 @@ var ThemesList = React.createClass( {
 		};
 	},
 
-	getThemeRef: function( theme ) {
-		return 'theme-' + theme.id;
+	shouldComponentUpdate: function( nextProps ) {
+		return this.props.loading !== nextProps.loading ||
+			! isEqual( this.props.themes, nextProps.themes );
 	},
 
 	renderTheme: function( theme, index ) {
-		var key = this.getThemeRef( theme );
-		return <Theme ref={ key }
-			key={ key }
+		return <Theme
+			key={ 'theme-' + theme.id }
 			buttonContents={ this.props.getButtonOptions( theme ) }
 			screenshotClickUrl={ this.props.getScreenshotUrl && this.props.getScreenshotUrl( theme ) }
 			onScreenshotClick={ this.props.onScreenshotClick && this.props.onScreenshotClick.bind( null, theme, index ) }
@@ -83,21 +89,18 @@ var ThemesList = React.createClass( {
 			return this.renderEmpty();
 		}
 
+		let themes = this.props.themes.map( this.renderTheme );
+
+		if ( this.props.loading ) {
+			themes.push( this.renderLoadingPlaceholders() );
+		}
+
+		themes.push( this.renderTrailingItems() );
+
 		return (
-			<InfiniteList
-				key={ 'list' + this.props.search }
-				className="themes-list"
-				items={ this.props.themes }
-				lastPage={ this.props.lastPage }
-				fetchingNextPage={ this.props.loading }
-				guessedItemHeight={ ITEM_HEIGHT }
-				fetchNextPage={ this.props.fetchNextPage }
-				getItemRef={ this.getThemeRef }
-				renderItem={ this.renderTheme }
-				renderLoadingPlaceholders={ this.renderLoadingPlaceholders }
-				renderTrailingItems={ this.renderTrailingItems }
-				itemsPerRow={ 2 }
-			/>
+			<div className="themes-list">
+				{ themes }
+			</div>
 		);
 	}
 } );

shared/components/themes-list/test/index.jsx

@@ -17,7 +17,6 @@ function mockComponent( displayName ) {
 describe( 'ThemesList', function() {
 	before( function() {
 		mockery.registerMock( './more-button', mockComponent() );
-		mockery.registerMock( 'components/infinite-list', mockComponent( 'InfiniteList' ) );
 
 		mockery.enable( {
 			warnOnReplace: false,
@@ -46,7 +45,8 @@ describe( 'ThemesList', function() {
 			],
 			lastPage: true,
 			loading: false,
-			fetchNextPage: function() {},
+			fetchNextPage: () => {},
+			getButtonOptions: () => {},
 		};
 
 		this.themesList = React.createElement( this.ThemesList, this.props );
@@ -66,16 +66,11 @@ describe( 'ThemesList', function() {
 			this.themesListElement = shallowRenderer.getRenderOutput();
 		} );
 
-		it( 'should render an InfiniteList with a className of "themes-list"', function() {
+		it( 'should render a div with a className of "themes-list"', function() {
 			assert( this.themesListElement, 'element does not exist' );
-			assert( this.themesListElement.type.displayName === 'InfiniteList', 'element type does not equal "InfiniteList"' );
 			assert( this.themesListElement.props.className === 'themes-list', 'className does not equal "themes-list"' );
 		} );
 
-		it( 'should have an item for each theme', function() {
-			assert( this.themesListElement.props.items.length === this.props.themes.length, 'items count is different from themes count' );
-		} );
-
 		context( 'when no themes are found', function() {
 			beforeEach( function() {
 				var shallowRenderer = TestUtils.createRenderer();