Merge pull request #74 from khushi-parikh/main

Changing card data when right clicking on a node

Author: killbotXD

frontend/family_tree/src/App.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useLayoutEffect, useState } from "react";
 import './App.css';
 import Help from './Components/Help.js';
 import SearchBar from "./Components/SearchBar";
@@ -17,7 +17,7 @@ function App() {
     }
   });
 
-  const x = StudentData[0];
+  const [details, setDetails] = useState({ name:"name", branch:"branch", year:"year", email:"email", picture:"picture", linkedIn:"", hometown:"", coCurriculars:"", socialMedia:"", display:true});
 
   return (
     <ThemeProvider theme={theme}>
@@ -27,20 +27,21 @@ function App() {
         <Help />
       </div>
 
-      <D3Tree />
+      <D3Tree 
+        setDetails = {setDetails}
+      />
 
-      <PCard
-        id={x.student.id}
-        branch={x.student.branch}
-        name={x.student.name}
-        year={x.student.year}
-        email={x.student.email}
-        picture={x.student.picture}
-        linkedIn={x.student.linkedIn}
-        hometown={x.student.hometown}
-        coCurriculars={x.student.coCurriculars}
-        socialMedia={x.student.socialMedia}
-        display= {true}
+      <PCard 
+        branch={details.branch}
+        name={details.name}
+        year={details.year}
+        email={details.email}
+        picture={details.picture}
+        linkedIn={details.linkedIn}
+        hometown={details.hometown}
+        coCurriculars={details.coCurriculars}
+        socialMedia={details.socialMedia}
+        display= {details.display}
       />
     </div>
     </ThemeProvider>

frontend/family_tree/src/Components/Tree.js

@@ -2,7 +2,7 @@ import * as d3 from 'd3';
 import StudentData from "../Data1.json";
 import React, { useLayoutEffect } from "react";
 
-function D3Tree(){
+function D3Tree(props){
   useLayoutEffect(() =>{
     var width = window.innerWidth;
     var height = window.innerHeight;
@@ -56,7 +56,20 @@ function D3Tree(){
           .attr("transform", function(d) {
             return "translate(" + source.x0  + "," + source.y0 + ")";
         })
-        .on('click', click);
+        .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,
+            display: true
+          });
+        });
 
       nodeEnter.append('circle')
           .attr('class', 'node')
@@ -155,7 +168,7 @@ function D3Tree(){
         update(node);
       }
     }
-  })
+  },[])
 
   return(
     <div id="tree"></div>

frontend/family_tree/src/Data1.json

@@ -39,7 +39,7 @@
         "picture": "url",
         "linkedIn": "url",
         "hometown": "Jammu",
-        "coCurriculars": [],
+        "coCurriculars": ["PClub head","Branch topper","6-star coder"],
         "socialMedia": { "insta": "link" }
       },
       "parent": "Root"
@@ -218,7 +218,7 @@
         "email": "dummy@gmail.com",
         "picture": "url",
         "linkedIn": "url",
-        "hometown": "",
+        "hometown": "Gujarat",
         "coCurriculars": [],
         "socialMedia": { "insta": "link" }
       },