Detail base

src/components/BrowseComponent.js

@@ -1,6 +1,7 @@
 import React, { Component } from "react";
 import BeldenLogo from "../assets/images/belden-white.png";
 import DefaultPartImg from "../assets/images/part.png";
+import { NavLink } from "react-router-dom";
 import "../assets/stylesheets/browse.scss";
 
 class cable {
@@ -28,7 +29,7 @@ class cable {
 
   returnDiv() {
     return (
-      <div className="browse-cable">
+      <NavLink className="browse-cable" to={"/cable/" + this.part_number}>
         <img className="browse-cable-image" src={this.image} alt="Cable" />
         <div className="browse-cable-label">
           <div className="browse-cable-name">{this.name}</div>
@@ -42,7 +43,7 @@ class cable {
           </div>
         </div>
         <span className="browse-cable-arrow">{">"}</span>
-      </div>
+      </NavLink>
     );
   }
 }
@@ -56,14 +57,8 @@ export default class BrowseComponent extends Component {
   }
 
   componentDidMount() {
-    this.props.socketHandler.sendMessage(
-      '{"type":"cable_map","call":"request","data":{}}'
-    );
-
-    this.props.socketHandler.socket.addEventListener(
-      "message",
-      this.handleMessage
-    );
+    this.props.socket.send('{"type":"cable_map","call":"request","data":{}}');
+    this.props.socket.addEventListener("message", this.handleMessage);
   }
 
   handleMessage = (event) => {
@@ -102,10 +97,7 @@ export default class BrowseComponent extends Component {
   }
 
   componentWillUnmount() {
-    this.props.socketHandler.socket.removeEventListener(
-      "message",
-      this.handleMessage
-    );
+    this.props.socket.removeEventListener("message", this.handleMessage);
   }
 
   render() {

src/components/CableDetailComponent.js

@@ -0,0 +1,41 @@
+import React, { Component } from "react";
+import BeldenLogo from "../assets/images/belden-white.png";
+import { NavLink } from "react-router-dom";
+import "../assets/stylesheets/cabledetail.scss";
+
+export default class CableDetailComponent extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  // componentDidMount() {
+  //   this.props.socket.send('{"type":"cable_map","call":"request","data":{}}');
+  //   this.props.socket.addEventListener("message", this.handleMessage);
+  // }
+
+  // handleMessage = (event) => {
+  //   try {
+  //     console.log("Message from server", event.data);
+  //     const message = JSON.parse(event.data);
+  //   } catch (error) {
+  //     console.error("Error parsing message from server:", error);
+  //   }
+  // };
+
+  // componentWillUnmount() {
+  //   this.props.socket.removeEventListener("message", this.handleMessage);
+  // }
+
+  render() {
+    return (
+      <div className="cable">
+        <div className="cable-image">
+          <img src={BeldenLogo} alt="Belden" />
+        </div>
+        <div className="cable-fieldContainer">
+          
+        </div>
+      </div>
+    );
+  }
+}

src/components/NavBar.js

@@ -14,6 +14,9 @@ export default class NavBar extends Component {
     } else if (path.includes("map")) {
       document.getElementById("map").style.backgroundColor = "#007CBE";
       document.getElementById("map-s").style.color = "white";
+    } else if (path.includes("cable")) {
+      document.getElementById("browse").style.backgroundColor = "#007CBE";
+      document.getElementById("browse-s").style.color = "white";
     } else {
       document.getElementById("home").style.backgroundColor = "#007CBE";
       document.getElementById("home-s").style.color = "white";