Remove underscore and change to lodash solves #21

frontend/src/components/MyComponent.js

 import React, { Component } from 'react';
 import Loading from './other/Loading';
-import _ from 'underscore';
+
 class MyComponent extends Component {
   customErrorHandlers = {}
   idToUse = null;

frontend/src/components/filter/DownshiftMultiple.js

@@ -9,7 +9,8 @@ import TextField from '@material-ui/core/TextField';
 import Paper from '@material-ui/core/Paper';
 import MenuItem from '@material-ui/core/MenuItem';
 import Chip from '@material-ui/core/Chip';
-import _ from 'underscore';
+import __map from 'lodash/map';
+import __difference from 'lodash/difference';
 import fuzzysort from 'fuzzysort';
 
 
@@ -80,10 +81,10 @@ class DownshiftMultiple extends React.Component {
   getSuggestions(value) {
     const { options } = this.props;
     const { selectedItems } = this.state;
-    let possible = _.difference(options, selectedItems);
+    let possible = __difference(options, selectedItems);
     const filter = fuzzysort.go(value, possible, { limit: 5, key: 'label' });
     if (filter.length > 0){
-      return _.map(filter, (item) => item.obj)
+      return __map(filter, (item) => item.obj)
     } else {
       return possible.slice(0,4)
     }

frontend/src/components/filter/Filter.js

@@ -3,7 +3,10 @@ import DownshiftMultiple from './DownshiftMultiple';
 
 import MyComponent from '../MyComponent'
 import {connect} from "react-redux";
-import _ from 'underscore';
+import __each from 'lodash/each';
+import __uniq from 'lodash/uniq';
+import __map from 'lodash/map';
+import __indexOf from 'lodash/indexOf';
 import { saveSelectedUniversities, saveFilterConfig } from '../../actions/filter';
 import ExpansionPanel from '@material-ui/core/ExpansionPanel';
 import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
@@ -43,22 +46,22 @@ class Filter extends MyComponent {
     const { mainCampuses } = this.getAllFetchedData();
 
     let res = [];
-    _.each(mainCampuses, (campus) => {
+    __each(mainCampuses, (campus) => {
       const campusFull = this.joinCampus(campus)
       res.push(campusFull.country)
     });
 
-    return _.uniq(res, false, (c) => { return c.iso_alpha2_code });
+    return __uniq(res, false, (c) => { return c.iso_alpha2_code });
   }
 
   updateSelectedUniversities(selection) {
     const { mainCampuses } = this.getAllFetchedData();
-    const listOfCountries = _.map(selection, (s) => s.id);
+    const listOfCountries = __map(selection, (s) => s.id);
 
     let selected_universities = []
-    _.each(mainCampuses, (campus) => {
+    __each(mainCampuses, (campus) => {
       const campusFull = this.joinCampus(campus)
-      if (_.indexOf(listOfCountries, campusFull.country.iso_alpha2_code) > -1) {
+      if (__indexOf(listOfCountries, campusFull.country.iso_alpha2_code) > -1) {
         selected_universities.push(campusFull.university.id);
       }
     })
@@ -66,7 +69,7 @@ class Filter extends MyComponent {
   }
 
   myRender() {
-    const options = _.map(this.getCountriesWhereThereAreUniversities(),
+    const options = __map(this.getCountriesWhereThereAreUniversities(),
       (c) => { return { id: c.iso_alpha2_code, label: c.name } })
       const { classes } = this.props;
     return (

frontend/src/components/search/Search.js

@@ -6,7 +6,7 @@ import MyComponent from '../MyComponent'
 import {connect} from "react-redux";
 import fuzzysort from 'fuzzysort';
 import UnivList from './UnivList';
-import _ from 'underscore';
+import __map from 'lodash/map';
 // import { saveSelectedUniversities, saveSearchConfig } from '../../actions/filter';
 import withStyles from '@material-ui/core/styles/withStyles';
 
@@ -32,10 +32,10 @@ class Search extends MyComponent {
 
   getSuggestions(value) {
     const { universities } = this.getAllFetchedData();
-    const filter = fuzzysort.go(value, _.map(universities, (univ) => univ), { keys: ['name', 'acronym'] });
+    const filter = fuzzysort.go(value, __map(universities, (univ) => univ), { keys: ['name', 'acronym'] });
     let out;
     if (filter.length > 0) {
-      out = _.map(filter, (item) => item.obj)
+      out = __map(filter, (item) => item.obj)
     } else {
       out = universities
     }

frontend/src/components/search/UnivList.js

@@ -4,7 +4,8 @@ import withStyles from '@material-ui/core/styles/withStyles';
 import MobileStepper from '@material-ui/core/MobileStepper';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
-import _ from 'underscore';
+import __map from 'lodash/map';
+import __range from 'lodash/range';
 import ListItemText from '@material-ui/core/ListItemText';
 import Divider from '@material-ui/core/Divider';
 import Button from '@material-ui/core/Button';
@@ -79,11 +80,11 @@ class UnivList extends React.Component {
           enableMouseEvents
         >
 
-          {_.map(_.range(maxSteps), page => (
+          {__map(__range(maxSteps), page => (
             <div key={page}>
               <List component="nav">
                 <Divider />
-                {_.map(_.range((page) * itemsPerPage, Math.min((page + 1) * itemsPerPage, numberOfItems)),
+                {__map(__range((page) * itemsPerPage, Math.min((page + 1) * itemsPerPage, numberOfItems)),
                   univ_ind => (
                     <Link to={'/app/university/'+universitiesToList[univ_ind].id}>
                       <ListItem button divider={true} key={univ_ind}>

frontend/src/components/settings/Settings.js

@@ -2,7 +2,6 @@ import React from 'react';
 
 import MyComponent from '../MyComponent'
 import {connect} from "react-redux";
-import _ from 'underscore';
 import ColorTools from './ColorTools';
 // import { saveSelectedUniversities, saveSettingsConfig } from '../../actions/Settings';
 

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

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import withStyles from '@material-ui/core/styles/withStyles';
 import compose from 'recompose/compose';
 import { connect } from "react-redux";
-import _ from 'underscore';
+import __pick from 'lodash/pick';
 
 import Markdown from '../../shared/Markdown';
 import Typography from '@material-ui/core/Typography';
@@ -56,7 +56,7 @@ function renderCore(rawModelData, classes, outsideData) {
 function parseRawModelData(rawModelData) {
   // reverse serialization
   const univInfos = rawModelData;
-  const modelData = _.pick(univInfos,
+  const modelData = __pick(univInfos,
     [
       "name",
       "acronym",

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

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import withStyles from '@material-ui/core/styles/withStyles';
 import compose from 'recompose/compose';
 import { connect } from "react-redux";
-import _ from 'underscore';
+import __pick from 'lodash/pick';
 import Table from '@material-ui/core/Table';
 import TableBody from '@material-ui/core/TableBody';
 import TableCell from '@material-ui/core/TableCell';
@@ -109,7 +109,7 @@ function renderCore(rawModelData, classes) {
 function parseRawModelData(rawModelData) {
   // reverse serialization
   const semestersDates = rawModelData;
-  const modelData = _.pick(semestersDates,
+  const modelData = __pick(semestersDates,
     [
       "autumn_begin",
       "autumn_end",

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

@@ -23,7 +23,9 @@ import Loading from '../../other/Loading';
 import dateTimeStrToStr from '../../../utils/dateTimeStrToStr';
 
 import editorStyle from './editorStyle';
-import _ from 'lodash';
+import _omit from 'lodash/omit';
+import _pick from 'lodash/pick';
+import _cloneDeep from 'lodash/cloneDeep';
 
 const styles = theme => ({
   ...editorStyle(theme),
@@ -50,9 +52,9 @@ class History extends React.Component {
   }
 
   componentWillMount() {
-    let tmp = _.pick(this.props.factory, ['props', 'renderCore', 'renderTitle']); 
-    tmp = _.omit(tmp, ['props.children']);
-    this.newFactory = _.cloneDeep(tmp);
+    let tmp = _pick(this.props.factory, ['props', 'renderCore', 'renderTitle']); 
+    tmp = _omit(tmp, ['props.children']);
+    this.newFactory = _cloneDeep(tmp);
   }
 
   getVersions() {

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

@@ -14,7 +14,10 @@ import Slide from '@material-ui/core/Slide';
 import Divider from '@material-ui/core/Divider';
 
 import editorStyle from './editorStyle';
-import _ from 'lodash';
+
+import _omit from 'lodash/omit';
+import _pick from 'lodash/pick';
+import _cloneDeep from 'lodash/cloneDeep';
 
 const styles = theme => ({
   ...editorStyle(theme),
@@ -37,9 +40,9 @@ class PendingModeration extends React.Component {
   }
 
   componentWillMount() {
-    let tmp = _.pick(this.props.factory, ['props', 'renderCore', 'renderTitle']);
-    tmp = _.omit(tmp, ['props.children']);
-    this.newFactory = _.cloneDeep(tmp)
+    let tmp = _pick(this.props.factory, ['props', 'renderCore', 'renderTitle']);
+    tmp = _omit(tmp, ['props.children']);
+    this.newFactory = _cloneDeep(tmp)
   }
 
   renderPendingModerationInfo(rawModelData) {

package.json

@@ -4,9 +4,11 @@
   "description": "[![build](/../badges/master/build.svg)](https://gitlab.utc.fr/chehabfl/outgoing_rex/pipelines) [![coverage](/../badges/master/coverage.svg)](https://chehabfl.gitlab.utc.fr/outgoing_rex/) [![License](https://img.shields.io/badge/License-BSD%202--Clause-green.svg)](https://opensource.org/licenses/BSD-2-Clause)",
   "main": "manage.py",
   "scripts": {
-    "dev": "make generate_frontend && webpack --mode development ./frontend/src/index.js --output ./frontend/static/frontend/main.js",
-    "build": "make generate_frontend && webpack --mode production ./frontend/src/index.js --output ./frontend/static/frontend/main.js",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "dev": "make generate_frontend && webpack --mode development",
+    "build": "make generate_frontend && webpack --mode production",
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "stats": "webpack --profile --json > stats.json",
+    "view-stats": "webpack-bundle-analyzer stats.json"
   },
   "repository": {
     "type": "git",
@@ -38,8 +40,7 @@
     "redux-logger": "^3.0.6",
     "redux-thunk": "^2.3.0",
     "style-loader": "^0.23.0",
-    "typeface-roboto": "0.0.54",
-    "underscore": "^1.9.1"
+    "typeface-roboto": "0.0.54"
   },
   "devDependencies": {
     "@material-ui/icons": "^2.0.3",
@@ -70,6 +71,7 @@
     "sass-loader": "^7.1.0",
     "weak-key": "^1.0.1",
     "webpack": "^4.17.0",
+    "webpack-bundle-analyzer": "^3.0.2",
     "webpack-cli": "^3.1.0"
   }
 }

webpack.config.js

 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
 const config = {
+  entry: {
+    main: "./frontend/src/index.js",
+  },
+  output:{
+    path: __dirname + "/frontend/static/frontend",
+    filename: "[name].js"
+  },
   module: {
     rules: [
       {