Make Tree navigation go to correct page.

This commit is contained in:
Tuan Cao 2022-03-24 11:15:43 +07:00
parent 6e24e2a309
commit 005993da21
3 changed files with 38 additions and 5 deletions

View File

@ -3,6 +3,7 @@ import TreeView from '@mui/lab/TreeView';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import ChevronRightIcon from '@mui/icons-material/ChevronRight'; import ChevronRightIcon from '@mui/icons-material/ChevronRight';
import TreeItem from '@mui/lab/TreeItem'; import TreeItem from '@mui/lab/TreeItem';
import { useRouter } from 'next/router'
export default function FolderTree(props) { export default function FolderTree(props) {
const renderTree = (nodes) => ( const renderTree = (nodes) => (
@ -13,12 +14,21 @@ export default function FolderTree(props) {
</TreeItem> </TreeItem>
); );
const router = useRouter()
return ( return (
<TreeView <TreeView
aria-label="rich object" aria-label="rich object"
defaultCollapseIcon={<ExpandMoreIcon />} defaultCollapseIcon={<ExpandMoreIcon />}
defaultExpanded={['root']} defaultExpanded={['root']}
defaultExpandIcon={<ChevronRightIcon />} defaultExpandIcon={<ChevronRightIcon />}
onNodeSelect = {(event, nodIds) => {
const currentNode = props.flattenNodes.find(aNode => {return aNode.id === nodIds})
// console.log(event)
// console.log(currentNode)
if (currentNode != null && currentNode.routePath != null) {
router.push(currentNode.routePath)
}
}}
sx={{ height: 110, flexGrow: 1, maxWidth: 400, overflowY: 'auto' }} sx={{ height: 110, flexGrow: 1, maxWidth: 400, overflowY: 'auto' }}
> >
{renderTree(props.tree)} {renderTree(props.tree)}

View File

@ -177,12 +177,18 @@ export function getPostListData() {
export function getDirectoryData() { export function getDirectoryData() {
const filteredDirectory = dirTree(postsDirectory,{ extensions: /\.md/ }); const filteredDirectory = dirTree(postsDirectory,{ extensions: /\.md/ });
const convertedData = convertObject(filteredDirectory) const convertedData = convertObject(filteredDirectory)
// console.log()
// const array = getFlattenArray(convertedData)
return convertedData return convertedData
} }
let _counter = 0; let _counter = 0;
export function convertObject(thisObject) { export function convertObject(thisObject) {
const children = [] const children = []
const newObject = {name: thisObject.name, children: children, id: (_counter++).toString()};
let routerPath = getPostListData().find(fileName => fileName === Transformer.normalizeFileName(thisObject.name) ) || null
routerPath = routerPath ? '/note/' +routerPath : null
const newObject = {name: thisObject.name, children: children, id: (_counter++).toString(), routePath: routerPath || null };
if (thisObject.children != null && thisObject.children.length > 0) { if (thisObject.children != null && thisObject.children.length > 0) {
thisObject.children.forEach(aChild => { thisObject.children.forEach(aChild => {
@ -194,3 +200,18 @@ export function convertObject(thisObject) {
return newObject return newObject
} }
} }
function flat(array) {
var result = [];
array.forEach(function (a) {
result.push(a);
if (Array.isArray(a.children)) {
result = result.concat(flat(a.children));
}
});
return result;
}
export function getFlattenArray (thisObject) {
return flat(thisObject.children)
}

View File

@ -1,13 +1,13 @@
import Layout, {siteTitle} from "../components/layout"; import Layout, {siteTitle} from "../components/layout";
import {getSinglePost, getGraphData, getDirectoryData, convertObject} from "../lib/post"; import {getSinglePost, getGraphData, getDirectoryData, convertObject, getFlattenArray} from "../lib/post";
import FolderTree from "../components/FolderTree"; import FolderTree from "../components/FolderTree";
export default function Home({content, graphdata, filenames, tree, ...props}) { export default function Home({content, graphdata, filenames, tree,flattenNodes, ...props}) {
return ( return (
<Layout home> <Layout home>
<section> <section>
<FolderTree tree={tree}/> <FolderTree tree={tree} flattenNodes = {flattenNodes}/>
<div dangerouslySetInnerHTML={{__html: content.data}}/> <div dangerouslySetInnerHTML={{__html: content.data}}/>
</section> </section>
</Layout> </Layout>
@ -19,11 +19,13 @@ export function getStaticProps() {
const tree = convertObject(getDirectoryData()); const tree = convertObject(getDirectoryData());
const contentData = getSinglePost("index"); const contentData = getSinglePost("index");
const graphdata = getGraphData(); const graphdata = getGraphData();
const flattenNodes = getFlattenArray(tree)
return { return {
props: { props: {
content: contentData, content: contentData,
graphdata: graphdata, graphdata: graphdata,
tree: tree tree: tree,
flattenNodes: flattenNodes
}, },
}; };
} }