Fix/ker 422 hearing map fixes

src/components/admin/HearingEditor.jsx

@@ -1,5 +1,5 @@
 /* eslint-disable react/forbid-prop-types */
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import { connect, useDispatch } from 'react-redux';
 import { isEmpty } from 'lodash';
@@ -72,8 +72,16 @@ const HearingEditor = (props) => {
     fetchEditorContactPersons();
   }, [fetchEditorContactPersons]);
 
+  const geoJSONRef = useRef();
+
   const checkIfEmpty = (obj) => !Object.entries(obj).some(([, v]) => Object.entries(v).length > 0);
 
+  useEffect(() => {
+    if(hearing) {
+      geoJSONRef.current = hearing.geojson;
+    }
+  }, [hearing]);
+
   useEffect(() => {
     if (!isEmpty(editorErrors)) {
       setErrors({
@@ -124,11 +132,15 @@ const HearingEditor = (props) => {
 
   const onSectionChange = (sectionID, field, value) => dispatch(changeSection(sectionID, field, value));
 
-  const onCreateMapMarker = (value) => dispatch(createMapMarker(value));
-
-  const onAddMapMarker = (value) => dispatch(addMapMarker(value));
-
-  const onAddMapMarkersToCollection = (value) => dispatch(addMapMarkerToCollection(value));
+  const onAddMapMarker = (value) => {
+    if (isEmpty(geoJSONRef.current) || !geoJSONRef.current) {
+      dispatch(createMapMarker(value));
+    } else if (geoJSONRef.current.type !== 'FeatureCollection') {
+      dispatch(addMapMarker(value));
+    } else {
+      dispatch(addMapMarkerToCollection(value));
+    }
+  }
 
   /**
    * Add a new attachments to a section.
@@ -239,8 +251,6 @@ const HearingEditor = (props) => {
         labels={labels}
         language={language}
         onAddMapMarker={onAddMapMarker}
-        onAddMapMarkersToCollection={onAddMapMarkersToCollection}
-        onCreateMapMarker={onCreateMapMarker}
         onDeleteExistingQuestion={onDeleteExistingQuestion}
         onDeleteTemporaryQuestion={onDeleteTemporaryQuestion}
         onHearingChange={onHearingChange}

src/components/admin/HearingFormStep3.jsx

@@ -2,7 +2,7 @@
 /* eslint-disable no-underscore-dangle */
 /* eslint-disable global-require */
 /* eslint-disable import/no-unresolved */
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { injectIntl, FormattedMessage } from 'react-intl';
 import Leaflet from 'leaflet';
@@ -32,14 +32,6 @@ Leaflet.Marker.prototype.options.icon = new Leaflet.Icon({
   iconAnchor: [13, 41],
 });
 
-function getFirstGeometry(featureCollectionGeoJSON) {
-  const firstFeature = featureCollectionGeoJSON.features[0];
-  if (firstFeature) {
-    return firstFeature.geometry;
-  }
-  return {};
-}
-
 /**
  * Returns an array of the remaining features
  * @param {Object[]} currentFeatures
@@ -65,8 +57,7 @@ const HearingFormStep3 = (props) => {
   let map;
   let featureGroup;
   const { hearing, language, isHighContrast, visible } = props; // const props
-  const { onHearingChange, onCreateMapMarker, onAddMapMarker, onAddMapMarkersToCollection, onContinue } = props; // function props
-  const [isEdited, setIsEdited] = useState(false);
+  const { onHearingChange, onAddMapMarker, onContinue } = props; // function props
   const [initialGeoJSON, setInitialGeoJSON] = useState(props.hearing.geojson);
 
   const dispatch = useDispatch();
@@ -75,51 +66,12 @@ const HearingFormStep3 = (props) => {
     Leaflet.drawLocal = getTranslatedTooltips(language);
   }, [language]);
 
-  const onDrawEdited = (event) => {
-    // TODO: Implement proper onDrawEdited functionality
-    setIsEdited(true);
-    onHearingChange('geojson', getFirstGeometry(event.layers.toGeoJSON()));
-  };
-
-  const onDrawCreated = (event) => {
-    // TODO: Implement proper onDrawCreated functionality
-    if (isEdited) {
-      /**
-       * first time an element is created and the map hasn't been edited/elements removed
-       */
-      setIsEdited(true);
-      if (!hearing.geojson || !hearing.geojson.type) {
-        /**
-         * if hearing.geojson is null or doesnt have type -> add a single element
-         */
-        onCreateMapMarker(event.layer.toGeoJSON().geometry);
-      } else if (hearing.geojson.type !== 'FeatureCollection') {
-        /**
-         * if hearing.geojson has a type that isn't FeatureCollection
-         * -> add element and transform hearing.geojson to FeatureCollection
-         */
-        onAddMapMarker(event.layer.toGeoJSON());
-      } else if (hearing.geojson.type === 'FeatureCollection') {
-        /**
-         * if hearing.geojson type is FeatureCollection - add element to geojson.features
-         */
-        onAddMapMarkersToCollection(event.layer.toGeoJSON());
-      }
-    } else if (hearing.geojson.coordinates) {
-      /**
-       * if geojson has coordinates -> transform hearing.geojson to FeatureCollection and add element
-       */
-      onAddMapMarker(event.layer.toGeoJSON());
-    } else {
-      /**
-       * hearing.geojson is a FeatureCollection -> add element to geojson.features
-       */
-      onAddMapMarkersToCollection(event.layer.toGeoJSON());
-    }
-  };
+  const onDrawCreated = useCallback((event) => {
+    onAddMapMarker(event.layer.toGeoJSON());
+  }, [onAddMapMarker]);
 
   // eslint-disable-next-line sonarjs/cognitive-complexity
-  const onDrawDeleted = (event) => {
+  const onDrawDeleted = useCallback((event) => {
     // TODO: Implement proper onDrawDeleted functionality
     if (event.layers && !isEmpty(event.layers._layers) && hearing.geojson.features) {
       /**
@@ -165,25 +117,20 @@ const HearingFormStep3 = (props) => {
       if (remainingFeatures.length === 0) {
         // hearing is a FeatureCollection and all elements have been removed
         onHearingChange('geojson', {});
-        setIsEdited(false);
         setInitialGeoJSON({});
       } else {
         // hearing is a FeatureCollection that still has elements after removal
         onHearingChange('geojson', { type: hearing.geojson.type, features: remainingFeatures });
         if (currentStateFeatures) {
-          setIsEdited(true);
           setInitialGeoJSON({ type: hearing.geojson.type, features: remainingStateFeatures });
-        } else {
-          setIsEdited(true);
         }
       }
     } else {
       // hearing.geojson is a single element that has been removed
       onHearingChange('geojson', {});
-      setIsEdited(false);
       setInitialGeoJSON({});
     }
-  };
+  }, [hearing.geojson, initialGeoJSON, onHearingChange]);
 
   const readTextFile = (file, callback) => {
     try {
@@ -217,7 +164,7 @@ const HearingFormStep3 = (props) => {
           }
           onHearingChange('geojson', featureCollection.features[0].geometry);
           const parsedFile = parseCollection(featureCollection);
-          onCreateMapMarker(parsedFile);
+          onAddMapMarker(parsedFile);
           setInitialGeoJSON(parsedFile);
         } else {
           dispatch(addToast(createLocalizedNotificationPayload(NOTIFICATION_TYPES.error, MESSAGE_INCORRECT_FILE)));
@@ -252,17 +199,19 @@ const HearingFormStep3 = (props) => {
     }
   }, [visible, map]);
 
-  const refCallBack = (el) => {
-    map = el;
-  };
+  function refCallback(instance) {
+    if (instance) {
+      map = instance;
+    }
+  }
 
   if (typeof window === 'undefined') return null;
 
   return (
     <div className='form-step'>
       <Fieldset id='hearingArea' heading={<FormattedMessage id='hearingArea' />}>
         <MapContainer
-          ref={refCallBack}
+          ref={refCallback}
           center={localization.mapPosition}
           style={{ width: '100%', height: 600 }}
           zoom={10}
@@ -277,13 +226,10 @@ const HearingFormStep3 = (props) => {
             )}
           />
           <FeatureGroup
-            ref={(group) => {
-              featureGroup = group;
-            }}
+            ref={featureGroup}
           >
             <EditControl
               position='topleft'
-              onEdited={onDrawEdited}
               onCreated={onDrawCreated}
               onDeleted={onDrawDeleted}
               draw={getDrawOptions()}
@@ -326,8 +272,6 @@ HearingFormStep3.propTypes = {
   language: PropTypes.string,
   isHighContrast: PropTypes.bool,
   onAddMapMarker: PropTypes.func,
-  onAddMapMarkersToCollection: PropTypes.func,
-  onCreateMapMarker: PropTypes.func,
 };
 
 export default connect(mapStateToProps, null)(injectIntl(HearingFormStep3));

src/middleware/hearingEditor.js

@@ -58,7 +58,6 @@ export const normalizeReceiveEditorContactPersons =
 export const normalizeSavedHearing =
   ({ dispatch }) => (next) => (action) => {
     const NORMALIZE_ACTIONS = [EditorActions.POST_HEARING_SUCCESS, EditorActions.SAVE_HEARING_SUCCESS];
-
     if (NORMALIZE_ACTIONS.includes(action.type)) {
       const hearing = get(action, 'payload.hearing');
       dispatch(updateHearingAfterSave(fillFrontIdsAndNormalizeHearing(hearing)));

src/reducers/hearingEditor/hearing.js

@@ -25,7 +25,7 @@ const data = handleActions(
     [EditorActions.EDIT_HEARING]: (state, { payload: { field, value } }) => ({ ...state, [field]: value }),
     [EditorActions.CREATE_MAP_MARKER]: (state, { payload: { value } }) => ({
       ...state,
-      geojson: value,
+      geojson: value.geometry,
     }),
     [EditorActions.ADD_MAP_MARKER]: (state, { payload: { value } }) => {
       const foo = state.geojson;

src/utils/map.js

@@ -4,9 +4,9 @@ import { Polygon, GeoJSON, Marker, Polyline } from 'react-leaflet';
 
 import 'proj4'; // import required for side effect
 import 'proj4leaflet'; // import required for side effect
-import * as leafletMarkerIconUrl from '../../assets/images/leaflet/marker-icon.png';
-import * as leafletMarkerRetinaIconUrl from '../../assets/images/leaflet/marker-icon-2x.png';
-import * as leafletMarkerShadowUrl from '../../assets/images/leaflet/marker-shadow.png';
+import leafletMarkerIconUrl from '../../assets/images/leaflet/marker-icon.png';
+import leafletMarkerRetinaIconUrl from '../../assets/images/leaflet/marker-icon-2x.png';
+import leafletMarkerShadowUrl from '../../assets/images/leaflet/marker-shadow.png';
 
 export function EPSG3067() {
   const crsName = 'EPSG:3067';