Plural Kind support

Author: widoz

@types/index.d.ts

@@ -24,6 +24,21 @@ declare namespace EntitiesSearch {
 		label: string;
 	}>;
 
+	type SingularControl<V> = {
+		[K in keyof BaseControl<V>]: K extends 'value'
+			? V
+			: K extends 'onChange'
+			? (value: V) => void
+			: BaseControl<V>[K];
+	};
+
+	interface BaseControl<V>
+		extends Readonly<{
+			value: OrderedSet<V>;
+			options: OrderedSet<ControlOption<V>>;
+			onChange(values: BaseControl<V>['value']): void;
+		}> {}
+
 	/*
 	 * Hooks
 	 */
@@ -60,8 +75,8 @@ declare namespace EntitiesSearch {
 	 * Storage
 	 */
 	type EntitiesState<CO> = Readonly<{
-		contexualEntitiesOptions: OrderedSet<EntitiesSearch.ControlOption<CO>>;
-		entitiesOptions: EntitiesState<CO>['contexualEntitiesOptions'];
+		contextualEntitiesOptions: OrderedSet<EntitiesSearch.ControlOption<CO>>;
+		entitiesOptions: EntitiesState<CO>['contextualEntitiesOptions'];
 		selectedEntitiesOptions: EntitiesState<CO>['entitiesOptions'];
 	}>;
 
@@ -72,7 +87,7 @@ declare namespace EntitiesSearch {
 		  }
 		| {
 				type: 'UPDATE_CONTEXTUAL_ENTITIES_OPTIONS';
-				contextualEntitiesOptions: EntitiesState<V>['contexualEntitiesOptions'];
+				contextualEntitiesOptions: EntitiesState<V>['contextualEntitiesOptions'];
 		  }
 		| {
 				type: 'UPDATE_SELECTED_ENTITIES_OPTIONS';
@@ -82,43 +97,27 @@ declare namespace EntitiesSearch {
 	/*
 	 * Components
 	 */
-	interface KindControl<V>
-		extends Readonly<{
-			value: V;
-			options: OrderedSet<ControlOption<V>>;
-			className?: string;
-			onChange(value: KindControl<V>['value']): void;
-		}> {}
-
-	interface EntitiesControl<V>
-		extends Readonly<{
-			value?: OrderedSet<V> | undefined;
-			options: OrderedSet<ControlOption<V>>;
-			className?: string;
-			onChange(values: EntitiesControl<V>['value']): void;
-		}> {}
-
 	interface SearchControl
 		extends Readonly<{
 			id?: string;
 			onChange(phrase: string | React.ChangeEvent<HTMLInputElement>);
 		}> {}
 
-	interface CompositeEntitiesKinds<P, T>
+	interface CompositeEntitiesKinds<E, K>
 		extends Readonly<{
-			kind: KindControl<T>;
-			entities: Omit<EntitiesControl<P>, 'options'>;
+			kind: BaseControl<K>;
+			entities: Omit<BaseControl<E>, 'options'>;
 			searchEntities: (
 				phrase: string,
-				kind: KindControl<T>['value'],
+				kind: BaseControl<K>['value'],
 				queryArguments?: Record<string, unknown>
-			) => Promise<EntitiesControl<P>['options']>;
+			) => Promise<BaseControl<E>['options']>;
 			children(
-				entities: EntitiesControl<P>,
-				kind: CompositeEntitiesKinds<P, T>['kind'],
+				entities: BaseControl<E>,
+				kind: CompositeEntitiesKinds<E, K>['kind'],
 				search: (
-					phrase: Parameters<SearchControl<P, T>['search']>[0]
-				) => ReturnType<SearchControl<P, T>['search']>
+					phrase: Parameters<SearchControl<E, K>['search']>[0]
+				) => ReturnType<SearchControl<E, K>['search']>
 			): React.ReactNode;
 		}> {}
 }

sources/js/src/api/search-entities.ts

@@ -7,8 +7,8 @@ import { fetch } from './fetch';
 // TODO Write the underline search function.
 // TODO Make the `queryArguments` optional.
 export async function searchEntities<E>(
-	kindName: string,
-	entityName: string,
+	type: string,
+	subtype: OrderedSet<string>,
 	phrase: string,
 	queryArguments: {
 		exclude: Set<string>;
@@ -34,9 +34,9 @@ export async function searchEntities<E>(
 			include: include?.toArray() ?? [],
 			...restArguments,
 		},
-		type: kindName,
+		type: type,
 		search: phrase,
-		subtype: entityName,
+		subtype: subtype.toArray(),
 		_fields: serializeFields(fields),
 	});
 

sources/js/src/components/composite-entities-by-kind.tsx

@@ -7,24 +7,26 @@ import { orderSelectedOptionsAtTheTop } from '../utils/order-selected-options-at
 import { uniqueControlOptions } from '../utils/unique-control-options';
 
 type SearchPhrase = Parameters<EntitiesSearch.SearchControl['onChange']>[0];
