public/js/components/AtomList/AtomList.js (95 lines of code) (raw):
import React from 'react';
import {PropTypes} from 'prop-types';
import _isEqual from 'lodash/fp/isEqual';
import {allAtomTypes} from '../../constants/atomData';
import {getAtomByType} from '../../constants/atomData';
import {searchParams} from '../../constants/queryParams';
import {ManagedField} from '../ManagedEditor';
import SearchTextInput from '../FormFields/SearchFields/SearchTextInput';
import SearchCheckboxGroup from '../FormFields/SearchFields/SearchCheckboxGroup';
import SearchSelectBox from '../FormFields/SearchFields/SearchSelectBox';
import AtomListItem from '../AtomListItem/AtomListItem';
class AtomList extends React.Component {
static propTypes = {
config: PropTypes.shape({
atomEditorUrls: PropTypes.shape({
media: PropTypes.string
}),
isEmbedded: PropTypes.bool.isRequired
}),
queryParams: PropTypes.shape({
q: PropTypes.string,
types: PropTypes.array,
'page-size': PropTypes.string
}),
atomListActions: PropTypes.shape({
getAtomList: PropTypes.func.isRequired
}).isRequired,
queryParamsActions: PropTypes.shape({
updateQueryParams: PropTypes.func.isRequired
}),
atomList: PropTypes.array
};
triggerSearch(overrideSearchQuery) {
const searchQuery = overrideSearchQuery || this.props.queryParams;
this.props.atomListActions.getAtomList(searchQuery);
}
componentDidMount() {
this.props.queryParamsActions.updateQueryParams(Object.assign({}, searchParams, this.props.queryParams));
this.triggerSearch();
}
UNSAFE_componentWillReceiveProps(newProps) {
if (!_isEqual(newProps.queryParams, this.props.queryParams)) {
this.triggerSearch(Object.assign({}, searchParams, newProps.queryParams));
}
}
updateAtomList = (newParams) => {
this.props.queryParamsActions.updateQueryParams(newParams);
};
render () {
if (!this.props.atomList) {
return <div>Loading...</div>;
}
return (
<div className="page__section">
<div className="atom-search">
<ManagedField data={this.props.queryParams} updateData={this.updateAtomList} fieldLocation="q" name="Search atoms">
<SearchTextInput fieldPlaceholder="Search for atoms" />
</ManagedField>
<div className="atom-search__filters">
<ManagedField data={this.props.queryParams}
updateData={this.updateAtomList}
fieldLocation="types"
name="Atom Types">
<SearchCheckboxGroup checkValues={allAtomTypes.reduce((o, t) => {o[t.type] = t.fullName; return o;}, {})}/>
</ManagedField>
<ManagedField data={this.props.queryParams} updateData={this.updateAtomList} fieldLocation="page-size" name="Page size">
<SearchSelectBox selectValues={["20","50","100","150","200"]} />
</ManagedField>
</div>
</div>
<div className="atom-list">
{this.props.atomList.filter((atom) => getAtomByType(atom.atomType) !== undefined).map((atom) => <AtomListItem atom={atom} config={this.props.config} key={atom.id}/>)}
</div>
</div>
);
}
}
//REDUX CONNECTIONS
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import * as getAtomListActions from '../../actions/AtomListActions/getAtomList';
import * as updateQueryParamsActions from '../../actions/QueryParamsActions/updateQueryParams';
function mapStateToProps(state) {
return {
atomList: state.atomList,
config: state.config,
queryParams: state.queryParams
};
}
function mapDispatchToProps(dispatch) {
return {
atomListActions: bindActionCreators(Object.assign({}, getAtomListActions), dispatch),
queryParamsActions: bindActionCreators(Object.assign({}, updateQueryParamsActions), dispatch)
};
}
export default connect(mapStateToProps, mapDispatchToProps)(AtomList);