@collectionspace/cspace-public-browser 1.5.1

package/src/components/layout/PanelTitle.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cssStyles from '../../../styles/cspace/PanelTitle.css';
+
+const propTypes = {
+  isExpanded: PropTypes.bool,
+  styles: PropTypes.shape({
+    expanded: PropTypes.string,
+    collapsed: PropTypes.string,
+  }),
+  title: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.element,
+  ]).isRequired,
+};
+
+const defaultProps = {
+  styles: cssStyles,
+  isExpanded: false,
+};
+
+export default function PanelTitle(props) {
+  const {
+    isExpanded,
+    styles,
+    title,
+    ...remainingProps
+  } = props;
+
+  return (
+    <button
+      className={isExpanded ? styles.expanded : styles.collapsed}
+      type="button"
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...remainingProps}
+    >
+      <div>{title}</div>
+    </button>
+  );
+}
+
+PanelTitle.propTypes = propTypes;
+PanelTitle.defaultProps = defaultProps;

package/src/components/layout/ScrollTopButton.jsx

@@ -0,0 +1,76 @@
+/* global window */
+
+import React, { Component } from 'react';
+import { defineMessages } from 'react-intl';
+import IconButton from './IconButton';
+import styles from '../../../styles/cspace/ScrollTopButton.css';
+
+const messages = defineMessages({
+  label: {
+    id: 'scrollTopButton.label',
+    defaultMessage: 'Back to top',
+  },
+});
+
+const scrollTop = () => {
+  if (window.scrollTo) {
+    window.scrollTo({
+      left: 0,
+      top: 0,
+    });
+  }
+};
+
+export default class ScrollTopButton extends Component {
+  constructor() {
+    super();
+
+    this.handleScroll = this.handleScroll.bind(this);
+
+    this.state = {
+      visible: false,
+    };
+  }
+
+  componentDidMount() {
+    window.addEventListener('scroll', this.handleScroll);
+
+    this.setVisibility();
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('scroll', this.handleScroll);
+  }
+
+  handleScroll() {
+    this.setVisibility();
+  }
+
+  setVisibility() {
+    const {
+      visible,
+    } = this.state;
+
+    const nextVisible = window.document.scrollingElement.scrollTop > 0;
+
+    if (visible !== nextVisible) {
+      this.setState({
+        visible: nextVisible,
+      });
+    }
+  }
+
+  render() {
+    const {
+      visible,
+    } = this.state;
+
+    return (
+      <IconButton
+        className={visible ? styles.common : styles.hidden}
+        labelMessage={messages.label}
+        onClick={scrollTop}
+      />
+    );
+  }
+}

package/src/components/layout/ToggleFilterPanelButton.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { defineMessages } from 'react-intl';
+import IconButton from './IconButton';
+import styles from '../../../styles/cspace/ToggleFilterPanelButton.css';
+
+const propTypes = {
+  isFilterPanelExpanded: PropTypes.bool,
+  onClick: PropTypes.func.isRequired,
+};
+
+const defaultProps = {
+  isFilterPanelExpanded: false,
+};
+
+const messages = defineMessages({
+  hideLabel: {
+    id: 'toggleFilterPanelButton.hide.label',
+    defaultMessage: 'Hide filters',
+  },
+  showLabel: {
+    id: 'toggleFilterPanelButton.show.label',
+    defaultMessage: 'Show filters',
+  },
+});
+
+export default function ToggleFilterPanelButton(props) {
+  const {
+    isFilterPanelExpanded,
+    onClick,
+  } = props;
+
+  return (
+    <IconButton
+      className={isFilterPanelExpanded ? styles.expanded : styles.collapsed}
+      labelMessage={isFilterPanelExpanded ? messages.hideLabel : messages.showLabel}
+      onClick={onClick}
+    />
+  );
+}
+
+ToggleFilterPanelButton.propTypes = propTypes;
+ToggleFilterPanelButton.defaultProps = defaultProps;

package/src/components/pages/DetailPage.jsx

