trying to implement on edge click, same trade pop up, not working yet tho

2 files changed, 76 insertions, 2 deletions

diff --git a/react-frontend/src/components/EdgeInfo.js b/react-frontend/src/components/EdgeInfo.js
index e69de29..60af0e8 100644
--- a/react-frontend/src/components/EdgeInfo.js
+++ b/react-frontend/src/components/EdgeInfo.js
@@ -0,0 +1,31 @@
+
+import '../css/UserCheckin.css';
+
+/**
+ * Componenet for checkins. Has a toggle to show more info.
+ * @param {Object} props The props of the component.
+ * @returns {import('react').HtmlHTMLAttributes} A list element holding a checkin's info.
+ */
+function EdgeInfo(props) {
+    // State - toggled
+
+    const stockList = props.stockList;
+
+   /* const stockInfo = stockList.map((stock) =>
+        <li>{stock}</li>
+    );*/
+
+    const hideSelf = () => {
+        props.setHideInfo(true);
+    }
+
+    return (
+        <div className='edge-info-wrapper'>
+            <p onClick={hideSelf}> X </p>
+            <div className = 'edge-info'>
+                {stockList}
+            </div>
+        </div>);
+}
+
+export default EdgeInfo;
\ No newline at end of file
diff --git a/react-frontend/src/components/Visualization.js b/react-frontend/src/components/Visualization.js
index 9a837a1..33f96c9 100644
--- a/react-frontend/src/components/Visualization.js
+++ b/react-frontend/src/components/Visualization.js
@@ -5,14 +5,27 @@ import Graph from 'vis-react';
 
 // CSS imports
 import '../css/Canvas.css';
+import EdgeInfo from "./EdgeInfo";
 
 
 /**
- * This function renders and mantains thhe canvas.
+ * This function renders and mantains the canvas.
  * @param {Object} props The props for the canvas.
  * @returns {import("react").HtmlHTMLAttributes} The canvas to be retured.
  */
 function Visualization(props) {
+
+  /*let stocks = {};
+  let hideEdgeInfo = true;
+
+  const setStocks = (newStocks) => {
+    stocks = newStocks;
+  }
+
+  const setHideEdgeInfo = (val) => {
+    hideEdgeInfo = val;
+  }*/
+
   const options = {
     edges: {
       color: "#ffffff"
@@ -26,6 +39,27 @@ function Visualization(props) {
     nodes: [],
     edges: []
   });
+
+  /*const getEdgeInfo = (fromID, toID) => {
+      fetch("http://localhost:4567/edge-data", {
+        method: "POST",
+        body: JSON.stringify({
+          followerID: fromID,
+          leaderID:  toID,
+        }),
+        headers: {
+          "Content-Type": "application/json",
+        },
+        credentials: "same-origin"
+      })
+          .then(res  => res.json())
+          .then(data => {
+            console.log(data);
+            setStocks(data);
+            setHideEdgeInfo(false);
+          })
+          .catch(err => console.log(err));
+    }*/
   const getNodes = () => {
     let nodes = [];
     const maxScore = props.data[0].suspicionScore;
@@ -79,12 +113,21 @@ function Visualization(props) {
           color:{
             opacity: 0.7,
             highlight:'#fdca40',
-          }
+          },
+          /*chosen: {
+            edge: () => getEdgeInfo(follower.id, hub.id)
+          }*/
         });
       });
     });
     return edges;
   }
+  /*
+  * <EdgeInfo
+          stockList={stocks}
+          setHideInfo={setHideEdgeInfo}
+          hidden={hideEdgeInfo}>
+      </EdgeInfo>*/
 
   // Hooks to update graph state
   useEffect(() => setGraphState({nodes: getNodes(), edges: getEdges()}), [JSON.stringify(props.data)]);