FileMaster

Edit File: indexing.js

import { Tabs, Skeleton } from '@bsf/force-ui';
import { useState, useCallback, useEffect } from '@wordpress/element';
import { motion } from 'framer-motion';
import { STORE_NAME } from '@AdminStore/constants';
import { useDispatch, useSuspenseSelect } from '@wordpress/data';
import SubTabToggles from './sub-tab-toggles';
import { __ } from '@wordpress/i18n';

const IndexingTab = ( { postContent, keyWord } ) => {
	const subTabOption = [
		{ label: __( 'Post Types', 'surerank' ), tabSlug: 'postTypes' },
		{ label: __( 'Taxonomies', 'surerank' ), tabSlug: 'taxonomies' },
		{ label: __( 'Archives', 'surerank' ), tabSlug: 'archives' },
	];

const [ postTypesData, setPostTypesData ] = useState( [] );
	const [ taxonomiesData, setTaxonomiesData ] = useState( [] );
	const [ archivesData, setArchivesData ] = useState( [] );
	const { setMetaSetting } = useDispatch( STORE_NAME );
	const { metaSettings } = useSuspenseSelect( ( select ) => {
		const { getMetaSettings } = select( STORE_NAME );
		return {
			metaSettings: getMetaSettings(),
		};
	}, [] );

const [ activeSocialTab, setActiveSocialTab ] = useState( 'postTypes' );

// Initialize states with saved settings when component mounts or metaSettings changes
	useEffect( () => {
		if ( postContent && metaSettings?.no_index?.length ) {
			const savedSettings = metaSettings.no_index;

// Filter saved settings into appropriate states
			const postTypes = Object.keys( postContent.post_types || {} );
			const taxonomies = Object.keys( postContent.taxonomies || {} );
			const archives = Object.keys( postContent.archives || {} );

setPostTypesData(
				savedSettings.filter( ( item ) => postTypes.includes( item ) )
			);
			setTaxonomiesData(
				savedSettings.filter( ( item ) => taxonomies.includes( item ) )
			);
			setArchivesData(
				savedSettings.filter( ( item ) => archives.includes( item ) )
			);
		}
	}, [ metaSettings, postContent ] );

const handleTabChange = useCallback( ( { value } ) => {
		setActiveSocialTab( value.slug );
	}, [] );

const handleSettingsChange = useCallback(
		( key, value ) => {
			setMetaSetting( key, value ); // store in redux
		},
		[ setMetaSetting ]
	);

const handleSwitchChange = useCallback(
		( key, value ) => {
			const updateAndCombineData = (
				setStateFunction,
				currentState,
				updatedValue
			) => {
				setStateFunction( updatedValue );

const combinedData = Array.from(
					new Set( [
						...( key === 'postTypes'
							? updatedValue
							: postTypesData ),
						...( key === 'taxonomies'
							? updatedValue
							: taxonomiesData ),
						...( key === 'archives' ? updatedValue : archivesData ),
					] )
				);

handleSettingsChange( 'no_index', combinedData );
			};

switch ( key ) {
				case 'postTypes':
					updateAndCombineData(
						setPostTypesData,
						postTypesData,
						value
					);
					break;
				case 'taxonomies':
					updateAndCombineData(
						setTaxonomiesData,
						taxonomiesData,
						value
					);
					break;
				case 'archives':
					updateAndCombineData(
						setArchivesData,
						archivesData,
						value
					);
					break;
				default:
					break;
			}
		},
		[ postTypesData, taxonomiesData, archivesData, handleSettingsChange ]
	);

return (
		<div className="space-y-4">
			<Tabs.Group
				activeItem={ activeSocialTab }
				variant="rounded"
				width="full"
				onChange={ handleTabChange }
				className="m-2"
			>
				{ subTabOption.map( ( { label, tabSlug } ) => (
					<Tabs.Tab key={ tabSlug } slug={ tabSlug } text={ label } />
				) ) }
			</Tabs.Group>
			<motion.div
				key={ activeSocialTab }
				initial={ { opacity: 0, x: 0 } }
				animate={ { opacity: 1, y: 0 } }
				exit={ { opacity: 0, x: -10 } }
				transition={ { duration: 0.3 } }
				className="w-full"
			>
				{ renderTabComponent() }
			</motion.div>
		</div>
	);
};

export default IndexingTab;

Back