Make Tree navigation go to correct page.

components/FolderTree.js

@@ -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)}

lib/post.js

@@ -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 => {
@@ -194,3 +200,18 @@ export function convertObject(thisObject) {
         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)
+}

pages/index.js

@@ -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
         },
     };
 }