upgrade packages + improve typing

webclient/src/components/VirtualList/VirtualList.tsx

@@ -1,34 +1,29 @@
 // eslint-disable-next-line
 import React from "react";
 
-import { FixedSizeList as List } from 'react-window';
-import AutoSizer from 'react-virtualized-auto-sizer';
+import { List, RowComponentProps } from 'react-window';
 
 import './VirtualList.css';
 
-const VirtualList = ({ items, itemKey, className = {}, size = 30 }) => (
-  <div className="virtual-list">
-    <AutoSizer>
-      {({ height, width }) => (
-        <List
-          className={`virtual-list__list ${className}`}
-          height={height}
-          width={width}
-          itemData={items}
-          itemCount={items.length}
-          itemSize={size}
-          itemKey={itemKey}
-        >
-          {Row}
-        </List>
-      )}
-    </AutoSizer>
+interface RowData {
+  items: any[];
+}
+
+const Row = ({ index, style, items }: RowComponentProps<RowData>) => (
+  <div style={style}>
+    {items[index]}
   </div>
 );
 
-const Row = ({ data, index, style }) => (
-  <div style={style}>
-    {data[index]}
+const VirtualList = ({ items, className = {}, size = 30 }) => (
+  <div className="virtual-list">
+    <List<RowData>
+      className={`virtual-list__list ${className}`}
+      rowCount={items.length}
+      rowHeight={size}
+      rowComponent={Row}
+      rowProps={{ items }}
+    />
   </div>
 );