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 ChevronRightIcon from '@mui/icons-material/ChevronRight';
import TreeItem from '@mui/lab/TreeItem';
import { useRouter } from 'next/router'
export default function FolderTree(props) {
const renderTree = (nodes) => (
@ -13,12 +14,21 @@ export default function FolderTree(props) {
</TreeItem>
);
const router = useRouter()
return (
<TreeView
aria-label="rich object"
defaultCollapseIcon={<ExpandMoreIcon />}
defaultExpanded={['root']}
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' }}
>
{renderTree(props.tree)}

View File

@ -177,12 +177,18 @@ export function getPostListData() {
export function getDirectoryData() {
const filteredDirectory = dirTree(postsDirectory,{ extensions: /\.md/ });
const convertedData = convertObject(filteredDirectory)
// console.log()
// const array = getFlattenArray(convertedData)
return convertedData
}
let _counter = 0;
export function convertObject(thisObject) {
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) {
thisObject.children.forEach(aChild => {
@ -193,4 +199,19 @@ export function convertObject(thisObject) {
} else {
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 {getSinglePost, getGraphData, getDirectoryData, convertObject} from "../lib/post";
import {getSinglePost, getGraphData, getDirectoryData, convertObject, getFlattenArray} from "../lib/post";
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 (
<Layout home>
<section>
<FolderTree tree={tree}/>
<FolderTree tree={tree} flattenNodes = {flattenNodes}/>
<div dangerouslySetInnerHTML={{__html: content.data}}/>
</section>
</Layout>
@ -19,11 +19,13 @@ export function getStaticProps() {
const tree = convertObject(getDirectoryData());
const contentData = getSinglePost("index");
const graphdata = getGraphData();
const flattenNodes = getFlattenArray(tree)
return {
props: {
content: contentData,
graphdata: graphdata,
tree: tree
tree: tree,
flattenNodes: flattenNodes
},
};
}