-type Entities<V> = EntitiesSearch.EntitiesControl<V>['value'];
+type Entities<V> = EntitiesSearch.BaseControl<V>['value'];
+type Kind<V> = EntitiesSearch.BaseControl<V>['value'];
 type SearchEntities<P, T> = EntitiesSearch.CompositeEntitiesKinds<
 	P,
 	T
 >['searchEntities'];
 
-export function CompositeEntitiesByKind<P, T>(
-	props: EntitiesSearch.CompositeEntitiesKinds<P, T>
+export function CompositeEntitiesByKind<E, K>(
+	props: EntitiesSearch.CompositeEntitiesKinds<E, K>
 ): JSX.Element {
-	const { state, dispatch } = useEntitiesOptionsStorage<P>();
+	// TODO Move the local state into the reducer. Let's see if it is possible.
+	const { state, dispatch } = useEntitiesOptionsStorage<E>();
 	const [searchPhrase, setSearchPhrase] = useState('');
 	const [entitiesAndKind, setEntitiesAndKind] = useState({
-		entities: props.entities.value ?? OrderedSet([]),
+		entities: props.entities.value,
 		kind: props.kind.value,
 	});
 
 	useEffect(() => {
-		const promises = Set<ReturnType<SearchEntities<P, T>>>().asMutable();
+		const promises = Set<ReturnType<SearchEntities<E, K>>>().asMutable();
 
 		promises.add(
 			props.searchEntities('', entitiesAndKind.kind, {
@@ -65,7 +67,7 @@ export function CompositeEntitiesByKind<P, T>(
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, []);
 
-	const onChangeEntities = (entities: Entities<P>) => {
+	const onChangeEntities = (entities: Entities<E>) => {
 		// TODO It is the state still necessary having the reducer?
 		setEntitiesAndKind({
 			...entitiesAndKind,
@@ -80,12 +82,12 @@ export function CompositeEntitiesByKind<P, T>(
 			});
 			dispatch({
 				type: 'UPDATE_ENTITIES_OPTIONS',
-				entitiesOptions: state.contexualEntitiesOptions,
+				entitiesOptions: state.contextualEntitiesOptions,
 			});
 			return;
 		}
 
-		const promises = Set<ReturnType<SearchEntities<P, T>>>([
+		const promises = Set<ReturnType<SearchEntities<E, K>>>([
 			props.searchEntities(searchPhrase, entitiesAndKind.kind, {
 				exclude: entities,
 			}),
@@ -116,14 +118,29 @@ export function CompositeEntitiesByKind<P, T>(
 			});
 	};
 
-	const onChangeKind = (kind: T) => {
+	const onChangeKind = (kind: Kind<K> | K) => {
+		const _kind =
+			kind instanceof OrderedSet ? kind : OrderedSet<K>([kind as K]);
+
 		const entities = OrderedSet([]);
-		setEntitiesAndKind({ kind, entities });
-		props.kind.onChange(kind);
+		setEntitiesAndKind({ kind: _kind, entities });
+		props.kind.onChange(_kind);
 		props.entities.onChange(entities);
 
+		if (_kind.size <= 0) {
+			dispatch({
+				type: 'UPDATE_SELECTED_ENTITIES_OPTIONS',
+				selectedEntitiesOptions: entities,
+			});
+			dispatch({
+				type: 'UPDATE_ENTITIES_OPTIONS',
+				entitiesOptions: entities,
+			});
+			return;
+		}
+
 		props
-			.searchEntities('', kind, {
+			.searchEntities('', _kind, {
 				exclude: entitiesAndKind.entities,
 			})
 			.then((result) => {
@@ -147,10 +164,10 @@ export function CompositeEntitiesByKind<P, T>(
 			});
 	};
 
-	const entities: EntitiesSearch.EntitiesControl<P> = {
+	const entities: EntitiesSearch.BaseControl<E> = {
 		...props.entities,
 		value: entitiesAndKind.entities,
-		options: orderSelectedOptionsAtTheTop<P>(
+		options: orderSelectedOptionsAtTheTop<E>(
 			uniqueControlOptions(
 				state.selectedEntitiesOptions.merge(state.entitiesOptions)
 			),
@@ -159,7 +176,7 @@ export function CompositeEntitiesByKind<P, T>(
 		onChange: onChangeEntities,
 	};
 
-	const kind: EntitiesSearch.KindControl<T> = {
+	const kind: EntitiesSearch.BaseControl<K> = {
 		...props.kind,
 		value: entitiesAndKind.kind,
 		onChange: onChangeKind,
@@ -174,7 +191,7 @@ export function CompositeEntitiesByKind<P, T>(
 		if (_phrase === '') {
 			dispatch({
 				type: 'UPDATE_ENTITIES_OPTIONS',
-				entitiesOptions: state.contexualEntitiesOptions,
+				entitiesOptions: state.contextualEntitiesOptions,
 			});
 			return;
 		}

sources/js/src/components/entities-select-control.tsx renamed to sources/js/src/components/plural-select-control.tsx

@@ -5,10 +5,10 @@ import React, { JSX } from 'react';
 
 import { NoOptionsMessage } from './no-options-message';
 
-// TODO Must accept string or number? because the value might be the ID of the posts.
-// TODO Add className property to the other related components
-export function EntitiesSelectControl(
-	props: EntitiesSearch.EntitiesControl<string>
+export function PluralSelectControl(
+	props: EntitiesSearch.BaseControl<string> & {
+		className?: string;
+	}
 ): JSX.Element {
 	const className = classnames(
 		props.className,

sources/js/src/components/kind-radio-control.tsx renamed to sources/js/src/components/radio-control.tsx

@@ -2,8 +2,8 @@ import EntitiesSearch from '@types';
 import classnames from 'classnames';
 import React, { JSX } from 'react';
 
-export function KindRadioControl(
-	props: EntitiesSearch.KindControl<string>
+export function RadioControl(
+	props: EntitiesSearch.SingularControl<string> & { className?: string }
 ): JSX.Element {
 	const className = classnames(
 		props.className,

sources/js/src/components/kind-select-control.tsx renamed to sources/js/src/components/singular-select-control.tsx

@@ -2,19 +2,27 @@ import EntitiesSearch from '@types';
 import classnames from 'classnames';
 import React, { JSX } from 'react';
 
-export function KindSelectControl(
-	props: EntitiesSearch.KindControl<string>
+import { NoOptionsMessage } from './no-options-message';
+
+export function SingularSelectControl(
+	props: EntitiesSearch.SingularControl<string> & {
+		className?: string;
+	}
 ): JSX.Element {
 	const className = classnames(
 		props.className,
 		'wz-select-control',
-		'wz-select-control--kind'
+		'wz-select-control--entities'
 	);
 
+	if (props.options.size <= 0) {
+		return <NoOptionsMessage />;
+	}
+
 	return (
 		<select
 			className={className}
-			value={props.value}
+			value={props?.value}
 			onChange={(event) => props.onChange(event.target.value)}
 		>
 			{props.options.map((option) => (

sources/js/src/components/entities-toggle-control.tsx renamed to sources/js/src/components/toggle-control.tsx

@@ -1,11 +1,12 @@
 import EntitiesSearch from '@types';
 import classnames from 'classnames';
+import { OrderedSet } from 'immutable';
 import React, { JSX } from 'react';
 
 import { NoOptionsMessage } from './no-options-message';
 
-export function EntitiesToggleControl(
-	props: EntitiesSearch.EntitiesControl<string>
+export function ToggleControl(
+	props: EntitiesSearch.BaseControl<string> & { className?: string }
 ): JSX.Element {
 	const className = classnames(
 		props.className,
@@ -21,11 +22,16 @@ export function EntitiesToggleControl(
 		const { target } = event;
 
 		if (target.checked && !props.value?.has(target.value)) {
-			props.onChange(props.value?.add(target.value));
+			props.onChange(
+				OrderedSet(props.value?.add(target.value).toArray() ?? [])
+			);
 			return;
 		}
 
-		props.onChange(props.value?.delete(target.value));
+		// TODO Stop handling `undefined`.
+		props.onChange(
+			OrderedSet(props.value?.delete(target.value).toArray() ?? [])
+		);
 	};
 
 	return (

sources/js/src/index.ts

@@ -1,15 +1,15 @@
+export * from './api/fetch';
+export * from './api/search-entities';
+
 export * from './components/composite-entities-by-kind';
-export * from './components/kind-select-control';
-export * from './components/kind-radio-control';
-export * from './components/entities-select-control';
-export * from './components/entities-toggle-control';
+export * from './components/plural-select-control';
+export * from './components/radio-control';
 export * from './components/search-control';
+export * from './components/singular-select-control';
+export * from './components/toggle-control';
 
 export * from './hooks/use-entity-records';
 export * from './hooks/use-query-viewable-post-types';
 export * from './hooks/use-query-viewable-taxonomies';
 
 export * from './utils/convert-entities-to-control-options';
-
-export * from './api/fetch';
-export * from './api/search-entities';

sources/js/src/storage/entities/initial-state.ts

@@ -5,7 +5,7 @@ type Options<V> = EntitiesSearch.ControlOption<V>;
 
 export function makeInitialState<V>(): EntitiesSearch.EntitiesState<V> {
 	return {
-		contexualEntitiesOptions: OrderedSet<Options<V>>([]),
+		contextualEntitiesOptions: OrderedSet<Options<V>>([]),
 		entitiesOptions: OrderedSet<Options<V>>([]),
 		selectedEntitiesOptions: OrderedSet<Options<V>>([]),
 	};

sources/js/src/storage/entities/reducer.ts

@@ -8,7 +8,7 @@ export function reducer<P>(
 		case 'UPDATE_CONTEXTUAL_ENTITIES_OPTIONS':
 			return {
 				...state,
-				contexualEntitiesOptions: action.contextualEntitiesOptions,
+				contextualEntitiesOptions: action.contextualEntitiesOptions,
 			};
 
 		case 'UPDATE_ENTITIES_OPTIONS':