CT/src/View/Components/propertyValueList.tsx

import * as React from "bloatless-react";

import {
    StringEntryObject,
    collectObjectValuesForKey,
    localeCompare,
} from "../../Model/Utility/utility";

export function PropertyValueList<T>(
    propertyKey: string,
    stringEntryObjectConverter: (object: T) => StringEntryObject,
    objects: React.ListState<T> | React.MapState<T>,
    viewBuilder: (
        keys: React.ListState<string>,
        sortedKeys: React.State<string[]>,
    ) => HTMLElement,
) {
    const propertyValues: React.ListState<string> = new React.ListState();
    const sortedPropertyValues: React.State<string[]> =
        createSortedPropertyValueState(propertyValues);
    objects.subscribe(() => {
        collectPropertyValuesToState(
            propertyKey,
            stringEntryObjectConverter,
            objects,
            propertyValues,
        );
    });

    return viewBuilder(propertyValues, sortedPropertyValues);
}

export function collectPropertyValuesToState<T>(
    propertyKey: string,
    stringEntryObjectConverter: (object: T) => StringEntryObject,
    objects: React.ListState<T> | React.MapState<T>,
    propertyValues: React.ListState<string>,
) {
    const values: string[] = collectObjectValuesForKey(
        propertyKey,
        stringEntryObjectConverter,
        [...objects.value.values()],
    );
    for (const existingValue of values) {
        if (propertyValues.value.has(existingValue)) continue;
        propertyValues.add(existingValue);
    }

    for (const displayedValue of propertyValues.value.values()) {
        if (values.includes(displayedValue) == false) {
            propertyValues.remove(displayedValue);
        }
    }
}

export function createSortedPropertyValueState(
    propertyValues: React.ListState<string>,
): React.State<string[]> {
    return React.createProxyState([propertyValues], () =>
        [...propertyValues.value.values()].sort(localeCompare),
    );
}

export function createPropertyValueIndexState(
    sortedKeys: React.State<string[]>,
    key: string,
): React.State<number> {
    return React.createProxyState([sortedKeys], () =>
        sortedKeys.value.indexOf(key),
    );
}