feat: Display collections in search results [PT-188117039]

Splits out collections from resources and displays them at the top of the page.

rails/react-components/src/library/components/collections.scss

@@ -0,0 +1,32 @@
+@import '../../shared/styles/variables/_variables.scss';
+
+.finderResultsCollections {
+  margin-bottom: 30px;
+
+  .finderResultsCollectionsHeader {
+    margin-bottom: 10px;
+
+    .finderResultsCollectionsCount {
+      display: flex;
+      justify-content: space-between;
+    }
+  }
+
+  .findResultsCollectionsShowMore {
+    display: flex;
+    justify-content: center;
+
+    button {
+      background: $col-blue;
+      color: $white;
+      padding: 6px 20px;
+      display: inline-block;
+      border-radius: 4px;
+      font-weight: bold;
+
+      &:hover, &:active {
+        background: #ffc321;
+      }
+    }
+  }
+}

rails/react-components/src/library/components/collections.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+import StemFinderResult from "./stem-finder-result";
+import pluralize from "../helpers/pluralize";
+
+import css from "./collections.scss";
+
+interface Props {
+  collections: any[]
+  numTotalCollections: number;
+}
+
+interface State {
+  showAll: boolean;
+}
+
+const initialDisplayCount = 2;
+
+export default class Collections extends React.Component<Props, State> {
+  constructor (props: Props) {
+    super(props);
+
+    this.state = {
+      showAll: false
+    };
+  }
+
+  handleShowMore = () => {
+    this.setState({showAll: true});
+  };
+
+  render () {
+    const { showAll } = this.state;
+    const { collections, numTotalCollections } = this.props;
+    const displayCount = showAll ? numTotalCollections : initialDisplayCount;
+    const showingAll = showAll || displayCount >= numTotalCollections;
+    const collectionCount = showingAll ? numTotalCollections : displayCount + " of " + numTotalCollections;
+    const displayCollections = collections.slice(0, displayCount);
+
+    return (
+      <div className={css.finderResultsCollections}>
+        <div className={css.finderResultsCollectionsHeader}>
+          <h2>Collections</h2>
+          <div className={css.finderResultsCollectionsCount}>
+            <div>
+              Showing <strong>{ collectionCount + " " + pluralize(collectionCount, "Collection", "Collections") }</strong> matching your search
+            </div>
+          </div>
+        </div>
+        <div className={css.finderResultsContainer}>
+          { displayCollections.map((collection: any, index: any) => {
+            return <StemFinderResult key={`${collection.external_url}-${index}`} resource={collection} index={index} opacity={1} />;
+          }) }
+        </div>
+        {!showingAll && <div className={css.findResultsCollectionsShowMore}><button onClick={this.handleShowMore}>Show More</button></div>}
+      </div>
+    );
+  }
+}

rails/react-components/src/library/components/stem-finder-result.scss

