refactor slider onChange and button onClick

Moved the zoomLevel state assignment to a newer useState hook function, making it easier (and shorter) to update that state within event handlers.

The slider onChange is a single easy line, and the buttons handlers are two lines for clarity.

client/homebrew/brewRenderer/toolBar/toolBar.jsx

@@ -10,13 +10,14 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
 	const [state, setState] = useState({
 		currentPage     : currentPage,
 		totalPages      : totalPages,
-		zoomLevel       : 100,
 		pageNumberInput : currentPage,
 	});
 
+	const [zoomLevel, setZoomLevel] = useState(100);
+
 	useEffect(()=>{
-		onZoomChange(state.zoomLevel);
+		onZoomChange(zoomLevel);
-	}, [state.zoomLevel]);
+	}, [zoomLevel]);
 
 	useEffect(()=>{
 		setState((prevState)=>({
@@ -26,21 +27,18 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
 		}));
 	}, [currentPage]);
 
-	const setZoomLevel = (delta)=>{
+	const handleZoomChange = (delta)=>{
-		const zoomChange = _.clamp(state.zoomLevel + delta, minZoom, maxZoom);
+		const zoomChange = _.clamp(zoomLevel + delta, minZoom, maxZoom);
 
-		setState((prevState)=>({
+		setZoomLevel(zoomChange);
-			...prevState,
-			zoomLevel : zoomChange
-		}));
 	};
 
 	return (
 		<div className='toolBar'>
 			<div className='tool'>
 				<button
-					onClick={()=>setZoomLevel(-20)}
+					onClick={()=>handleZoomChange(-20)}
-					disabled={state.zoomLevel <= minZoom}
+					disabled={zoomLevel <= minZoom}
 				>
 					<i className='fas fa-magnifying-glass-minus' />
 				</button>
@@ -54,17 +52,8 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
 					min={minZoom}
 					max={maxZoom}
 					step='1'
-					value={state.zoomLevel}
+					value={zoomLevel}
-					onChange={(e)=>{
+					onChange={(e)=>{setZoomLevel(parseInt(e.target.value));}}
-						const newZoomLevel = parseInt(e.target.value, 10);
-						if(newZoomLevel !== state.zoomLevel) {
-							setState((prevState)=>({
-								...prevState,
-								zoomLevel : newZoomLevel
-							}));
-							onZoomChange(newZoomLevel);
-						}
-					}}
 				/>
 				<datalist id='zoomLevels'>
 					<option value='100' />
@@ -73,8 +62,8 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
 
 			<div className='tool'>
 				<button
-					onClick={()=>setZoomLevel(20)}
+					onClick={()=>handleZoomChange(20)}
-					disabled={state.zoomLevel >= maxZoom}
+					disabled={zoomLevel >= maxZoom}
 				>
 					<i className='fas fa-magnifying-glass-plus' />
 				</button>