From 30ffe13ca8c0cf6003b74b17d28536b0caa1a7ac Mon Sep 17 00:00:00 2001
From: Ben Ritner <ben@kadencewp.com>
Date: Thu, 27 Jun 2024 11:41:48 -0600
Subject: [PATCH] revert to component

---
 .../components/src/icons/icon-render/index.js | 113 ++++++++++--------
 1 file changed, 63 insertions(+), 50 deletions(-)

diff --git a/src/packages/components/src/icons/icon-render/index.js b/src/packages/components/src/icons/icon-render/index.js
index 2d1511e57..19c8409cf 100644
--- a/src/packages/components/src/icons/icon-render/index.js
+++ b/src/packages/components/src/icons/icon-render/index.js
@@ -4,34 +4,56 @@
  */
 import GenIcon from '../gen-icon';
 import { applyFilters } from '@wordpress/hooks';
-import { useEffect, useState } from '@wordpress/element';
 import { Spinner } from '@wordpress/components';
+
+import { Fragment, Component, useEffect, useState } from '@wordpress/element';
+
+const fetchCustomSvg = async ( id ) => {
+	console.log( 'Fetching SVG');
+	const response = await fetch(`/wp-json/wp/v2/kadence_custom_svg/${id}`, {
+		method: 'GET'
+	});
+
+	if (!response.ok) {
+		throw new Error('Network response was not ok');
+	}
+
+	return response.json();
+};
+
+
+
 /**
  * Build the typography controls
  * @returns {object} typography settings.
  */
-const IconRender = (props) => {
-	const [iconOptions, setIconOptions] = useState({});
-	const [isLoading, setIsLoading] = useState(false);
-	const [customSvg, setCustomSvg] = useState('');
-
-	useEffect(() => {
-		const icons = applyFilters('kadence.icon_options', { ...kadence_blocks_params_ico.icons, ...kadence_blocks_params_fa.icons } );
-		setIconOptions(icons);
-	}, []);
-
-	const { name } = props;
-
-	const getCustomSvg = async ( id ) => {
+class IconRender extends Component {
+	constructor() {
+		super( ...arguments );
+		this.updateIcons = this.updateIcons.bind( this );
+		this.getCustomSvg = this.getCustomSvg.bind( this );
+		this.state = {
+			iconOptions: undefined,
+			isLoading: false,
+			customSvg: '',
+		};
+	}
+	componentDidMount() {
+		const icons = { ...kadence_blocks_params_ico.icons, ...kadence_blocks_params_fa.icons };
+		this.setState( { iconOptions: applyFilters( 'kadence.icon_options', icons ) } );
+		if( this.props.name.startsWith('kb-custom') ) {
+		 	this.getCustomSvg( this.props.name.replace('kb-custom-', '') );
+		}
+	}
+	getCustomSvg = async ( id ) => {
 		try {
 			// Check if the SVG is in localStorage
 			const cachedSvg = localStorage.getItem(`kb-custom-${id}`);
 			if (cachedSvg) {
-				setCustomSvg(JSON.parse(cachedSvg));
+				this.setState( { customSvg: JSON.parse(cachedSvg) });
 				return;
 			}
-
-			setIsLoading( true );
+			this.setState( { isLoading: true });
 			const response = await fetchCustomSvg( id );
 
 			if ( response ) {
@@ -43,46 +65,37 @@ const IconRender = (props) => {
 
 				// Save the fetched SVG to localStorage
 				localStorage.setItem(`kb-custom-${id}`, JSON.stringify(jsonObject));
-
-				setCustomSvg( jsonObject );
+				this.setState( { customSvg:jsonObject });
 
 			} else {
-				setCustomSvg( [] );
+				this.setState( { customSvg:'' });
 			}
 		} catch ( error ) {
+			this.setState( { customSvg:'' });
 			console.error( 'Failed to fetch custom SVGs:', error );
 		}
-		setIsLoading( false );
+		this.setState( { isLoading:false });
 	};
-
-	useEffect(() => {
-		if( name.startsWith('kb-custom') ) {
-			getCustomSvg( name.replace('kb-custom-', '') );
-		}
-
-	}, [name]);
-
-	if( name.startsWith('kb-custom') && isLoading ) {
-		return <Spinner />;
-	} else if ( name.startsWith('kb-custom') && customSvg !== '' ) {
-		return <GenIcon name={name} icon={ customSvg } {...props} />;
+	updateIcons() {
+		const icons = { ...kadence_blocks_params_ico.icons, ...kadence_blocks_params_fa.icons };
+		const filteredIcons = applyFilters( 'kadence.icon_options', icons );
+		return filteredIcons;
 	}
-
-	return <GenIcon name={name} icon={iconOptions && iconOptions?.[name] ? iconOptions[name] : '' } {...props} />;
-};
-
-const fetchCustomSvg = async ( id ) => {
-	console.log( 'Fetching SVG');
-	const response = await fetch(`/wp-json/wp/v2/kadence_custom_svg/${id}`, {
-		method: 'GET'
-	});
-
-	if (!response.ok) {
-		throw new Error('Network response was not ok');
+	render() {
+		const {
+			name,
+		} = this.props;
+		let { iconOptions, isLoading, customSvg } = this.state;
+		if ( ! iconOptions ) {
+			iconOptions = this.updateIcons();
+		}
+		if( name.startsWith('kb-custom') && isLoading ) {
+			return <Spinner />;
+		} else if ( name.startsWith('kb-custom') && customSvg !== '' ) {
+			return <GenIcon name={name} icon={ customSvg } {...props} />;
+		}
+		return <GenIcon name={ name } icon={ iconOptions[ name ] } { ...this.props } />;
 	}
+}
+export default ( IconRender );
 
-	return response.json();
-};
-
-
-export default IconRender;