jukebox-web/src/components/BrowseComponent.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/browse.scss";

class cable {
  constructor(
    part_number,
    position,
    name,
    brand,
    description,
    short_description,
    image,
    category,
    application
  ) {
    this.part_number = part_number;
    this.position = position;
    this.name = name;
    this.brand = brand;
    this.image = image ? `http://localhost${image}` : DefaultPartImg;

    this.category = category;
    this.application = application;
    this.short_description = short_description;
    this.description = description;

    if (short_description === undefined) {
      if (this.description !== undefined) {
        this.short_description = this.description;
      } else if (this.application !== undefined) {
        this.short_description = this.application;
      } else if (this.category !== undefined) {
        this.short_description = this.category;
      } else {
        this.short_description = "";
      }
    }

    if (this.short_description !== undefined) {
      this.short_description =
        this.short_description.charAt(0).toUpperCase() +
        this.short_description.slice(1);
      if (this.short_description.length > 100) {
        this.short_description =
          this.short_description.substring(0, 80) + "...";
      }
    }
  }

  returnDiv() {
    return (
      <NavLink className="browse-cable" to={"/browse/cable/" + this.position}>
        <img className="browse-cable-image" src={this.image} alt="Cable" />
        <div className="browse-cable-label">
          <div className="browse-cable-name">{this.name}</div>
          <div className="browse-cable-description">
            <span style={{ color: "#007cbe" }}></span>
            {this.short_description}
          </div>
          {this.category ? (
            <div className="browse-cable-category">
              <span style={{ color: "black", backgroundColor: "transparent" }}>
                Category:{" "}
              </span>
              {this.category}
            </div>
          ) : null}
          <div className="browse-cable-brand">
            <span style={{ color: "black", backgroundColor: "transparent" }}>
              Brand:{" "}
            </span>
            {this.brand}
          </div>
          <div className="browse-cable-position">
            <span style={{ color: "black", backgroundColor: "transparent" }}>
              Position:{" "}
            </span>
            {this.position}
          </div>
        </div>
        <span className="browse-cable-arrow">{">"}</span>
      </NavLink>
    );
  }
}

export default class BrowseComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      cableList: [],
    };
  }

  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);
      const cableList = this.browseParse(message);
      this.setState({ cableList });
    } catch (error) {
      console.error("Error parsing message from server:", error);
    }
  };

  browseParse(message) {
    let cableList = [];
    let map = message.data.map;
    for (let i = 0; i < map.length; i++) {
      let part_number = map[i].part_number;
      let image = map[i].image;
      let position = map[i].position;
      let name = map[i].name;
      let brand = map[i].brand;
      let description = map[i].description;
      let short_description = map[i].short_description;
      let category = map[i].category;
      let application = map[i].application;
      cableList.push(
        new cable(
          part_number,
          position,
          name,
          brand,
          description,
          short_description,
          image,
          category,
          application
        )
      );
    }
    return cableList;
  }

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

  render() {
    return (
      <div className="browse">
        <div className="browse-image">
          <img src={BeldenLogo} alt="Belden" />
        </div>
        <div className="browse-fieldContainer">
          <h1 className="browse-title">Browse</h1>
          {this.state.cableList.map((cableObj, index) => (
            <React.Fragment key={index}>{cableObj.returnDiv()}</React.Fragment>
          ))}
        </div>
      </div>
    );
  }
}