Small Refactor

.gitattributes

@@ -0,0 +1 @@
+* text eol=lf

@types/index.d.ts

@@ -19,11 +19,16 @@ declare namespace EntitiesSearch {
 			: PostType<'edit'>[K];
 	}>;
 
-	type Record<V extends any> = Readonly<{
+	type ControlOption<V extends any> = Readonly<{
 		value: V;
 		label: string;
 	}>;
 
+	type ComponentStateAware<V> = {
+		value: V;
+		setValue(value: ComponentStateAware['value']): void;
+	};
+
 	type EntitiesRecords<Entity> = Readonly<{
 		records(): Set<Entity>;
 		isResolving(): boolean;
@@ -35,19 +40,21 @@ declare namespace EntitiesSearch {
 	 * Components
 	 */
 	interface PostTypeSelect<V> {
-		readonly value: Record<V> | null;
-		readonly options: Set<NonNullable<PostTypeSelect<V>['value']>>;
+		readonly value: V | null;
+		readonly options: Set<ControlOption<V>>;
 		readonly onChange: (value: PostTypeSelect<V>['value']) => void;
 	}
 
 	interface PostsSelect<V> {
-		readonly value: Set<Record<V>> | null;
-		readonly options: NonNullable<PostsSelect<V>['value']>;
+		readonly value: Set<V> | null;
+		readonly options: Set<ControlOption<V>>;
 		readonly onChange: (values: PostsSelect<V>['value']) => void;
 	}
 
 	interface PostsController<P, T> {
-		readonly postsComponent: React.ComponentType<ComponentStateAware<P>>;
+		readonly postsComponent: React.ComponentType<
+			ComponentStateAware<Set<P>>
+		>;
 		readonly typesComponent: React.ComponentType<ComponentStateAware<T>>;
 	}
 }

sources/js/src/components/post-type-select.tsx

@@ -1,16 +1,41 @@
 import EntitiesSearch from '@types';
+import { Set } from 'immutable';
 import React, { JSX } from 'react';
-import Select from 'react-select';
+import Select, { SingleValue } from 'react-select';
+
+import { matchOptionValues } from '../utils/match-option-values';
+import { onChangeControlOptionsHandle } from '../utils/on-change-control-options-handle';
 
 export function PostTypeSelect<V>(
 	props: EntitiesSearch.PostTypeSelect<V>
 ): JSX.Element | null {
+	const matchedValues = matchOptionValues(Set([props.value]), props.options);
+
+	const onChange = (values: Set<V> | null) =>
+		props.onChange(values?.first() ?? null);
+
 	return (
 		<Select
 			isMulti={false}
-			value={props.value}
+			value={matchedValues?.first() ?? null}
 			options={props.options.toArray()}
-			onChange={props.onChange}
+			onChange={(options) => {
+				if (isNonNullableValue(options)) {
+					onChange(null);
+					return;
+				}
+
+				onChangeControlOptionsHandle(
+					onChange,
+					Set(options ? [options] : [])
+				);
+			}}
 		/>
 	);
 }
+
+function isNonNullableValue<V>(
+	value: SingleValue<EntitiesSearch.ControlOption<V>>
+): value is NonNullable<EntitiesSearch.ControlOption<V>> {
+	return value !== null && value.value !== null;
+}

sources/js/src/components/posts-post-types-controller.tsx

@@ -4,9 +4,9 @@ import React, { JSX } from 'react';
 
 import { useState } from '@wordpress/element';
 
-export function PostsPostTypesController<P, T>(
+export const PostsPostTypesController = <P, T>(
 	props: EntitiesSearch.PostsController<P, T>
-): JSX.Element {
+): JSX.Element => {
 	const [state, setState] = useState({
 		posts: Set<P>(),
 		types: Set<T>(),
@@ -21,8 +21,8 @@ export function PostsPostTypesController<P, T>(
 
 	const Types = () => (
 		<props.typesComponent
-			value={state.types}
-			setValue={(types) => setState({ ...state, types })}
+			value={state.types.first()}
+			setValue={(type) => setState({ ...state, types: Set([type]) })}
 		/>
 	);
 
@@ -32,4 +32,4 @@ export function PostsPostTypesController<P, T>(
 			<Posts />
 		</>
 	);
-}
+};

sources/js/src/components/posts-select.tsx

@@ -3,19 +3,22 @@ import { Set } from 'immutable';
 import React, { JSX } from 'react';
 import Select from 'react-select';
 
-import { isControlOption } from '../utils/is-control-option';
+import { matchOptionValues } from '../utils/match-option-values';
+import { onChangeControlOptionsHandle } from '../utils/on-change-control-options-handle';
 
 export function PostsSelect<V>(
 	props: EntitiesSearch.PostsSelect<V>
 ): JSX.Element | null {
+	const values = matchOptionValues(props.value, props.options);
+
 	return (
 		<Select
 			isMulti={true}
-			value={props.value?.toArray()}
+			value={values?.toArray() ?? []}
 			options={props.options.toArray()}
-			onChange={(options) => {
-				props.onChange(Set(options.filter(isControlOption)));
-			}}
+			onChange={(options) =>
+				onChangeControlOptionsHandle(props.onChange, Set(options))
+			}
 		/>
 	);
 }

sources/js/src/utils/convert-post-types-to-control-options.ts

@@ -3,7 +3,7 @@ import { Set } from 'immutable';
 
 export function convertPostTypesToControlOptions(
 	postTypes: Set<EntitiesSearch.PostType>
-): Set<EntitiesSearch.Record<EntitiesSearch.PostType['slug']>> {
+): Set<EntitiesSearch.ControlOption<EntitiesSearch.PostType['slug']>> {
 	return postTypes.map((postType) => ({
 		label: postType.name,
 		value: postType.slug,

sources/js/src/utils/is-control-option.ts

@@ -1,8 +1,8 @@
 import EntitiesSearch from '@types';
 
-export function isControlOption(
+export const isControlOption = (
 	value: unknown
-): value is EntitiesSearch.Record<any> {
+): value is EntitiesSearch.ControlOption<any> => {
 	if (!value) {
 		return false;
 	}
@@ -11,4 +11,4 @@ export function isControlOption(
 	}
 
 	return value.hasOwnProperty('label') && value.hasOwnProperty('value');
-}
+};

sources/js/src/utils/match-option-values.ts

@@ -0,0 +1,10 @@
+import EntitiesSearch from '@types';
+import { Set } from 'immutable';
+
+export const matchOptionValues = <V>(
+	value: Set<V> | null,
+	options: Set<EntitiesSearch.ControlOption<V>>
+): Set<EntitiesSearch.ControlOption<V>> | null => {
+	if (!value) return null;
+	return options.filter((option) => value?.has(option.value));
+};

sources/js/src/utils/on-change-control-options-handle.ts

@@ -0,0 +1,19 @@
+import EntitiesSearch from '@types';
+import { Set } from 'immutable';
+
+import { isControlOption } from './is-control-option';
+
+/**
+ * @internal
+ * @param handler
+ * @param options
+ */
+export const onChangeControlOptionsHandle = <V>(
+	handler: (values: Set<V> | null) => void,
+	options: Set<EntitiesSearch.ControlOption<V>> | null
+): void => {
+	if (options === null) return;
+	const controlOptions = Set(options).filter(isControlOption);
+	const values = controlOptions.map((option) => option.value);
+	handler(values.size > 0 ? values : null);
+};

tests/js/unit/components/__snapshots__/posts-post-types-controller.test.tsx.snap

@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Posts Post Types Controller render the given components 1`] = `
+<DocumentFragment>
+  <div>
+    Post Type Component
+  </div>
+  <div>
+    Posts Component
+  </div>
+</DocumentFragment>
+`;

tests/js/unit/components/post-types-select.test.tsx

@@ -18,12 +18,7 @@ jest.mock('react-select', () => (props: ReactSelect) => (
 	<select
 		id="post-type-select"
 		data-testid="post-type-select"
-		onChange={() =>
-			props.onChange({
-				label: faker.random.word(),
-				value: faker.word.noun(),
-			})
-		}
+		onChange={() => props.onChange(faker.word.noun())}
 		className="react-select"
 	>
 		{props.options.map((option: any) => (
@@ -41,18 +36,18 @@ describe('Post Types Select', () => {
 	 */
 	it('call the given onChange handler', (done) => {
 		let expectedCalled: boolean = false;
-		const option: EntitiesSearch.Record<string> = {
+		const option: EntitiesSearch.ControlOption<string> = {
 			label: faker.random.word(),
 			value: faker.word.noun(),
 		};
-		const options = Set<EntitiesSearch.Record<string>>([])
+		const options = Set<EntitiesSearch.ControlOption<string>>([])
 			.add(option)
 			.merge(buildOptions());
 
 		render(
 			<PostTypeSelect
 				options={options}
-				value={option}
+				value={option.value}
 				onChange={() => (expectedCalled = true)}
 			/>
 		);

tests/js/unit/components/posts-post-types-controller.test.tsx

@@ -0,0 +1,120 @@
+import EntitiesSearch from '@types';
+import { Set } from 'immutable';
+import React from 'react';
+
+import { describe, expect, it, jest } from '@jest/globals';
+
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { PostsPostTypesController } from '../../../../sources/js/src/components/posts-post-types-controller';
+
+type State = {
+	posts: Set<string>;
+	types: Set<string>;
+} | null;
+
+let STATE: State = null;
+const dispatch: React.Dispatch<State> = (state: State) => (STATE = state);
+
+jest.mock('@wordpress/element', () => ({
+	useState: jest.fn((initialState: State): [State, React.Dispatch<State>] => {
+		return [STATE ?? initialState, dispatch];
+	}),
+}));
+
+describe('Posts Post Types Controller', () => {
+	it('render the given components', () => {
+		const PostsComponent = () => <div>Posts Component</div>;
+		const PostTypeComponent = () => <div>Post Type Component</div>;
+
+		const { asFragment } = render(
+			<PostsPostTypesController
+				postsComponent={PostsComponent}
+				typesComponent={PostTypeComponent}
+			/>
+		);
+
+		expect(asFragment()).toMatchSnapshot();
+	});
+
+	it('update the state when the posts component is updated', (done) => {
+		const PostTypeComponent = () => null;
+		const PostsSelect = (props: EntitiesSearch.PostsSelect<string>) => (
+			<button
+				data-testid="posts-component"
+				onClick={() => props.onChange(Set(['post-one', 'post-two']))}
+			>
+				Update Component State
+			</button>
+		);
+
+		const PostsComponent = (
+			props: EntitiesSearch.ComponentStateAware<Set<string>>
+		) => {
+			return (
+				<PostsSelect
+					value={props.value}
+					onChange={props.setValue}
+					options={Set([])}
+				/>
+			);
+		};
+
+		render(
+			<PostsPostTypesController
+				postsComponent={PostsComponent}
+				typesComponent={PostTypeComponent}
+			/>
+		);
+
+		const postComponentElement = screen.getByTestId('posts-component');
+		userEvent.click(postComponentElement).then(() => {
+			// @ts-ignore
+			expect(STATE.posts.toArray()).toEqual(['post-one', 'post-two']);
+			done();
+		});
+	});
+
+	it('update the state when the types component is updated', (done) => {
+		const PostsComponent = () => null;
+		const PostTypeSelect = (
+			props: EntitiesSearch.PostTypeSelect<string>
+		) => (
+			<button
+				data-testid="post-type-component"
+				onClick={() => props.onChange('post-type')}
+			>
+				Update Component State
+			</button>
+		);
+
+		const PostTypeComponent = (
+			props: EntitiesSearch.ComponentStateAware<string>
+		) => {
+			return (
+				<PostTypeSelect
+					value={props.value}
+					onChange={props.setValue}
+					options={Set([])}
+				/>
+			);
+		};
+
+		render(
+			<PostsPostTypesController
+				postsComponent={PostsComponent}
+				typesComponent={PostTypeComponent}
+			/>
+		);
+
+		const postTypeComponentElement = screen.getByTestId(
+			'post-type-component'
+		);
+		userEvent.click(postTypeComponentElement).then(() => {
+			// @ts-ignore
+			expect(STATE.types.toArray()).toEqual(['post-type']);
+			done();
+		});
+	});
+});