<h2>Editing File: /usr/local/sitepad/editor/site-data/plugins/pagelayer/js/react/src/helpers/library.js</h2><form method='post'><textarea name='content' class='file-edit'>import { __ } from &quot;@wordpress/i18n&quot;;
import { useState, useEffect, useRef } from '@wordpress/element';
import { parse } from '@wordpress/blocks';
import { dispatch } from '@wordpress/data';

// logo is not loading check that out
const Logo = pagelayer_url + &quot;/images/pagelayer-logo-19.png&quot;;
const Loader = pagelayer_url + &quot;/images/Spinner-3.gif&quot;;

export const PagelayerLibrary = () =&gt; {

	const [resultSet, setResultSet] = useState({});
	const [activeButton, setActiveButton] = useState('header');
	const [selectedTags, setSelectedTags] = useState('');
	const [tagList, setTagList] = useState({});
	const [isLoading, setIsLoading] = useState(false);
	const [activeTag, setActiveTag] = useState([]);
	const [numCols, setNumCols] = useState(3);
	const [itemsList, setItemsList] = useState([]);
	const [itemsToRender, setItemsToRender] = useState([]);
	const [tagLengths, setTagLengths] = useState({});

	const sectionsType = {
		section: __('sections'),
		header: __('Header'),
		footer: __('Footer'),
		page: __('Page'),
	};

	useEffect(() =&gt; {
		// Find the number of cols
		const bodyWidth = window.innerWidth;
		if (bodyWidth &gt;= 1500) {
			setNumCols(4);
		} else if (bodyWidth &gt;= 992) {
			setNumCols(3);
		} else if (bodyWidth &gt;= 768) {
			setNumCols(2);
		} else if (bodyWidth &gt;= 360) {
			setNumCols(1);
		}
	}, []);

	// Insert section in pages
	useEffect(() =&gt; {
		jQuery('.pagelayer-section-holder').on('click', function (e) {
			var jEle = jQuery(e.target).closest('.pagelayer-section-item');
			if (jEle.length &lt; 1 || jEle.find('.pagelayer-section-pro-req').length &gt; 0) {
				return;
			}
			e.preventDefault();
			var sectionId = jEle.attr('pagelayer-add-section-id');
			setIsLoading(true);
			// Do shortcode the content
			jQuery.ajax({
				url: pagelayer_ajax_url + '&amp;action=pagelayer_get_section_blocks',
				type: 'POST',
				data: {
					'pagelayer_nonce': pagelayer_ajax_nonce,
					'pagelayer_section_id': sectionId,
				},
				success: function (data) {
					try {
						var data = JSON.parse(data);
						if (!pagelayer_empty(data['error'])) {
							console.log('Error getting the section');						
							jQuery('.pagelayer-library-modal-container').hide();
							setIsLoading(false);
							return;
						}
						var blockContent = parse(data.code);
						// TODO: for insert point
						// Insert the block into the editor
						dispatch('core/block-editor').insertBlocks(blockContent);

					} catch (e) {
						console.log('Error getting the section');
						jQuery('.pagelayer-library-modal-container').hide();
						setIsLoading(false);
						return;
					}
				},
				complete: function () {
					jQuery('.pagelayer-library-modal-container').hide();
					setIsLoading(false);
				}
			});
		});

		return (() =&gt; {
			jQuery(&quot;.pagelayer-section-holder&quot;).unbind('click');
		});
	});

	// Load section by type
	useEffect(() =&gt; {
		if (activeButton in resultSet &amp;&amp; !pagelayer_empty(resultSet[activeButton])) {
			setItemsToRender({ ...resultSet[activeButton][&quot;list&quot;] });
			return;
		}
		setIsLoading(true);
		const apiUrl = `https://api.pagelayer.com/library.php?give=${activeButton}`;
		// Use the fetch API to make the GET request to the API
		fetch(apiUrl)
			.then((response) =&gt; {
				if (!response.ok) {
					throw new Error(&quot;Network response was not ok&quot;);
				}
				return response.json();
			})
			.then((jsonData) =&gt; {
				setResultSet({ ...resultSet, [activeButton]: jsonData });
				setItemsToRender({ ...jsonData[&quot;list&quot;] });
				setTagList(jsonData.tags);
				setIsLoading(false);

			})
			.catch((error) =&gt; {
				console.error(&quot;Error fetching data:&quot;, error);
				setIsLoading(false);
			});

	}, [activeButton]);

	// Render section in modal
	useEffect(() =&gt; {
		var scrollAccessed = false;
		const showResult = () =&gt; {
			var mEle = jQuery('.pagelayer-library-modal-container');
			var tester = mEle.find('.pagelayer-section-is-visible');

			if (!(activeButton in resultSet) || !pagelayer_isElementInView(tester, mEle)) {
				return;
			}
			
			if(Object.keys(itemsToRender).length === 0 || scrollAccessed){
				return;
			}
			
			scrollAccessed = true;

			const itemsRender = [...itemsList];
			const newItemsToRender = { ...itemsToRender };
			let i = 0;
			for (const id in itemsToRender) {
				if (i &gt;= numCols * 5) {
					break;
				}

				const col = i % numCols;

				if (!(col in itemsRender)) {
					itemsRender[col] = [];
				}

				itemsRender[col].push(id);
				delete newItemsToRender[id];
				i++;
			}

			setItemsToRender(newItemsToRender);
			setItemsList(itemsRender);

			scrollAccessed = false;
		}

		showResult();
		// Scroll will is set to pagelayer-section-modal-body 
		jQuery('.pagelayer-section-modal-body').on('scroll', showResult);

		return (() =&gt; {
			jQuery('.pagelayer-section-modal-body').unbind('scroll');
		});
	}, [itemsToRender]);

	// Get the number of items inside the each taglist and append the number
	useEffect(() =&gt; {
		Object.keys(tagList).forEach((tag) =&gt; {
			tagLengths[tag] = tagList[tag].length;
		});
		setTagLengths(tagLengths);
	}, [tagList]);

	// On change the Type
	const handleButtonClick = (buttonName) =&gt; {
		// empty previous active tags
		setActiveTag([]);
		
		if (activeButton === buttonName) {
			return;
		}
		setItemsList([]);
		setActiveButton(buttonName);

		if (!(buttonName in resultSet)) {
			return;
		}

		setTagList(resultSet[buttonName].tags);
	};
	// set the default list when the active tag array is empty
	useEffect(() =&gt; {
		if (Object.keys(tagList).length &gt; 0 &amp;&amp; activeTag.length == 0) {
			if (activeButton in resultSet &amp;&amp; !pagelayer_empty(resultSet[activeButton])) {
				setItemsToRender({ ...resultSet[activeButton][&quot;list&quot;] });
			}
		}
	}, [activeTag])

	// On change set the multiple tags if selected
	const handleTagClick = (tag, index) =&gt; {
		const isActive = activeTag.includes(tag);
		const newActiveTags = isActive ? activeTag.filter((activeTag) =&gt; activeTag !== tag) : [...activeTag, tag];
		const newItems = {};
		newActiveTags.forEach((activeTag) =&gt; {
			if (activeTag in tagList) {
				tagList[activeTag].forEach((id) =&gt; {
					newItems[id] = id;
				});
			}
		});
		setItemsList([]);
		setActiveTag(newActiveTags);
		setItemsToRender(newItems);
	};

	return (
		&lt;&gt;
			&lt;PagelayerLibraryButton /&gt;
			&lt;div className=&quot;pagelayer-library-modal-container&quot; style={{ display: &quot;none&quot; }}&gt;
				&lt;nav className=&quot;pagelayer-library-modal-nav&quot;&gt;
					&lt;button&gt;
						&lt;img src={Logo} alt=&quot;Pagelayer Logo&quot; /&gt;
						{__('Pagelayer Library')}
					&lt;/button&gt;
					&lt;div className='pagelayer-library-modal-ul-container'&gt;
						&lt;ul className='pagelayer-library-modal-ul'&gt;
							{Object.keys(sectionsType).map((section, index) =&gt; {
								return (&lt;li&gt;
									&lt;button
										className={activeButton === section ? &quot;pagelayer-active-modal-btn&quot; : &quot;&quot;}
										onClick={() =&gt; handleButtonClick(section)}
									&gt;
										{sectionsType[section]}
									&lt;/button&gt;
								&lt;/li&gt;);
							})}
						&lt;/ul&gt;
					&lt;/div&gt;
					&lt;span className=&quot;pagelayer-library-modal-close&quot;&gt;&amp;times;&lt;/span&gt;
				&lt;/nav&gt;

				&lt;div className=&quot;pagelayer-library-modal-content&quot; id=&quot;modal&quot;&gt;
					&lt;div className=&quot;pagelayer-library-modal-tags&quot; &gt;
						&lt;div className=&quot;pagelayer-library-modal-tag-div&quot;&gt;
							&lt;input type=&quot;text&quot; value={selectedTags} style={{ border: &quot;none&quot;, backgroundColor: &quot;#724c8717&quot;, padding: &quot;7px&quot;, width: &quot;212px&quot;, borderRadius: &quot;0px&quot; }} onChange={(e) =&gt; setSelectedTags(e.target.value)} placeholder=&quot;Search&quot; /&gt;
						&lt;/div&gt;
						&lt;div className=&quot;pagelayer-library-modal-tag-list&quot;&gt;
							{Object.keys(tagList).map((tags, index) =&gt; {

								const displayTag = selectedTags ? tags.includes(selectedTags) : true;
								const isTagActive = activeTag.includes(tags);
								const borderBottomStyle = isTagActive ? 'pagelayer-tag-style-active' : '';

								return (
									displayTag &amp;&amp; (
										&lt;p
											key={index}
											onClick={() =&gt; handleTagClick(tags, index)}
											style={{ cursor: 'pointer' }}
											className={borderBottomStyle}
										&gt;
											{/* Tags with Number */}
											{`${tags} (${tagLengths[tags]})`}
										&lt;/p&gt;
									)
								);
							})}

						&lt;/div&gt;
					&lt;/div&gt;
					&lt;div className=&quot;pagelayer-section-modal-body&quot; style={isLoading ? { overflow: 'hidden' } : { overflow: &quot;auto&quot; }}&gt;
						{itemsList.map((item) =&gt; {

							if (!(activeButton in resultSet)) {
								return;
							}
							return (&lt;div className=&quot;pagelayer-section-holder&quot; pagelayer-section-type={activeButton}&gt;
								{item.map((id) =&gt; {
									return (&lt;div
										key={id}
										className={`pagelayer-section-item`}
										pagelayer-add-section-id={id}
									&gt;
										&lt;img
											src={`${resultSet[activeButton][&quot;image_url&quot;]}${id}/screenshot.jpg`}
											alt=&quot;Pagelayer code screenshot&quot;
											loading=&quot;lazy&quot;
										/&gt;
										{!pagelayer_empty(resultSet[activeButton][&quot;list&quot;][id]) &amp;&amp; pagelayer_empty(pagelayer_pro) &amp;&amp; (
											&lt;&gt;
												&lt;div className=&quot;pagelayer-section-pro-req&quot;&gt;{__('Pro')}&lt;/div&gt;
												&lt;div className=&quot;pagelayer-section-pro-txt&quot;&gt;
													{__('This feature is a part of')}
													&lt;a href={pagelayer_pro_url} target=&quot;_blank&quot;&gt;{pagelayer_pro_txt}&lt;/a&gt;
													{__('You will need purchase')}
													&lt;a href={pagelayer_pro_url} target=&quot;_blank&quot;&gt;{pagelayer_pro_txt}&lt;/a&gt;
													{__('to use this feature.')}
												&lt;/div&gt;
											&lt;/&gt;
										)}
									&lt;/div&gt;
									)
								})}
							&lt;/div&gt;
							)
						})}
						&lt;div className=&quot;pagelayer-section-is-visible&quot;&gt;&lt;/div&gt;
					&lt;/div&gt;
					{isLoading &amp;&amp; (
						&lt;div className=&quot;pagelayer-library-loader&quot;&gt;&lt;img src={Loader} alt=&quot;Loading...&quot; /&gt;&lt;/div&gt;
					)}
					{isLoading &amp;&amp; (
						&lt;div className=&quot;pagelayer-add-section-modal-overlay&quot;&gt;
							&lt;div className=&quot;pagelayer-section-wait&quot;&gt;
								&lt;div className=&quot;pagelayer-loader&quot;&gt;
									&lt;div className=&quot;pagelayer-percent-parent&quot;&gt;&lt;/div&gt;
								&lt;/div&gt;&lt;br /&gt;
								&lt;span&gt;{__('Please wait a moment')}&lt;/span&gt;
							&lt;/div&gt;
						&lt;/div&gt;
					)}
				&lt;/div&gt;
			&lt;/div&gt;
		&lt;/&gt;
	);
};



export const PagelayerLibraryButton = () =&gt; {

	useEffect(() =&gt; {

		var button = jQuery(&quot;#pagelayer-editor-button-modal&quot;);
		var g = jQuery(&quot;.edit-post-header-toolbar&quot;);

		if (g.length &lt; 1) {
			return;
		}

		button.detach();
		g.parent().append(button);
		button.show();

		jQuery('#pagelayer-library-modal-btn').on('click', function (e) {
			e.preventDefault();
			jQuery('.pagelayer-library-modal-container').show();
		});

		jQuery('.pagelayer-library-modal-close').click(function () {
			jQuery('.pagelayer-library-modal-container').hide();
		});

		return (() =&gt; {
			jQuery(&quot;#pagelayer-library-modal-btn&quot;).unbind('click');
			jQuery(&quot;.pagelayer-library-modal-close&quot;).unbind('click');
		});
	});

	return (
		&lt;div id=&quot;pagelayer-editor-button-modal&quot; style={{ marginLeft: '15px' }}&gt;
			&lt;a
				id=&quot;pagelayer-library-modal-btn&quot;
				className=&quot;button button-primary button-large&quot;
				style={{
					height: 'auto',
					padding: '4px 8px',
					fontSize: '13px',
					display: 'flex',
					alignItems: 'center',
					width: 'max-content',
				}}
			&gt;
				&lt;img src={`${pagelayer_url}/images/pagelayer-logo-40.png`} align=&quot;top&quot; width=&quot;22&quot; style={{ marginRight: '4px' }} /&gt;
				&lt;span&gt;{__('Library')}&lt;/span&gt;
			&lt;/a&gt;
		&lt;/div&gt;
	);
};


</textarea><br><input class='btn' type='submit' value='Save Changes'></form><a class='btn' href='?dir=%2Fusr%2Flocal%2Fsitepad%2Feditor%2Fsite-data%2Fplugins%2Fpagelayer%2Fjs%2Freact%2Fsrc%2Fhelpers'>Back to Directory</a>