diff --git a/rails/react-components/src/library/components/collections.tsx b/rails/react-components/src/library/components/collections.tsx index 3c0108710..e33ccac29 100644 --- a/rails/react-components/src/library/components/collections.tsx +++ b/rails/react-components/src/library/components/collections.tsx @@ -7,32 +7,19 @@ import css from "./collections.scss"; interface Props { collections: any[] numTotalCollections: number; -} - -interface State { - showAll: boolean; + searching: boolean; + showAllCollections: boolean; + enableShowAllCollections: () => void; } const initialDisplayCount = 2; -export default class Collections extends React.Component { - constructor (props: Props) { - super(props); - - this.state = { - showAll: false - }; - } - - handleShowMore = () => { - this.setState({showAll: true}); - }; +export default class Collections extends React.Component { render () { - const { showAll } = this.state; - const { collections, numTotalCollections } = this.props; - const displayCount = showAll ? numTotalCollections : initialDisplayCount; - const showingAll = showAll || displayCount >= numTotalCollections; + const { collections, numTotalCollections, searching, showAllCollections, enableShowAllCollections } = this.props; + const displayCount = showAllCollections ? numTotalCollections : initialDisplayCount; + const showingAll = showAllCollections || displayCount >= numTotalCollections; const collectionCount = showingAll ? numTotalCollections : displayCount + " of " + numTotalCollections; const displayCollections = collections.slice(0, displayCount); @@ -42,16 +29,18 @@ export default class Collections extends React.Component {

Collections

- Showing { collectionCount + " " + pluralize(collectionCount, "Collection", "Collections") } matching your search + {searching ? "Loading..." : <>Showing { collectionCount + " " + pluralize(collectionCount, "Collection", "Collections") } matching your search}
+ {!searching &&
{ displayCollections.map((collection: any, index: any) => { return ; }) }
- {!showingAll &&
} + } + {!searching && !showingAll &&
} ); } diff --git a/rails/react-components/src/library/components/stem-finder.tsx b/rails/react-components/src/library/components/stem-finder.tsx index 110d79a75..64e4003cc 100644 --- a/rails/react-components/src/library/components/stem-finder.tsx +++ b/rails/react-components/src/library/components/stem-finder.tsx @@ -63,7 +63,8 @@ interface State { sortOrder: string, subjectAreasSelected: SubjectArea[], subjectAreasSelectedMap: Record, - usersAuthoredResourcesCount: number + usersAuthoredResourcesCount: number, + showAllCollections: boolean, } class StemFinder extends React.Component { @@ -150,7 +151,8 @@ class StemFinder extends React.Component { sortOrder, subjectAreasSelected, subjectAreasSelectedMap, - usersAuthoredResourcesCount: 0 + usersAuthoredResourcesCount: 0, + showAllCollections: false, }; } @@ -296,7 +298,7 @@ class StemFinder extends React.Component { let resources = incremental ? this.state.resources.slice(0) : []; const searchPage = incremental ? this.state.searchPage + 1 : 1; const keyword = jQuery.trim(this.state.searchInput); - const collections: any[] = []; + const collections = incremental ? this.state.collections.slice(0) : []; /* eslint-enable react/no-access-state-in-setstate */ // short circuit further incremental searches when all data has been downloaded @@ -338,7 +340,6 @@ class StemFinder extends React.Component { portalObjectHelpers.processResource(material); if (material.material_type === "Collection") { featuredCollections.push(material); - // only set collections on initial search if (!incremental) { collections.push(material); } @@ -591,14 +592,16 @@ class StemFinder extends React.Component { this.scrollToFinder(); this.setState({ hideFeatured: true, - initPage: false + initPage: false, + showAllCollections: false, }); }; handleAutoSuggestSubmit = (searchInput: any) => { this.setState({ hideFeatured: true, - initPage: false + initPage: false, + showAllCollections: false, }); this.setState({ searchInput }, () => { this.search(); @@ -768,13 +771,15 @@ class StemFinder extends React.Component { }, 500); } + handleShowAllCollections = () => { + this.setState({ showAllCollections: true }); + }; + renderCollections () { - const { collections, searchInput, numTotalCollections, initPage, hideFeatured, keyword } = this.state; - const validSearchInput = keyword.length > 0 && (searchInput.trim() === keyword); - const showCollections = !initPage && (validSearchInput || !this.noOptionsSelected()) && collections.length > 0; + const { collections, numTotalCollections, initPage, hideFeatured, searching, showAllCollections } = this.state; - if (showCollections) { - return ; + if (!initPage) { + return ; } let featuredCollections = this.state.featuredCollections;