Map categories and infrastructures

src/pages/Materials.jsx

 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);