prepare PropertyValueList and FilteredList

src/View/Components/filteredList.tsx

@@ -0,0 +1,30 @@
+import * as React from "bloatless-react";
+
+import {
+  StringEntryObject,
+  checkDoesObjectMatchReference,
+} from "../../Model/Utility/utility";
+
+export function FilteredList<T>(
+  reference: StringEntryObject,
+  stringEntryObjectConverter: (object: T) => StringEntryObject,
+  objects: React.ListState<T> | React.MapState<T>,
+  viewBuilder: (matchingObjects: React.ListState<T>) => HTMLElement
+) {
+  const matchingObjects: React.ListState<T> = new React.ListState();
+
+  objects.handleAddition((newObject) => {
+    const doesMatch: boolean = checkDoesObjectMatchReference(
+      reference,
+      stringEntryObjectConverter(newObject)
+    );
+    if (doesMatch == false) return;
+
+    matchingObjects.add(newObject);
+    objects.handleRemoval(newObject, () => {
+      matchingObjects.remove(newObject);
+    });
+  });
+
+  return viewBuilder(matchingObjects);
+}

src/View/Components/propertyList.tsx

@@ -0,0 +1,31 @@
+import * as React from "bloatless-react";
+
+import {
+  StringEntryObject,
+  collectObjectValuesForKey,
+} from "../../Model/Utility/utility";
+
+export function PropertyValueList<T>(
+  propertyKey: string,
+  stringEntryObjectConverter: (object: T) => StringEntryObject,
+  objects: React.ListState<T> | React.MapState<T>,
+  viewBuilder: (categories: React.ListState<string>) => HTMLElement
+) {
+  const propertyValues: React.ListState<string> = new React.ListState();
+
+  function collectValues() {
+    propertyValues.clear();
+    const values: string[] = collectObjectValuesForKey(
+      propertyKey,
+      stringEntryObjectConverter,
+      [...objects.value.values()]
+    );
+    propertyValues.add(...values);
+  }
+
+  objects.subscribe(() => {
+    collectValues();
+  });
+
+  return viewBuilder(propertyValues);
+}