Filter merged with map and search

frontend/src/components/App.js

@@ -14,7 +14,7 @@ import Chip from '@material-ui/core/Chip';
 import Avatar from '@material-ui/core/Avatar';
 import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
 import SchoolIcon from '@material-ui/icons/School';
-import { mainListItems, secondaryListItems } from './template/listItems';
+import { mainListItems, secondaryListItems, thirdListItems } from './template/listItems';
 
 import { connect } from "react-redux";
 import MyComponent from './MyComponent'
@@ -34,7 +34,6 @@ import {
 import PageMap from './pages/PageMap';
 import PageHome from './pages/PageHome';
 import PageUniversity from './pages/PageUniversity';
-import PageFilter from './pages/PageFilter';
 import PageSearch from './pages/PageSearch';
 import PageSettings from './pages/PageSettings';
 
@@ -161,6 +160,8 @@ class App extends MyComponent {
             <List>{mainListItems}</List>
             <Divider />
             <List>{secondaryListItems}</List>
+            <Divider />
+            <List>{thirdListItems}</List>
           </Drawer>
 
           <main className={classNames(classes.content, classes.noPaddingTop)}>
@@ -168,7 +169,6 @@ class App extends MyComponent {
               <Route path="/app/" exact={true} component={PageHome} />
               <Route path="/app/search" component={PageSearch} />
               <Route path="/app/map" component={PageMap} />
-              <Route path="/app/filter" component={PageFilter} />
               <Route path="/app/settings" component={PageSettings} />
               <Route
                 exact

frontend/src/components/filter/Filter.js

@@ -5,6 +5,13 @@ import MyComponent from '../MyComponent'
 import { connect } from "react-redux";
 import _ from 'underscore';
 import { saveSelectedUniversities, saveFilterConfig } from '../../actions/filter';
+import ExpansionPanel from '@material-ui/core/ExpansionPanel';
+import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
+import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import Typography from '@material-ui/core/Typography';
+import { withStyles } from '@material-ui/core/styles';
+
 
 import {
   universitiesFetchData,
@@ -13,25 +20,24 @@ import {
   countriesFetchData
 } from '../../generated/actions';
 
+
+const styles = theme => ({
+  root: {
+    width: '100%',
+  },
+  heading: {
+    fontSize: theme.typography.pxToRem(15),
+    fontWeight: theme.typography.fontWeightRegular,
+  },
+});
+
+
+
 class Filter extends MyComponent {
 
   saveContriesFilterConfig(state) {
     this.props.saveConfig({ contriesFilter: state })
   }
-  // getUnivFromCampus(campus) {
-  //   const { universities } = this.props;
-  //   return universities[campus.univ]
-  // }
-
-  // getCountryFromUniversity(univ) {
-  //   const { countries } = this.props;
-  //   return countries[univ.country]
-  // }
-
-  // getCountryFromCampus(campus) {
-  //   const univ = this.getUnivFromCampus(campus);
-  //   return this.getCountryFromUniversity(univ);
-  // }
 
   getCountriesWhereThereAreUniversities() {
     const { mainCampuses } = this.getAllFetchedData();
@@ -62,14 +68,21 @@ class Filter extends MyComponent {
   myRender() {
     const options = _.map(this.getCountriesWhereThereAreUniversities(),
       (c) => { return { id: c.iso_alpha2_code, label: c.name } })
-
+      const { classes } = this.props;
     return (
+      <ExpansionPanel>
+        <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
+          <Typography className={classes.heading}>Appliquer des filtres</Typography>
+        </ExpansionPanelSummary>
+        <ExpansionPanelDetails>
           <DownshiftMultiple
             options={options}
             onChange={(selection) => this.updateSelectedUniversities(selection)}
             onComponentUnmount={(state) => this.saveContriesFilterConfig(state)}
             config={this.props.contriesFilterConfig}
           />
+        </ExpansionPanelDetails>
+      </ExpansionPanel>
     );
   }
 }
@@ -100,4 +113,4 @@ const mapDispatchToProps = (dispatch) => {
 };
 
 
-export default connect(mapStateToProps, mapDispatchToProps)(Filter);
+export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(Filter));

frontend/src/components/pages/PageFilter.js

-import React from 'react';
-import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
-import Grid from '@material-ui/core/Grid';
-import Typography from '@material-ui/core/Typography';
-import Filter from '../filter/Filter';
-import Paper from '@material-ui/core/Paper';
-
-const styles = theme => ({
-  myPaper: {
-    padding: 16
-  }
-});
-
-class PageFilter extends React.Component {
-  render() {
-    const { classes } = this.props;
-    return (
-      <Paper className={classes.myPaper}>
-        <Grid container spacing={24}>
-          <Grid item xs={11}>
-            <Typography variant="display1" gutterBottom>
-              Filtrer
-            </Typography>
-          </Grid>
-          {/* <Grid item xs={1}>
-                        <UnivMapReloadButton />
-                    </Grid> */}
-        </Grid>
-        <Filter />
-      </Paper>
-    );
-  }
-}
-
-PageFilter.propTypes = {
-  classes: PropTypes.object.isRequired,
-};
-
-export default withStyles(styles)(PageFilter);

frontend/src/components/pages/PageMap.js

@@ -6,6 +6,7 @@ import Typography from '@material-ui/core/Typography';
 import UnivMap from '../map/UnivMap';
 import UnivMapReloadButton from '../map/UnivMapReloadButton';
 import Paper from '@material-ui/core/Paper';
+import Filter from '../filter/Filter';
 
 const styles = theme => ({
   myPaper: {
@@ -28,6 +29,7 @@ class PageMap extends React.Component {
             <UnivMapReloadButton />
           </Grid>
         </Grid>
+        <Filter />
         <UnivMap />
       </Paper>
     );

frontend/src/components/pages/PageSearch.js

@@ -5,6 +5,7 @@ import Grid from '@material-ui/core/Grid';
 import Typography from '@material-ui/core/Typography';
 import Search from '../search/Search';
 import Paper from '@material-ui/core/Paper';
+import Filter from '../filter/Filter';
 
 const styles = theme => ({
   myPaper: {
@@ -23,10 +24,8 @@ class PageSearch extends React.Component {
               Recherche d'une université
             </Typography>
           </Grid>
-          {/* <Grid item xs={1}>
-                        <UnivMapReloadButton />
-                    </Grid> */}
         </Grid>
+        <Filter />
         <Search />
       </Paper>
     );

frontend/src/components/template/listItems.js

@@ -2,11 +2,9 @@ import React from 'react';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemIcon from '@material-ui/core/ListItemIcon';
 import ListItemText from '@material-ui/core/ListItemText';
-import ListSubheader from '@material-ui/core/ListSubheader';
 import MapIcon from '@material-ui/icons/Map';
 import LocationCityIcon from '@material-ui/icons/LocationCity';
-import PeopleIcon from '@material-ui/icons/People';
-import BarChartIcon from '@material-ui/icons/BarChart';
+import PersonIcon from '@material-ui/icons/Person';
 import HomeIcon from '@material-ui/icons/Home';
 import SearchIcon from '@material-ui/icons/Search';
 import FilterIcon from '@material-ui/icons/FilterList';
@@ -44,15 +42,6 @@ export const mainListItems = (
       </ListItem>
     </NavLink>
 
-        <NavLink to={'/app/filter/'}>
-            <ListItem button>
-                <ListItemIcon>
-                    <FilterIcon />
-                </ListItemIcon>
-                <ListItemText primary="Filtrer" />
-            </ListItem>
-        </NavLink>
-
     <NavLink to={'/app/university/undefined'}>
       <ListItem button>
         <ListItemIcon>
@@ -62,51 +51,37 @@ export const mainListItems = (
       </ListItem>
     </NavLink>
 
-        <NavLink to={'/app/settings/'}>
-            <ListItem button>
-                <ListItemIcon>
-                    <SettingsIcon />
-                </ListItemIcon>
-                <ListItemText primary="Paramètres" />
-            </ListItem>
-        </NavLink>
-
-        <ListItem button>
-            <ListItemIcon>
-                <PeopleIcon />
-            </ListItemIcon>
-            <ListItemText primary="????" />
-        </ListItem>
-
-        <ListItem button>
-            <ListItemIcon>
-                <BarChartIcon />
-            </ListItemIcon>
-            <ListItemText primary="???" />
-        </ListItem>
   </div>
 );
 
 export const secondaryListItems = (
   <div>
-        <ListSubheader inset>Mes listes</ListSubheader>
     <ListItem button>
       <ListItemIcon>
         <AssignmentIcon />
       </ListItemIcon>
-            <ListItemText primary="Liste 1" />
+      <ListItemText primary="Mes listes" />
     </ListItem>
+
     <ListItem button>
       <ListItemIcon>
-                <AssignmentIcon />
+        <PersonIcon />
       </ListItemIcon>
-            <ListItemText primary="Liste 2" />
+      <ListItemText primary="Informations" />
     </ListItem>
+  </div>
+);
+
+
+export const thirdListItems = (
+  <div>
+    <NavLink to={'/app/settings/'}>
       <ListItem button>
         <ListItemIcon>
-                <AssignmentIcon />
+          <SettingsIcon />
         </ListItemIcon>
-            <ListItemText primary="Liste 3" />
+        <ListItemText primary="Paramètres" />
       </ListItem>
+    </NavLink>
   </div>
 );