Commit 988b50a5 authored by Rémy Huet's avatar Rémy Huet 💻

Map categories and infrastructures

parent 78f4ef0a
Pipeline #32403 passed with stage
in 55 seconds
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { Container, Dimmer, Loader } from 'semantic-ui-react'; import {
Container, Dimmer, Loader, Divider, Dropdown,
} from 'semantic-ui-react';
import { fetchCategories } from '../actions/categoriesActions'; import { fetchCategories } from '../actions/categoriesActions';
import { fetchInfrastructures } from '../actions/infrastructuresActions'; import { fetchInfrastructures } from '../actions/infrastructuresActions';
...@@ -11,8 +13,10 @@ function Materials({ ...@@ -11,8 +13,10 @@ function Materials({
userToken, userToken,
categoriesFetched, categoriesFetched,
categoriesFetching, categoriesFetching,
categories,
infrastructuresFetched, infrastructuresFetched,
infrastructuresFetching, infrastructuresFetching,
infrastructures,
}) { }) {
if (!categoriesFetched && !categoriesFetching) { if (!categoriesFetched && !categoriesFetching) {
dispatch(fetchCategories(userToken)); dispatch(fetchCategories(userToken));
...@@ -22,6 +26,18 @@ function Materials({ ...@@ -22,6 +26,18 @@ function Materials({
dispatch(fetchInfrastructures(userToken)); dispatch(fetchInfrastructures(userToken));
} }
const categoryOptions = categories.map(({ name, id }) => ({
key: id,
value: id,
text: name,
}));
const infrastructureOptions = infrastructures.map(({ name, id }) => ({
key: id,
value: id,
text: name,
}));
return ( return (
<Container style={{ margin: '1em' }}> <Container style={{ margin: '1em' }}>
{(categoriesFetching || infrastructuresFetching) && ( {(categoriesFetching || infrastructuresFetching) && (
...@@ -29,6 +45,10 @@ function Materials({ ...@@ -29,6 +45,10 @@ function Materials({
<Loader>Chargement en cours</Loader> <Loader>Chargement en cours</Loader>
</Dimmer> </Dimmer>
)} )}
<Dropdown search selection clearable options={categoryOptions} />
<Dropdown search selection clearable options={infrastructureOptions} />
<Divider clearing />
</Container> </Container>
); );
} }
...@@ -38,14 +58,28 @@ Materials.propTypes = { ...@@ -38,14 +58,28 @@ Materials.propTypes = {
userToken: PropTypes.string.isRequired, userToken: PropTypes.string.isRequired,
categoriesFetched: PropTypes.bool.isRequired, categoriesFetched: PropTypes.bool.isRequired,
categoriesFetching: PropTypes.bool.isRequired, categoriesFetching: PropTypes.bool.isRequired,
categories: PropTypes.arrayOf(
PropTypes.shape({
id: PropTypes.number.isRequired,
name: PropTypes.string.isRequired,
}),
).isRequired,
infrastructuresFetched: PropTypes.bool.isRequired, infrastructuresFetched: PropTypes.bool.isRequired,
infrastructuresFetching: PropTypes.bool.isRequired, infrastructuresFetching: PropTypes.bool.isRequired,
infrastructures: PropTypes.arrayOf(
PropTypes.shape({
id: PropTypes.number.isRequired,
name: PropTypes.string.isRequired,
}),
).isRequired,
}; };
export default connect(store => ({ export default connect(store => ({
userToken: store.user.token, userToken: store.user.token,
categoriesFetched: store.categories.fetched, categoriesFetched: store.categories.fetched,
categoriesFetching: store.categories.fetching, categoriesFetching: store.categories.fetching,
categories: store.categories.categories,
infrastructuresFetched: store.infrastructures.fetched, infrastructuresFetched: store.infrastructures.fetched,
infrastructuresFetching: store.infrastructures.fetching, infrastructuresFetching: store.infrastructures.fetching,
infrastructures: store.infrastructures.infrastructures,
}))(Materials); }))(Materials);
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment