Commit 988b50a5 authored by Remy Huet's avatar Remy Huet

Map categories and infrastructures

parent 78f4ef0a
Pipeline #32403 passed with stage
in 55 seconds
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 (
<Container style={{ margin: '1em' }}>
{(categoriesFetching || infrastructuresFetching) && (
......@@ -29,6 +45,10 @@ function Materials({
<Loader>Chargement en cours</Loader>
</Dimmer>
)}
<Dropdown search selection clearable options={categoryOptions} />
<Dropdown search selection clearable options={infrastructureOptions} />
<Divider clearing />
</Container>
);
}
......@@ -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);
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