jukebox-web/src/components/CableDetailComponent.js

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/cabledetail.scss";

class Cable {
  constructor(cableData) {
    this.partnum = cableData.partnum;
    this.id = cableData.id;
    this.brand = cableData.brand;
    this.position = cableData.position;
    this.description = cableData.description
      ? cableData.image
      : "No description available.";
    this.image = cableData.image
      ? `http://localhost${cableData.image}`
      : DefaultPartImg;
    this.dynamicProps = {};

    Object.keys(cableData).forEach((key) => {
      if (!["partnum", "id", "brand", "position", "image"].includes(key)) {
        this.dynamicProps[key] = cableData[key];
      }
    });
  }
}

export default class CableDetailComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      cableDetails: null,
    };
  }

  componentDidMount() {
    const cablePos = window.location.href.split("/").pop();
    this.props.socket.send(
      `{"type":"cable_details","call":"request","data":{"position":["${cablePos}"]}}`
    );
    this.props.socket.addEventListener("message", this.handleMessage);
  }

  handleMessage = (event) => {
    try {
      console.log("Message from server", event.data);
      const message = JSON.parse(event.data);
      const cableDetails = new Cable(message.data.cables[0]);
      this.setState({ cableDetails });
    } catch (error) {
      console.error("Error parsing message from server:", error);
    }
  };

  componentWillUnmount() {
    this.props.socket.removeEventListener("message", this.handleMessage);
  }

  renderTables() {
    const { cableDetails } = this.state;
    if (!cableDetails) return null;

    return Object.keys(cableDetails.dynamicProps).map((key) => (
      <div key={key}>
        <h2>{key.replace(/([A-Z])/g, " $1").trim()}</h2>
        <table>
          <tbody>
            {Object.entries(cableDetails.dynamicProps[key]).map(
              ([propKey, value]) => (
                <tr key={propKey}>
                  <td>{propKey}</td>
                  <td>{Array.isArray(value) ? value.join(", ") : value}</td>
                </tr>
              )
            )}
          </tbody>
        </table>
      </div>
    ));
  }

  render() {
    const { cableDetails } = this.state;

    return (
      <div className="cable">
        <div className="cable-image">
          <img src={BeldenLogo} alt="Belden" />
        </div>
        <div className="cable-fieldContainer">
          <div className="cable-actions">
            <NavLink to="/browse" className="cable-actions-back">
              <span>⬅️ Back</span>
            </NavLink>
          </div>
          {cableDetails ? (
            <div className="cable-main">
              <img
                className="cable-main-image"
                src={cableDetails.image}
                alt="Cable"
              />
              <div className="cable-main-label">
                <div className="cable-main-name">{cableDetails.partnum}</div>
                <div className="cable-main-description">
                  {cableDetails.description}
                </div>
                <div className="cable-main-brand">
                  <span
                    style={{ color: "black", backgroundColor: "transparent" }}
                  >
                    Brand:{" "}
                  </span>
                  {cableDetails.brand}
                </div>
                <div className="cable-main-position">
                  <span
                    style={{ color: "black", backgroundColor: "transparent" }}
                  >
                    Position:{" "}
                  </span>
                  {cableDetails.position}
                </div>
              </div>
            </div>
          ) : (
            <div className="cable-main"></div>
          )}
          <div className="cable-actions">
            <div className="cable-actions-button">
              <span>➤ Datasheet</span>
              <span>✏️</span>
            </div>
            <div className="cable-actions-button">
              <span>➤ Show</span>
              <span>💡</span>
            </div>
            <div className="cable-actions-button">
              <span>➤ Dispense</span>
              <span>🤲</span>
            </div>
          </div>
        </div>
      </div>
    );
  }
}