add initial version of UI

Author: fabiankaegy

assets/js/components/relationship-manager.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import { FormTokenField } from '@wordpress/components';
+import { PluginDocumentSettingPanel } from '@wordpress/edit-post';
+import { useSelect, useDispatch, select } from '@wordpress/data';
+import { useEffect, useState, useCallback } from '@wordpress/element';
+import { store as coreStore, Post } from '@wordpress/core-data';
+import { store } from '../store';
+import { ContentConnectRelationship } from '../store/types';
+import { decodeEntities } from '@wordpress/html-entities';
+import apiFetch from '@wordpress/api-fetch';
+import { addQueryArgs } from '@wordpress/url';
+
+type RelationshipManagerProps = {
+	postId: number | null;
+	relationship: ContentConnectRelationship;
+};
+
+export function RelationshipManager({ postId, relationship }: RelationshipManagerProps) {
+	const { updateRelatedPosts } = useDispatch(store);
+	const [suggestions, setSuggestions] = useState<string[]>([]);
+	const [searchTerm, setSearchTerm] = useState('');
+	const [currentSearch, setCurrentSearch] = useState('');
+
+	const { relatedPosts, searchResults } = useSelect((select) => ({
+		relatedPosts: select(store).getRelatedPosts(postId, {
+			rel_key: relationship.rel_key,
+		}),
+		searchResults: searchTerm ? select(coreStore).getEntityRecords<Post>(
+			'postType',
+			relationship.post_type[0],
+			{
+				search: searchTerm,
+				per_page: 20,
+				orderby: 'title',
+				order: 'asc',
+			}
+		) : [],
+	}), [postId, relationship.rel_key, relationship.post_type, searchTerm]);
+
+	async function getPostByTitle(title: string) {
+		const result = await apiFetch<{ id: number }[]>({
+			path: addQueryArgs(`/wp/v2/${relationship.post_type[0]}`, {
+				search: title,
+				per_page: 1,
+				_fields: 'id',
+			}),
+		});
+		return result[0]?.id ?? undefined;
+	}
+
+	// Convert related posts to token format
+	const tokens = relatedPosts.map((post) => post.name);
+
+	// Update suggestions based on search
+	useEffect(() => {
+		if (!searchResults) {
+			setSuggestions([]);
+			return;
+		}
+
+		const newSuggestions = searchResults
+			.filter((post) => !relatedPosts.find((related) => related.ID === post.id))
+			.map((post) => decodeEntities(post.title.rendered));
+
+		setSuggestions(newSuggestions);
+	}, [searchResults, relatedPosts]);
+
+	const handleChange = async (newTokens: any[]) => {
+		const newRelatedIds = await Promise.all(
+			newTokens.map(async (token) => {
+				const tokenValue = typeof token === 'string' ? token : token.value;
+				return getPostByTitle(tokenValue);
+			})
+		);
+
+		updateRelatedPosts(postId, relationship.rel_key, newRelatedIds.filter((id): id is number => id !== undefined));
+	};
+
+	return (
+		<PluginDocumentSettingPanel
+			name={`content-connect-relationship-${relationship.rel_key}`}
+			title={relationship.labels.name}
+		>
+			<FormTokenField
+				value={tokens}
+				suggestions={suggestions}
+				onChange={handleChange}
+				onInputChange={(input) => setSearchTerm(input)}
+				label={relationship.labels.name}
+				__next40pxDefaultSize={true}
+				__experimentalShowHowTo={false}
+			/>
+		</PluginDocumentSettingPanel>
+	);
+}

assets/js/components/relationships-panel.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { useSelect } from '@wordpress/data';
+import { store as editorStore } from '@wordpress/editor';
+import { store } from '../store';
+import { RelationshipManager } from './relationship-manager';
+
+export function RelationshipsPanel() {
+	const { postId, relationships } = useSelect((select) => {
+		const postId = select(editorStore).getCurrentPostId();
+		const relationships = select(store).getRelationships(postId);
+
+		return {
+			postId,
+			relationships,
+		};
+	}, []);
+
+	if (!relationships || Object.keys(relationships).length === 0) {
+		return null;
+	}
+
+	return (
+		<>
+			{Object.values(relationships).map((relationship) => (
+				<RelationshipManager
+					key={relationship.rel_key}
+					postId={postId}
+					relationship={relationship}
+				/>
+			))}
+		</>
+	);
+}

assets/js/index.ts

@@ -1,2 +1,9 @@
 import './store';
 import './hooks';
+
+import { registerPlugin } from '@wordpress/plugins';
+import { RelationshipsPanel } from './components/relationships-panel';
+
+registerPlugin('wp-content-connect', {
+	render: RelationshipsPanel,
+});