OwlCyberSecurity - MANAGER

Edit File: CategoryControl.jsx

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

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

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

useEffect(() => {
		// Don't steal focus if no site type is selected
		const focus = (slug) =>
			siteType?.name &&
			document.querySelector(`#extendify-library-category-${slug}`)?.focus();
		// Wait for categories to be available
		if (!categories?.length) return;
		if (category) {
			// If category is all, focus all
			if (category === 'all') return focus('all');
			// If category is already set, make sure it's a valid category
			if (categories?.find(({ slug }) => slug === category)) {
				return focus(category);
			}
		}
		setCategory('all');
		focus('all');
	}, [category, setCategory, categories, siteType?.name]);

return (
		<PanelBody
			title={__('Design Type', 'extendify-local')}
			className="ext-type-control p-0"
			initialOpen={!!siteType?.name}>
			<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>
	);
};