@@ -0,0 +1,101 @@
+/* global window */
+
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import Immutable from 'immutable';
+import bodyClassName from '../../helpers/bodyClassName';
+import ScrollTopButton from '../layout/ScrollTopButton';
+import DetailPanel from '../detail/DetailPanelContainer';
+import styles from '../../../styles/cspace/DetailPage.css';
+
+const propTypes = {
+  location: PropTypes.shape({
+    search: PropTypes.string.isRequired,
+    state: PropTypes.shape({
+      index: PropTypes.number,
+    }),
+  }).isRequired,
+  match: PropTypes.shape({
+    params: PropTypes.shape({
+      csid: PropTypes.string,
+    }),
+  }).isRequired,
+  params: PropTypes.instanceOf(Immutable.Map),
+  onLeave: PropTypes.func,
+  onLocationChange: PropTypes.func,
+};
+
+const defaultProps = {
+  onLeave: () => undefined,
+  onLocationChange: () => undefined,
+  params: undefined,
+};
+
+export default class DetailPage extends Component {
+  componentDidMount() {
+    window.document.body.classList.add(bodyClassName(styles.common));
+
+    if (window.scrollTo) {
+      window.scrollTo({
+        left: 0,
+        top: 0,
+      });
+    }
+
+    this.handleLocationChange();
+  }
+
+  componentDidUpdate(prevProps) {
+    const {
+      location,
+    } = this.props;
+
+    const {
+      location: prevLocation,
+    } = prevProps;
+
+    if (location !== prevLocation) {
+      this.handleLocationChange();
+    }
+  }
+
+  componentWillUnmount() {
+    const {
+      onLeave,
+    } = this.props;
+
+    window.document.body.classList.remove(bodyClassName(styles.common));
+
+    onLeave();
+  }
+
+  handleLocationChange() {
+    const {
+      location,
+      match,
+      onLocationChange,
+    } = this.props;
+
+    onLocationChange(location, match);
+  }
+
+  render() {
+    const {
+      params,
+    } = this.props;
+
+    if (!params) {
+      return null;
+    }
+
+    return (
+      <div className={styles.common}>
+        <DetailPanel params={params} />
+        <ScrollTopButton />
+      </div>
+    );
+  }
+}
+
+DetailPage.propTypes = propTypes;
+DetailPage.defaultProps = defaultProps;

package/src/components/pages/DetailPageContainer.js

@@ -0,0 +1,18 @@
+import { connect } from 'react-redux';
+import DetailPage from './DetailPage';
+import { clearDetail, setDetailParams } from '../../actions/detailActions';
+import { getDetailParams } from '../../reducers';
+
+const mapStateToProps = (state) => ({
+  params: getDetailParams(state),
+});
+
+const mapDispatchToProps = {
+  onLeave: clearDetail,
+  onLocationChange: setDetailParams,
+};
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(DetailPage);

package/src/components/pages/RootPage.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import { Route, Switch } from 'react-router';
+import Helmet from 'react-helmet';
+import DetailPage from './DetailPageContainer';
+import SearchPage from './SearchPageContainer';
+import config from '../../config';
+import styles from '../../../styles/cspace/RootPage.css';
+
+const messages = defineMessages({
+  title: {
+    id: 'RootPage.title',
+    defaultMessage: 'Collection Browser',
+  },
+});
+
+export default function RootPage() {
+  const intl = useIntl();
+  const title = intl.formatMessage(messages.title);
+  const detailPath = config.get('detailPath');
+
+  return (
+    <div className={styles.common}>
+      <Helmet
+        defaultTitle={title}
+        titleTemplate={`%s | ${title}`}
+      >
+        <meta name="viewport" content="width=device-width" />
+      </Helmet>
+
+      <Switch>
+        <Route path="/search" component={SearchPage} />
+        <Route path={`/${detailPath}/:csid`} component={DetailPage} />
+      </Switch>
+    </div>
+  );
+}

package/src/components/pages/SearchPage.jsx

