Better performance on all backend

UnivMarkers components added

backend/models/my_model/myModelViewSet.py

@@ -10,3 +10,18 @@ class MyModelViewSet(DictModeViewSet):
         permissions.IsAuthenticated,
         NoDeleteIfNotAdmin,
     )
+
+    def get_queryset(self):
+        """
+        Extended default rest framework behavior
+        to prefetch some table and enhance performances
+        """
+        self.mymodel_queryset = self.queryset.prefetch_related(
+            'moderated_by', 'updated_by')
+        return self.extend_queryset()
+
+    def extend_queryset(self):
+        """
+        Function to extend get_queryset when subclassing
+        """
+        return self.mymodel_queryset

backend/models/university/campus.py

@@ -43,8 +43,7 @@ class CampusSerializer(BasicModuleSerializer):
 
 
 class CampusViewSet(BasicModuleViewSet):
-    queryset = Campus.objects.all().prefetch_related(
-        'updated_by')  # pylint: disable=E1101
+    queryset = Campus.objects.all()  # pylint: disable=E1101
     serializer_class = CampusSerializer
 
 

frontend/src/components/map/UnivMakers.js

+import React, { Component } from 'react';
+import { connect } from "react-redux";
+import Loading from '../other/Loading';
+import { Map, TileLayer, Marker, Popup, LayersControl, FeatureGroup, Circle, LayerGroup } from 'react-leaflet';
+// import MarkerClusterGroup from 'react-leaflet-markercluster';
+
+import {
+    universitiesFetchData,
+    universitiesInvalidated,
+    mainCampusFetchData,
+    mainCampusInvalidated
+} from '../../generated/actions';
+
+
+
+class UnivMarkers extends Component {
+
+    render() {
+
+        let universities = this.props.universities;
+        let mainCampus = this.props.mainCampus;
+
+        let selected_main_campus = [];
+        for (let main_campus_pk in mainCampus) {
+            let campus = mainCampus[main_campus_pk]
+            let univ = universities[campus.university]
+            selected_main_campus.push({
+                univ_name: univ.name,
+                lat: campus.lat,
+                lon: campus.lon
+            })
+        }
+
+        return (
+            selected_main_campus.map((el) => (
+                <Marker position={[el.lat, el.lon]}>
+                    <Popup>
+                        {el.univ_name}
+                    </Popup>
+                </Marker>
+            ))
+
+        );
+    }
+}
+
+
+const mapStateToProps = (state) => {
+    return {
+        universities: state.universities.fetched.universities,
+        universitiesFetchedAt: state.universities.fetched.fetchedAt,
+        universitiesHasError: state.universities.hasError,
+        universitiesIsLoading: state.universities.isLoading,
+        universitiesInvalidated: state.universities.invalidated,
+
+        mainCampus: state.mainCampus.fetched.mainCampus,
+        mainCampusFetchedAt: state.mainCampus.fetched.fetchedAt,
+        mainCampusHasError: state.mainCampus.hasError,
+        mainCampusIsLoading: state.mainCampus.isLoading,
+        mainCampusInvalidated: state.mainCampus.invalidated,
+    };
+};
+
+export default connect(mapStateToProps)(UnivMarkers);

frontend/src/components/map/UnivMap.js

@@ -9,10 +9,11 @@ import {
     mainCampusFetchData,
     mainCampusInvalidated
 } from '../../generated/actions';
-
+import UnivMarkers from './UnivMakers';
 
 
 class UnivMap extends Component {
+
     componentDidMount() {
         if (this.props.universities.length == 0 || this.props.invalidated) {
             this.props.fetchUniversitiesData('http://127.0.0.1:8000/api/university');
@@ -51,20 +52,6 @@ class UnivMap extends Component {
             return <Loading />;
         }
 
-        let universities = this.props.universities;
-        let mainCampus = this.props.mainCampus;
-
-        console.log(universities, mainCampus)
-        let univ_to_plot = [];
-        for (let main_campus_pk in mainCampus) {
-            let campus = mainCampus[main_campus_pk]
-            let univ = universities[campus.university]
-            univ_to_plot.push({
-                name: univ.name,
-                main_campus: campus
-            })
-        }
-
         return (
             <Map center={[35, 0]} zoom={2} style={{ height: "800px" }}>
                 <LayersControl position="topright">
@@ -104,15 +91,7 @@ class UnivMap extends Component {
                     </LayersControl.BaseLayer>
 
                 </LayersControl>
-                {
-                    univ_to_plot.map((el) => (
-                        <Marker position={[el.main_campus.lat, el.main_campus.lon]}>
-                            <Popup>
-                                {el.name}
-                            </Popup>
-                        </Marker>
-                    ))
-                }
+                <UnivMarkers/>
             </Map>
 
         );