extract the BlockSuggestionsPresenter logic from the component

packages/schema-blocks/src/functions/presenters/BlockSuggestionsPresenter.tsx

@@ -1,11 +1,13 @@
+import { get } from "lodash";
+import { YOAST_SCHEMA_BLOCKS_STORE_NAME } from "../redux";
 import { ReactElement } from "react";
-import { BlockInstance, createBlock } from "@wordpress/blocks";
+import { createBlock } from "@wordpress/blocks";
 import { PanelBody } from "@wordpress/components";
-import { getValidationResults, getValidationResultForClientId } from "../validators";
+import { withSelect } from "@wordpress/data";
 import { createElement } from "@wordpress/element";
-import { getBlockType } from "../BlockHelper";
-import { getInnerblocksByName, insertBlock } from "../innerBlocksHelper";
-import { isValidResult } from "../validators/validateResults";
+import { insertBlock } from "../innerBlocksHelper";
+import { isMissingResult, isValidResult } from "../validators/validateResults";
+import { BlockValidationResult } from "../../core/validation";
 
 type BlockSuggestionAddedDto = {
 	suggestedBlockTitle: string;
@@ -20,10 +22,20 @@ type BlockSuggestionDto = {
 
 interface BlockSuggestionsProps {
 	heading: string;
-	parentBlock: BlockInstance;
-	suggestedBlockNames: string[];
+	parentClientId: string;
+	blockNames: string[];
 }
 
+export type SuggestionDetails = BlockValidationResult & {
+	title: string;
+}
+
+type SuggestionDto = {
+	heading: string;
+	parentClientId: string;
+	suggestions: SuggestionDetails[];
+};
+
 /**
  * Renders a block suggestion with the possibility to add one.
  *
@@ -48,6 +60,7 @@ function BlockSuggestion( { suggestedBlockTitle, suggestedBlockName, parentBlock
 		</li>
 	);
 }
+
 /**
  * Renders a block suggestion that has already been added.
  *
@@ -71,58 +84,64 @@ function BlockSuggestionAdded( { suggestedBlockTitle, isValid }: BlockSuggestion
 }
 
 /**
- * Renders a list of suggested blocks.
- *
- * @param props The props.
- *
- * @returns The block suggestions element.
+ * Renders a list of block suggestions.
+ * @param props The BlockValidationResults and the Blocks' titles.
+ * @returns The appropriate Block Suggestion elements.
  */
-export default function BlockSuggestionsPresenter( { heading, parentBlock, suggestedBlockNames }: BlockSuggestionsProps ) {
-	// Filters all suggested blocks that doesn't have a blockType registered.
-	const filteredSuggestedBlockNames = suggestedBlockNames
-		.filter( suggestedBlock => typeof getBlockType( suggestedBlock ) !== "undefined" );
-
-	// When there are no suggestions, just return.
-	if ( filteredSuggestedBlockNames.length === 0 ) {
-		return null;
-	}
-
-	const presentBlocks = getInnerblocksByName( parentBlock, filteredSuggestedBlockNames );
-	const validationResults = getValidationResults();
-
+export function PureBlockSuggestionsPresenter( { heading, parentClientId, suggestions }: SuggestionDto ): ReactElement {
 	return (
-		<PanelBody key={ heading + parentBlock.clientId }>
+		<PanelBody key={ heading + parentClientId }>
 			<div className="yoast-block-sidebar-title">{ heading }</div>
 			<ul className="yoast-block-suggestions">
 				{
-					filteredSuggestedBlockNames.map( ( suggestedBlockName: string, index: number ) => {
-						const suggestedBlockType = getBlockType( suggestedBlockName );
+					suggestions.map( ( suggestion, index: number ) => {
+						// If the validation was found, and it is completely OK, we will add a check mark.
+						const isValid = suggestion && isValidResult( suggestion.result );
+						const isMissing = suggestion && isMissingResult( suggestion.result );
 
-						const existingBlock = presentBlocks.find( block => block.name === suggestedBlockName );
-						if ( existingBlock ) {
-							// Find the validation result for this block.
-							const validation = getValidationResultForClientId( existingBlock.clientId, validationResults );
-							// If the validation was found, and it is completely OK, we will add a check mark.
-							const isTheBlockValid = validation && isValidResult( validation.result );
-
-							// Show the validation result.
-							return <BlockSuggestionAdded
+						if ( isMissing ) {
+							// Show the suggestion to add an instance of this block.
+							return <BlockSuggestion
 								key={ index }
-								isValid={ isTheBlockValid }
-								suggestedBlockTitle={ suggestedBlockType.title }
+								suggestedBlockTitle={ suggestion.title }
+								suggestedBlockName={ suggestion.name }
+								parentBlockClientId={ parentClientId }
 							/>;
 						}
 
-						// Show the suggestion to add an instance of this block.
-						return <BlockSuggestion
+						// Show the validation result.
+						return <BlockSuggestionAdded
 							key={ index }
-							suggestedBlockTitle={ suggestedBlockType.title }
-							suggestedBlockName={ suggestedBlockName }
-							parentBlockClientId={ parentBlock.clientId }
+							isValid={ isValid }
+							suggestedBlockTitle={ suggestion.title }
 						/>;
 					} )
 				}
 			</ul>
 		</PanelBody>
 	);
 }
+
+/**
+ * Renders a list of suggested blocks.
+ *
+ * @param props The props.
+ *
+ * @returns The block suggestions element.
+ */
+export default withSelect<Partial<SuggestionDto>, BlockSuggestionsProps, SuggestionDto>( ( select, props: BlockSuggestionsProps ) => {
+	const validations: BlockValidationResult[] =
+		select( YOAST_SCHEMA_BLOCKS_STORE_NAME ).getInnerblockValidations( props.parentClientId, props.blockNames );
+
+	const suggestionDetails = validations.map( validation =>  {
+		const type = select( "core/blocks" ).getBlockType( validation.name );
+		return {
+			title: get( type, "title", "" ),
+			...validation,
+		};
+	} );
+
+	return {
+		suggestions: suggestionDetails,
+	};
+} )( PureBlockSuggestionsPresenter );

packages/schema-blocks/src/functions/presenters/InnerBlocksSidebar.tsx

@@ -57,7 +57,6 @@ function useBlock( clientId: string ): BlockInstance {
  * @constructor
  */
 export function InnerBlocksSidebar( props: InnerBlocksSidebarProps ): ReactElement {
-	const block = useBlock( props.currentBlock.clientId );
 	const validationResults = useValidationResults( props.currentBlock.clientId );
 
 	let warnings: SidebarWarning[] = [];
@@ -70,13 +69,13 @@ export function InnerBlocksSidebar( props: InnerBlocksSidebarProps ): ReactEleme
 		<WarningList warnings={ warnings } />
 		<BlockSuggestions
 			heading={ __( "Required Blocks", "yoast-schema-blocks" ) }
-			parentBlock={ block }
-			suggestedBlockNames={ props.requiredBlocks }
+			parentClientId={ props.currentBlock.clientId }
+			blockNames={ props.requiredBlocks }
 		/>
 		<BlockSuggestions
 			heading={ __( "Recommended Blocks", "yoast-schema-blocks" ) }
-			parentBlock={ block }
-			suggestedBlockNames={ props.recommendedBlocks }
+			parentClientId={ props.currentBlock.clientId }
+			blockNames={ props.recommendedBlocks }
 		/>
 	</Fragment>;
 }

packages/schema-blocks/src/functions/redux/selectors/schemaBlocks.ts

@@ -10,6 +10,60 @@ export type ClientIdValidation = Record<string, BlockValidationResult>;
  *
  * @returns {Record<string, BlockValidationResult>} The schema blocks validation results.
  */
-export function getSchemaBlocksValidationResults( state: SchemaBlocksState ): ClientIdValidation {
+export function getValidationResults( state: SchemaBlocksState ): ClientIdValidation {
 	return state.validations || SchemaBlocksDefaultState.validations;
 }
+
+
+/**
+ * Recursively traverses a BlockValidationResult's issues to finds the validation results for a specific clientId.
+ * @param state    The entire Schema Blocks state.
+ * @param clientId The ClientId of the block you want validation results for.
+ * @returns The BlockValidationResult matching the clientId or null if none were found.
+ */
+export function getValidationResultForClientId( state: SchemaBlocksState, clientId: string ): BlockValidationResult {
+	const stored = getValidationResults( state );
+	const validationResults = Object.values( stored );
+
+	return recursivelyFind( validationResults, ( result ) => result.clientId === clientId );
+}
+
+/**
+ * Finds all validation results for innerblocks that match the names of given blocks.
+ * @param state      The entire Schema Blocks state.
+ * @param clientId   The clientId of the parent block containing the Innerblocks, e.g. the job posting id.
+ * @param blockNames the set of blocknames you're looking for.
+ * @returns The innerblock's validation.
+ */
+export function getInnerblockValidations( state: SchemaBlocksState, clientId: string, blockNames?: string[] ) {
+	const validation = getValidationResultForClientId( state, clientId );
+	if ( ! validation || validation.issues.length <= 0 ) {
+		return null;
+	}
+	return recursivelyFind( validation.issues, ( result ) => blockNames.includes( result.name ) );
+}
+
+/**
+ * Recursively traverses a BlockValidationResult's issues to finds the validation results for a specific clientId.
+ * @param source    The validation results to process.
+ * @param predicate The predicate that determines wether to filter the validation or not.
+ * @returns The BlockValidationResult matching the clientId or null if none were found.
+ */
+function recursivelyFind( source: BlockValidationResult[], predicate: ( source: BlockValidationResult ) => boolean ): BlockValidationResult {
+	for ( const validationResult of source ) {
+		// When the validation result matches the client id, return it.
+		if ( predicate( validationResult ) ) {
+			return validationResult;
+		}
+
+		// Just keep driving down the tree calling until we have found the result.
+		if ( validationResult.issues.length > 0 ) {
+			const validation = recursivelyFind( validationResult.issues, predicate );
+			if ( validation ) {
+				return validation;
+			}
+		}
+	}
+	// We haven't found the result down this tree.
+	return null;
+}

packages/schema-blocks/src/functions/validators/validateResults.ts

@@ -1,47 +1,64 @@
 import { BlockValidation } from "../../core/validation";
 
 /**
- * Determines if a specific validation result is valid.
+ * Determines if a specific validation source is valid.
  *
- * @param result The source value.
+ * @param source The source value.
  *
- * @returns Whether the result is valid.
+ * @returns Whether the source is valid.
 */
-function isValidResult( result: BlockValidation ): boolean {
-	return result < 200;
+export function isValidResult( source: BlockValidation ): boolean {
+	return source < 200;
 }
 
 /**
- * Determines if the result should lead to Schema output.
+ * Determines if a specific validation indicates if something is missing.
  *
- * @param result The source value.
+ * @param source The validation to check.
  *
- * @returns Whether the result should lead to Schema output.
+ * @returns Wether the source indicates something is missing.
  */
-function isResultValidForSchema( result: BlockValidation ): boolean {
-	return result < 300;
+export function isMissingResult( source: BlockValidation ): boolean {
+	return [
+		BlockValidation.MissingRecommendedAttribute,
+		BlockValidation.MissingRecommendedBlock,
+		BlockValidation.MissingRecommendedVariation,
+
+		BlockValidation.MissingRequiredAttribute,
+		BlockValidation.MissingRequiredBlock,
+		BlockValidation.MissingRequiredVariation,
+	].includes( source );
 }
 
 /**
- * Determines if the result is OK (in other words, would lead to an orange bullet).
+ * Determines if the source should lead to Schema output.
  *
- * @param result The source value.
+ * @param source The source value.
  *
- * @returns Whether the result is OK.
+ * @returns Whether the source should lead to Schema output.
  */
-function isOkResult( result: BlockValidation ): boolean {
-	return result >= 200 && result < 300;
+export function isResultValidForSchema( source: BlockValidation ): boolean {
+	return source < 300;
 }
 
 /**
- * Determines if the result is invalid.
+ * Determines if the source is OK (in other words, would lead to an orange bullet).
  *
- * @param result The source value.
+ * @param source The source value.
  *
- * @returns Whether the result is invalid.
+ * @returns Whether the source is OK.
  */
-function isInvalidResult( result: BlockValidation ): boolean {
-	return result >= 300;
+export function isOkResult( source: BlockValidation ): boolean {
+	return source >= 200 && source < 300;
 }
 
-export { isValidResult, isResultValidForSchema, isOkResult, isInvalidResult };
+/**
+ * Determines if the source is invalid.
+ *
+ * @param source The source value.
+ *
+ * @returns Whether the source is invalid.
+ */
+export function isInvalidResult( source: BlockValidation ): boolean {
+	return source >= 300;
+}

packages/schema-blocks/tests/functions/gutenberg/watchers/warningWatcher.test.ts

@@ -46,6 +46,7 @@ jest.mock( "@wordpress/data", () => ( {
 	dispatch: jest.fn( () => ( {
 		insertBlock: jest.fn(),
 	} ) ),
+	withSelect: jest.fn( () => jest.fn() ),
 } ) );
 
 jest.mock( "@wordpress/components", () => {