23s2s

✏️ Editing: CategoryControl.jsx

import { useCategories } from '@library/hooks/useCategories';
import { useCacheStore } from '@library/state/cache';
import { useSiteSettingsStore } from '@library/state/site';
import { PanelBody, PanelRow, Spinner } from '@wordpress/components';
import { useEffect } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import classNames from 'classnames';

export const CategoryControl = () => {
	const { category, setCategory } = useSiteSettingsStore();
	const { data, isLoading, errorCount } = useCategories();
	const { categories, setCategories } = useCacheStore();

useEffect(() => {
		if (isLoading || errorCount) return;
		setCategories(data);
	}, [data, isLoading, setCategories, errorCount]);

useEffect(() => {
		if (!categories?.length || category) return;
		setCategory('all');
	}, [category, setCategory, categories]);

return (
		<PanelBody
			title={__('Design Type', 'extendify-local')}
			className="ext-type-control p-0 border-0 [&_.components-panel\_\_body-title]:-mx-5 [&_.components-panel\_\_body-title]:mt-0 [&_.components-panel\_\_body-title]:mb-0.5"
			initialOpen={true}
		>
			<PanelRow>
				<CategoryList
					categories={categories}
					errorCount={errorCount}
					current={category}
					setCurrent={setCategory}
				/>
			</PanelRow>
		</PanelBody>
	);
};

if (errorCount > 1) {
		return (
			<div className="-mt-1 flex w-full flex-col items-center justify-center gap-2 border-t border-gray-300 p-2">
				<span>{__('Retrying...', 'extendify-local')}</span>
				<Spinner />
			</div>
		);
	}

return (
		<div className="-mt-1 flex w-full justify-center border-t border-gray-300 p-2">
			<span className="sr-only">{__('Fetching...', 'extendify-local')}</span>
			<Spinner />
		</div>
	);
};

Sid Gifari From Gifari Industries - BD Cyber Security Team