@@ -0,0 +1,160 @@
+/* global window */
+
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import Helmet from 'react-helmet';
+import { defineMessages, injectIntl } from 'react-intl';
+import { withRouter } from 'react-router';
+import Immutable from 'immutable';
+import bodyClassName from '../../helpers/bodyClassName';
+import Fixed from '../layout/Fixed';
+import FilterPanel from '../search/result/FilterPanelContainer';
+import SearchEntryPanel from '../search/entry/SearchEntryPanel';
+import SearchResultPanel from '../search/result/SearchResultPanelContainer';
+import ScrollTopButton from '../layout/ScrollTopButton';
+import ToggleFilterPanelButton from '../layout/ToggleFilterPanelButton';
+import { FILTER_PANEL_ID } from '../../constants/ids';
+import styles from '../../../styles/cspace/SearchPage.css';
+
+const propTypes = {
+  intl: PropTypes.shape({
+    formatMessage: PropTypes.func.isRequired,
+  }).isRequired,
+  location: PropTypes.shape({
+    search: PropTypes.string,
+  }).isRequired,
+  isFilterPanelExpanded: PropTypes.bool,
+  onLocationChange: PropTypes.func,
+  onTogglePanelButtonClick: PropTypes.func,
+  params: PropTypes.instanceOf(Immutable.Map),
+};
+
+const defaultProps = {
+  isFilterPanelExpanded: false,
+  onLocationChange: () => undefined,
+  onTogglePanelButtonClick: () => undefined,
+  params: undefined,
+};
+
+const messages = defineMessages({
+  title: {
+    id: 'SearchPage.title',
+    defaultMessage: 'Search',
+  },
+});
+
+class SearchPage extends Component {
+  constructor() {
+    super();
+
+    this.handleFilterPanelApi = this.handleFilterPanelApi.bind(this);
+    this.handleSearchResultListHitsUpdated = this.handleSearchResultListHitsUpdated.bind(this);
+    this.handleToggleFilterPanelButtonClick = this.handleToggleFilterPanelButtonClick.bind(this);
+  }
+
+  componentDidMount() {
+    window.document.body.classList.add(bodyClassName(styles.common));
+
+    if (window.scrollTo) {
+      window.scrollTo({
+        left: 0,
+        top: 0,
+      });
+    }
+
+    this.handleLocationChange();
+  }
+
+  componentDidUpdate(prevProps) {
+    const {
+      location,
+    } = this.props;
+
+    const {
+      location: prevLocation,
+    } = prevProps;
+
+    if (location !== prevLocation) {
+      this.handleLocationChange();
+    }
+  }
+
+  componentWillUnmount() {
+    window.document.body.classList.remove(bodyClassName(styles.common));
+  }
+
+  handleFilterPanelApi(api) {
+    this.filterPanelApi = api;
+  }
+
+  handleLocationChange() {
+    const {
+      location,
+      onLocationChange,
+    } = this.props;
+
+    onLocationChange(location);
+  }
+
+  handleSearchResultListHitsUpdated() {
+    if (this.filterPanelApi) {
+      this.filterPanelApi.setHeight();
+    }
+  }
+
+  handleToggleFilterPanelButtonClick() {
+    const {
+      onTogglePanelButtonClick,
+    } = this.props;
+
+    onTogglePanelButtonClick(FILTER_PANEL_ID);
+  }
+
+  render() {
+    const {
+      intl,
+      isFilterPanelExpanded,
+      params,
+    } = this.props;
+
+    if (!params) {
+      return null;
+    }
+
+    const title = intl.formatMessage(messages.title);
+
+    return (
+      <div className={styles.common}>
+        <Helmet>
+          <title>{title}</title>
+        </Helmet>
+
+        <Fixed>
+          <SearchEntryPanel />
+
+          <ToggleFilterPanelButton
+            isFilterPanelExpanded={isFilterPanelExpanded}
+            onClick={this.handleToggleFilterPanelButtonClick}
+          />
+
+          <FilterPanel
+            api={this.handleFilterPanelApi}
+            isExpanded={isFilterPanelExpanded}
+          />
+        </Fixed>
+
+        <SearchResultPanel
+          params={params}
+          onHitsUpdated={this.handleSearchResultListHitsUpdated}
+        />
+
+        <ScrollTopButton />
+      </div>
+    );
+  }
+}
+
+SearchPage.propTypes = propTypes;
+SearchPage.defaultProps = defaultProps;
+
+export default injectIntl(withRouter(SearchPage));

package/src/components/pages/SearchPageContainer.js

