dynamic card

Author: khushi-parikh

frontend/family_tree/src/App.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import './App.css';
 import Help from './Components/Help.js';
 import SearchBar from "./Components/SearchBar";
@@ -17,7 +17,16 @@ function App() {
     }
   });
 
-  const x = StudentData[0];
+  const [name, setCardName] = useState("name");
+  const [branch, setCardBranch] = useState("branch");
+  const [year, setCardYear] = useState("year");
+  const [email, setCardEmail] = useState("email");
+  const [picture, setCardPicture] = useState("picture");
+  const [linkedIn, setCardLinkedIn] = useState("name");
+  const [hometown, setCardHometown] = useState("name");
+  const [coCurriculars, setCardCoCurriculars] = useState("");
+  const [socialMedia, setCardSocialMedia] = useState("name");
+  const [display, setCardDisplay] = useState(true);
 
   return (
     <ThemeProvider theme={theme}>
@@ -27,20 +36,29 @@ function App() {
         <Help />
       </div>
 
-      <D3Tree />
+      <D3Tree setCardName={setCardName}
+        setCardBranch={setCardBranch}
+        setCardYear={setCardYear}
+        setCardEmail={setCardEmail}
+        setCardPicture={setCardPicture}
+        setCardLinkedIn={setCardLinkedIn}
+        setCardHometown={setCardHometown}
+        setCardCoCurriculars={setCardCoCurriculars}
+        setCardSocialMedia={setCardSocialMedia}
+        setCardDisplay = {setCardDisplay}
+      />
 
-      <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={branch}
+        name={name}
+        year={year}
+        email={email}
+        picture={picture}
+        linkedIn={linkedIn}
+        hometown={hometown}
+        coCurriculars={coCurriculars}
+        socialMedia={socialMedia}
+        display= {display}
       />
     </div>
     </ThemeProvider>

frontend/family_tree/src/Components/ProfileCard.js

@@ -113,11 +113,12 @@ function PCard(props) {
               <Divider variant="middle" />
               <br />
               <Box sx={{ color: "#2a4158" ,textAlign:"center"}}>
-                {props.coCurriculars.map((item) => (
+                {/* {props.coCurriculars.map((item) => (
                   <Typography variant="body2" key={item} gutterBottom>
                     {item}
                   </Typography>
-                ))}
+                ))} */}
+                {props.coCurriculars}
               </Box>
             </React.Fragment>
           )}

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,19 @@ function D3Tree(){
           .attr("transform", function(d) {
             return "translate(" + source.x0  + "," + source.y0 + ")";
         })
-        .on('click', click);
+        .on('click', click)
+        .on('contextmenu', function(node,d){
+          props.setCardName(d.id);
+          props.setCardBranch(d.data.student.branch);
+          props.setCardYear(d.data.student.year);
+          props.setCardEmail(d.data.student.email);
+          props.setCardPicture(d.data.student.picture);
+          props.setCardLinkedIn(d.data.student.linkedIn);
+          props.setCardHometown(d.data.student.hometown);
+          props.setCardCoCurriculars(d.data.student.coCurriculars);
+          props.setCardSocialMedia(d.data.student.socialMedia);
+          props.setCardDisplay(true);
+        });
 
       nodeEnter.append('circle')
           .attr('class', 'node')

frontend/family_tree/src/Data1.json

@@ -218,7 +218,7 @@
         "email": "dummy@gmail.com",
         "picture": "url",
         "linkedIn": "url",
-        "hometown": "",
+        "hometown": "Gujarat",
         "coCurriculars": [],
         "socialMedia": { "insta": "link" }
       },