diff --git a/src/pages/Exercises/Exercises.js b/src/pages/Exercises/Exercises.js index 056abc6d1..3e01da698 100644 --- a/src/pages/Exercises/Exercises.js +++ b/src/pages/Exercises/Exercises.js @@ -1,68 +1,35 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import ImmutablePropTypes from 'react-immutable-proptypes'; import { connect } from 'react-redux'; import { FormattedMessage } from 'react-intl'; import Button from '../../components/widgets/FlatButton'; import { push } from 'react-router-redux'; import { LinkContainer } from 'react-router-bootstrap'; +import { ButtonGroup } from 'react-bootstrap'; import DeleteExerciseButtonContainer from '../../containers/DeleteExerciseButtonContainer'; -import { - FormGroup, - ControlLabel, - FormControl, - InputGroup, - ButtonGroup -} from 'react-bootstrap'; +import SearchContainer from '../../containers/SearchContainer'; import PageContent from '../../components/layout/PageContent'; import Box from '../../components/widgets/Box'; -import { AddIcon, EditIcon, SearchIcon } from '../../components/icons'; -import { - exercisesSelector, - fetchManyStatus -} from '../../redux/selectors/exercises'; +import { AddIcon, EditIcon } from '../../components/icons'; +import { fetchManyStatus } from '../../redux/selectors/exercises'; import { canEditExercise } from '../../redux/selectors/users'; import { loggedInUserIdSelector } from '../../redux/selectors/auth'; import { fetchExercises, create as createExercise } from '../../redux/modules/exercises'; +import { searchExercises } from '../../redux/modules/search'; import ExercisesList from '../../components/Exercises/ExercisesList'; import FetchManyResourceRenderer from '../../components/helpers/FetchManyResourceRenderer'; -import { getJsData } from '../../redux/helpers/resourceManager'; import withLinks from '../../hoc/withLinks'; class Exercises extends Component { - static loadAsync = (params, dispatch) => - Promise.all([dispatch(fetchExercises())]); + static loadAsync = (params, dispatch) => dispatch(fetchExercises()); componentWillMount() { this.props.loadAsync(); - this.setState({ visibleExercises: [] }); - } - - componentWillReceiveProps(nextProps) { - this.setState({ - visibleExercises: nextProps.exercises - .toArray() - .map(exercise => exercise.toJS().data) - }); - } - - onChange(query, allExercises) { - const normalizedQuery = query.toLocaleLowerCase(); - const filteredExercises = allExercises - .toArray() - .filter( - exercise => - exercise.name.toLocaleLowerCase().startsWith(normalizedQuery) || - exercise.id.toLocaleLowerCase().startsWith(normalizedQuery) - ); - this.setState({ - visibleExercises: filteredExercises - }); } newExercise = () => { @@ -79,8 +46,8 @@ class Exercises extends Component { render() { const { isAuthorOfExercise, - exercises, fetchStatus, + search, links: { EXERCISE_EDIT_URI_FACTORY, EXERCISE_EDIT_CONFIG_URI_FACTORY } } = this.props; @@ -171,66 +138,43 @@ class Exercises extends Component {

} - noPadding unlimitedHeight > -
-
- - - - - - { - this.query = e.target.value; - }} - /> - - + + - - - - - -
- - isAuthorOfExercise(id) && - - - - - - - - - } - /> -
+ + + + } + />} + /> } @@ -240,12 +184,12 @@ class Exercises extends Component { Exercises.propTypes = { loadAsync: PropTypes.func.isRequired, - exercises: ImmutablePropTypes.map, createExercise: PropTypes.func.isRequired, isAuthorOfExercise: PropTypes.func.isRequired, push: PropTypes.func.isRequired, links: PropTypes.object.isRequired, - fetchStatus: PropTypes.string + fetchStatus: PropTypes.string, + search: PropTypes.func }; export default withLinks( @@ -253,7 +197,6 @@ export default withLinks( state => { const userId = loggedInUserIdSelector(state); return { - exercises: exercisesSelector(state), fetchStatus: fetchManyStatus(state), isAuthorOfExercise: exerciseId => canEditExercise(userId, exerciseId)(state) @@ -262,7 +205,8 @@ export default withLinks( dispatch => ({ push: url => dispatch(push(url)), createExercise: () => dispatch(createExercise()), - loadAsync: () => Exercises.loadAsync({}, dispatch) + loadAsync: () => Exercises.loadAsync({}, dispatch), + search: query => dispatch(searchExercises()('exercises-page', query)) }) )(Exercises) ); diff --git a/src/pages/Pipelines/Pipelines.js b/src/pages/Pipelines/Pipelines.js index f9bc4b927..1c0a12516 100644 --- a/src/pages/Pipelines/Pipelines.js +++ b/src/pages/Pipelines/Pipelines.js @@ -1,68 +1,35 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import ImmutablePropTypes from 'react-immutable-proptypes'; import { connect } from 'react-redux'; import { FormattedMessage } from 'react-intl'; import Button from '../../components/widgets/FlatButton'; import { push } from 'react-router-redux'; import { LinkContainer } from 'react-router-bootstrap'; -import { - FormGroup, - ControlLabel, - FormControl, - InputGroup, - ButtonGroup -} from 'react-bootstrap'; +import { ButtonGroup } from 'react-bootstrap'; +import SearchContainer from '../../containers/SearchContainer'; import DeletePipelineButtonContainer from '../../containers/DeletePipelineButtonContainer'; import PageContent from '../../components/layout/PageContent'; import Box from '../../components/widgets/Box'; import { canEditPipeline } from '../../redux/selectors/users'; import { loggedInUserIdSelector } from '../../redux/selectors/auth'; -import { AddIcon, EditIcon, SearchIcon } from '../../components/icons'; -import { - pipelinesSelector, - fetchManyStatus -} from '../../redux/selectors/pipelines'; +import { AddIcon, EditIcon } from '../../components/icons'; +import { fetchManyStatus } from '../../redux/selectors/pipelines'; import { fetchPipelines, create as createPipeline } from '../../redux/modules/pipelines'; +import { searchPipelines } from '../../redux/modules/search'; import PipelinesList from '../../components/Pipelines/PipelinesList'; import FetchManyResourceRenderer from '../../components/helpers/FetchManyResourceRenderer'; import withLinks from '../../hoc/withLinks'; class Pipelines extends Component { - static loadAsync = (params, dispatch) => - Promise.all([dispatch(fetchPipelines())]); + static loadAsync = (params, dispatch) => dispatch(fetchPipelines()); componentWillMount() { this.props.loadAsync(); - this.setState({ visiblePipelines: [] }); - } - - componentWillReceiveProps(nextProps) { - this.setState({ - visiblePipelines: nextProps.pipelines - .toArray() - .map(pipeline => pipeline.toJS().data) - }); - } - - onChange(query, allPipelines) { - const normalizedQuery = query.toLocaleLowerCase(); - const filteredPipelines = allPipelines - .toArray() - .map(pipeline => pipeline.toJS().data) - .filter( - pipeline => - pipeline.name.toLocaleLowerCase().startsWith(normalizedQuery) || - pipeline.id.toLocaleLowerCase().startsWith(normalizedQuery) - ); - this.setState({ - visiblePipelines: filteredPipelines - }); } newPipeline = () => { @@ -78,9 +45,9 @@ class Pipelines extends Component { render() { const { - pipelines, fetchStatus, isAuthorOfPipeline, + search, links: { PIPELINE_EDIT_URI_FACTORY } } = this.props; @@ -146,67 +113,41 @@ class Pipelines extends Component { } ]} > -
- - } - footer={ -

- -

- } - noPadding - unlimitedHeight - > -
-
- - - - - - { - this.query = e.target.value; - }} - /> - - - - - -
+ + } + footer={ +

+ +

+ } + unlimitedHeight + > + isAuthorOfPipeline(id) && @@ -221,10 +162,9 @@ class Pipelines extends Component { } - /> -
-
-
+ />} + /> + } ); @@ -233,12 +173,12 @@ class Pipelines extends Component { Pipelines.propTypes = { loadAsync: PropTypes.func.isRequired, - pipelines: ImmutablePropTypes.map, createPipeline: PropTypes.func.isRequired, isAuthorOfPipeline: PropTypes.func.isRequired, push: PropTypes.func.isRequired, links: PropTypes.object.isRequired, - fetchStatus: PropTypes.string + fetchStatus: PropTypes.string, + search: PropTypes.func }; export default withLinks( @@ -247,7 +187,6 @@ export default withLinks( const userId = loggedInUserIdSelector(state); return { - pipelines: pipelinesSelector(state), fetchStatus: fetchManyStatus(state), isAuthorOfPipeline: pipelineId => canEditPipeline(userId, pipelineId)(state) @@ -256,7 +195,8 @@ export default withLinks( dispatch => ({ push: url => dispatch(push(url)), createPipeline: () => dispatch(createPipeline()), - loadAsync: () => Pipelines.loadAsync({}, dispatch) + loadAsync: () => Pipelines.loadAsync({}, dispatch), + search: query => dispatch(searchPipelines()('pipelines-page', query)) }) )(Pipelines) ); diff --git a/src/redux/modules/search.js b/src/redux/modules/search.js index 9f10df371..6179b74e9 100644 --- a/src/redux/modules/search.js +++ b/src/redux/modules/search.js @@ -58,3 +58,5 @@ export const searchPeople = instanceId => search(`/instances/${instanceId}/users`); export const searchExercises = () => search('/exercises'); + +export const searchPipelines = () => search('/pipelines');