All editors are back and started redisign of fields

frontend/.eslintrc.js

@@ -40,6 +40,6 @@ module.exports = {
     ],
     "react/no-unescaped-entities": "off", // that one doesn't improve code readability
     "react/prop-types": "error",
-    "react/no-deprecated": "warn"
+    "react/no-deprecated": "error"
   }
 };

frontend/src/components/university/editors/CountryDriEditor.js

@@ -5,19 +5,21 @@ import compose from "recompose/compose";
 import { connect } from "react-redux";
 
 import Editor from "../shared/Editor";
+import Form from "../shared/Form";
 import editorStyle from "../shared/editorStyle";
 
 import getMapStateToPropsForEditor from "../shared/editorFunctions/getMapStateToPropsForEditor";
 import getMapDispatchToPropsForEditor from "../shared/editorFunctions/getMapDispatchToPropsForEditor";
+import { withSnackbar } from "notistack";
 
 
 const styles = theme => ({
   ...editorStyle(theme)
 });
 
-class CountryDriEditor extends Editor {
 
-  renderEditor() {
+class CountryDriForm extends Form {
+  render() {
     return (
       <div>
         {this.renderTitleField()}
@@ -30,12 +32,24 @@ class CountryDriEditor extends Editor {
   }
 }
 
+
+class CountryDriEditor extends Editor {
+  renderForm() {
+    return <CountryDriForm
+      modelData={this.props.modelData}
+      outsideData={this.props.outsideData}
+      ref={this.formRef}
+    />;
+  }
+}
+
 CountryDriEditor.propTypes = {
   modelData: PropTypes.object.isRequired,
 };
 
 
 export default compose(
+  withSnackbar,
   withStyles(styles, { withTheme: true }),
   connect(
     getMapStateToPropsForEditor("countryDri"),

frontend/src/components/university/editors/CountryScholarshipsEditor.js → frontend/src/components/university/editors/CountryScholarshipEditor.js

+import React from "react";
 import PropTypes from "prop-types";
 import withStyles from "@material-ui/core/styles/withStyles";
 import compose from "recompose/compose";
 import { connect } from "react-redux";
 
-import ScholarshipsEditor from "../shared/ScholarshipsEditor";
+import Editor from "../shared/Editor";
+import ScholarshipForm from "../shared/ScholarshipForm";
 import editorStyle from "../shared/editorStyle";
 
 
 import getMapStateToPropsForEditor from "../shared/editorFunctions/getMapStateToPropsForEditor";
 import getMapDispatchToPropsForEditor from "../shared/editorFunctions/getMapDispatchToPropsForEditor";
+import { withSnackbar } from "notistack";
 
 
 const styles = theme => ({
   ...editorStyle(theme)
 });
 
-class CountryScholarshipsEditor extends ScholarshipsEditor {
+
+class CountryScholarshipForm extends ScholarshipForm {
   renderLinkedField() {
     return this.renderCountriesField();
   }
 }
 
-CountryScholarshipsEditor.propTypes = {
+class CountryScholarshipEditor extends Editor {
+  renderForm() {
+    return (
+      <CountryScholarshipForm
+        modelData={this.props.modelData}
+        outsideData={this.props.outsideData}
+        ref={this.formRef}
+      />
+    );
+  }
+}
+
+
+
+CountryScholarshipEditor.propTypes = {
   modelData: PropTypes.object.isRequired,
+  outsideData: PropTypes.object.isRequired,
 };
 
 export default compose(
+  withSnackbar,
   withStyles(styles, { withTheme: true }),
   connect(
     getMapStateToPropsForEditor("countryScholarships"),
     getMapDispatchToPropsForEditor("countryScholarships")
   )
-)(CountryScholarshipsEditor);
+)(CountryScholarshipEditor);

frontend/src/components/university/editors/UniversityDriEditor.js

@@ -43,6 +43,7 @@ class UniversityDriEditor extends Editor {
 
 UniversityDriEditor.propTypes = {
   modelData: PropTypes.object.isRequired,
+  outsideData: PropTypes.object.isRequired,
 };
 
 

frontend/src/components/university/editors/UniversityScholarshipsEditor.js → frontend/src/components/university/editors/UniversityScholarshipEditor.js

+import React from "react";
 import PropTypes from "prop-types";
 import withStyles from "@material-ui/core/styles/withStyles";
 import compose from "recompose/compose";
 import { connect } from "react-redux";
 
-import ScholarshipsEditor from "../shared/ScholarshipsEditor";
+import Editor from "../shared/Editor";
+import ScholarshipForm from "../shared/ScholarshipForm";
 import editorStyle from "../shared/editorStyle";
 
 
 import getMapStateToPropsForEditor from "../shared/editorFunctions/getMapStateToPropsForEditor";
 import getMapDispatchToPropsForEditor from "../shared/editorFunctions/getMapDispatchToPropsForEditor";
+import { withSnackbar } from "notistack";
 
 const styles = theme => ({
   ...editorStyle(theme)
 });
 
-class UniversityScholarshipsEditor extends ScholarshipsEditor {
+
+class UniversityScholarshipForm extends ScholarshipForm {
   renderLinkedField() {
     return this.renderUniversitiesField();
   }
 }
 
-UniversityScholarshipsEditor.propTypes = {
+class UniversityScholarshipEditor extends Editor {
+  renderForm() {
+    return (
+      <UniversityScholarshipForm
+        modelData={this.props.modelData}
+        outsideData={this.props.outsideData}
+        ref={this.formRef}
+      />
+    );
+  }
+}
+
+UniversityScholarshipEditor.propTypes = {
   modelData: PropTypes.object.isRequired,
+  outsideData: PropTypes.object.isRequired,
 };
 
 export default compose(
+  withSnackbar,
   withStyles(styles, { withTheme: true }),
   connect(
     getMapStateToPropsForEditor("universityScholarships"),
     getMapDispatchToPropsForEditor("universityScholarships")
   )
-)(UniversityScholarshipsEditor);
+)(UniversityScholarshipEditor);

frontend/src/components/university/editors/UniversitySemestersDatesEditor.js

@@ -23,7 +23,7 @@ const styles = theme => ({
 
 
 class UniversitySemestersDatesForm extends Form {
-  hasError() {
+  hasFormLevelErrors() {
     let messages = Array();
     const formData = this.getDataFromFields();
     const { autumn_begin, autumn_end, spring_begin, spring_end } = formData;
@@ -44,10 +44,7 @@ class UniversitySemestersDatesForm extends Form {
       messages.push("Le début du semestre de printemps doit être antérieur à sa fin...");
     }
 
-    const formLevelErrors = this.buildError(messages),
-      fieldLevelErrors = super.hasError();
-
-    return this.combineErrors([fieldLevelErrors, formLevelErrors]);
+    return this.buildError(messages);
   }
 
   render() {

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

@@ -11,7 +11,7 @@ import ModuleWrapper from "../shared/ModuleWrapper";
 import ModuleGroupWrapper from "../shared/ModuleGroupWrapper";
 import Scholarship from "../shared/Scholarship";
 
-import CountryScholarshipsEditor from "../editors/CountryScholarshipsEditor";
+import CountryScholarshipEditor from "../editors/CountryScholarshipEditor";
 
 import getActions from "../../../api/getActions";
 
@@ -78,7 +78,7 @@ class CountryScholarships extends Module {
       <ModuleGroupWrapper
         groupTitle={`Bourses liées au pays (${this.props.country.name})`}
         endPoint={"countryScholarship"}
-        editor={CountryScholarshipsEditor}
+        editor={CountryScholarshipEditor}
         invalidateGroup={this.props.invalidateData}
         propsForEditor={{
           modelData: { countries: [this.props.countryId], importance_level: "-", currency: "EUR", obj_moderation_level: 0 },
@@ -94,7 +94,7 @@ class CountryScholarships extends Module {
               buildTitle={(modelData) => modelData.title}
               rawModelData={rawModelData}
               parseRawModelData={parseRawModelData}
-              editor={CountryScholarshipsEditor}
+              editor={CountryScholarshipEditor}
               renderCore={renderCore}
               coreClasses={classes}
               outsideData={outsideData}

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

@@ -11,7 +11,7 @@ import ModuleWrapper from "../shared/ModuleWrapper";
 import ModuleGroupWrapper from "../shared/ModuleGroupWrapper";
 import Scholarship from "../shared/Scholarship";
 
-import UniversityScholarshipsEditor from "../editors/UniversityScholarshipsEditor";
+import UniversityScholarshipEditor from "../editors/UniversityScholarshipEditor";
 import getActions from "../../../api/getActions";
 
 // eslint-disable-next-line no-unused-vars
@@ -76,7 +76,7 @@ class UniversityScholarships extends Module {
       <ModuleGroupWrapper
         groupTitle={"Bourses liées à l'université"}
         endPoint={"universityScholarship"}
-        editor={UniversityScholarshipsEditor}
+        editor={UniversityScholarshipEditor}
         invalidateGroup={this.props.invalidateData}
         propsForEditor={{
           modelData: { universities: [this.props.univId], importance_level: "-", currency: "EUR", obj_moderation_level: 0 },
@@ -92,7 +92,7 @@ class UniversityScholarships extends Module {
               buildTitle={(modelData) => modelData.title}
               rawModelData={rawModelData}
               parseRawModelData={parseRawModelData}
-              editor={UniversityScholarshipsEditor}
+              editor={UniversityScholarshipEditor}
               renderCore={renderCore}
               coreClasses={classes}
               outsideData={outsideData}

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

-import React, { Component } from "react";
+import { Component } from "react";
 import PropTypes from "prop-types";
 
 import areSameObjects from "../../../utils/areSameObjects";
@@ -108,21 +108,36 @@ class Form extends Component {
    */
   fieldsHaveError() {
     const messages = this.getFields()
-      .map(({ field }) => field.getError().messages)
+      .map(({ field }) => field.hasError().messages)
       .filter(messages => messages.length > 0);
     return this.buildError(messages);
   }
 
   /**
-   * Function to know if the form has errors.
+   * Function to know if the form has errors either at the field level
+   * Or when running checks that combine fields
    *
-   * It can be override in subclasses to handle errors at the form level
-   * (multiple fields checks)
+   * YOU SHOULDN'T OVERRIDE THIS
    *
    * @returns
    * @memberof Form
    */
   hasError() {
+    return this.combineErrors([
+      this.fieldsHaveError(),
+      this.hasFormLevelErrors()
+    ]);
+  }
+
+  /**
+   * Function to check for errors in the form
+   *
+   * Can be override in sub classes
+   *
+   * @returns object built with this.buildError
+   * @memberof Form
+   */
+  hasFormLevelErrors() {
     return this.fieldsHaveError();
   }
 

frontend/src/components/university/shared/ScholarshipsEditor.js → frontend/src/components/university/shared/ScholarshipForm.js

 import React from "react";
 import PropTypes from "prop-types";
 
-import Editor from "./Editor";
+import Form from "./Form";
 
 const frequencyOptions = [
   { value: "w", label: "Il s'agit du montant hebdomadaire" },
@@ -11,18 +11,20 @@ const frequencyOptions = [
   { value: "o", label: "Il s'agit d'un montant donné une seule fois" }
 ];
 
-class ScholarshipEditor extends Editor {
-  formHasError() {
+class ScholarshipForm extends Form {
+
+  hasFormLevelErrors() {
     let messages = Array();
     const formData = this.getDataFromFields();
     const { amount_min, amount_max } = formData;
     if (amount_min !== null && amount_max !== null && amount_max < amount_min) {
       messages.push("La logique voudrait que la borne supérieure de la bourse soit... supérieure à la borne inférieure.");
     }
+
     return this.buildError(messages);
   }
 
-  renderEditor() {
+  render() {
     return (
       <div>
         {this.renderObjModerationLevelField()}
@@ -49,6 +51,7 @@ class ScholarshipEditor extends Editor {
           label: "Fréquence de la bourse",
           options: frequencyOptions,
           fieldMapping: "frequency",
+          required: true, //TODO remove
         })}
         {this.renderMarkdownField({
           label: "Autres avantages",
@@ -63,8 +66,8 @@ class ScholarshipEditor extends Editor {
   }
 }
 
-ScholarshipEditor.propTypes = {
+ScholarshipForm.propTypes = {
   modelData: PropTypes.object.isRequired,
 };
 
-export default ScholarshipEditor;
+export default ScholarshipForm;

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

@@ -9,7 +9,6 @@ import format from "date-fns/format";
 
 import KeyboardArrowLeftIcon from "@material-ui/icons/KeyboardArrowLeft";
 import KeyboardArrowRightIcon from "@material-ui/icons/KeyboardArrowRight";
-import FieldWrapper from "./FieldWrapper";
 import dateToDateStr from "../../../../utils/dateToDateStr";
 
 import Field from "./Field";
@@ -33,7 +32,8 @@ class DateField extends Field {
     return dateToDateStr(this.state.value);
   }
 
-  hasError(date) {
+  hasError() {
+    const date = this.state.value;
     let messages = Array();
     if (this.props.required && !date) {
       messages.push("Date requise !");
@@ -47,27 +47,20 @@ class DateField extends Field {
     });
   }
 
-  render() {
+  renderField() {
     return (
-      <FieldWrapper
-        required={this.props.required}
-        hasError={this.state.error.status}
-        errors={this.state.error.messages}
-        label={this.props.label}
-      >
-        <MuiPickersUtilsProvider utils={LocalizedUtils} locale={frLocale}>
-          <DatePicker
-            clearable
-            format="d MMM yyyy"
-            value={this.state.value}
-            onChange={this.handleDateChange}
-            clearLabel="vider"
-            cancelLabel="annuler"
-            leftArrowIcon={<KeyboardArrowLeftIcon />}
-            rightArrowIcon={<KeyboardArrowRightIcon />}
-          />
-        </MuiPickersUtilsProvider>
-      </FieldWrapper >
+      <MuiPickersUtilsProvider utils={LocalizedUtils} locale={frLocale}>
+        <DatePicker
+          clearable
+          format="d MMM yyyy"
+          value={this.state.value}
+          onChange={this.handleDateChange}
+          clearLabel="vider"
+          cancelLabel="annuler"
+          leftArrowIcon={<KeyboardArrowLeftIcon />}
+          rightArrowIcon={<KeyboardArrowRightIcon />}
+        />
+      </MuiPickersUtilsProvider>
     );