Saving map status when exiting component operational ! (retreiving such status also...)

frontend/src/actions/action-types.js

+export const SAVE_MAIN_MAP_POSITION = 'SAVE_MAIN_MAP_POSITION';

frontend/src/actions/map.js

+
+import {
+    SAVE_MAIN_MAP_POSITION
+} from "./action-types";
+
+
+    export function saveMainMapPosition(new_position) {
+    return {
+        type: SAVE_MAIN_MAP_POSITION,
+        new_position
+    };
+  
+}

frontend/src/components/App.js

@@ -115,7 +115,6 @@ class App extends React.Component {
 
     componentDidMount() {
         if (this.props.countries.fetched.countries.length == 0 || this.props.invalidated) {
-            console.log("here mother uc", this.props.countries.fetched.countries);
             this.props.fetchData();
         }
     }
@@ -129,7 +128,6 @@ class App extends React.Component {
     }
 
     componentWillUnmount() {
-        console.log("ça serait bien de save la config de la carte...");
     }
 
     render() {

frontend/src/components/map/UnivMap.js

@@ -6,14 +6,19 @@ import { Map, TileLayer, Marker, Popup, LayersControl, FeatureGroup, Circle, Lay
 // import MarkerClusterGroup from 'react-leaflet-markercluster';
 import {
     universitiesFetchData,
-    universitiesInvalidated,
     mainCampusFetchData,
-    mainCampusInvalidated
 } from '../../generated/actions';
 import UnivMarkers from './UnivMakers';
 
+import { saveMainMapPosition } from '../../actions/map'
 
 class UnivMap extends MyComponent {
+    constructor() {
+        super();
+        this.state = {
+            leaflet_instance: null
+        };
+    }
 
     componentDidMount() {
         let univ_data = this.props.universities.fetched.universities;
@@ -36,10 +41,26 @@ class UnivMap extends MyComponent {
         if (this.props.mainCampus.invalidated) {
             this.props.fetchMainCampus();
         }
+
     }
 
+
     componentWillUnmount() {
-        console.log("ça serait bien de save la config de la carte...");
+        if (this.state.leaflet_instance) {
+            let l = this.state.leaflet_instance
+            let center = [l.getCenter().lat, l.getCenter().lng]
+
+            this.props.saveMainMap({
+                zoom: l.getZoom(),
+                center
+            })
+        }
+    }
+
+    saveLeafletInstance = (l) => {
+        this.setState(Object.assign(this.state, {
+            leaflet_instance: l,
+        }))
     }
 
     render() {
@@ -52,7 +73,7 @@ class UnivMap extends MyComponent {
         }
 
         return (
-            <Map center={[35, 0]} zoom={2} style={{ height: "800px" }}>
+            <Map center={this.props.map.center} zoom={this.props.map.zoom} style={{ height: "800px" }} whenReady={(e) => this.saveLeafletInstance(e.target)}>
                 <LayersControl position="topright">
                     <LayersControl.BaseLayer name="OpenStreetMap France" checked={false}>
                         <TileLayer
@@ -102,6 +123,7 @@ const mapStateToProps = (state) => {
     return {
         universities: state.universities,
         mainCampus: state.mainCampus,
+        map: state.app.mainMap
     };
 };
 
@@ -109,8 +131,7 @@ const mapDispatchToProps = (dispatch) => {
     return {
         fetchUniversities: () => dispatch(universitiesFetchData()),
         fetchMainCampus: () => dispatch(mainCampusFetchData()),
-        // invalidateUniversities: (bool) => dispatch(universitiesInvalidated(bool)),
-        // invalidateMainCampus: (bool) => dispatch(mainCampusInvalidated(bool))
+        saveMainMap: (pos) => dispatch(saveMainMapPosition(pos)),
     };
 };
 

frontend/src/reducers/index.js

@@ -6,10 +6,19 @@ import {
   countriesReducers
 } from '../generated/combinedReducers';
 
+import {
+  saveMainMapPosition
+} from './map'
+
+const appReducers = combineReducers({
+  mainMap: saveMainMapPosition,
+})
+
 const rootReducer = combineReducers({
   universities: universitiesReducers,
   mainCampus: mainCampusReducers,
-  countries: countriesReducers
+  countries: countriesReducers,
+  app: appReducers
 })
 
 export default rootReducer

frontend/src/reducers/map.js

+import { SAVE_MAIN_MAP_POSITION } from '../actions/action-types'
+
+export function saveMainMapPosition(state = { center: [0, 2], zoom: 2 }, action) {
+    switch (action.type) {
+        case SAVE_MAIN_MAP_POSITION:
+            return {
+                center: action.new_position.center,
+                zoom: action.new_position.zoom
+            }
+
+        default:
+            return state;
+    }
+}