Refactor Indexer index to use react-window

(cherry picked from commit d022679b7dcbce3cec98e6a1fd0879e3c0d92523)

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;
+}