fixed double rendering

Author: khushi-parikh

frontend/family_tree/src/App.js

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

@@ -113,12 +113,11 @@ 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

@@ -58,16 +58,17 @@ function D3Tree(props){
         })
         .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);
+          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')
@@ -167,7 +168,7 @@ function D3Tree(props){
         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"