feat: add feed validation in the loop block

Author: RaduCristianPopescu

includes/gutenberg/feedzy-rss-feeds-loop-block.php

@@ -73,6 +73,8 @@ public function register_block() {
 			array(
 				'imagepath'    => esc_url( FEEDZY_ABSURL . 'img/' ),
 				'defaultImage' => esc_url( FEEDZY_ABSURL . 'img/feedzy.svg' ),
+				'url'          => admin_url( 'admin-ajax.php' ),
+				'nonce'        => wp_create_nonce( FEEDZY_BASEFILE ),
 				'isPro'        => feedzy_is_pro(),
 			)
 		);

js/FeedzyLoop/placeholder.js

@@ -3,16 +3,15 @@
  * WordPress dependencies.
  */
 import { __ } from '@wordpress/i18n';
-
+import { useState } from '@wordpress/element';
 import {
 	BaseControl,
 	Button,
 	Placeholder,
 	Spinner,
+	Notice,
 } from '@wordpress/components';
-
 import { useSelect } from '@wordpress/data';
-
 import { store as coreStore } from '@wordpress/core-data';
 
 /**
@@ -21,6 +20,9 @@ import { store as coreStore } from '@wordpress/core-data';
 import FeedControl from './components/FeedControl';
 
 const BlockPlaceholder = ({ attributes, setAttributes, onSaveFeed }) => {
+	const [isValidating, setIsValidating] = useState(false);
+	const [validationResults, setValidationResults] = useState([]);
+
 	const { categories, isLoading } = useSelect((select) => {
 		const { getEntityRecords, isResolving } = select(coreStore);
 
@@ -33,20 +35,132 @@ const BlockPlaceholder = ({ attributes, setAttributes, onSaveFeed }) => {
 		};
 	}, []);
 
+	const handleLoadFeed = async () => {
+		if (!attributes?.feed?.source) {
+			return;
+		}
+
+		setIsValidating(true);
+		setValidationResults([]);
+
+		const isCategory = categories.some(
+			(cat) => cat.id === attributes.feed.source
+		);
+
+		if (isCategory && 'group' === attributes.feed.type) {
+			onSaveFeed();
+			setIsValidating(false);
+			return;
+		}
+
+		try {
+			const formData = new FormData();
+			formData.append('action', 'feedzy_validate_feed');
+			formData.append('feed_url', attributes.feed.source);
+			formData.append('nonce', window.feedzyData?.nonce);
+
+			const response = await fetch(window.feedzyData?.url, {
+				method: 'POST',
+				body: formData,
+			});
+
+			const data = await response.json();
+
+			if (data.success && data.data?.results) {
+				const results = data.data.results;
+				setValidationResults(results);
+
+				const hasErrors = results.some(
+					(result) => result.status === 'error'
+				);
+
+				if (!hasErrors) {
+					onSaveFeed();
+				}
+			} else if (!data.success) {
+				setValidationResults([
+					{
+						status: 'error',
+						message:
+							data.data?.message ||
+							__('Validation failed', 'feedzy-rss-feeds'),
+					},
+				]);
+			}
+		} catch (error) {
+			setValidationResults([
+				{
+					status: 'error',
+					message: __(
+						'Failed to validate feed. Please check your connection and try again.',
+						'feedzy-rss-feeds'
+					),
+				},
+			]);
+		} finally {
+			setIsValidating(false);
+		}
+	};
+
+	const handleFeedChange = (value) => {
+		setAttributes({ feed: value });
+		setValidationResults([]);
+	};
+
+	const renderValidationResults = () => {
+		if (!validationResults || validationResults.length === 0) {
+			return null;
+		}
+
+		return (
+			<div
+				className="feedzy-validation-results"
+				style={{ 
+					display: 'flex',
+					flexDirection: 'column',
+					gap: '10px',
+					marginTop: '15px',
+				}}
+			>
+				{validationResults.map((result, index) => (
+					<Notice
+						key={`result-${index}`}
+						status={result.status}
+						isDismissible={false}
+					>
+						{result.url && (
+							<>
+								<strong>{result.url}</strong>
+								<br />
+							</>
+						)}
+						{result.message}
+					</Notice>
+				))}
+			</div>
+		);
+	};
+
 	return (
 		<Placeholder
 			key="placeholder"
 			icon="rss"
 			label={__('Feedzy RSS Feeds', 'feedzy-rss-feeds')}
 		>
-			{isLoading && (
+			{(isLoading || isValidating) && (
 				<div key="loading" className="wp-block-embed is-loading">
 					<Spinner />
-					<p>{__('Fetching…', 'feedzy-rss-feeds')}</p>
+					<p>
+						{isValidating
+							? __(
+									'Validating and fetching feed…',
+									'feedzy-rss-feeds')
+							: __('Loading…', 'feedzy-rss-feeds')}
+					</p>
 				</div>
 			)}
 
-			{!isLoading && (
+			{!isLoading && !isValidating && (
 				<>
 					<BaseControl
 						label={__('Feed Source', 'feedzy-rss-feeds')}
@@ -60,9 +174,11 @@ const BlockPlaceholder = ({ attributes, setAttributes, onSaveFeed }) => {
 									value: category.id,
 								})),
 							]}
-							onChange={(value) => setAttributes({ feed: value })}
+							onChange={handleFeedChange}
 						/>
 
+						{renderValidationResults()}
+
 						<p>
 							{__(
 								'Enter the full URL of the feed source you wish to display here, or select a Feed Group. Also you can add multiple URLs separated with a comma. You can manage your feed groups from',
@@ -81,22 +197,11 @@ const BlockPlaceholder = ({ attributes, setAttributes, onSaveFeed }) => {
 					<div>
 						<Button
 							variant="primary"
-							onClick={() => {
-								if (attributes?.feed?.source) {
-									onSaveFeed();
-								}
-							}}
+							onClick={handleLoadFeed}
+							disabled={!attributes?.feed?.source}
 						>
 							{__('Load Feed', 'feedzy-rss-feeds')}
 						</Button>
-
-						<Button
-							variant="link"
-							href="https://validator.w3.org/feed/"
-							target="_blank"
-						>
-							{__('Validate', 'feedzy-rss-feeds')}
-						</Button>
 					</div>
 				</>
 			)}