move formatting of visible pages to toolbar

Doesn't need to be set in brewRenderer state and passed as a prop, when it can just do it's work directly in the toolbar.

client/homebrew/brewRenderer/brewRenderer.jsx

@@ -103,7 +103,6 @@ const BrewRenderer = (props)=>{
 		visibility     : 'hidden',
 		zoom           : 100,
 		visiblePages   : [],
-		formattedPages : '',
 		centerPage     : 1
 	});
 	const iframeRef = useRef(null);
@@ -131,33 +130,11 @@ const BrewRenderer = (props)=>{
 			const pages = Array.from(updatedVisiblePages);
 
 			return { ...prevState,
-				visiblePages   : _.sortBy(pages),
+				visiblePages : _.sortBy(pages)
-				formattedPages : formatVisiblePages(pages)
 			};
 		});
 	}, []);
 
-	const formatVisiblePages = (pages)=>{
-		if(pages.length === 0) return '';
-
-		const sortedPages = [...pages].sort((a, b)=>a - b); // Copy and sort the array
-		const ranges = [];
-		let start = sortedPages[0];
-
-		for (let i = 1; i <= sortedPages.length; i++) {
-			// If the current page is not consecutive or it's the end of the list
-			if(i === sortedPages.length || sortedPages[i] !== sortedPages[i - 1] + 1) {
-				// Push the range to the list
-				ranges.push(
-					start === sortedPages[i - 1] ? `${start}` : `${start} - ${sortedPages[i - 1]}`
-				);
-				start = sortedPages[i]; // Start a new range
-			}
-		}
-
-		return ranges.join(', ');
-	};
-
 	const handleCenterPageChange = useCallback((pageNum)=>{
 		setState((prevState)=>({
 			...prevState,
@@ -279,7 +256,7 @@ const BrewRenderer = (props)=>{
 				<NotificationPopup />
 			</div>
 
-			<ToolBar onZoomChange={handleZoom} centerPage={state.centerPage} visiblePages={state.visiblePages} formattedPages={state.formattedPages} totalPages={rawPages.length}/>
+			<ToolBar onZoomChange={handleZoom} centerPage={state.centerPage} visiblePages={state.visiblePages} totalPages={rawPages.length}/>
 
 			{/*render in iFrame so broken code doesn't crash the site.*/}
 			<Frame id='BrewRenderer' initialContent={INITIAL_CONTENT}

client/homebrew/brewRenderer/toolBar/toolBar.jsx

@@ -7,7 +7,7 @@ const _ = require('lodash');
 const MAX_ZOOM = 300;
 const MIN_ZOOM = 10;
 
-const ToolBar = ({ onZoomChange, visiblePages, formattedPages, totalPages })=>{
+const ToolBar = ({ onZoomChange, visiblePages, totalPages })=>{
 
 	const [zoomLevel, setZoomLevel] = useState(100);
 	const [pageNum, setPageNum]     = useState(1);
@@ -15,7 +15,7 @@ const ToolBar = ({ onZoomChange, visiblePages, formattedPages, totalPages })=>{
 
 	useEffect(()=>{
 		if(visiblePages.length !== 0){   // If zoomed in enough, it's possible that no page fits the intersection criteria, so don't update.
-			setPageNum(formattedPages);
+			setPageNum(formatVisiblePages(visiblePages));
 		}
 	}, [visiblePages]);
 
@@ -71,6 +71,27 @@ const ToolBar = ({ onZoomChange, visiblePages, formattedPages, totalPages })=>{
 		return deltaZoom;
 	};
 
+	const formatVisiblePages = (pages)=>{
+		if(pages.length === 0) return '';
+
+		const sortedPages = [...pages].sort((a, b)=>a - b); // Copy and sort the array
+		const ranges = [];
+		let start = sortedPages[0];
+
+		for (let i = 1; i <= sortedPages.length; i++) {
+			// If the current page is not consecutive or it's the end of the list
+			if(i === sortedPages.length || sortedPages[i] !== sortedPages[i - 1] + 1) {
+				// Push the range to the list
+				ranges.push(
+					start === sortedPages[i - 1] ? `${start}` : `${start} - ${sortedPages[i - 1]}`
+				);
+				start = sortedPages[i]; // Start a new range
+			}
+		}
+
+		return ranges.join(', ');
+	};
+
 	return (
 		<div className={`toolBar ${toolsVisible ? 'visible' : 'hidden'}`}>
 			<button className='toggleButton' title={`${toolsVisible ? 'Hide' : 'Show'} Preview Toolbar`} onClick={()=>{setToolsVisible(!toolsVisible);}}><i className='fas fa-glasses' /></button>