Refactor Indexer index to use react-window

(cherry picked from commit d022679b7dcbce3cec98e6a1fd0879e3c0d92523)

frontend/src/App/AppRoutes.js

@@ -4,7 +4,7 @@ import { Redirect, Route } from 'react-router-dom';
 import NotFound from 'Components/NotFound';
 import Switch from 'Components/Router/Switch';
 import HistoryConnector from 'History/HistoryConnector';
-import IndexerIndexConnector from 'Indexer/Index/IndexerIndexConnector';
+import IndexerIndex from 'Indexer/Index/IndexerIndex';
 import StatsConnector from 'Indexer/Stats/StatsConnector';
 import SearchIndexConnector from 'Search/SearchIndexConnector';
 import ApplicationSettingsConnector from 'Settings/Applications/ApplicationSettingsConnector';
@@ -38,7 +38,7 @@ function AppRoutes(props) {
       <Route
         exact={true}
         path="/"
-        component={IndexerIndexConnector}
+        component={IndexerIndex}
       />
 
       {

frontend/src/App/AppUpdatedModalContent.css.d.ts

@@ -0,0 +1,9 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'changes': string;
+  'maintenance': string;
+  'version': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/App/ConnectionLostModal.css.d.ts

@@ -0,0 +1,7 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'automatic': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/App/ModelBase.ts

@@ -0,0 +1,5 @@
+interface ModelBase {
+  id: number;
+}
+
+export default ModelBase;

frontend/src/App/SelectContext.tsx

@@ -0,0 +1,163 @@
+import { cloneDeep } from 'lodash';
+import React, { useEffect } from 'react';
+import areAllSelected from 'Utilities/Table/areAllSelected';
+import selectAll from 'Utilities/Table/selectAll';
+import toggleSelected from 'Utilities/Table/toggleSelected';
+import ModelBase from './ModelBase';
+
+export enum SelectActionType {
+  Reset,
+  SelectAll,
+  UnselectAll,
+  ToggleSelected,
+  RemoveItem,
+  UpdateItems,
+}
+
+type SelectedState = Record<number, boolean>;
+
+interface SelectState {
+  selectedState: SelectedState;
+  lastToggled: number | null;
+  allSelected: boolean;
+  allUnselected: boolean;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  items: any[];
+}
+
+type SelectAction =
+  | { type: SelectActionType.Reset }
+  | { type: SelectActionType.SelectAll }
+  | { type: SelectActionType.UnselectAll }
+  | {
+      type: SelectActionType.ToggleSelected;
+      id: number;
+      isSelected: boolean;
+      shiftKey: boolean;
+    }
+  | {
+      type: SelectActionType.RemoveItem;
+      id: number;
+    }
+  | {
+      type: SelectActionType.UpdateItems;
+      items: ModelBase[];
+    };
+
+type Dispatch = (action: SelectAction) => void;
+
+const initialState = {
+  selectedState: {},
+  lastToggled: null,
+  allSelected: false,
+  allUnselected: true,
+  items: [],
+};
+
+interface SelectProviderOptions<T extends ModelBase> {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  children: any;
+  items: Array<T>;
+}
+
+function getSelectedState(items: ModelBase[], existingState: SelectedState) {
+  return items.reduce((acc: SelectedState, item) => {
+    const id = item.id;
+
+    acc[id] = existingState[id] ?? false;
+
+    return acc;
+  }, {});
+}
+
+// TODO: Can this be reused?
+
+const SelectContext = React.createContext<[SelectState, Dispatch] | undefined>(
+  cloneDeep(undefined)
+);
+
+function selectReducer(state: SelectState, action: SelectAction): SelectState {
+  const { items, selectedState } = state;
+
+  switch (action.type) {
+    case SelectActionType.Reset: {
+      return cloneDeep(initialState);
+    }
+    case SelectActionType.SelectAll: {
+      return {
+        items,
+        ...selectAll(selectedState, true),
+      };
+    }
+    case SelectActionType.UnselectAll: {
+      return {
+        items,
+        ...selectAll(selectedState, false),
+      };
+    }
+    case SelectActionType.ToggleSelected: {
+      const result = {
+        items,
+        ...toggleSelected(
+          state,
+          items,
+          action.id,
+          action.isSelected,
+          action.shiftKey
+        ),
+      };
+
+      return result;
+    }
+    case SelectActionType.UpdateItems: {
+      const nextSelectedState = getSelectedState(action.items, selectedState);
+
+      return {
+        ...state,
+        ...areAllSelected(nextSelectedState),
+        selectedState: nextSelectedState,
+        items: action.items,
+      };
+    }
+    default: {
+      throw new Error(`Unhandled action type: ${action.type}`);
+    }
+  }
+}
+
+export function SelectProvider<T extends ModelBase>(
+  props: SelectProviderOptions<T>
+) {
+  const { items } = props;
+  const selectedState = getSelectedState(items, {});
+
+  const [state, dispatch] = React.useReducer(selectReducer, {
+    selectedState,
+    lastToggled: null,
+    allSelected: false,
+    allUnselected: true,
+    items,
+  });
+
+  const value: [SelectState, Dispatch] = [state, dispatch];
+
+  useEffect(() => {
+    dispatch({ type: SelectActionType.UpdateItems, items });
+  }, [items]);
+
+  return (
+    <SelectContext.Provider value={value}>
+      {props.children}
+    </SelectContext.Provider>
+  );
+}
+
+export function useSelect() {
+  const context = React.useContext(SelectContext);
+
+  if (context === undefined) {
+    throw new Error('useSelect must be used within a SelectProvider');
+  }
+
+  return context;
+}