@@ -0,0 +1,21 @@
+import { connect } from 'react-redux';
+import SearchPage from './SearchPage';
+import { togglePanel } from '../../actions/prefsActions';
+import { setSearchParams } from '../../actions/searchActions';
+import { FILTER_PANEL_ID } from '../../constants/ids';
+import { isPanelExpanded, getSearchParams } from '../../reducers';
+
+const mapStateToProps = (state) => ({
+  isFilterPanelExpanded: isPanelExpanded(state, FILTER_PANEL_ID),
+  params: getSearchParams(state),
+});
+
+const mapDispatchToProps = {
+  onLocationChange: setSearchParams,
+  onTogglePanelButtonClick: togglePanel,
+};
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(SearchPage);

package/src/components/search/entry/SearchEntryForm.jsx

@@ -0,0 +1,82 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { withRouter } from 'react-router';
+import Immutable from 'immutable';
+import SearchQueryInput from './SearchQueryInput';
+import { SEARCH_QUERY_ID } from '../../../constants/ids';
+import styles from '../../../../styles/cspace/SearchEntryForm.css';
+
+const propTypes = {
+  history: PropTypes.shape({
+    push: PropTypes.func,
+  }).isRequired,
+  onCommit: PropTypes.func,
+  onSubmit: PropTypes.func,
+  params: PropTypes.instanceOf(Immutable.Map),
+};
+
+const defaultProps = {
+  onCommit: () => undefined,
+  onSubmit: () => undefined,
+  params: Immutable.Map(),
+};
+
+class SearchEntryForm extends Component {
+  constructor() {
+    super();
+
+    this.handleInputCommit = this.handleInputCommit.bind(this);
+    this.handleRef = this.handleRef.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
+  }
+
+  handleInputCommit(id, value) {
+    const {
+      onCommit,
+    } = this.props;
+
+    onCommit(id, value);
+  }
+
+  handleRef(ref) {
+    this.domNode = ref;
+  }
+
+  handleSubmit(event) {
+    const {
+      history,
+      onSubmit,
+    } = this.props;
+
+    event.preventDefault();
+
+    onSubmit(history);
+  }
+
+  render() {
+    const {
+      params,
+    } = this.props;
+
+    return (
+      <form
+        className={styles.common}
+        ref={this.handleRef}
+        role="search"
+        onSubmit={this.handleSubmit}
+      >
+        <SearchQueryInput
+          id={SEARCH_QUERY_ID}
+          showSubmitButton
+          value={params.get(SEARCH_QUERY_ID)}
+          onCommit={this.handleInputCommit}
+        />
+      </form>
+    );
+  }
+}
+
+SearchEntryForm.propTypes = propTypes;
+SearchEntryForm.defaultProps = defaultProps;
+
+export default withRouter(SearchEntryForm);

package/src/components/search/entry/SearchEntryFormContainer.js

@@ -0,0 +1,22 @@
+import { connect } from 'react-redux';
+import SearchEntryForm from './SearchEntryForm';
+import { getSearchEntryFormParams } from '../../../reducers';
+
+import {
+  applySearchEntryForm,
+  setSearchEntryFormParam,
+} from '../../../actions/searchEntryFormActions';
+
+const mapStateToProps = (state) => ({
+  params: getSearchEntryFormParams(state),
+});
+
+const mapDispatchToProps = {
+  onCommit: setSearchEntryFormParam,
+  onSubmit: applySearchEntryForm,
+};
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(SearchEntryForm);

package/src/components/search/entry/SearchEntryPanel.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Immutable from 'immutable';
+import SearchEntryForm from './SearchEntryFormContainer';
+import styles from '../../../../styles/cspace/SearchEntryPanel.css';
+
+const propTypes = {
+  params: PropTypes.instanceOf(Immutable.Map),
+};
+
+const defaultProps = {
+  params: undefined,
+};
+
+export default function SearchEntryPanel(props) {
+  const {
+    params,
+  } = props;
+
+  return (
+    <div className={styles.common}>
+      <SearchEntryForm params={params} />
+    </div>
+  );
+}
+
+SearchEntryPanel.propTypes = propTypes;
+SearchEntryPanel.defaultProps = defaultProps;