"Refactor BrewRenderer component: removed unnecessary code, reorganized useEffect hooks, and simplified getPageContainingElement function."

client/homebrew/brewRenderer/brewRenderer.jsx

@@ -43,7 +43,6 @@ const BrewPage = (props)=>{
 	       </div>;
 };
 
-
 //v=====--------------------< Brew Renderer Component >-------------------=====v//
 const renderedPages = [];
 let rawPages      = [];
@@ -75,26 +74,45 @@ const BrewRenderer = (props)=>{
 		rawPages = props.text.split(/^\\page$/gm);
 	}
 
-	useEffect(()=>{ // Unmounting steps
-		return ()=>{window.removeEventListener('resize', updateSize);};
-	}, []);
-
-
 	useEffect(() => {
-		const elementId = window.location.hash.slice(1); // Remove the leading '#'
+        const locationHash = window.location.hash;
-	
-		if (elementId) {
 		const iframe = document.getElementById('BrewRenderer');
+
+        // Regular expression to match page IDs like '#p1'
+        const pageIdRegex = /^#p\d+$/;
+        iframe.addEventListener('load', () => {
+            setTimeout(() => {
+                if (pageIdRegex.test(locationHash)) {
+                    // Extract page number from the ID
+                    const pageNumber = parseInt(locationHash.slice(2));
+                    console.log('scrolling to page ', pageNumber);
+                    if (!isNaN(pageNumber)) {
+                        scrollToPage(iframe, pageNumber);
+                    } else {
+                        console.error('Invalid page ID:', locationHash);
+                    }
+                } else {
+                    // Treat it as an element ID
+                    const elementId = locationHash.slice(1); // Remove the leading '#'
+                    if (elementId) {
                         getPageContainingElement(iframe, elementId)
-				.then(pageNumber => {
+                            .then((pageNumber) => {
                                 if (pageNumber !== -1) {
                                     scrollToPage(iframe, pageNumber);
                                 }
                             })
-				.catch(error => {
+                            .catch((error) => {
                                 console.error('Error:', error);
                             });
                     }
+                }
+            }, 100);
+        });
+
+        // Cleanup function for removing the resize event listener
+        return () => {
+            window.removeEventListener('resize', updateSize);
+        };
     }, []);
 	
 
@@ -111,16 +129,10 @@ const BrewRenderer = (props)=>{
 	};
 	
 	const getPageContainingElement = (iframe, elementId) => {
-		return new Promise((resolve, reject) => {
+        return new Promise((resolve) => {
-			iframe.addEventListener('load', () => {
+            const brewRenderer =
-	
+                iframe.contentWindow.document.querySelector('.brewRenderer');
-				const brewRenderer = iframe.contentWindow.document.querySelector('.brewRenderer');
-				console.log('brewRenderer:', brewRenderer);
-	
-				setTimeout(() => {
             const pages = brewRenderer.querySelectorAll('.page');
-					console.log('Number of pages found:', pages.length);
-	
             for (let i = 0; i < pages.length; i++) {
                 if (pages[i].querySelector(`#${elementId}`)) {
                     resolve(i);
@@ -130,14 +142,9 @@ const BrewRenderer = (props)=>{
 
             console.log('Element with ID not found in any page.');
             resolve(-1);
-				}, 100); // Adjust delay as needed
-			});
         });
     };
 
-
-
-
 	const updateSize = ()=>{
 		setState((prevState)=>({
 			...prevState,