@collectionspace/cspace-public-browser 1.5.1

package/src/components/search/result/SearchResultImage.jsx

@@ -0,0 +1,275 @@
+/* global fetch, window, AbortController */
+
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { defineMessages, FormattedMessage } from 'react-intl';
+import { getItemShortID } from 'cspace-refname';
+import Immutable from 'immutable';
+import { blobUrl } from '../../../helpers/urlHelpers';
+import config from '../../../config';
+import styles from '../../../../styles/cspace/SearchResultImage.css';
+
+const propTypes = {
+  gatewayUrl: PropTypes.string.isRequired,
+  holdingInstitutions: PropTypes.instanceOf(Immutable.List),
+  loadImageImmediately: PropTypes.bool,
+  mediaCsid: PropTypes.string,
+  referenceValue: PropTypes.string.isRequired,
+};
+
+const defaultProps = {
+  holdingInstitutions: Immutable.List(),
+  loadImageImmediately: false,
+  mediaCsid: undefined,
+};
+
+const messages = defineMessages({
+  noimage: {
+    id: 'searchResultImage.noimage',
+    defaultMessage: 'no image available',
+  },
+});
+
+export default class SearchResultImage extends Component {
+  constructor(props) {
+    super();
+
+    this.handleScroll = this.handleScroll.bind(this);
+
+    this.ref = React.createRef();
+
+    this.state = {
+      gatewayUrl: props.gatewayUrl,
+    };
+
+    if (AbortController) {
+      this.abortController = new AbortController();
+    }
+  }
+
+  componentDidMount() {
+    const {
+      holdingInstitutions,
+      loadImageImmediately,
+      mediaCsid,
+      referenceValue,
+    } = this.props;
+
+    window.setTimeout(() => {
+      if (this.isInView()) {
+        this.init(referenceValue, mediaCsid, holdingInstitutions);
+      } else {
+        window.addEventListener('scroll', this.handleScroll);
+      }
+    }, loadImageImmediately ? 0 : config.get('imageLoadDelay'));
+  }
+
+  componentDidUpdate(prevProps) {
+    const {
+      gatewayUrl: prevGatewayUrl,
+      mediaCsid: prevMediaCsid,
+      referenceValue: prevReferenceValue,
+    } = prevProps;
+
+    const {
+      holdingInstitutions,
+      gatewayUrl,
+      mediaCsid,
+      referenceValue,
+    } = this.props;
+
+    if (
+      mediaCsid !== prevMediaCsid
+      || gatewayUrl !== prevGatewayUrl
+      || referenceValue !== prevReferenceValue
+    ) {
+      // FIXME: Make this component stateless.
+      // eslint-disable-next-line react/no-did-update-set-state
+      this.setState({
+        gatewayUrl,
+      });
+
+      this.init(referenceValue, mediaCsid, holdingInstitutions);
+    }
+  }
+
+  componentWillUnmount() {
+    if (this.abortController) {
+      this.abortController.abort();
+    }
+
+    window.removeEventListener('scroll', this.handleScroll);
+  }
+
+  handleScroll() {
+    if (this.isInView()) {
+      window.setTimeout(() => {
+        if (this.isInView()) {
+          const {
+            holdingInstitutions,
+            mediaCsid,
+            referenceValue,
+          } = this.props;
+
+          window.removeEventListener('scroll', this.handleScroll);
+
+          this.init(referenceValue, mediaCsid, holdingInstitutions);
+        }
+      }, config.get('imageLoadDelay'));
+    }
+  }
+
+  getMediaCsid(gatewayUrl, indexName, referenceValue) {
+    const url = `${gatewayUrl}/es/doc/_search`;
+    const referenceField = config.get('referenceField');
+
+    const query = {
+      _source: 'collectionspace_denorm:mediaCsid',
+      query: {
+        term: {
+          [referenceField]: referenceValue,
+        },
+      },
+      size: 1,
+      terminate_after: 1,
+    };
+
+    return fetch(url, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(query),
+      signal: this.abortController ? this.abortController.signal : undefined,
+    })
+      .then((response) => response.json())
+      // eslint-disable-next-line no-underscore-dangle
+      .then((data) => data.hits.hits[0]._source['collectionspace_denorm:mediaCsid'][0])
+      .catch(() => undefined);
+  }
+
+  init(referenceValue, mediaCsid, holdingInstitutions) {
+    if (typeof mediaCsid !== 'undefined') {
+      this.setState({
+        mediaCsid,
+      });
+
+      return;
+    }
+
+    // Attempt to resove a mediaCsid from holding instutitions. This is really only used by the
+    // materials browser. In other profiles, the media csid will have been received in the search
+    // result.
+
+    const cachedGatewayMediaCsid = window.sessionStorage.getItem(`image-${referenceValue}`);
+
+    if (cachedGatewayMediaCsid) {
+      const [cachedGatewayUrl, cachedMediaCsid] = cachedGatewayMediaCsid.split(',');
+
+      this.setState({
+        gatewayUrl: cachedGatewayUrl,
+        mediaCsid: cachedMediaCsid,
+      });
+
+      return;
+    }
+
+    const institutions = holdingInstitutions.filter((value) => !!value);
+
+    if (institutions.size === 0) {
+      this.setState({
+        mediaCsid: null,
+      });
+
+      return;
+    }
+
+    const findImage = institutions.reduce((promise, institution) => promise.catch(() => {
+      const instShortId = getItemShortID(institution);
+      const instGatewayUrl = config.get(['institutions', instShortId, 'gatewayUrl']);
+      const instIndexName = config.get(['institutions', instShortId, 'esIndexName']);
+
+      if (!instGatewayUrl) {
+        return Promise.reject();
+      }
+
+      return (
+        this.getMediaCsid(instGatewayUrl, instIndexName, referenceValue)
+          .then((instMediaCsid) => {
+            if (!instMediaCsid) {
+              return Promise.reject();
+            }
+
+            return Promise.resolve({ instGatewayUrl, instMediaCsid });
+          })
+      );
+    }), Promise.reject());
+
+    findImage
+      .then(({ instGatewayUrl, instMediaCsid }) => {
+        try {
+          window.sessionStorage.setItem(
+            `image-${referenceValue}`,
+            `${instGatewayUrl},${instMediaCsid}`,
+          );
+        } catch (err) {
+          // Ignore storage error.
+        }
+
+        this.setState({
+          gatewayUrl: instGatewayUrl,
+          mediaCsid: instMediaCsid,
+        });
+      })
+      .catch(() => {});
+  }
+
+  isInView() {
+    const domNode = this.ref.current;
+
+    if (domNode) {
+      const rect = domNode.getBoundingClientRect();
+
+      return (
+        rect.top >= 0
+        && rect.top < window.innerHeight
+      );
+    }
+
+    return false;
+  }
+
+  render() {
+    const {
+      gatewayUrl,
+      mediaCsid,
+    } = this.state;
+
+    if (mediaCsid === null) {
+      return (
+        <div
+          aria-hidden
+          className={styles.noimage}
+        >
+          {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+          <FormattedMessage {...messages.noimage} />
+        </div>
+      );
+    }
+
+    const imageUrl = mediaCsid && blobUrl(gatewayUrl, mediaCsid, config.get('searchResultImageDerivative'));
+
+    let style;
+
+    if (imageUrl) {
+      style = {
+        backgroundImage: `url(${imageUrl})`,
+      };
+    }
+
+    return (
+      <div className={styles.common} style={style} ref={this.ref} />
+    );
+  }
+}
+
+SearchResultImage.propTypes = propTypes;
+SearchResultImage.defaultProps = defaultProps;