@@ -230,7 +230,7 @@
     }
   }
   .previewLink {
-    width: 130px;
+    width: 140px;
 
     .previewLinkButton {
       background: #fff;

rails/react-components/src/library/components/stem-finder-result.tsx

@@ -357,7 +357,7 @@ const StemFinderResult = Component({
   },
 
   render () {
-    const { resource, index } = this.props;
+    const { resource, index, opacity } = this.props;
     const resourceTypeClass = resource.material_type.toLowerCase();
     const finderResultClasses = this.state.isOpen ? `resourceItem ${css.finderResult} ${css.open} ${css[resourceTypeClass]}` : `resourceItem ${css.finderResult} ${css[resourceTypeClass]}`;
     const resourceName = resource.name;
@@ -367,9 +367,14 @@ const StemFinderResult = Component({
     const projectNameRegex = / |-|\./g;
     const projectClass = projectName ? projectName.replace(projectNameRegex, "").toLowerCase() : null;
     const transitionDelay = 100 * index;
+    const style: React.CSSProperties = { transitionDelay: transitionDelay + "ms" };
+
+    if (opacity !== undefined) {
+      style.opacity = opacity;
+    }
 
     return (
-      <div className={finderResultClasses} style={{ transitionDelay: transitionDelay + "ms" }}>
+      <div className={finderResultClasses} style={style}>
         <div className={css.finderResultImagePreview}>
           <img alt={resource.name} src={resource.icon.url} />
         </div>
@@ -389,10 +394,9 @@ const StemFinderResult = Component({
         <div className={css.previewLink}>
           { resource.material_type !== "Collection"
             ? <a className={css.previewLinkButton} href={resource.links.preview.url} target="_blank" onClick={this.handlePreviewClick} rel="noreferrer">{ resource.links.preview.text }</a>
-            : <a className={css.previewLinkButton} href={resource.links.preview.url} target="_blank" onClick={this.handleViewCollectionClick} rel="noreferrer">View Collection</a>
+            : <a className={css.previewLinkButton} href={resource.links.preview.url} target="_blank" onClick={this.handleViewCollectionClick} rel="noreferrer">Go to Collection</a>
           }
-          { resource.material_type !== "Collection" &&
-            <div className={`${css.projectLabel} ${css[projectClass]}`}>
+          { <div className={`${css.projectLabel} ${css[projectClass]}`}>
               { projectName }
             </div>
           }

rails/react-components/src/library/components/stem-finder.tsx

@@ -10,6 +10,7 @@ import filters from "../helpers/filters";
 import portalObjectHelpers from "../helpers/portal-object-helpers";
 import AutoSuggest from "./search/auto-suggest";
 import FeaturedCollections from "./featured-collections/featured-collections";
+import Collections from "./collections";
 
 import css from "./stem-finder.scss";
 
@@ -53,6 +54,7 @@ interface State {
   lastSearchResultCount: number,
   noResourcesFound: boolean,
   numTotalResources: number,
+  numTotalCollections: number;
   opacity: number,
   resources: any[],
   searching: boolean,
@@ -139,6 +141,7 @@ class StemFinder extends React.Component<Props, State> {
       lastSearchResultCount: 0,
       noResourcesFound: false,
       numTotalResources: 0,
+      numTotalCollections: 0,
       opacity: 1,
       resources: [],
       searching: false,
@@ -286,6 +289,7 @@ class StemFinder extends React.Component<Props, State> {
     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[] = [];
     /* eslint-enable react/no-access-state-in-setstate */
 
     // short circuit further incremental searches when all data has been downloaded
@@ -317,20 +321,30 @@ class StemFinder extends React.Component<Props, State> {
       dataType: "json"
     }).done((result1: any) => {
       let numTotalResources = 0;
+      let numTotalCollections = 0;
       const results = result1.results;
       const usersAuthoredResourcesCount = result1.filters.number_authored_resources;
       let lastSearchResultCount = 0;
 
       results.forEach((result: any) => {
         result.materials.forEach((material: any) => {
           portalObjectHelpers.processResource(material);
-          resources.push(material);
           if (material.material_type === "Collection") {
             featuredCollections.push(material);
+            // only set collections on initial search
+            if (!incremental) {
+              collections.push(material);
+            }
+          } else {
+            resources.push(material);
+            lastSearchResultCount++;
           }
-          lastSearchResultCount++;
         });
-        numTotalResources += result.pagination.total_items;
+        if (result.type === "collections") {
+          numTotalCollections = collections.length;
+        } else {
+          numTotalResources += result.pagination.total_items;
+        }
       });
 
       if (featuredCollections.length > 1) {
@@ -345,8 +359,10 @@ class StemFinder extends React.Component<Props, State> {
       this.setState({
         firstSearch: false,
         featuredCollections,
+        collections,
         resources,
         numTotalResources,
+        numTotalCollections,
         searchPage,
         displayLimit,
         searching: false,
@@ -739,6 +755,26 @@ class StemFinder extends React.Component<Props, State> {
     }, 500);
   }
 
+  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;
+
+    if (showCollections) {
+      return <Collections collections={collections} numTotalCollections={numTotalCollections} />;
+    }
+
+    let featuredCollections = this.state.featuredCollections;
+    featuredCollections = featuredCollections.sort(() => Math.random() - Math.random()).slice(0, 3);
+    const showFeaturedCollections = !hideFeatured && initPage && this.noOptionsSelected() && featuredCollections.length > 0;
+
+    if (showFeaturedCollections) {
+      return <FeaturedCollections featuredCollections={featuredCollections} />;
+    }
+
+    return null;
+  }
+
   renderResults () {
     if (this.state.firstSearch) {
       return (
@@ -748,14 +784,10 @@ class StemFinder extends React.Component<Props, State> {
       );
     }
 
-    let featuredCollections = this.state.featuredCollections;
-    featuredCollections = featuredCollections.sort(() => Math.random() - Math.random()).slice(0, 3);
     const resources = this.state.resources.slice(0, this.state.displayLimit);
     return (
       <>
-        { (!this.state.hideFeatured && this.state.initPage && this.noOptionsSelected() && featuredCollections.length > 0) &&
-          <FeaturedCollections featuredCollections={featuredCollections} />
-        }
+        { this.renderCollections() }
         { this.renderResultsHeader() }
         <div className={css.finderResultsContainer}>
           { resources.map((resource: any, index: any) => {