feat(map): improve map drawing synchronization

Details:
* use optimisticResponses and only rely on apollo cache for features
* improve selectedFeature state sync so that newly added features are
  always selected

ui/src/types/layer.ts

@@ -16,11 +16,10 @@ export type Feature = {
   geometry: Geometry;
   properties: GeoJsonProperties;
   createdAt: Date;
-  updatedAt: Date;
-  deletedAt: Date;
+  updatedAt: Date | null;
+  deletedAt: Date | null;
 };
 
-
 export interface GetLayersData {
   layers: Layer[];
 }
@@ -29,21 +28,28 @@ export interface GetLayersVars {
   incidentId: string;
 }
 
-
 export interface AddFeatureVars {
   layerId: string;
   geometry: Geometry;
   properties: GeoJsonProperties;
   id: string | number | undefined;
 }
 
+export interface AddFeatureResponse {
+  insertFeaturesOne: Feature | undefined;
+}
+
 export interface ModifyFeatureVars {
   id: string | number | undefined;
   geometry: Geometry;
   properties: GeoJsonProperties;
 }
 
+export interface ModifyFeatureResponse {
+  updateFeaturesByPk: Feature | undefined;
+}
+
 export interface DeleteFeatureVars {
   id: string | number | undefined;
   deletedAt: Date;
-}
+}

ui/src/views/map/LayerContext.tsx

@@ -1,52 +1,46 @@
+import React, { createContext, useReducer } from "react";
+import { LayersAction, layersReducer, selectedFeatureReducer, activeLayerReducer, drawReducer } from "./reducer";
+import { Layer } from "types/layer";
+import MapboxDraw from "@mapbox/mapbox-gl-draw";
 
-import React, { createContext, useReducer } from 'react';
-import { LayersAction, layersReducer, selectedFeatureReducer, activeLayerReducer, drawReducer } from './reducer';
-import { Layer } from 'types/layer';
-import MapboxDraw from '@mapbox/mapbox-gl-draw';
-
-export type SelectedFeatureState = string | number | undefined;
+export type SelectedFeatureState = string | undefined;
 export type LayersState = Layer[];
 export type ActiveLayerState = string | undefined;
 export type DrawState = MapboxDraw | undefined;
 
-
 export type LayerState = {
-    layers: LayersState;
-    activeLayer: string | undefined
-    selectedFeature: SelectedFeatureState;
-    draw: DrawState;
-}
+  layers: LayersState;
+  activeLayer: string | undefined;
+  selectedFeature: SelectedFeatureState;
+  draw: DrawState;
+};
 
 const initialState: LayerState = {
-    layers: [],
-    activeLayer: undefined,
-    selectedFeature: 0,
-    draw: undefined,
-}
+  layers: [],
+  activeLayer: undefined,
+  selectedFeature: undefined,
+  draw: undefined,
+};
 
 const LayerContext = createContext<{
-    state: LayerState;
-    dispatch: React.Dispatch<LayersAction>;
+  state: LayerState;
+  dispatch: React.Dispatch<LayersAction>;
 }>({
-    state: initialState,
-    dispatch: () => null,
+  state: initialState,
+  dispatch: () => null,
 });
 
 const mainReducer = ({ layers, activeLayer, selectedFeature, draw }: LayerState, action: LayersAction) => ({
-    layers: layersReducer(layers, action),
-    activeLayer: activeLayerReducer(activeLayer, action),
-    selectedFeature: selectedFeatureReducer(selectedFeature, action),
-    draw: drawReducer(draw, action),
+  layers: layersReducer(layers, action),
+  activeLayer: activeLayerReducer(activeLayer, action),
+  selectedFeature: selectedFeatureReducer(selectedFeature, action),
+  draw: drawReducer(draw, action),
 });
 
 const LayersProvider = ({ children }: { children: React.ReactNode }) => {
-    const [state, dispatch] = useReducer(mainReducer, initialState);
+  const [state, dispatch] = useReducer(mainReducer, initialState);
 
-    return (
-        <LayerContext.Provider value={{ state, dispatch }}>
-            {children}
-        </LayerContext.Provider>
-    )
-}
+  return <LayerContext.Provider value={{ state, dispatch }}>{children}</LayerContext.Provider>;
+};
 
-export { LayerContext, LayersProvider };
+export { LayerContext, LayersProvider };