Change visiblePages and centerPage to separate states

Allows small logic cleanup in handlePageVisibilityChange
This commit is contained in:
Trevor Buckner
2026-09-18 10:06:48 -04:00
parent bfd1460ed1
commit 7a9e561742
+13 -16
View File
@@ -111,11 +111,12 @@ const BrewRenderer = (props)=>{
...props ...props
}; };
const [visiblePages, setVisiblePages] = useState([]);
const [centerPage , setCenterPage ] = useState(1);
const [state, setState] = useState({ const [state, setState] = useState({
isMounted : false, isMounted : false,
visibility : 'hidden', visibility : 'hidden'
visiblePages : [],
centerPage : 1
}); });
const [displayOptions, setDisplayOptions] = useState({ const [displayOptions, setDisplayOptions] = useState({
@@ -145,21 +146,17 @@ const BrewRenderer = (props)=>{
rawPages = props.text.split(PAGEBREAK_REGEX_V3); rawPages = props.text.split(PAGEBREAK_REGEX_V3);
} }
const handlePageVisibilityChange = (pageNum, isVisible, isCenter)=>{ const handlePageVisibilityChange = (pageNum, isVisible, isCenter) => {
setState((prevState)=>{ setVisiblePages(prev => {
const updatedVisiblePages = new Set(prevState.visiblePages); const updatedVisiblePages = new Set(prev);
if(!isCenter) isVisible ? updatedVisiblePages.add(pageNum) : updatedVisiblePages.delete(pageNum);
isVisible ? updatedVisiblePages.add(pageNum) : updatedVisiblePages.delete(pageNum); return [...updatedVisiblePages].sort((a, b) => a - b);
return {
...prevState,
visiblePages : [...updatedVisiblePages].sort((a, b)=>a - b),
centerPage : isCenter ? pageNum : prevState.centerPage
};
}); });
if(isCenter) if (isCenter) {
setCenterPage(pageNum);
props.onPageChange(pageNum); props.onPageChange(pageNum);
}
}; };
const isInView = (index)=>{ const isInView = (index)=>{
@@ -346,7 +343,7 @@ const BrewRenderer = (props)=>{
<NotificationPopup /> <NotificationPopup />
</div> </div>
<ToolBar displayOptions={displayOptions} onDisplayOptionsChange={handleDisplayOptionsChange} visiblePages={state.visiblePages.length > 0 ? state.visiblePages : [state.centerPage]} totalPages={rawPages.length} headerState={headerState} setHeaderState={setHeaderState}/> <ToolBar displayOptions={displayOptions} onDisplayOptionsChange={handleDisplayOptionsChange} visiblePages={visiblePages.length > 0 ? visiblePages : [centerPage]} totalPages={rawPages.length} headerState={headerState} setHeaderState={setHeaderState}/>
{/*render in iFrame so broken code doesn't crash the site.*/} {/*render in iFrame so broken code doesn't crash the site.*/}
<Frame id='BrewRenderer' title="Rendered Brew Content" initialContent={INITIAL_CONTENT} <Frame id='BrewRenderer' title="Rendered Brew Content" initialContent={INITIAL_CONTENT}