From 77c0f596477418327ca8858012a5f60fcfd2b4b2 Mon Sep 17 00:00:00 2001
From: Matt Stone <mstone@azavea.com>
Date: Mon, 24 Oct 2022 18:06:21 -0500
Subject: [PATCH] Fix add polygon

When #141 was merged, it updated the polygon to read from the RTK query
cache. This broke the add polygon feature and is addressed here.
---
 .../DrawTools/useAddPolygonCursor.js          | 33 +++++++++++++++----
 src/app/src/store/mapSlice.js                 |  2 ++
 2 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/src/app/src/components/DrawTools/useAddPolygonCursor.js b/src/app/src/components/DrawTools/useAddPolygonCursor.js
index df33b4a7..254ae842 100644
--- a/src/app/src/components/DrawTools/useAddPolygonCursor.js
+++ b/src/app/src/components/DrawTools/useAddPolygonCursor.js
@@ -3,13 +3,19 @@ import { useMap } from 'react-leaflet';
 import { useDispatch, useSelector } from 'react-redux';
 import { DomUtil } from 'leaflet';
 
-import { setPolygon } from '../../store/mapSlice';
 import { generateInitialPolygonPoints } from '../../utils';
+import { useUpdateBoundaryShapeMutation } from '../../api/boundaries';
+import { useBoundaryId, useEndpointToastError } from '../../hooks';
+import api from '../../api/api';
 
 export default function useAddPolygonCursor() {
     const map = useMap();
     const dispatch = useDispatch();
+    const id = useBoundaryId();
+
     const addPolygonMode = useSelector(state => state.map.addPolygonMode);
+    const [updateShape, { error }] = useUpdateBoundaryShapeMutation();
+    useEndpointToastError(error);
 
     const addPolygonFromEvent = useCallback(
         event => {
@@ -18,17 +24,30 @@ export default function useAddPolygonCursor() {
                 return;
             }
 
-            map.flyTo(event.latlng);
-            dispatch(
-                setPolygon({
-                    points: generateInitialPolygonPoints({
+            const polygon = {
+                coordinates: [
+                    generateInitialPolygonPoints({
                         mapBounds: map.getBounds(),
                         center: event.latlng,
                     }),
-                })
+                ],
+            };
+
+            map.flyTo(event.latlng);
+
+            dispatch(
+                api.util.updateQueryData(
+                    'getBoundaryDetails',
+                    id,
+                    draftDetails => {
+                        draftDetails.submission.shape = polygon;
+                    }
+                )
             );
+
+            updateShape({ id, shape: polygon });
         },
-        [map, dispatch]
+        [map, dispatch, id, updateShape]
     );
 
     useEffect(() => {
diff --git a/src/app/src/store/mapSlice.js b/src/app/src/store/mapSlice.js
index d954de3b..159301c9 100644
--- a/src/app/src/store/mapSlice.js
+++ b/src/app/src/store/mapSlice.js
@@ -27,6 +27,8 @@ export const mapSlice = createSlice({
     name: 'map',
     initialState,
     reducers: {
+        // TODO Remove polygon from this slice
+        // useEditingPolygon and useAddPolygonCursor no longer use it
         setPolygon: (state, { payload: newPolygon }) => {
             state.polygon = {
                 ...DEFAULT_POLYGON,