#3042: Refactor location form for batching value updates

NCI-Agency · Jul 6, 2020 · 4b21331 · 4b21331
1 parent cfde6d6
commit 4b21331
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 29 deletions.
diff --git a/client/src/pages/locations/Form.js b/client/src/pages/locations/Form.js
@@ -79,12 +79,11 @@ const BaseLocationForm = ({ currentUser, edit, title, initialValues }) => {
       initialValues={initialValues}
     >
       {({
-        handleSubmit,
         isSubmitting,
         dirty,
-        errors,
         setFieldTouched,
         setFieldValue,
+        setValues,
         values,
         submitForm
       }) => {
@@ -93,7 +92,14 @@ const BaseLocationForm = ({ currentUser, edit, title, initialValues }) => {
           name: _escape(values.name) || "", // escape HTML in location name!
           draggable: true,
           autoPan: true,
-          onMove: (event, map) => onMarkerMove(event, map, setFieldValue)
+          onMove: (event, map) => {
+            const latLng = map.wrapLatLng(event.target.getLatLng())
+            setValues({
+              ...values,
+              lat: Location.parseCoordinate(latLng.lat),
+              lng: Location.parseCoordinate(latLng.lng)
+            })
+          }
         }
         if (Location.hasCoordinates(values)) {
           Object.assign(marker, {
@@ -139,7 +145,7 @@ const BaseLocationForm = ({ currentUser, edit, title, initialValues }) => {
                   lat={values.lat}
                   lng={values.lng}
                   isSubmitting={isSubmitting}
-                  setFieldValue={setFieldValue}
+                  setValues={vals => setValues({ ...values, ...vals })}
                   setFieldTouched={setFieldTouched}
                 />
               </Fieldset>
@@ -148,7 +154,12 @@ const BaseLocationForm = ({ currentUser, edit, title, initialValues }) => {
               <Leaflet
                 markers={[marker]}
                 onMapClick={(event, map) => {
-                  onMarkerMapClick(event, map, setFieldValue)
+                  const latLng = map.wrapLatLng(event.latlng)
+                  setValues({
+                    ...values,
+                    lat: Location.parseCoordinate(latLng.lat),
+                    lng: Location.parseCoordinate(latLng.lng)
+                  })
                 }}
               />
 
@@ -195,24 +206,12 @@ const BaseLocationForm = ({ currentUser, edit, title, initialValues }) => {
     </Formik>
   )
 
-  function onMarkerMove(event, map, setFieldValue) {
-    const latLng = map.wrapLatLng(event.target.getLatLng())
-    setFieldValue("lat", Location.parseCoordinate(latLng.lat))
-    setFieldValue("lng", Location.parseCoordinate(latLng.lng))
-  }
-
-  function onMarkerMapClick(event, map, setFieldValue) {
-    const latLng = map.wrapLatLng(event.latlng)
-    setFieldValue("lat", Location.parseCoordinate(latLng.lat))
-    setFieldValue("lng", Location.parseCoordinate(latLng.lng))
-  }
-
   function onCancel() {
     history.goBack()
   }
 
   function onSubmit(values, form) {
-    return save(values, form)
+    return save(values)
       .then(response => onSubmitSuccess(response, values, form))
       .catch(error => {
         setError(error)
@@ -239,7 +238,7 @@ const BaseLocationForm = ({ currentUser, edit, title, initialValues }) => {
     })
   }
 
-  function save(values, form) {
+  function save(values) {
     const location = Object.without(new Location(values), "notes")
     return API.mutation(edit ? GQL_UPDATE_LOCATION : GQL_CREATE_LOCATION, {
       location

diff --git a/client/src/pages/locations/GeoLocation.js b/client/src/pages/locations/GeoLocation.js
@@ -1,10 +1,10 @@
-import React from "react"
-import PropTypes from "prop-types"
-import { Button, Col, ControlLabel, FormGroup } from "react-bootstrap"
+import * as FieldHelper from "components/FieldHelper"
 import { Field } from "formik"
 import { Location } from "models"
+import PropTypes from "prop-types"
+import React from "react"
+import { Button, Col, ControlLabel, FormGroup } from "react-bootstrap"
 import REMOVE_ICON from "resources/delete.png"
-import * as FieldHelper from "components/FieldHelper"
 
 export const GEO_LOCATION_DISPLAY_TYPE = {
   FORM_FIELD: "FORM_FIELD",
@@ -15,7 +15,7 @@ const GeoLocation = ({
   lat,
   lng,
   setFieldTouched,
-  setFieldValue,
+  setValues,
   isSubmitting,
   editable,
   displayType
@@ -61,7 +61,10 @@ const GeoLocation = ({
             component={FieldHelper.InputFieldNoLabel}
             onBlur={() => {
               setTouched(true)
-              setFieldValue("lat", Location.parseCoordinate(lat))
+              setValues({
+                lat: Location.parseCoordinate(lat),
+                lng: Location.parseCoordinate(lng)
+              })
             }}
           />
         </Col>
@@ -71,7 +74,10 @@ const GeoLocation = ({
             component={FieldHelper.InputFieldNoLabel}
             onBlur={() => {
               setTouched(true)
-              setFieldValue("lng", Location.parseCoordinate(lng))
+              setValues({
+                lat: Location.parseCoordinate(lat),
+                lng: Location.parseCoordinate(lng)
+              })
             }}
           />
         </Col>
@@ -83,8 +89,7 @@ const GeoLocation = ({
               bsSize="sm"
               onClick={() => {
                 setTouched(false) // prevent validation since lat, lng can be null together
-                setFieldValue("lat", null)
-                setFieldValue("lng", null)
+                setValues({ lat: null, lng: null })
               }}
               disabled={isSubmitting}
             >
@@ -109,7 +114,7 @@ GeoLocation.propTypes = {
   lat: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   lng: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   setFieldTouched: fnRequiredWhenEditable,
-  setFieldValue: fnRequiredWhenEditable,
+  setValues: fnRequiredWhenEditable,
   isSubmitting: PropTypes.bool,
   editable: PropTypes.bool,
   displayType: PropTypes.oneOf([