From 36dcfbb2bcf3a116df78e67cf9f53846bf8a55ab Mon Sep 17 00:00:00 2001
From: Tuan Cao <caomanhtuanbsb@gmail.com>
Date: Thu, 31 Mar 2022 16:59:10 +0700
Subject: [PATCH] Wrapping MD Content inside MD Container Boiler plate code for
 adding multiple MD Content

---
 components/MDContainer.js | 24 ++++++++++++++++++++++++
 components/MDContent.js   | 13 ++++++++++++-
 package.json              | 16 ++++++++--------
 pages/index.js            |  4 ++--
 pages/note/[id].js        |  4 ++--
 5 files changed, 48 insertions(+), 13 deletions(-)
 create mode 100644 components/MDContainer.js

diff --git a/components/MDContainer.js b/components/MDContainer.js
new file mode 100644
index 0000000..a20f425
--- /dev/null
+++ b/components/MDContainer.js
@@ -0,0 +1,24 @@
+import React, {useState} from 'react';
+import MDContent from "./MDContent";
+import {v4 as uuidv4} from 'uuid';
+
+function MDContainer({post}) {
+    const [posts, setPosts] = useState([post]);
+
+    function handleClick(content) {
+        console.log(content)
+        setPosts(prevPosts => {
+            return [...prevPosts, content]
+        })
+    }
+
+    return (
+        <div className="Container">
+            {posts.map(p => (
+                <MDContent key={uuidv4()} content={p} handleOpenNewContent={handleClick}/>
+            ))}
+        </div>
+    );
+}
+
+export default MDContainer;
\ No newline at end of file
diff --git a/components/MDContent.js b/components/MDContent.js
index f6d22c2..b4280fb 100644
--- a/components/MDContent.js
+++ b/components/MDContent.js
@@ -1,15 +1,26 @@
 import React from 'react';
 import Alert from '@mui/material/Alert';
 import AlertTitle from '@mui/material/AlertTitle';
+import {useRouter} from 'next/router'
 
-function MDContent({content}) {
+function MDContent({content, handleOpenNewContent}) {
+
+    function handleInternalLinkClick() {
+        //Processing fetching
+        //pass result up to parent container
+        //TODO: handle clicking on internal link, go fetching md content from file then passing it up to parent
+        handleOpenNewContent(content)
+    }
+    const router = useRouter();
     return (
+
     <div className="markdown-rendered">
         <Alert severity="info">
             <AlertTitle>Want to know more?</AlertTitle>
             🌱 <strong>Follow</strong> or <strong>DM</strong> me on Twitter at <span><a href="https://twitter.com/tuancm">@tuancm</a></span>
         </Alert>
         <div dangerouslySetInnerHTML={{__html: content}}/>
+        <button onClick={handleInternalLinkClick}>Click me </button>
     </div>
     );
 }
diff --git a/package.json b/package.json
index af1c0b4..7a58e15 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,13 @@
     "deploy": "yarn build && git add . && git commit -m '...' && git push"
   },
   "dependencies": {
+    "@emotion/cache": "latest",
+    "@emotion/react": "latest",
+    "@emotion/server": "latest",
+    "@emotion/styled": "latest",
+    "@mui/icons-material": "latest",
+    "@mui/lab": "latest",
+    "@mui/material": "latest",
     "cytoscape-d3-force": "^1.1.4",
     "cytoscape-node-html-label": "^1.2.1",
     "d3": "^6.2.0",
@@ -31,14 +38,7 @@
     "remark-wiki-link": "^1.0.0",
     "to-vfile": "^6.1.0",
     "unified": "^9.2.0",
-    "vfile-reporter": "^6.0.1",
-    "@emotion/cache": "latest",
-    "@emotion/react": "latest",
-    "@emotion/server": "latest",
-    "@emotion/styled": "latest",
-    "@mui/icons-material": "latest",
-    "@mui/material": "latest",
-    "@mui/lab": "latest"
+    "vfile-reporter": "^6.0.1"
   },
   "devDependencies": {
     "bimap": "^0.0.15",
diff --git a/pages/index.js b/pages/index.js
index e013c6c..bf3358e 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,7 +1,7 @@
 import Layout from "../components/layout";
 import {getSinglePost, getDirectoryData, convertObject, getFlattenArray} from "../lib/utils";
 import FolderTree from "../components/FolderTree";
-import MDContent from "../components/MDContent";
+import MDContainer from "../components/MDContainer";
 
 export default function Home({content, tree, flattenNodes}) {
 
@@ -11,7 +11,7 @@ export default function Home({content, tree, flattenNodes}) {
                 <nav className="nav-bar">
                     <FolderTree tree={tree} flattenNodes={flattenNodes}/>
                 </nav>
-                <MDContent content={note.data}/>
+                <MDContainer post={content.data}/>
             </div>
         </Layout>
     );
diff --git a/pages/note/[id].js b/pages/note/[id].js
index a66a5b3..3313cb6 100644
--- a/pages/note/[id].js
+++ b/pages/note/[id].js
@@ -3,7 +3,7 @@ import Layout from "../../components/layout";
 import {getPostListData, getSinglePost, getGraphData, convertObject, getDirectoryData} from "../../lib/utils";
 import FolderTree from "../../components/FolderTree";
 import {getFlattenArray} from "../../lib/utils";
-import MDContent from "../../components/MDContent";
+import MDContainer from "../../components/MDContainer";
 
 export default function Home({ note, graphdata,tree, flattenNodes}) {
     return (
@@ -15,7 +15,7 @@ export default function Home({ note, graphdata,tree, flattenNodes}) {
                 <nav className="nav-bar">
                     <FolderTree tree={tree} flattenNodes={flattenNodes}/>
                 </nav>
-                <MDContent content={note.data}/>
+                <MDContainer post={note.data}/>
             </div>
         </Layout>
     );