Moved useless divs to react fragments <></>

frontend/src/components/ThemeProvider.js

@@ -74,13 +74,11 @@ class ThemeProvider extends CustomComponentForAPI {
 
     const theme = Object.assign({}, this.state.theme, siteSettings);
     return (
-      <div>
-        <MuiThemeProvider theme={createMuiTheme(theme)}>
-          <Router>
-            {this.props.children}
-          </Router>
-        </MuiThemeProvider>
-      </div>
+      <MuiThemeProvider theme={createMuiTheme(theme)}>
+        <Router>
+          {this.props.children}
+        </Router>
+      </MuiThemeProvider>
     );
   }
 }

frontend/src/components/appRelated/listItems.js

@@ -16,7 +16,7 @@ import AssignmentIcon from "@material-ui/icons/Assignment";
 import { NavLink } from "react-router-dom";
 
 export const mainListItems = (
-  <div>
+  <>
     <NavLink to={"/app/"} style={{ textDecoration: "none" }}>
       {/* TODO add styling */}
       <ListItem button>
@@ -54,11 +54,11 @@ export const mainListItems = (
       </ListItem>
     </NavLink>
 
-  </div>
+  </>
 );
 
 export const secondaryListItems = (
-  <div>
+  <>
     <ListItem button>
       <ListItemIcon>
         <AssignmentIcon />
@@ -72,12 +72,12 @@ export const secondaryListItems = (
       </ListItemIcon>
       <ListItemText primary="Informations" />
     </ListItem>
-  </div>
+  </>
 );
 
 
 export const thirdListItems = (
-  <div>
+  <>
     <NavLink to={"/app/settings/"} style={{ textDecoration: "none" }}>
       <ListItem button>
         <ListItemIcon>
@@ -86,5 +86,5 @@ export const thirdListItems = (
         <ListItemText primary="Paramètres" />
       </ListItem>
     </NavLink>
-  </div>
+  </>
 );

frontend/src/components/other/Loading.js

@@ -44,14 +44,12 @@ class Loading extends React.Component {
       { completionPercentage } = this.state;
 
     return (
-      <div>
-        <CircularProgress
-          className={classes.progress}
-          variant="determinate"
-          size={size}
-          value={completionPercentage}
-        />
-      </div>
+      <CircularProgress
+        className={classes.progress}
+        variant="determinate"
+        size={size}
+        value={completionPercentage}
+      />
     );
   }
 }

frontend/src/components/search/Search.js

@@ -41,7 +41,7 @@ class Search extends CustomComponentForAPI {
     const { classes } = this.props;
 
     return (
-      <div>
+      <>
         <TextField
           id="full-width"
           label=""
@@ -55,7 +55,7 @@ class Search extends CustomComponentForAPI {
           onChange={(e) => this.getSuggestions(e.target.value)}
         />
         <UnivList universitiesToList={this.state.suggestions} />
-      </div>
+      </>
     );
   }
 }

frontend/src/components/university/UniversityTemplate.js

@@ -77,7 +77,7 @@ class UniversityTemplate extends Component {
     }
 
     return (
-      <div>
+      <>
 
         <div>
           <CoverGallery></CoverGallery>
@@ -109,8 +109,8 @@ class UniversityTemplate extends Component {
           {/* {value === 4 && <TabContainer> <CampusesCitiesTab /> </TabContainer>} */}
           {/* {value === 5 && <TabContainer> <MoreTab /> </TabContainer>} */}
         </div>
-      </div>
 
+      </>
     );
   }
 }

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

@@ -21,13 +21,13 @@ const styles = theme => ({
 class CountryDriForm extends Form {
   render() {
     return (
-      <div>
+      <>
         {this.renderTitleField()}
         {this.renderImportanceLevelField()}
         {this.renderCountriesField()}
         {this.renderCommentField()}
         {this.renderUsefulLinksField()}
-      </div>
+      </>
     );
   }
 }

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

@@ -19,13 +19,13 @@ const styles = theme => ({
 class UniversityDriForm extends Form {
   render() {
     return (
-      <div>
+      <>
         {this.renderTitleField()}
         {this.renderImportanceLevelField()}
         {this.renderUniversitiesField()}
         {this.renderCommentField()}
         {this.renderUsefulLinksField()}
-      </div>
+      </>
     );
   }
 }

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

@@ -21,7 +21,7 @@ const styles = theme => ({
 class UniversityGeneralForm extends Form {
   render() {
     return (
-      <div>
+      <>
         <TextField label={"Nom de l'université"}
           {...this.getReferenceAndValue("name")}
           required={true}
@@ -42,7 +42,7 @@ class UniversityGeneralForm extends Form {
           isUrl={true}
           urlExtensions={["jpg", "png", "svg"]}
         />
-      </div>
+      </>
     );
   }
 }

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

@@ -50,7 +50,7 @@ class UniversitySemestersDatesForm extends Form {
 
   render() {
     return (
-      <div>
+      <>
         {this.renderObjModerationLevelField()}
         <DateField label={"Date de début du semestre de printemps"}
           {...this.getReferenceAndValue("spring_begin", dateStrToDate)}
@@ -66,7 +66,7 @@ class UniversitySemestersDatesForm extends Form {
         />
         {this.renderCommentField()}
         {this.renderUsefulLinksField()}
-      </div>
+      </>
     );
   }
 }

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

@@ -60,7 +60,7 @@ function renderCore(rawModelData, classes) {
   spring_end = convertDateStrToStr(spring_end);
 
   return (
-    <div>
+    <>
       <div className={classes.root}>
         <Table >
           <TableHead>
@@ -98,7 +98,7 @@ function renderCore(rawModelData, classes) {
         </Table>
       </div>
       <Markdown source={comment} />
-    </div>
+    </>
   );
 }
 

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

@@ -21,7 +21,7 @@ class Alert extends React.Component {
       >
         {
           this.props.open ?
-            <div>
+            <>
               <DialogTitle>{this.props.title}</DialogTitle>
               <DialogContent>
                 <DialogContentText style={{ whiteSpace: "pre-wrap" }}>
@@ -35,7 +35,7 @@ class Alert extends React.Component {
                       {this.props.infoText}
                     </Button>
                     :
-                    <div>
+                    <>
                       <Button
                         onClick={() => { this.props.handleClose(); this.props.handleResponse(false); }}
                         color='secondary'
@@ -52,12 +52,12 @@ class Alert extends React.Component {
                       >
                         {this.props.agreeText}
                       </Button>
-                    </div>
+                    </>
                 }
               </DialogActions>
-            </div>
+            </>
             :
-            <div></div>
+            <></>
         }
       </Dialog >
     );

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

@@ -222,7 +222,7 @@ class Editor extends Component {
   renderEditor() {
     const { classes } = this.props;
     return (
-      <div>
+      <>
         <Alert
           {...this.state.alert}
           handleClose={() => this.handleCloseAlertRequest()}
@@ -243,12 +243,12 @@ class Editor extends Component {
         <Paper className={classes.paper}>
           {this.renderForm()}
         </Paper>
-      </div>
+      </>
     );
   }
 
   render() {
-    return <div></div>;
+    return <></>;
   }
 
 

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

@@ -137,7 +137,7 @@ class History extends Component {
   renderPanel() {
     const { classes } = this.props;
     return (
-      <div>
+      <>
         <AppBar className={classes.appBar} >
           <Toolbar>
             <IconButton color="inherit" onClick={() => this.closeHistory()} aria-label="Close">
@@ -151,7 +151,7 @@ class History extends Component {
         <Paper className={classes.paper}>
           {this.renderHistory()}
         </Paper>
-      </div>
+      </>
     );
   }
 
@@ -178,7 +178,7 @@ class History extends Component {
     let { rawModelData } = this.props.renderer.props;
     const newRawModelData = Object.assign({}, rawModelData, versions[activeStep]);
     return (
-      <div>
+      <>
         <MobileStepper
           steps={versions.length}
           position="static"
@@ -202,7 +202,7 @@ class History extends Component {
         <br></br>
         {this.props.renderer.renderTitle(newRawModelData)}
         {this.props.renderer.renderCore(newRawModelData)}
-      </div>
+      </>
     );
   }
 
@@ -223,7 +223,7 @@ class History extends Component {
       dateInfo = `${data.date} à ${data.time}`;
     }
     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='h6' align='center'>Version n°{versions.length - this.state.versionInView} du {dateInfo}</Typography>
         <Button
@@ -235,13 +235,13 @@ class History extends Component {
           Éditer à partir de cette version
         </Button>
         <Divider />
-      </div>
+      </>
     );
   }
 
-  // Dumb render function for the component
+  // Dumb render function for the component TODO remove ?
   render() {
-    return <div></div>;
+    return <></>;
   }
 }
 

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

@@ -128,16 +128,14 @@ class ModuleWrapper extends CustomComponentForAPI {
   }
 
   renderTitle = (rawModelData) => (
-    <div>
-      {renderTitle(rawModelData, this.props.classes, this.props.buildTitle)}
-    </div>
+    renderTitle(rawModelData, this.props.classes, this.props.buildTitle)
   )
 
   renderCore = (rawModelData) => (
-    <div>
+    <>
       {this.props.renderCore(rawModelData, this.props.coreClasses, this.props.outsideData)}
       {renderUsefulLinks(rawModelData, this.props.classes, this.props.theme)}
-    </div>
+    </>
   )
 
   userCanModerate() {
@@ -159,7 +157,7 @@ class ModuleWrapper extends CustomComponentForAPI {
 
 
     return (
-      <div>
+      <>
         <Alert
           {...this.state.alert}
           handleClose={this.handleCloseAlert}
@@ -193,7 +191,7 @@ class ModuleWrapper extends CustomComponentForAPI {
           {renderFirstRow.bind(this)(userCanModerate)}
           {this.renderCore(this.props.rawModelData)}
         </Paper>
-      </div>
+      </>
     );
   }
 }

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

@@ -70,7 +70,7 @@ class PendingModeration extends Component {
    */
   renderPendingModerationInfo(rawModelData) {
     return (
-      <div>
+      <>
         <Button
           variant='outlined'
           color="primary"
@@ -80,7 +80,7 @@ class PendingModeration extends Component {
           Éditer à partir de cette version
         </Button>
         {
-          this.props.userCanModerate ? <div></div> : <Typography variant='caption' align='center'>Vous n'avez pas les droits nécessaires pour modérer cet élément.</Typography>
+          this.props.userCanModerate ? <></> : <Typography variant='caption' align='center'>Vous n'avez pas les droits nécessaires pour modérer cet élément.</Typography>
         }
         <Button
           variant='outlined'
@@ -92,7 +92,7 @@ class PendingModeration extends Component {
           Valider cette version
         </Button>
         <Divider />
-      </div>
+      </>
     );
   }
 
@@ -118,7 +118,7 @@ class PendingModeration extends Component {
       pendingModelData = this.getRawModelDataFromPending();
 
     return (
-      <div>
+      <>
         <AppBar className={classes.appBar} >
           <Toolbar>
             <IconButton color="inherit" onClick={() => this.closePanel()} aria-label="Close">
@@ -135,12 +135,12 @@ class PendingModeration extends Component {
           {this.props.renderer.renderTitle(pendingModelData)}
           {this.props.renderer.renderCore(pendingModelData)}
         </Paper>
-      </div>
+      </>
     );
   }
 
   render() {
-    return <div></div>;
+    return <></>;
   }
 }
 

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

@@ -90,24 +90,24 @@ class Scholarship extends React.Component {
     const { amountMin, currency, classes } = this.props;
 
     return (
-      <div>
+      <>
         <Typography className={classes.item} variant='h5'> Avantage financier : </Typography>
         {
           amountMin !== null ? (
-            <div>
+            <>
               <Typography className={classes.textAmount}> {this.getAmounts()}{" "}{this.getFrequency()}</Typography>
               {
                 currency != "EUR" ?
                   <Typography variant='caption' ><em>(≈ {this.getConvertedAmounts()}{" "}{this.getFrequency()})</em></Typography>
                   :
-                  <div></div>
+                  <></>
               }
-            </div>
+            </>
           ) : (
             <Typography variant='caption'><em>Aucun avantage financier est notifié.</em></Typography>
           )
         }
-      </div>
+      </>
     );
   }
 
@@ -115,7 +115,7 @@ class Scholarship extends React.Component {
     const { classes, otherAdvantages } = this.props;
 
     return (
-      <div>
+      <>
         <Typography className={classes.item} variant='h5' > Autre(s) avantage(s) : </Typography>
         {
           otherAdvantages != "" && otherAdvantages !== null ?
@@ -123,7 +123,7 @@ class Scholarship extends React.Component {
             :
             <Typography variant='caption'><em>Aucun autre avantage a été notifié.</em></Typography>
         }
-      </div>
+      </>
     );
   }
 
@@ -131,14 +131,14 @@ class Scholarship extends React.Component {
     const { type, comment, classes, theme } = this.props;
 
     return (
-      <div>
+      <>
         <Typography className={classes.item} variant='h5'>{type}</Typography>
         {this.renderFinancialAdvantage()}
         <div style={{ height: 2 * theme.spacing.unit }} />
         {this.renderOtherAdvantages()}
         <Typography className={classes.item} variant='h5'> Informations complémentaires : </Typography>
         <Markdown source={comment} />
-      </div>
+      </>
     );
   }
 }

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

@@ -27,7 +27,7 @@ class ScholarshipForm extends Form {
 
   render() {
     return (
-      <div>
+      <>
         {this.renderObjModerationLevelField()}
         {this.renderTitleField()}
         {this.renderLinkedField()}
@@ -61,7 +61,7 @@ class ScholarshipForm extends Form {
         })}
         {this.renderCommentField()}
         {this.renderUsefulLinksField()}
-      </div>
+      </>
     );
   }
 }

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

@@ -60,7 +60,7 @@ class MarkdownField extends Field {
             this.props.maxLength ?
               <Typography variant='caption'>Nombre de caractères : {value.length}/{this.props.maxLength}</Typography>
               :
-              <div></div>
+              <></>
           }
           <TextField
             placeholder={"Le champ est vide"}

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

@@ -40,7 +40,7 @@ class NumberField extends Field {
     } else if (maxValue !== null) {
       return <Typography variant='caption'>Un nombre inférieur ou égale à {maxValue} est attendu.</Typography>;
     } else {
-      return <div></div>;
+      return <></>;
     }
   }
 
@@ -49,7 +49,7 @@ class NumberField extends Field {
       value = valFromState === null ? this.defaultNullValue : valFromState;
 
     return (
-      <div>
+      <>
         {this.renderInfo()}
         <TextField
           placeholder={"Le champ est vide"}
@@ -58,7 +58,7 @@ class NumberField extends Field {
           value={value}
           onChange={(e) => this.handleChangeValue(e.target.value)}
         />
-      </div>
+      </>
     );
   }
 }

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

@@ -49,26 +49,26 @@ class TextField extends Field {
       value = valFromState === null ? this.defaultNullValue : valFromState;
 
     return (
-      <div>
+      <>
         {
           this.props.isUrl ?
-            <div>
+            <>
               <Typography variant='caption'>Un URL est attendu ici (Le protocole - http/https/ftp - est requis !)</Typography>
               {
                 this.props.urlExtensions.length > 0 ?
                   <Typography variant='caption'>L'url doit terminer par l'une des extensions suivantes (majuscule ou miniscule) : {JSON.stringify(this.props.urlExtensions)}</Typography>
                   :
-                  <div></div>
+                  <></>
               }
-            </div>
+            </>
             :
-            <div></div>
+            <></>
         }
         {
           this.props.maxLength ?
             <Typography variant='caption'>Nombre de caractères : {value.length}/{this.props.maxLength}</Typography>
             :
-            <div></div>
+            <></>
         }
         <MuiTextField
           placeholder={"Le champ est vide"}
@@ -77,7 +77,7 @@ class TextField extends Field {
           value={value}
           onChange={(e) => this.handleChangeValue(e.target.value)}
         />
-      </div>
+      </>
     );
   }
 }

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

@@ -124,7 +124,7 @@ class UsefulLinksField extends Field {
   renderField() {
     const nbOfUsefulLinks = this.state.value.length;
     return (
-      <div>
+      <>
         <Typography variant='caption'>Tous les champs doivent être remplis et les URLs doivent commencer par 'http' ou 'https' ou 'ftp'.</Typography>
         <Grid
           container
@@ -197,7 +197,7 @@ class UsefulLinksField extends Field {
             </Button>
           </Grid>
         </Grid>
-      </div>
+      </>
     );
   }
 }

frontend/src/components/university/shared/moduleWrapperFunctions/renderTitle.js

@@ -27,6 +27,6 @@ export default function renderTitle(rawModelData, classes, buildTitle) {
       );
     }
   } else {
-    return (<div></div>);
+    return (<></>);
   }
 }

frontend/src/components/university/shared/moduleWrapperFunctions/renderUsefulLinks.js

@@ -8,16 +8,16 @@ export default function renderUsefulLinks(rawModelData, classes, theme) {
   const usefulLinks = rawModelData.useful_links;
 
   if (!usefulLinks) {
-    return (<div></div>);
+    return (<></>);
   }
 
   const nbItems = usefulLinks.length;
   if (nbItems == 0) {
-    return (<div></div>);
+    return (<></>);
   }
   const s = nbItems > 1 ? "s" : "";
   return (
-    <div>