Fix react-table

components/aggregation/mat/Filters.js

@@ -1,9 +1,10 @@
-import React, { useCallback, useEffect, useMemo, useRef } from 'react'
-import { useTable, useFlexLayout, useRowSelect, useSortBy, useGlobalFilter, useAsyncDebounce } from 'react-table'
+import { Box, Button, Flex, Text } from 'ooni-components'
+import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { FormattedMessage, useIntl } from 'react-intl'
+import { useAsyncDebounce, useFlexLayout, useGlobalFilter, useRowSelect, useSortBy, useTable } from 'react-table'
 import { useVirtual } from 'react-virtual'
+import 'regenerator-runtime'
 import styled from 'styled-components'
-import { Flex, Box, Button, Text } from 'ooni-components'
 
 import { DetailsBox } from '../../measurement/DetailsBox'
 import { sortRows } from './computations'
@@ -53,12 +54,12 @@ const TableBody = styled.div`
   overflow: auto;
 `
 
-const IndeterminateCheckbox = React.forwardRef(
+const IndeterminateCheckbox = forwardRef(
   ({ indeterminate, ...rest }, ref) => {
-    const defaultRef = React.useRef()
+    const defaultRef = useRef()
     const resolvedRef = ref || defaultRef
 
-    React.useEffect(() => {
+    useEffect(() => {
       resolvedRef.current.indeterminate = indeterminate
     }, [resolvedRef, indeterminate])
 
@@ -104,7 +105,7 @@ function GlobalFilter({
 }) {
   const intl = useIntl()
   const count = preGlobalFilteredRows.length
-  const [value, setValue] = React.useState(globalFilter)
+  const [value, setValue] = useState(globalFilter)
   const onChange = useAsyncDebounce(value => {
     setGlobalFilter(value || '')
   }, 200)
@@ -150,7 +151,7 @@ const Filters = ({ data = [], tableData, setDataForCharts, query }) => {
   const resetTableRef = useRef(false)
   const yAxis = query.axis_y
 
-  const defaultColumn = React.useMemo(
+  const defaultColumn = useMemo(
     () => ({
       // When using the useFlexLayout:
       width: 70, // width is used for both the flex-basis and flex-grow
@@ -164,12 +165,12 @@ const Filters = ({ data = [], tableData, setDataForCharts, query }) => {
   )
 
   // Aggregate by the first column
-  const initialState = React.useMemo(() => ({
+  const initialState = useMemo(() => ({
     hiddenColumns: ['yAxisCode'],
     sortBy: [{ id: 'yAxisLabel', desc: false }]
   }),[])
 
-  const getRowId = React.useCallback(row => row[query.axis_y], [query.axis_y])
+  const getRowId = useCallback(row => row[query.axis_y], [query.axis_y])
 
   const columns = useMemo(() => [
     {
@@ -320,13 +321,13 @@ const Filters = ({ data = [], tableData, setDataForCharts, query }) => {
     }
   }, [state.globalFilter, toggleAllRowsSelected])
 
-  const parentRef = React.useRef()
+  const parentRef = useRef()
 
   const { virtualItems: virtualRows, totalSize } = useVirtual({
     size: rows.length,
     parentRef,
     overscan: 10,
-    estimateSize: React.useCallback(() => 35, []),
+    estimateSize: useCallback(() => 35, []),
   })
 
   return (

package.json

@@ -48,6 +48,7 @@
     "react-virtual": "^2.10.4",
     "react-virtualized": "^9.22.5",
     "react-window": "^1.8.10",
+    "regenerator-runtime": "^0.14.1",
     "styled-components": "^6.1.8",
     "swr": "^2.2.4",
     "use-clipboard-copy": "^0.2.0",

yarn.lock

@@ -6327,7 +6327,7 @@ regenerate@^1.4.2:
   resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.2.tgz#b9346d8827e8f5a32f7ba29637d398b69014848a"
   integrity sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==
 
-regenerator-runtime@^0.14.0:
+regenerator-runtime@^0.14.0, regenerator-runtime@^0.14.1:
   version "0.14.1"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz#356ade10263f685dda125100cd862c1db895327f"
   integrity sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==