diff --git a/src/pages/Materials.jsx b/src/pages/Materials.jsx index 5d0fd498ac36e3aab4baa7e5b362aca39c69d60f..7e4716eb99dc21d22047262ef59d179073b231df 100644 --- a/src/pages/Materials.jsx +++ b/src/pages/Materials.jsx @@ -1,7 +1,9 @@ import React from 'react'; import PropTypes from 'prop-types'; 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 { fetchInfrastructures } from '../actions/infrastructuresActions'; @@ -11,8 +13,10 @@ function Materials({ userToken, categoriesFetched, categoriesFetching, + categories, infrastructuresFetched, infrastructuresFetching, + infrastructures, }) { if (!categoriesFetched && !categoriesFetching) { dispatch(fetchCategories(userToken)); @@ -22,6 +26,18 @@ function Materials({ 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 ( {(categoriesFetching || infrastructuresFetching) && ( @@ -29,6 +45,10 @@ function Materials({ Chargement en cours )} + + + + ); } @@ -38,14 +58,28 @@ Materials.propTypes = { userToken: PropTypes.string.isRequired, categoriesFetched: 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, infrastructuresFetching: PropTypes.bool.isRequired, + infrastructures: PropTypes.arrayOf( + PropTypes.shape({ + id: PropTypes.number.isRequired, + name: PropTypes.string.isRequired, + }), + ).isRequired, }; export default connect(store => ({ userToken: store.user.token, categoriesFetched: store.categories.fetched, categoriesFetching: store.categories.fetching, + categories: store.categories.categories, infrastructuresFetched: store.infrastructures.fetched, infrastructuresFetching: store.infrastructures.fetching, + infrastructures: store.infrastructures.infrastructures, }))(Materials);