Update SelectedAreaTable amounts after removing results

src/Admin.tsx

@@ -1,4 +1,4 @@
-import React, { useState, RefObject } from 'react';
+import React, { useState, RefObject, useEffect, useCallback } from 'react';
 import { Container, Badge, FormGroup, Label, Input, Button, Collapse, Table, ListGroup, ListGroupItem } from 'reactstrap';
 import Paper, { Path, PaperScope, Point, Raster, Color } from 'paper';
 import { without, append, isNil, identity, includes, is, descend, prop, sort, take, contains } from 'ramda';
@@ -625,57 +625,66 @@ type SelectedAreaTotals = {
 }
 
 const SelectedAreaTable: React.FunctionComponent<{items: paper.Item[]}> = ({ items }) => {
-  const init = {
-    age: {
-      '1': 0,
-      '2': 0,
-      '3': 0,
-      '4': 0,
-      '5': 0,
-      '6': 0
-    },
-    gender: {
-      'female': 0,
-      'male': 0,
-      'other': 0
-    },
-    levelEducation: {
-      '1': 0,
-      '2': 0,
-      '3': 0,
-      '4': 0
-    }
-  };
-  let ids: number[] = [];
-  const [totals] = useState<SelectedAreaTotals>(items.reduce((totals, item) => {
-    const data = item.data as ShapeData;
-    const lvlEd = data.levelEducation ? data.levelEducation.reduce((tot, lvl) => {
-      return {
-        ...tot,
-        [lvl]: totals.levelEducation[lvl] + 1
+  const mkTotals = useCallback((items: paper.Item[]) => {
+    const init = {
+      age: {
+        '1': 0,
+        '2': 0,
+        '3': 0,
+        '4': 0,
+        '5': 0,
+        '6': 0
+      },
+      gender: {
+        'female': 0,
+        'male': 0,
+        'other': 0
+      },
+      levelEducation: {
+        '1': 0,
+        '2': 0,
+        '3': 0,
+        '4': 0
       }
-    }, {}) : {};
-    if (contains(data.id, ids)) {
-      return totals;
-    } else {
-      ids.push(data.id);
-      return {
-        age: {
-          ...totals.age,
-          [data.age]: totals.age[data.age] + 1
-        },
-        gender: {
-          ...totals.gender,
-          [data.gender]: totals.gender[data.gender] + 1
-        },
-        levelEducation: {
-          ...totals.levelEducation,
-          ...lvlEd
+    };
+    let uniq: number[] = [];
+    return items.reduce((totals, item) => {
+      const data = item.data as ShapeData;
+      const lvlEd = data.levelEducation ? data.levelEducation.reduce((tot, lvl) => {
+        return {
+          ...tot,
+          [lvl]: totals.levelEducation[lvl] + 1
+        }
+      }, {}) : {};
+      if (contains(data.id, uniq)) {
+        return totals;
+      } else {
+        uniq.push(data.id);
+        return {
+          age: {
+            ...totals.age,
+            [data.age]: totals.age[data.age] + 1
+          },
+          gender: {
+            ...totals.gender,
+            [data.gender]: totals.gender[data.gender] + 1
+          },
+          levelEducation: {
+            ...totals.levelEducation,
+            ...lvlEd
+          }
         }
       }
-    }
-  }, { ...init }) || init)
+    }, { ...init })
+  }, [])
+
+  const [totals, updateTotals] = useState<SelectedAreaTotals>(mkTotals(items))
+
+  useEffect(() => {
+    updateTotals(mkTotals(items))
+  }, [mkTotals, items])
 
+  
   return (
     <>
       <h6>Age</h6>