...
 
Commits (2)
import React, {Component, Fragment} from 'react'
import {autocomplete, search} from 'sesatheque-client/src/client'
import {autocomplete} from 'sesatheque-client/src/client'
import {debounce} from 'lodash'
import config from '../../server/config'
import {labels, listes} from '../../server/ressource/config'
import {Async as Select} from 'react-select'
import ResourceList from './ResourceList'
import autocompleteResourceListProvider from '../hoc/autocompleteResourceListProvider'
const defaultQuery = {
skip: 0,
limit: 100
}
const AutocompleteResourceList = autocompleteResourceListProvider(ResourceList)
class OptionValue {
constructor (filter, filterValue) {
......@@ -75,8 +73,8 @@ class AutocompleteForm extends Component {
super(props)
this.state = {
resources: [],
selection: []
selection: [],
queryFilters: null
}
}
......@@ -86,18 +84,12 @@ class AutocompleteForm extends Component {
}
searchResources () {
const queryFilters = {
...defaultQuery
}
const queryFilters = {}
this.state.selection.forEach(element => {
if (queryFilters[element.value.filter] === undefined) queryFilters[element.value.filter] = []
queryFilters[element.value.filter].push(element.value.filterValue)
})
search(config.baseId, queryFilters, (error, resources) => {
if (error) return console.error(error)
this.setState({resources})
})
this.setState({queryFilters})
}
render () {
......@@ -127,12 +119,9 @@ class AutocompleteForm extends Component {
className="btn btn--rounded"
onClick={this.searchResources.bind(this)}>Rechercher</button>
</div>
<ResourceList
handlePageClick={() => {}}
refreshList={this.searchResources.bind(this)}
queryOptions={defaultQuery}
resources={this.state.resources}
total={this.state.resources.length} />
<AutocompleteResourceList
query={this.state.queryFilters}
/>
</Fragment>
)
}
......
......@@ -19,7 +19,6 @@ const ResourceList = ({
showSearchLink,
total
}) => {
// query et queryOptions vont toujours ensemble
if (!queryOptions) {
// pas très normal…
console.error(Error('ResourceList appelé sans query'))
......@@ -164,7 +163,6 @@ ResourceList.propTypes = {
handlePageClick: PropTypes.func.isRequired,
askDelete: PropTypes.func.isRequired,
// fourni par resourceListProvider
query: PropTypes.object,
queryOptions: PropTypes.shape({
skip: PropTypes.number.isRequired,
limit: PropTypes.number.isRequired
......
import PropTypes from 'prop-types'
import {search} from 'sesatheque-client/src/client'
import React, {Component} from 'react'
import config from '../../server/config'
import getDisplayName from '../utils/getDisplayName'
const limit = 25
/**
* Higher Order Component qui permet l'usage de ResourceList dans la recherche assistée
* @param {Component} WrappedComponent
* @return {Component} Le composant enrichi
*/
const autocompleteResourceListProvider = (WrappedComponent) => {
class AutocompleteResourceListProvider extends Component {
constructor (props) {
super(props)
this.state = {
resources: [],
total: 0,
page: 0
}
}
fetchList () {
if (this.props.query === null) return
const query = {
...this.props.query,
limit,
skip: limit * this.state.page
}
search(config.baseId, query, (error, {resources, total}) => {
if (error) {
this.setState({resources: [], total: 0})
return console.error(error)
}
this.setState({resources, total})
})
}
componentDidUpdate ({query}, {page}) {
if (this.props.query !== query) {
return this.setState({page: 0}, this.fetchList)
}
if (this.state.page !== page) {
this.fetchList()
}
}
render () {
if (this.props.query === null) return null
return (
<WrappedComponent
resources={this.state.resources}
total={this.state.total}
refreshList={this.fetchList.bind(this)}
handlePageClick={({selected: page}) => { this.setState({page}) }}
queryOptions={{limit, skip: this.state.page * limit}}
/>
)
}
}
AutocompleteResourceListProvider.displayName = `autocompleteResourceListProvider(${getDisplayName(WrappedComponent)})`
AutocompleteResourceListProvider.propTypes = {
query: PropTypes.object
}
return AutocompleteResourceListProvider
}
export default autocompleteResourceListProvider