Udated critical node packages

Created #49

frontend/package.json

@@ -20,24 +20,26 @@
   "license": "ISC",
   "dependencies": {
     "@babel/core": "^7.0.0",
-    "@material-ui/core": "^3.1.0",
-    "@material-ui/icons": "^2.0.3",
-    "@material-ui/lab": "^3.0.0-alpha.16",
-    "date-fns": "^2.0.0-alpha.16",
-    "downshift": "^2.2.0",
+    "@date-io/date-fns": "^1.1.0",
+    "@date-io/luxon": "^1.1.0",
+    "@material-ui/core": "^3.9.2",
+    "@material-ui/icons": "^3.0.2",
+    "@material-ui/lab": "^3.0.0-alpha.30",
+    "date-fns": "^2.0.0-alpha.25",
+    "downshift": "^3.2.3",
     "fuzzysort": "^1.1.4",
     "js-cookie": "^2.2.0",
     "leaflet": "^1.4.0",
     "lodash": "^4.17.11",
-    "material-ui-pickers": "^1.0.0-rc.14",
-    "react": "^16.5.1",
+    "material-ui-pickers": "^2.2.1",
+    "react": "^16.8.2",
     "react-awesome-slider": "^0.5.2",
-    "react-dom": "^16.5.1",
-    "react-leaflet": "^2.0.1",
+    "react-dom": "^16.8.2",
+    "react-leaflet": "^2.2.1",
     "react-markdown": "^4.0.6",
     "react-redux": "^6.0.1",
     "react-router-dom": "^4.3.1",
-    "react-swipeable-views": "^0.12.17",
+    "react-swipeable-views": "^0.13.1",
     "redux": "^4.0.1",
     "redux-logger": "^3.0.6",
     "redux-thunk": "^2.3.0",
@@ -61,7 +63,7 @@
     "node-sass": "^4.11.0",
     "postcss-loader": "^3.0.0",
     "prop-types": "^15.7.2",
-    "react-hot-loader": "^4.6.5",
+    "react-hot-loader": "^4.7.1",
     "react-lorem-component": "^0.13.0",
     "react-script": "^2.0.5",
     "sass-loader": "^7.1.0",

frontend/src/components/ThemeProvider.js

@@ -49,13 +49,15 @@ class ThemeProvider extends CustomComponentForAPI {
 
 
   customRender() {
-    const font = {
+    const siteSettings = {
       typography: {
         fontSize: 14,
         htmlFontSize: 14
-      }
+      },
+      useNextVariants: true
     };
-    const theme = Object.assign({}, this.state.theme, font);
+
+    const theme = Object.assign({}, this.state.theme, siteSettings);
     return (
       <div>
         <MuiThemeProvider theme={createMuiTheme(theme)}>

frontend/src/components/map/UnivPopupContent.js

@@ -46,11 +46,11 @@ class UnivPopupContent extends Component {
           />
           <Divider />
           <CardContent>
-            <Typography variant="subheading">
+            <Typography variant="subtitle1">
               {city}, {country}
             </Typography>
             <Divider />
-            <Typography gutterBottom variant="headline">
+            <Typography gutterBottom variant="h5">
               {name}
             </Typography>
           </CardContent>

frontend/src/components/pages/PageHome.js

@@ -63,7 +63,7 @@ class PageHome extends React.Component {
     return (
       <Paper className={classes.myPaper}>
 
-        <Typography variant="display2">
+        <Typography variant="h3">
                     Bienvenue sur <em>Outgoing REX</em>
         </Typography>
         <Markdown source={source} />

frontend/src/components/pages/PageMap.js

@@ -20,7 +20,7 @@ class PageMap extends React.Component {
       <Paper className={classes.myPaper}>
         <Grid container spacing={24}>
           <Grid item xs={11}>
-            <Typography variant="display1" gutterBottom>
+            <Typography variant="h4" gutterBottom>
               Exploration Cartographique
             </Typography>
           </Grid>

frontend/src/components/pages/PageSearch.js

@@ -20,7 +20,7 @@ class PageSearch extends React.Component {
       <Paper className={classes.myPaper}>
         <Grid container spacing={24}>
           <Grid item xs={11}>
-            <Typography variant="display1" gutterBottom>
+            <Typography variant="h4" gutterBottom>
               Recherche d'une université
             </Typography>
           </Grid>

frontend/src/components/pages/PageSettings.js

@@ -20,7 +20,7 @@ class PageSettings extends React.Component {
       <Paper className={classes.myPaper}>
         <Grid container spacing={24}>
           <Grid item xs={11}>
-            <Typography variant="display1" gutterBottom>
+            <Typography variant="h4" gutterBottom>
               Paramètres
             </Typography>
           </Grid>

frontend/src/components/settings/ColorDemo.js

@@ -52,7 +52,7 @@ function ColorDemo(props) {
             <IconButton className={classes.menuButton} color="inherit" aria-label="Menu">
               <MenuIcon />
             </IconButton>
-            <Typography variant="title" color="inherit">
+            <Typography variant="h6" color="inherit">
               Color sample
             </Typography>
           </Toolbar>
@@ -70,4 +70,4 @@ ColorDemo.propTypes = {
   theme: PropTypes.object.isRequired,
 };
 
-export default withStyles(styles, { withTheme: true })(ColorDemo);
+export default withStyles(styles, { withTheme: true })(ColorDemo);
\ No newline at end of file

frontend/src/components/settings/ColorTools.js

@@ -234,7 +234,7 @@ class ColorTool extends CustomComponentForAPI {
       const caption = intent == "primary" ? "Couleur primaire" : "Couleur secondaire";
       return (
         <Grid item xs={12} sm={6} md={4}>
-          <Typography gutterBottom variant="title">
+          <Typography gutterBottom variant="h6">
             {caption}
           </Typography>
           <div className={classes.sliderContainer}>

frontend/src/components/shared/Markdown.js

@@ -72,20 +72,20 @@ const renderers = {
 
     switch (level) {
     case 1:
-      variant = "headline";
+      variant = "h5";
       break;
     case 2:
-      variant = "title";
+      variant = "h6";
       break;
     case 3:
-      variant = "subheading";
+      variant = "subtitle1";
       break;
     case 4:
       variant = "caption";
       paragraph = true;
       break;
     default:
-      variant = "body";
+      variant = "body2";
       break;
     }
 

frontend/src/components/university/UniversityTemplate.js

@@ -82,7 +82,7 @@ class UniversityTemplate extends React.Component {
             <Tabs
               value={value}
               onChange={this.handleChange}
-              scrollable={scroll}
+              variant={scroll ? "scrollable" : "standard"}
               centered={!scroll}
               scrollButtons="on"
               indicatorColor="primary"

frontend/src/components/university/modules/UniversityGeneral.js

@@ -42,11 +42,11 @@ function renderCore(rawModelData, classes, outsideData) {
 
         </Grid>
         <Grid item xs>
-          <Typography variant='headline'>{name}</Typography>
-          <Typography variant='title'>{acronym}</Typography>
+          <Typography variant='h5'>{name}</Typography>
+          <Typography variant='h6'>{acronym}</Typography>
           <Divider />
-          <Typography variant='subheading'>{city}, {country}</Typography>
-          <Typography variant='body1'> Site internet&nbsp;:{" "}
+          <Typography variant='subtitle1'>{city}, {country}</Typography>
+          <Typography variant='body2'> Site internet&nbsp;:{" "}
             {
               website != "" ?
                 <TextLink href={website}>{website}</TextLink>

frontend/src/components/university/shared/Editor.js

@@ -255,7 +255,7 @@ class Editor extends CustomComponentForAPI {
               <IconButton color="inherit" onClick={() => this.handleCloseEditorRequest()} aria-label="Close">
                 <CloseIcon />
               </IconButton>
-              <Typography variant="title" color="inherit" className={classes.flex}>
+              <Typography variant="h6" color="inherit" className={classes.flex}>
                 Mode édition
               </Typography>
               <Button color="inherit" onClick={() => this.handleSaveEditor()}>

frontend/src/components/university/shared/GenericGroupModule.js

@@ -7,7 +7,7 @@ import { connect } from "react-redux";
 import Typography from "@material-ui/core/Typography";
 import Paper from "@material-ui/core/Paper";
 import Tooltip from "@material-ui/core/Tooltip";
-import Button from "@material-ui/core/Button";
+import Fab from "@material-ui/core/Fab";
 
 import Grid from "@material-ui/core/Grid";
 import Divider from "@material-ui/core/Divider";
@@ -74,15 +74,14 @@ class GenericGroupModule extends CustomComponentForAPI {
         <Grid container spacing={8} alignItems='center'>
 
           <Grid item xs>
-            <Typography variant='title' align='center' color="textSecondary"><em>{groupTitle}</em></Typography>
+            <Typography variant='h6' align='center' color="textSecondary"><em>{groupTitle}</em></Typography>
           </Grid>
 
           <Grid item xs={2} style={{ textAlign: "right" }}>
             <Tooltip title={disabled ? "Vous ne pouvez pas ajouter d'élément" : "Ajouter un élément"} placement="top">
               <div style={{ display: "inline-block" }}> {/* Needed to fire events for the tooltip when below is disabled! */}
-                <Button
-                  variant='fab'
-                  mini
+                <Fab
+                  size='small'
                   aria-label="Ajouter un élément"
                   disabled={disabled}
                   style={disabled ? {} : { backgroundColor: green.A700 }}
@@ -90,7 +89,7 @@ class GenericGroupModule extends CustomComponentForAPI {
                   onClick={this.handleOpenEditor}
                 >
                   <AddIcon />
-                </Button>
+                </Fab>
               </div>
             </Tooltip>
           </Grid>

frontend/src/components/university/shared/GenericModule.js

@@ -66,7 +66,7 @@ const styles = theme => ({
   },
   titleIcon: {
     paddingRight: theme.spacing.unit,
-    fontSize: theme.typography.display1.fontSize
+    fontSize: theme.typography.h4.fontSize
   }
 });
 

frontend/src/components/university/shared/History.js

@@ -110,7 +110,7 @@ class History extends React.Component {
     return (
       <div>
         <Typography variant='caption' align='center'>Les versions successives d'un même utilisateur ne sont pas enregistrés (dans de tels cas, seul la dernière est conservée).</Typography>
-        <Typography variant='title' align='center'>Version n°{this.state.versionInView + 1} du {dateInfo}</Typography>
+        <Typography variant='h6' align='center'>Version n°{this.state.versionInView + 1} du {dateInfo}</Typography>
         <Button
           variant='outlined'
           color="primary"
@@ -182,7 +182,7 @@ class History extends React.Component {
               <IconButton color="inherit" onClick={() => { this.props.handleCloseHistory(); this.props.resetVersions(); }} aria-label="Close">
                 <CloseIcon />
               </IconButton>
-              <Typography variant="title" color="inherit" className={classes.flex}>
+              <Typography variant="h6" color="inherit" className={classes.flex}>
                 Parcours de l'historique
               </Typography>
             </Toolbar>

frontend/src/components/university/shared/PendingModeration.js

@@ -101,7 +101,7 @@ class PendingModeration extends React.Component {
               <IconButton color="inherit" onClick={() => { this.props.handleClosePendingModeration(); }} aria-label="Close">
                 <CloseIcon />
               </IconButton>
-              <Typography variant="title" color="inherit" className={classes.flex}>
+              <Typography variant="h6" color="inherit" className={classes.flex}>
                 Version en attente de modération
               </Typography>
             </Toolbar>

frontend/src/components/university/shared/Scholarship.js

@@ -91,7 +91,7 @@ class Scholarship extends React.Component {
 
     return (
       <div>
-        <Typography className={classes.item} variant='headline'> Avantage financier : </Typography>
+        <Typography className={classes.item} variant='h5'> Avantage financier : </Typography>
         {
           amountMin !== null ? (
             <div>
@@ -116,7 +116,7 @@ class Scholarship extends React.Component {
 
     return (
       <div>
-        <Typography className={classes.item} variant='headline' > Autre(s) avantage(s) : </Typography>
+        <Typography className={classes.item} variant='h5' > Autre(s) avantage(s) : </Typography>
         {
           otherAdvantages != "" && otherAdvantages !== null ?
             <Markdown source={otherAdvantages} />
@@ -132,11 +132,11 @@ class Scholarship extends React.Component {
 
     return (
       <div>
-        <Typography className={classes.item} variant='headline'>{type}</Typography>
+        <Typography className={classes.item} variant='h5'>{type}</Typography>
         {this.renderFinancialAdvantage()}
         <div style={{ height: 2 * theme.spacing.unit }} />
         {this.renderOtherAdvantages()}
-        <Typography className={classes.item} variant='headline'> Informations complémentaires : </Typography>
+        <Typography className={classes.item} variant='h5'> Informations complémentaires : </Typography>
         <Markdown source={comment} />
       </div>
     );

frontend/src/components/university/shared/fields/DateField.js

 import React from "react";
-import DatePicker from "material-ui-pickers/DatePicker";
-import DateFnsUtils from "material-ui-pickers/utils/date-fns-utils";
-import MuiPickersUtilsProvider from "material-ui-pickers/utils/MuiPickersUtilsProvider";
 import PropTypes from "prop-types";
 import compose from "recompose/compose";
 import withStyles from "@material-ui/core/styles/withStyles";
 
+import { DatePicker, MuiPickersUtilsProvider } from "material-ui-pickers";
+import DateFnsUtils from "@date-io/date-fns";
+
 import frLocale from "date-fns/locale/fr";
 import format from "date-fns/format";
 
@@ -21,9 +21,15 @@ const styles = theme => ({
 });
 
 
+/**
+ * Class to customize the header of the date selection box
+ *
+ * @class LocalizedUtils
+ * @extends {DateFnsUtils}
+ */
 class LocalizedUtils extends DateFnsUtils {
   getDatePickerHeaderText(date) {
-    return format(date, "d MMM YYYY", { locale: this.locale });
+    return format(date, "d MMM yyyy", { locale: this.locale });
   }
 }
 
@@ -58,7 +64,7 @@ class DateField extends Field {
         <MuiPickersUtilsProvider utils={LocalizedUtils} locale={frLocale}>
           <DatePicker
             clearable
-            format="d MMM YYYY"
+            format="d MMM yyyy"
             value={this.state.value}
             onChange={this.handleDateChange}
             clearLabel="vider"