From 07e95f73f6c3e18c31dfc2e5f8431835be53b415 Mon Sep 17 00:00:00 2001
From: Jared Luxenberg <jared@jaredlux.com>
Date: Mon, 13 Mar 2017 17:39:03 -0700
Subject: [PATCH] call setData when children disappear

Previously, if you had a Layer that had Features as children,
and then the props changed such that the Layer no longer had
children, <source>.setData would not be called to remove the
Features from the source.

To fix this, I've changed Layer so that it will always call
setData when rendered. This should be fine because Layer#render
will only be called if the component should update.

I've added tests as well.
---
 src/__tests__/layer.test.tsx | 39 +++++++++++++++++++++++++++++++++++-
 src/layer.ts                 | 21 +++++++++----------
 2 files changed, 47 insertions(+), 13 deletions(-)

diff --git a/src/__tests__/layer.test.tsx b/src/__tests__/layer.test.tsx
index efbfe6956..c326dc299 100644
--- a/src/__tests__/layer.test.tsx
+++ b/src/__tests__/layer.test.tsx
@@ -7,12 +7,18 @@ describe('Layer', () => {
   let LayerWithContext: any;
   let addLayerMock = jest.fn();
   let addSourceMock = jest.fn();
+  let setDataMock = jest.fn();
   let children: any[];
+  let childrenWithOneFeature: any[];
+  let feature: Object;
 
   beforeEach(() => {
     addLayerMock = jest.fn();
     addSourceMock = jest.fn();
+    setDataMock = jest.fn();
+    feature = { coordinates: [-123, 45] };
     children = [{ props: {}}];
+    childrenWithOneFeature = [{ props: feature }];
 
     LayerWithContext = withContext({
       map: React.PropTypes.object
@@ -21,7 +27,7 @@ describe('Layer', () => {
         addSource: addSourceMock,
         addLayer: addLayerMock,
         on: jest.fn(),
-        getSource: jest.fn().mockReturnValue({ setData: jest.fn() })
+        getSource: jest.fn().mockReturnValue({ setData: setDataMock })
       }
     }))(Layer);
   });
@@ -58,4 +64,35 @@ describe('Layer', () => {
     }]);
   });
 
+  it('Should set features based on children', () => {
+    const layer = mount(
+      <LayerWithContext
+        children={childrenWithOneFeature}
+      /> as React.ReactElement<any>
+    );
+
+    expect(setDataMock.mock.calls[0]).toEqual([{
+      'type': 'FeatureCollection',
+      'features': [{
+        'geometry': {...feature, 'type': 'Point'},
+        'properties': {id: 0},
+        'type': 'Feature'
+      }]
+    }])
+  });
+
+  it('Should set features to empty array when children disappear', () => {
+    const layer = mount(
+      <LayerWithContext
+        children={childrenWithOneFeature}
+      /> as React.ReactElement<any>
+    );
+
+    layer.setProps({ children: undefined });
+
+    expect(setDataMock.mock.calls[1]).toEqual([{
+      'type': 'FeatureCollection',
+      'features': []
+    }])
+  });
 });
diff --git a/src/layer.ts b/src/layer.ts
index 4745e14d5..b0fb46266 100644
--- a/src/layer.ts
+++ b/src/layer.ts
@@ -208,20 +208,17 @@ export default class Layer extends React.PureComponent<Props, void> {
 
   public render() {
     const { map } = this.context;
+    const children = ([] as any).concat(this.props.children || []);
 
-    if (this.props.children) {
-      const children = ([] as any).concat(this.props.children);
+    const features = children
+      .map(({ props }: any, id: string) => this.makeFeature(props, id))
+      .filter(Boolean);
 
-      const features = children
-        .map(({ props }: any, id: string) => this.makeFeature(props, id))
-        .filter(Boolean);
-
-      const source = map.getSource(this.props.sourceId || this.id);
-      (source as MapboxGL.GeoJSONSource).setData({
-        type: 'FeatureCollection',
-        features
-      });
-    }
+    const source = map.getSource(this.props.sourceId || this.id);
+    (source as MapboxGL.GeoJSONSource).setData({
+      type: 'FeatureCollection',
+      features
+    });
 
     return null;
   }