created a method to render path of a node

Author: swara-p

frontend/family_tree/src/App.js

@@ -1,11 +1,13 @@
-import React, { useLayoutEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import './App.css';
 import Help from './Components/Help.js';
 import SearchBar from "./Components/SearchBar";
 import StudentData from "./Data.json";
 import PCard from "./Components/ProfileCard.js";
 import { ThemeProvider, createTheme } from "@material-ui/core";
 import D3Tree from "./Components/Tree";
+import {client} from "./index.js";
+import {CHILDREN_QUERY, BATCH_QUERY, PATH_QUERY} from "./Queries.js";
 
 function App() {
 
@@ -18,6 +20,22 @@ function App() {
   });
 
   const [details, setDetails] = useState({ name:"name", branch:"branch", year:"year", email:"email", picture:"picture", linkedIn:"", hometown:"", coCurriculars:"", socialMedia:"", display:true});
+  const [TreeData, setTreeData] = useState({});
+  
+  async function FetchPath(rollNo) {
+    const response = await client.query({
+      query: PATH_QUERY,
+      variables: {
+        rollNo,
+      },
+    })
+    return response.data.studentPath;
+  }
+
+  useEffect(() => {
+    (FetchPath("B20AI054")).then(value => {setTreeData(value);})
+  , [TreeData]})
+
 
   return (
     <ThemeProvider theme={theme}>
@@ -26,10 +44,11 @@ function App() {
       <div className="help">
         <Help />
       </div>
-      
+      {TreeData[0] && 
       <D3Tree 
+        TreeData = {TreeData}
         setDetails = {setDetails}
-      />
+      />}
 
       <PCard 
         branch={details.branch}

frontend/family_tree/src/Components/Tree.js

@@ -14,11 +14,11 @@ function D3Tree(props){
                     }))
                     .append("g")
                     .attr("transform", "translate(" + width/2 + "," + height/3 + ")");
-    var data = StudentData;    
+    var data = props.TreeData;    
 
     var treemap = d3.tree().size([height,width]).nodeSize([120, 40]);
 
-    var stratify = d3.stratify().id(d=>d.student.name).parentId(d=>d.parent) ;
+    var stratify = d3.stratify().id(d=>d.rollNo).parentId(d=>d.parentId) ;
     var root = stratify(data);
 
     var i = 0;
@@ -27,7 +27,8 @@ function D3Tree(props){
     root.x0 = height / 2;
     root.y0 = 0;
 
-    root.children.forEach(collapse);
+    if(root.children){
+    root.children.forEach(collapse);}
     function collapse(d) {
       if(d.children) {
         d._children = d.children
@@ -59,14 +60,14 @@ function D3Tree(props){
         .on('click', click)
         .on('contextmenu', function(node,d){
           props.setDetails({name: d.id, 
-            branch: d.data.student.branch, 
-            year: d.data.student.year,
-            email: d.data.student.email,
-            picture: d.data.student.picture,
-            linkedIn: d.data.student.linkedIn,
-            hometown: d.data.student.hometown,
-            coCurriculars: d.data.student.coCurriculars,
-            socialMedia: d.data.student.socialMedia,
+            branch: d.data.branch, 
+            year: d.data.year,
+            email: d.data.email,
+            picture: d.data.picture,
+            linkedIn: d.data.linkedIn,
+            hometown: d.data.hometown,
+            coCurriculars: d.data.coCurriculars,
+            socialMedia: d.data.socialMedia,
             display: true
           });
         });