Skip to content

Commit f4efaa3

Browse files
Fixed navigation tree exapantion and node selection on page load
1 parent 41234ac commit f4efaa3

File tree

1 file changed

+37
-21
lines changed

1 file changed

+37
-21
lines changed

client/src/containers/App/AppDrawer.jsx

+37-21
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,6 @@ const useStyles = makeStyles((theme) => ({
5959
color: theme.palette.primary.main,
6060
},
6161
},
62-
// https://github.com/philipwalton/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items
6362
toolbarIe11: {
6463
display: 'flex',
6564
},
@@ -110,11 +109,11 @@ function getActivePages(tree, pathname) {
110109
}
111110
});
112111

113-
const activePages = {};
112+
const activePages = [];
114113
if(activePage) {
115-
activePages[activePage.id] = true;
116-
tree.loopParents(this, activePage.id, function (parentid) {
117-
activePages[parentid] = true;
114+
activePages.push(activePage.id);
115+
tree.loopParents(this, activePage.id, function (parentid, page) {
116+
activePages.push(parentid.toString());
118117
});
119118
}
120119
return activePages;
@@ -127,36 +126,49 @@ function AppDrawer(props) {
127126
const pages = useSelector(state => state.pages.pages);
128127
let { pathname, hash } = useLocation();
129128

130-
const tree = getPagesTree(pages);
131-
132-
// Add support for leading / in development mode.
133-
if (pathname !== '/') {
134-
// The leading / is only added to support static hosting (resolve /index.html).
135-
// We remove it to normalize the pathname.
136-
// See `rewriteUrlForNextExport` on Next.js side.
137-
pathname = pathname.replace(/\/$/, '');
138-
}
129+
const navigate = useNavigate();
139130

140-
const activePages = getActivePages(tree, `${pathname}${hash}`);
131+
const [tree, setTree] = React.useState(getPagesTree(pages));
132+
const [expandedItems, setExpandedItems] = React.useState([]);
133+
const [selectedItem, setSelectedItem] = React.useState(null);
141134

142135
useEffect(() => {
143136
if (!loaded) {
144137
dispatch(load());
138+
} else {
139+
setTree(getPagesTree(pages));
145140
}
146-
// eslint-disable-next-line react-hooks/exhaustive-deps
147-
}, []/* run only once */);
148-
const navigate = useNavigate();
141+
}, [loaded, dispatch, pages]);
142+
143+
React.useEffect(() => {
144+
// Add support for leading / in development mode.
145+
if (pathname !== '/') {
146+
// The leading / is only added to support static hosting (resolve /index.html).
147+
// We remove it to normalize the pathname.
148+
// See `rewriteUrlForNextExport` on Next.js side.
149+
pathname = pathname.replace(/\/$/, '');
150+
}
151+
152+
const activePages = getActivePages(tree, `${pathname}${hash}`);
153+
setSelectedItem(activePages.length > 0 ? activePages[0] : null);
154+
setExpandedItems(activePages);
155+
}, [pathname, tree]);
156+
157+
const handleExpandedItemsChange = (event, itemIds) => {
158+
setExpandedItems(itemIds);
159+
};
160+
149161
const children = {};
150162
tree.loopPostOrder(this, (pageid, page, parentid, parent) => {
151-
const handleClick = () => {
163+
const handleClick = (event, nodeId) => {
164+
setSelectedItem(nodeId);
152165
props.onClose();
153166
navigate(page.pathname);
154167
};
155168
if(pageid > 0) {
156169
children[parentid] = children[parentid] || [];
157170
if (children[pageid]) {
158171
const title = pageToTitle(page);
159-
const topLevel = activePages[pageid];
160172
children[parentid].push(
161173
<TreeItem
162174
itemId={page.id}
@@ -186,7 +198,11 @@ function AppDrawer(props) {
186198

187199
return (
188200
<PersistScroll>
189-
<SimpleTreeView>
201+
<SimpleTreeView
202+
expandedItems={expandedItems}
203+
selectedItems={selectedItem ? [selectedItem] : []}
204+
onExpandedItemsChange={handleExpandedItemsChange}
205+
>
190206
{children[0]}
191207
</SimpleTreeView>
192208
</PersistScroll>

0 commit comments

Comments
 (0)