Better POO for rendering

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

@@ -19,6 +19,7 @@ import {
 
 import renderUsefulLinks from './genericModuleFunctions/renderUsefulLinks';
 import renderFirstRow from './genericModuleFunctions/renderFirstRow';
+import renderTitle from './genericModuleFunctions/renderTitle';
 
 
 const styles = theme => ({
@@ -83,7 +84,18 @@ class GenericModule extends MyComponent {
     this.setState({ fullScreenDialogOpen: false });
   };
 
-
+  renderTitle = () => (
+    <div>
+      {renderTitle.bind(this)()}
+    </div>
+  )
+
+  renderCore = () => (
+    <div>
+      {this.props.renderCore(this.props.rawModelData, this.props.coreClasses)}
+      {renderUsefulLinks.bind(this)()}
+    </div>
+  )
   myRender() {
     const { classes } = this.props;
     return (
@@ -91,16 +103,12 @@ class GenericModule extends MyComponent {
         <this.props.editor
           open={this.state.fullScreenDialogOpen}
           handleCloseEditor={this.handleCloseFullScreenDialog}
-          modelData={this.props.modelData}
+          modelData={this.props.parseRawModelData(this.props.rawModelData)}
           userData={this.props.userDataEl}
         />
         <Paper className={classes.root} square={true}>
           {renderFirstRow.bind(this)()}
-
-          <div>
-            {this.props.children}
-          </div>
-          {renderUsefulLinks.bind(this)()}
+          {this.renderCore()}
         </Paper>
       </div>
     )
@@ -109,13 +117,17 @@ class GenericModule extends MyComponent {
 
 
 GenericModule.defaultProps = {
-  title: null,
+  buildTitle: () => null,
 };
 
 GenericModule.propTypes = {
   classes: PropTypes.object.isRequired,
   theme: PropTypes.object.isRequired,
-  rawModelData: PropTypes.object.isRequired
+  rawModelData: PropTypes.object.isRequired,
+  buildTitle: PropTypes.func.isRequired,
+  renderCore: PropTypes.func.isRequired,
+  parseRawModelData: PropTypes.func.isRequired,
+  coreClasses: PropTypes.object.isRequired,
 };
 
 

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

@@ -52,84 +52,94 @@ function convertDateStrToStr(date) {
   }
 }
 
+function renderCore(rawModelData, classes) {
+  const semestersDates = rawModelData;
+  let { autumn_begin, autumn_end, spring_begin, spring_end, comment } = semestersDates;
+
+  autumn_begin = convertDateStrToStr(autumn_begin);
+  autumn_end = convertDateStrToStr(autumn_end);
+  spring_begin = convertDateStrToStr(spring_begin);
+  spring_end = convertDateStrToStr(spring_end);
+
+  return (
+    <div>
+      <div className={classes.root}>
+        <Table >
+          <TableHead>
+            <TableRow key={0}>
+              <TableCell className={classes.tableCell} component="th" > Semestre </TableCell>
+              <TableCell className={classes.tableCell} component="th" > Date de début </TableCell>
+              <TableCell className={classes.tableCell} component="th" > Date de fin </TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+
+            <TableRow key={1}>
+              <TableCell className={classes.tableCell} component="td">
+                <div className={classes.content}>
+                  <LocalFloristIcon color='disabled' className={classes.icon} />
+                  <div>Printemps</div>
+                </div>
+              </TableCell>
+              <TableCell className={classes.tableCell} component="td" >{spring_begin}</TableCell>
+              <TableCell className={classes.tableCell} component="td" >{spring_end}</TableCell>
+            </TableRow>
+
+            <TableRow key={2}>
+              <TableCell className={classes.tableCell} component="td">
+                <div className={classes.content}>
+                  <CloudQueueIcon color='disabled' className={classes.icon} />
+                  <div>Automne</div>
+                </div>
+              </TableCell>
+              <TableCell className={classes.tableCell} component="td" >{autumn_begin}</TableCell>
+              <TableCell className={classes.tableCell} component="td" >{autumn_end}</TableCell>
+            </TableRow>
+
+          </TableBody>
+        </Table>
+      </div>
+      <Markdown source={comment} />
+    </div>
+  )
+}
+
+
+function parseRawModelData(rawModelData) {
+  // reverse serialization
+  const semestersDates = rawModelData;
+  const modelData = _.pick(semestersDates,
+    [
+      "autumn_begin",
+      "autumn_end",
+      "spring_begin",
+      "spring_end",
+      "useful_links",
+      "comment",
+      "university",
+      "obj_moderation_level",
+      "id"
+    ]);
+
+  return modelData;
+}
+
 
 class UniversitySemestersDates extends MyComponent {
   idToUse = "univId";
 
-  parse(rawModelData) {
-    // reverse serialization
-    const semestersDates = this.getFetchedData('universitiesSemestersDatesEl');
-    const modelData = _.pick(semestersDates,
-      [
-        "autumn_begin",
-        "autumn_end",
-        "spring_begin",
-        "spring_end",
-        "useful_links",
-        "comment",
-        "university",
-        "obj_moderation_level",
-        "id"
-      ]);
-
-    return modelData;
-  }
-
   myRender() {
-    const { classes } = this.props;
     const semestersDates = this.getFetchedData('universitiesSemestersDatesEl');
-    let { autumn_begin, autumn_end, spring_begin, spring_end, comment } = semestersDates;
-
-    autumn_begin = convertDateStrToStr(autumn_begin);
-    autumn_end = convertDateStrToStr(autumn_end);
-    spring_begin = convertDateStrToStr(spring_begin);
-    spring_end = convertDateStrToStr(spring_end);
-
+    const { classes } = this.props;
     return (
       <GenericModule
-        title={"Date des semestres"}
+        buildTitle={() => "Date des semestres"}
         rawModelData={semestersDates}
-        modelData={this.parse()}
+        parseRawModelData={parseRawModelData}
         editor={UniversitySemestersDatesEditor}
-      >
-        <div className={classes.root}>
-          <Table >
-            <TableHead>
-              <TableRow key={0}>
-                <TableCell className={classes.tableCell} component="th" > Semestre </TableCell>
-                <TableCell className={classes.tableCell} component="th" > Date de début </TableCell>
-                <TableCell className={classes.tableCell} component="th" > Date de fin </TableCell>
-              </TableRow>
-            </TableHead>
-            <TableBody>
-
-              <TableRow key={1}>
-                <TableCell className={classes.tableCell} component="td">
-                  <div className={classes.content}>
-                    <LocalFloristIcon color='disabled' className={classes.icon} />
-                    <div>Printemps</div>
-                  </div>
-                </TableCell>
-                <TableCell className={classes.tableCell} component="td" >{spring_begin}</TableCell>
-                <TableCell className={classes.tableCell} component="td" >{spring_end}</TableCell>
-              </TableRow>
-
-              <TableRow key={2}>
-                <TableCell className={classes.tableCell} component="td">
-                  <div className={classes.content}>
-                    <CloudQueueIcon color='disabled' className={classes.icon} />
-                    <div>Automne</div>
-                  </div>
-                </TableCell>
-                <TableCell className={classes.tableCell} component="td" >{autumn_begin}</TableCell>
-                <TableCell className={classes.tableCell} component="td" >{autumn_end}</TableCell>
-              </TableRow>
-
-            </TableBody>
-          </Table>
-        </div>
-        <Markdown source={comment} />
-      </GenericModule >
+        renderCore={renderCore}
+        coreClasses={classes}
+      />
     )
   }
 }

frontend/src/components/university/modules/genericModuleFunctions/renderTitle.js

@@ -5,9 +5,9 @@ import Typography from '@material-ui/core/Typography';
 
 export default function renderTitle() {
 
-  const { title, classes, rawModelData } = this.props;
+  const { classes, rawModelData } = this.props;
   const { importanceLevel } = rawModelData;
-
+  const title = this.props.buildTitle(rawModelData)
   if (title) {
     if (importanceLevel && importanceLevel != '-') {
       let c = classNames(classes.titleIcon);