-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #438 from mlibrary/history-react-router-dom-update…
…-part-3 `history` and `react-router-update` - Part 3
- Loading branch information
Showing
16 changed files
with
271 additions
and
382 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
98 changes: 32 additions & 66 deletions
98
src/modules/datastores/components/DatastoreNavigation/index.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,77 +1,43 @@ | ||
| import React from 'react'; | ||
| import { getDatastoreUidBySlug, stringifySearchQueryForURL } from '../../../pride'; | ||
| import { changeActiveDatastore } from '../../actions'; | ||
| import { Icon } from '../../../core'; | ||
| import './styles.css'; | ||
| import { stringifySearchQueryForURL } from '../../../pride'; | ||
| import { Anchor, Icon } from '../../../reusable'; | ||
| import PropTypes from 'prop-types'; | ||
| import { withRouter } from 'react-router-dom'; | ||
| import { connect } from 'react-redux'; | ||
| import { bindActionCreators } from 'redux'; | ||
|
|
||
| function DatastoreNavigation (props) { | ||
| const { match, datastores, search, activeFilters, history, institution } = props; | ||
| const routeDatastoreUid = getDatastoreUidBySlug(match.params.datastoreSlug); | ||
| const activeDatastoreUid = datastores.active; | ||
|
|
||
| if (routeDatastoreUid !== activeDatastoreUid) { | ||
| changeActiveDatastore(routeDatastoreUid); | ||
| } | ||
|
|
||
| function DatastoreNavigation ({ activeFilters, datastores, institution, search }) { | ||
| return ( | ||
| <div className='datastore-list-container datastore-scroll-container'> | ||
| <nav className='datastore-scroll-x' aria-label='Datastores'> | ||
| <ol className='datastore-list'> | ||
| {datastores.datastores.map((datastore) => { | ||
| const queryString = stringifySearchQueryForURL({ | ||
| query: search.query, | ||
| filter: activeFilters[datastore.uid], | ||
| page: search.page[datastore.uid] === 1 ? undefined : search.page[datastore.uid], | ||
| sort: search.sort[datastore.uid], | ||
| library: datastore.uid === 'mirlyn' ? institution.active : undefined | ||
| }); | ||
| const active = datastore.uid === activeDatastoreUid; | ||
|
|
||
| return ( | ||
| <li className='datastore-item' key={datastore.uid}> | ||
| <button | ||
| onClick={() => { | ||
| return history.push(`/${datastore.slug}${queryString.length > 0 ? `?${queryString}` : ''}`); | ||
| }} | ||
| aria-pressed={active} | ||
| className={`datastore-button ${active ? 'datastore-button--active' : ''}`} | ||
| > | ||
| {datastore.isMultisearch && <Icon name='multi-result' />} | ||
| {datastore.name} | ||
| </button> | ||
| </li> | ||
| ); | ||
| })} | ||
| </ol> | ||
| </nav> | ||
| </div> | ||
| <nav className='datastore-nav' aria-label='Datastores'> | ||
| <ol> | ||
| {datastores.datastores.map((datastore) => { | ||
| const queryString = stringifySearchQueryForURL({ | ||
| query: search.query, | ||
| filter: activeFilters[datastore.uid], | ||
| page: search.page[datastore.uid] === 1 ? undefined : search.page[datastore.uid], | ||
| sort: search.sort[datastore.uid], | ||
| library: datastore.uid === 'mirlyn' ? institution.active : undefined | ||
| }); | ||
| return ( | ||
| <li key={datastore.uid}> | ||
| <Anchor | ||
| to={`/${datastore.slug}${queryString ? `?${queryString}` : ''}`} | ||
| aria-current={datastores.active === datastore.uid && 'page'} | ||
| > | ||
| {datastore.isMultisearch && <Icon icon='multi_result' />} | ||
| {datastore.name} | ||
| </Anchor> | ||
| </li> | ||
| ); | ||
| })} | ||
| </ol> | ||
| </nav> | ||
| ); | ||
| }; | ||
|
|
||
| DatastoreNavigation.propTypes = { | ||
| match: PropTypes.object, | ||
| datastores: PropTypes.object, | ||
| search: PropTypes.object, | ||
| activeFilters: PropTypes.object, | ||
| history: PropTypes.object, | ||
| institution: PropTypes.object | ||
| datastores: PropTypes.object, | ||
| institution: PropTypes.object, | ||
| search: PropTypes.object | ||
| }; | ||
|
|
||
| export default withRouter(connect( | ||
| (state) => { | ||
| return { | ||
| datastores: state.datastores, | ||
| search: state.search, | ||
| activeFilters: state.filters.active, | ||
| institution: state.institution | ||
| }; | ||
| }, | ||
| (dispatch) => { | ||
| return bindActionCreators({ | ||
| changeActiveDatastore | ||
| }, dispatch); | ||
| } | ||
| )(DatastoreNavigation)); | ||
| export default DatastoreNavigation; |
69 changes: 69 additions & 0 deletions
69
src/modules/datastores/components/DatastoreNavigation/styles.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,69 @@ | ||
| .datastore-nav { | ||
| background: var(--search-color-grey-100); | ||
| border-bottom: solid 2px var(--search-color-grey-300); | ||
| overflow-x: auto; | ||
| } | ||
|
|
||
| .datastore-nav ol { | ||
| display: flex; | ||
| flex-direction: column; | ||
| list-style: none; | ||
| margin: 0; | ||
| justify-content: center; | ||
| } | ||
|
|
||
| @media (min-width: 600px) { | ||
| .datastore-nav ol { | ||
| flex-direction: row; | ||
| } | ||
| } | ||
|
|
||
| .datastore-nav li + li { | ||
| border-top: 1px solid var(--search-color-grey-300); | ||
| } | ||
|
|
||
| @media (min-width: 600px) { | ||
| .datastore-nav li + li { | ||
| border: 0; | ||
| } | ||
| } | ||
|
|
||
| .datastore-nav a { | ||
| align-items: center; | ||
| border-color: transparent; | ||
| border-style: solid; | ||
| border-left-width: 3px; | ||
| display: flex; | ||
| height: 100%; | ||
| padding: 0.5rem 1rem; | ||
| text-decoration: none; | ||
| white-space: nowrap; | ||
| } | ||
|
|
||
| @media (min-width: 600px) { | ||
| .datastore-nav a { | ||
| border-bottom-width: 2px; | ||
| border-left-width: 0; | ||
| } | ||
| } | ||
|
|
||
| .datastore-nav a:hover { | ||
| text-decoration: underline; | ||
| } | ||
|
|
||
| .datastore-nav a svg { | ||
| height: auto; | ||
| width: 1.5em; | ||
| } | ||
|
|
||
| .datastore-nav a[aria-current="page"] { | ||
| border-color: inherit; | ||
| } | ||
|
|
||
| .datastore-nav a:not([aria-current="page"]) { | ||
| color: var(--search-color-grey-700); | ||
| } | ||
|
|
||
| .datastore-nav a:not([aria-current="page"]) svg { | ||
| color: var(--search-color-grey-400); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,5 @@ | ||
| import React from 'react'; | ||
| import { Anchor } from '../../../reusable'; | ||
| import { Alert, Anchor } from '../../../reusable'; | ||
| import { connect } from 'react-redux'; | ||
| import { getField, getFieldValue } from '../../../records/utilities'; | ||
| import { placeHold } from '../../../pride'; | ||
|
|
@@ -141,22 +141,22 @@ class GetThisForm extends React.Component { | |
| if (response) { | ||
| if (response.status === 'Action Succeeded') { | ||
| return ( | ||
| <article className='alert alert-success'> | ||
| <Alert type='success'> | ||
| <h4>You have successfully requested this item</h4> | ||
| <ul className='u-margin-bottom-1 margin-left-2'> | ||
| <li>We will email you when it is available for pickup.</li> | ||
| <li>When it is available, we'll hold it for you for 7 days.</li> | ||
| </ul> | ||
| <Anchor href='https://account.lib.umich.edu/pending-requests/u-m-library'>View all your holds</Anchor> | ||
| </article> | ||
| </Alert> | ||
| ); | ||
| } else { | ||
| return ( | ||
| <article className='alert alert-warning'> | ||
| <Alert type='warning'> | ||
| <h4>The hold/request could not be placed</h4> | ||
| <p><span className='strong'>Status:</span> {response.status}</p> | ||
| <p className='u-margin-bottom-none'>Please contact the Graduate Library Circulation Desk at <Anchor href='mailto:[email protected]'>[email protected]</Anchor> or <Anchor href='tel:7347640401'>(734) 764-0401</Anchor> for assistance.</p> | ||
| </article> | ||
| </Alert> | ||
| ); | ||
| } | ||
| } | ||
|
|
@@ -171,17 +171,15 @@ class GetThisForm extends React.Component { | |
|
|
||
| if (!form) { | ||
| return ( | ||
| <div className='alert alert-warning' role='alert'> | ||
| <Alert type='warning'> | ||
| <p><span className='strong'>Error:</span> Unable to fetch details.</p> | ||
| </div> | ||
| </Alert> | ||
| ); | ||
| } | ||
|
|
||
| return ( | ||
| <> | ||
| <div role='alert'> | ||
| {this.renderResponse()} | ||
| </div> | ||
| {this.renderResponse()} | ||
| {showForm && ( | ||
| <form action={form.action} method={form.method} onSubmit={this.handleSubmit}> | ||
| {fields.map((field, key) => { | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.