Add some comments and cleanup

Little changes like removing console.logs and adding comments.

client/homebrew/brewRenderer/brewRenderer.jsx

@@ -36,17 +36,19 @@ const BrewPage = ({contents = '', index = 0, onVisibilityChange, onCenterPageCha
 
 	useEffect(()=>{
 		if(!pageRef.current) return;
-		const observer = new IntersectionObserver(
+
+		// Observer for tracking pages within the `.pages` div
+		const visibleObserver = new IntersectionObserver(
 			(entries)=>{
 				entries.forEach((entry)=>{
 					if(entry.isIntersecting){
-						onVisibilityChange(index + 1, true);
+						onVisibilityChange(index + 1, true);    // add page to array of visible pages.
 					} else {
 						onVisibilityChange(index + 1, false);
 					}
 				});
 			},
-			{ threshold: .3, rootMargin: '0px 0px 0px 0px'  }
+			{ threshold: .3, rootMargin: '0px 0px 0px 0px'  } // detect when >30% of page is within bounds.
 		);
 
 		// Observer for tracking the page at the center of the iframe.
@@ -61,11 +63,11 @@ const BrewPage = ({contents = '', index = 0, onVisibilityChange, onCenterPageCha
 			{ threshold: 0, rootMargin: '-50% 0px -50% 0px' } // Detect when the page is at the center
 		);
 
-		observer.observe(pageRef.current);
+		// attach observers to each `.page`
+		visibleObserver.observe(pageRef.current);
 		centerObserver.observe(pageRef.current);
-
 		return ()=>{
-			observer.disconnect();
+			visibleObserver.disconnect();
 			centerObserver.disconnect();
 		};
 	}, [index, onVisibilityChange, onCenterPageChange]);
@@ -113,17 +115,18 @@ const BrewRenderer = (props)=>{
 		rawPages = props.text.split(/^\\page$/gm);
 	}
 
+	// update centerPage (aka "current page") and pass it up to parent components
 	useEffect(()=>{
 		props.onPageChange(state.centerPage);
 	}, [state.centerPage]);
 
 	const handlePageVisibilityChange = useCallback((pageNum, isVisible)=>{
 		setState((prevState)=>{
-			let updatedVisiblePages = new Set(prevState.visiblePages);
+			const updatedVisiblePages = new Set(prevState.visiblePages);
 			if(isVisible){
-				updatedVisiblePages.add(pageNum)
+				updatedVisiblePages.add(pageNum);
 			} else {
-				updatedVisiblePages.delete(pageNum)
+				updatedVisiblePages.delete(pageNum);
 			}
 			const pages = Array.from(updatedVisiblePages);
 
@@ -138,7 +141,7 @@ const BrewRenderer = (props)=>{
 		if(pages.length === 0) return '';
 
 		const sortedPages = [...pages].sort((a, b)=>a - b); // Copy and sort the array
-		let ranges = [];
+		const ranges = [];
 		let start = sortedPages[0];
 
 		for (let i = 1; i <= sortedPages.length; i++) {

client/homebrew/brewRenderer/toolBar/toolBar.jsx

@@ -7,14 +7,14 @@ const _ = require('lodash');
 const MAX_ZOOM = 300;
 const MIN_ZOOM = 10;
 
-const ToolBar = ({ onZoomChange, visiblePages, formattedPages, centerPage, totalPages })=>{
+const ToolBar = ({ onZoomChange, visiblePages, formattedPages, totalPages })=>{
 
 	const [zoomLevel, setZoomLevel] = useState(100);
 	const [pageNum, setPageNum]     = useState(1);
 	const [toolsVisible, setToolsVisible] = useState(true);
 
 	useEffect(()=>{
-		if(visiblePages.length !== 0){
+		if(visiblePages.length !== 0){   // If zoomed in enough, it's possible that no page fits the intersection criteria, so don't update.
 			setPageNum(formattedPages);
 		}
 	}, [visiblePages]);
@@ -33,10 +33,8 @@ const ToolBar = ({ onZoomChange, visiblePages, formattedPages, centerPage, total
 			setPageNum(parseInt(pageInput)); // input type is 'text', so `page` comes in as a string, not number.
 	};
 
+	// scroll to a page, used in the Prev/Next Page buttons.
 	const scrollToPage = (pageNumber)=>{
-		console.log('visiblePages:', visiblePages);
-		console.log('centerPage:', centerPage);
-		console.log('pageNumber:', pageNumber);
 		if(typeof pageNumber !== 'number') return;
 		pageNumber = _.clamp(pageNumber, 1, totalPages);
 		const iframe = document.getElementById('BrewRenderer');