package/src/components/search/result/SearchResultList.jsx

@@ -0,0 +1,144 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import Immutable from 'immutable';
+import { defineMessages, FormattedMessage } from 'react-intl';
+import SearchError from './SearchError';
+import SearchLoadMore from './SearchLoadMore';
+import SearchPending from './SearchPending';
+import SearchResultTile from './SearchResultTile';
+import config from '../../../config';
+import { calculateSearchPageSize } from '../../../helpers/searchDimensions';
+import styles from '../../../../styles/cspace/SearchResultList.css';
+
+const propTypes = {
+  error: PropTypes.instanceOf(Error),
+  hits: PropTypes.instanceOf(Immutable.List),
+  isPending: PropTypes.bool,
+  onHitsUpdated: PropTypes.func,
+  onLoadMoreClick: PropTypes.func,
+  params: PropTypes.instanceOf(Immutable.Map).isRequired,
+  showLoadMore: PropTypes.bool,
+};
+
+const defaultProps = {
+  error: undefined,
+  hits: Immutable.List(),
+  isPending: false,
+  onHitsUpdated: () => undefined,
+  onLoadMoreClick: () => undefined,
+  showLoadMore: false,
+};
+
+const messages = defineMessages({
+  noResult: {
+    id: 'searchResultList.noResult',
+    defaultMessage: 'No results found',
+  },
+});
+
+export default class SearchResultList extends Component {
+  componentDidUpdate(prevProps) {
+    const {
+      hits,
+      onHitsUpdated,
+    } = this.props;
+
+    const {
+      hits: prevHits,
+    } = prevProps;
+
+    if (hits !== prevHits) {
+      onHitsUpdated();
+    }
+  }
+
+  renderError() {
+    const {
+      error,
+    } = this.props;
+
+    if (!error) {
+      return undefined;
+    }
+
+    return (
+      <SearchError error={error} />
+    );
+  }
+
+  renderLoadMore() {
+    const {
+      isPending,
+      onLoadMoreClick,
+      showLoadMore,
+    } = this.props;
+
+    if (!showLoadMore || isPending) {
+      return undefined;
+    }
+
+    return (
+      <SearchLoadMore onClick={onLoadMoreClick} />
+    );
+  }
+
+  renderPending() {
+    const {
+      isPending,
+    } = this.props;
+
+    if (!isPending) {
+      return undefined;
+    }
+
+    return (
+      <SearchPending />
+    );
+  }
+
+  renderHits() {
+    const {
+      error,
+      params,
+      hits,
+      isPending,
+    } = this.props;
+
+    if (hits.size === 0 && !isPending && !error) {
+      return (
+        <p>
+          {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+          <FormattedMessage {...messages.noResult} />
+        </p>
+      );
+    }
+
+    const gatewayUrl = config.get('gatewayUrl');
+    const pageSize = calculateSearchPageSize();
+
+    return hits.map((result, index) => (
+      <SearchResultTile
+        gatewayUrl={gatewayUrl}
+        loadImageImmediately={index < pageSize}
+        index={index}
+        key={result.getIn(['_source', 'ecm:name'])}
+        params={params}
+        result={result}
+      />
+    ));
+  }
+
+  render() {
+    return (
+      <div className={styles.common}>
+        {this.renderHits()}
+        {this.renderLoadMore()}
+        {this.renderPending()}
+        {this.renderError()}
+      </div>
+    );
+  }
+}
+
+SearchResultList.propTypes = propTypes;
+SearchResultList.defaultProps = defaultProps;

package/src/components/search/result/SearchResultPanel.jsx

@@ -0,0 +1,169 @@
+/* global window */
+
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import Immutable from 'immutable';
+import SearchParamList from './SearchParamList';
+import SearchResultList from './SearchResultList';
+import SearchResultStats from './SearchResultStats';
+import SortSelect from '../entry/SortSelectContainer';
+import config from '../../../config';
+import { SORT_ID } from '../../../constants/ids';
+import { calculateSearchPageSize, tileHeight } from '../../../helpers/searchDimensions';
+import styles from '../../../../styles/cspace/SearchResultPanel.css';
+
+const propTypes = {
+  error: PropTypes.instanceOf(Error),
+  isPending: PropTypes.bool,
+  nextOffset: PropTypes.number,
+  onHitsUpdated: PropTypes.func,
+  result: PropTypes.instanceOf(Immutable.Map),
+  params: PropTypes.instanceOf(Immutable.Map),
+  search: PropTypes.func,
+  setSearchPageSize: PropTypes.func,
+};
+
+const defaultProps = {
+  error: undefined,
+  isPending: false,
+  nextOffset: undefined,
+  onHitsUpdated: undefined,
+  params: Immutable.Map(),
+  result: undefined,
+  search: () => undefined,
+  setSearchPageSize: () => undefined,
+};
+
+export default class SearchResultPanel extends Component {
+  constructor() {
+    super();
+
+    this.handleLoadMoreClick = this.handleLoadMoreClick.bind(this);
+    this.handleScroll = this.handleScroll.bind(this);
+
+    this.ref = React.createRef();
+  }
+
+  componentDidMount() {
+    const {
+      setSearchPageSize,
+    } = this.props;
+
+    window.addEventListener('scroll', this.handleScroll, false);
+
+    setSearchPageSize(calculateSearchPageSize());
+
+    this.search();
+  }
+
+  componentDidUpdate(prevProps) {
+    const {
+      params,
+    } = this.props;
+
+    const {
+      params: prevParams,
+    } = prevProps;
+
+    if (params !== prevParams) {
+      this.search();
+    }
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('scroll', this.handleScroll, false);
+  }
+
+  handleLoadMoreClick() {
+    this.search();
+  }
+
+  handleScroll() {
+    const {
+      nextOffset,
+    } = this.props;
+
+    if (nextOffset < config.get('pageAutoLoadLimit')) {
+      const {
+        search,
+      } = this.props;
+
+      const rect = this.ref.current.getBoundingClientRect();
+      const bottomOffset = rect.bottom - window.innerHeight;
+
+      if (bottomOffset <= tileHeight) {
+        search(config.get('pageLoadDelay'));
+      }
+    }
+  }
+
+  search(fetchDelay) {
+    const {
+      search,
+    } = this.props;
+
+    search(fetchDelay);
+  }
+
+  renderError() {
+    const {
+      error,
+    } = this.props;
+
+    return (
+      <div>{error.message}</div>
+    );
+  }
+
+  renderResult() {
+    const {
+      error,
+      isPending,
+      nextOffset,
+      onHitsUpdated,
+      params,
+      result,
+    } = this.props;
+
+    const hitCount = result && result.get('total');
+    const hits = result && result.get('hits');
+
+    const showLoadMore = result
+      && hits.size < hitCount
+      && nextOffset >= config.get('pageAutoLoadLimit');
+
+    return (
+      <>
+        <header>
+          <SearchParamList params={params} />
+
+          <div>
+            <SearchResultStats count={hitCount} />
+            <SortSelect value={params.get(SORT_ID)} />
+          </div>
+        </header>
+
+        <SearchResultList
+          error={error}
+          isPending={isPending}
+          onHitsUpdated={onHitsUpdated}
+          onLoadMoreClick={this.handleLoadMoreClick}
+          params={params}
+          hits={hits}
+          showLoadMore={showLoadMore}
+        />
+      </>
+    );
+  }
+
+  render() {
+    return (
+      <div className={styles.common} ref={this.ref}>
+        {this.renderResult()}
+      </div>
+    );
+  }
+}
+
+SearchResultPanel.propTypes = propTypes;
+SearchResultPanel.defaultProps = defaultProps;

package/src/components/search/result/SearchResultPanelContainer.js

@@ -0,0 +1,31 @@
+import { connect } from 'react-redux';
+import SearchResultPanel from './SearchResultPanel';
+
+import {
+  search,
+  setSearchPageSize,
+} from '../../../actions/searchActions';
+
+import {
+  getSearchError,
+  getSearchNextOffset,
+  getSearchResult,
+  isSearchPending,
+} from '../../../reducers';
+
+const mapStateToProps = (state) => ({
+  error: getSearchError(state),
+  isPending: isSearchPending(state),
+  nextOffset: getSearchNextOffset(state),
+  result: getSearchResult(state),
+});
+
+const mapDispatchToProps = {
+  search,
+  setSearchPageSize,
+};
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(SearchResultPanel);

package/src/components/search/result/SearchResultStats.jsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { defineMessages, FormattedMessage } from 'react-intl';
+import styles from '../../../../styles/cspace/SearchResultStats.css';
+
+const propTypes = {
+  count: PropTypes.number,
+};
+
+const defaultProps = {
+  count: undefined,
+};
+
+const messages = defineMessages({
+  count: {
+    id: 'searchResultStats.count',
+    defaultMessage: `{count, plural,
+      one {# item}
+      other {# items}
+    } found`,
+  },
+});
+
+export default function SearchResultStats(props) {
+  const {
+    count,
+  } = props;
+
+  return (
+    <div className={styles.common} aria-live="polite">
+      {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+      {count ? <FormattedMessage {...messages.count} values={{ count }} /> : undefined}
+    </div>
+  );
+}
+
+SearchResultStats.propTypes = propTypes;
+SearchResultStats.defaultProps = defaultProps;