Merge pull request #421 from mlibrary/LIBSEARCH-938-investigate-wheth…

…er-css-can-be-used-to-hide-search-only-holdings-across-all-bib-records

[LIBSEARCH-938] Investigate whether CSS can be used to hide "search only" holdings across all bib records

src/modules/records/components/Record/index.js

@@ -101,6 +101,7 @@ function Record (props) {
       </div>
 
       <div
+        className='record-holders-container'
         css={{
           borderBottom: `solid 1px ${COLORS.neutral[100]}`
         }}

src/modules/resource-acccess/components/holders.js

@@ -1,23 +1,45 @@
 /** @jsxImportSource @emotion/react */
 import React from 'react';
+import { useSelector } from 'react-redux';
 import Icon from '../../reusable/components/Icon';
-import HolderContainer from './holder-container';
+import Holder from './holder';
 import { COLORS } from '../../reusable/umich-lib-core-temp/index';
 import PropTypes from 'prop-types';
 
 export default function Holders ({
   record,
-  preExpandedIds,
-  createId,
   context
 }) {
+  const { mirlyn } = useSelector((state) => {
+    return state.filters.active;
+  });
+  /*
+    - Check if the record is under 'Catalog', and the 'Remove search-only HathiTrust materials' is checked
+    - If true, remove all 'Search only (no full text)' holdings
+  */
+  if (
+    record.datastore === 'mirlyn' &&
+    (
+      !mirlyn ||
+      (Object.keys(mirlyn).includes('search_only') && mirlyn.search_only.includes('true'))
+    )
+  ) {
+    record.resourceAccess.forEach((resource) => {
+      resource.rows = resource.rows.filter((row) => {
+        return row[0].text !== 'Search only (no full text)';
+      });
+    });
+  }
   return (
     <>
       {record.resourceAccess.map((data, i) => {
         const { rows, caption, type } = data;
+        if (!rows.length) {
+          return null;
+        }
         return (
           <details
-            key={createId(record, i)}
+            key={record.datastore + record.uid + '-' + i}
             css={{
               '& > *': {
                 padding: '0.75rem 1rem',
@@ -82,7 +104,7 @@ export default function Holders ({
                 <Icon size={24} d='M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z' />
               </span>
             </summary>
-            <HolderContainer context={context} {...data} />
+            <Holder context={context} {...data} />
           </details>
         );
       })}
@@ -92,7 +114,5 @@ export default function Holders ({
 
 Holders.propTypes = {
   record: PropTypes.object,
-  preExpandedIds: PropTypes.array,
-  createId: PropTypes.func,
   context: PropTypes.object
 };

src/modules/resource-acccess/components/resource-access-container.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import ResourceAccessLoading from './resource-access-loading';
 import Holders from './holders';
 import { ContextProvider } from '../../reusable';
 import PropTypes from 'prop-types';
@@ -13,14 +12,20 @@ function ResourceAccessContainer ({ record }) {
   }
 
   /*
-    Does the record indicate if holdings are being loaded?
-    This only matters with mirlyn aka catalog.
+    In mirlyn, does the record indicate if holdings are being loaded?
   */
   if (
     record.loadingHoldings ||
-    (record.datastore === 'mirlyn' && record.resourceAccess.length === 0)
+    (record.datastore === 'mirlyn' && !record.resourceAccess.length)
   ) {
-    return <ResourceAccessLoading />;
+    return (
+      <div className='resource-access-container'>
+        <div className='access-placeholder-container'>
+          <div className='placeholder placeholder-access placeholder-inline' />
+          <div className='placeholder placeholder-inline' />
+        </div>
+      </div>
+    );
   }
 
   /*
@@ -32,7 +37,10 @@ function ResourceAccessContainer ({ record }) {
   return (
     <ContextProvider render={(context) => {
       return (
-        <ResourceAccess record={record} context={context} />
+        <Holders
+          record={record}
+          context={context}
+        />
       );
     }}
     />
@@ -43,39 +51,4 @@ ResourceAccessContainer.propTypes = {
   record: PropTypes.object
 };
 
-function ResourceAccess ({ record, context }) {
-  return (
-    <Holders
-      record={record}
-      preExpandedIds={preExpandedIds(record)}
-      createId={createId}
-      context={context}
-    />
-  );
-}
-
-ResourceAccess.propTypes = {
-  record: PropTypes.object,
-  context: PropTypes.object
-};
-
-// Create a list of uuids for details to be opened by default
-function preExpandedIds (record) {
-  return record.resourceAccess.reduce((acc, item, index) => {
-    if (item.preExpanded) {
-      acc = acc.concat(createId(record, index));
-    }
-
-    return acc;
-  }, []);
-}
-
-/*
-  These need to be unique to the app for React to handle
-  rendering properly.
-*/
-function createId (record, i) {
-  return 'holder--' + record.datastore + record.uid + '-' + i;
-}
-
 export default ResourceAccessContainer;

src/modules/reusable/components/ContextProvider/index.js

@@ -1,8 +1,7 @@
-import React from 'react';
+import PropTypes from 'prop-types';
+import { findWhere } from '../../underscore';
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router-dom';
-import _ from 'underscore';
-import PropTypes from 'prop-types';
 
 /*
   In many cases components need context information, such as
@@ -12,12 +11,8 @@ import PropTypes from 'prop-types';
   This component will provide that information so that components don't
   need to bring them in each time themselves.
 */
-class ContextProvider extends React.Component {
-  render () {
-    return (
-      <>{this.props.render({ ...this.props })}</>
-    );
-  }
+function ContextProvider (props) {
+  return props.render({ ...props });
 }
 
 ContextProvider.propTypes = {
@@ -26,27 +21,19 @@ ContextProvider.propTypes = {
 
 function mapStateToProps (state, props) {
   /*
-    Record View Type is decided by the matched
-    React Router path.
+    Record View Type is decided by the matched React Router path.
   */
-  const viewType =
-    props.match.url.indexOf('/everything') !== -1
-      ? 'Preview'
-      : props.match.path === '/:datastoreSlug'
-        ? 'Medium'
-        : props.match.path.indexOf('/record/') !== -1
-          ? 'Full'
-          : props.match.path.indexOf('/list') !== -1
-            ? 'List'
-            : undefined;
-
+  let viewType = 'Medium';
+  props.match.url.endsWith('/everything') && (viewType = 'Preview');
+  props.match.path.endsWith('/:recordUid') && (viewType = 'Full');
+  props.match.url.endsWith('/list') && (viewType = 'List');
   /*
     Add active datastore and record view type
     to props to be used in ContextProvider as a
-    render props compoennt.
+    render props component.
   */
   return {
-    datastore: _.findWhere(state.datastores.datastores, {
+    datastore: findWhere(state.datastores.datastores, {
       uid: state.datastores.active
     }),
     viewType