126 lines
3.5 KiB
JavaScript
126 lines
3.5 KiB
JavaScript
import React, { Component } from "react";
|
||
import BeldenLogo from "../assets/images/belden-white.png";
|
||
import cable from "../utils/Cable";
|
||
import "../assets/stylesheets/browse.scss";
|
||
|
||
export default class BrowseComponent extends Component {
|
||
constructor(props) {
|
||
super(props);
|
||
this.state = {
|
||
cableList: [],
|
||
isLoading: true,
|
||
};
|
||
}
|
||
|
||
componentDidMount() {
|
||
this.props.socket.send('{"type":"cable_map","call":"request","data":{}}');
|
||
this.props.socket.addEventListener("message", this.handleMessage);
|
||
setTimeout(() => {
|
||
this.setState({ isLoading: false });
|
||
}, 500);
|
||
}
|
||
|
||
handleMessage = (event) => {
|
||
//console.log("Got message!");
|
||
try {
|
||
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);
|
||
}
|
||
|
||
searchUpdate = () => {
|
||
let value = document.querySelector(".browse-search input").value;
|
||
this.props.socket.send(
|
||
`{"type":"cable_search","call":"request","data":{"string":"${value}"}}`
|
||
);
|
||
};
|
||
|
||
returnPlaceholder() {
|
||
return (
|
||
<div className="browse-cable">
|
||
<div className="browse-cable-image" />
|
||
<div className="browse-cable-label">
|
||
<div className="browse-cable-name"></div>
|
||
<div className="browse-cable-description"></div>
|
||
<div className="browse-cable-brand"></div>
|
||
<div className="browse-cable-position"></div>
|
||
</div>
|
||
<span className="browse-cable-arrow">{">"}</span>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
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>
|
||
<div className="browse-search">
|
||
<input
|
||
type="text"
|
||
onChange={() => this.searchUpdate()}
|
||
placeholder="🔎 Start typing to search..."
|
||
/>
|
||
</div>
|
||
{this.state.isLoading ? (
|
||
<React.Fragment>
|
||
{this.returnPlaceholder()}
|
||
{this.returnPlaceholder()}
|
||
{this.returnPlaceholder()}
|
||
{this.returnPlaceholder()}
|
||
{this.returnPlaceholder()}
|
||
{this.returnPlaceholder()}
|
||
</React.Fragment>
|
||
) : (
|
||
this.state.cableList.map((cableObj, index) => (
|
||
<React.Fragment key={index}>
|
||
{cableObj.returnDiv()}
|
||
</React.Fragment>
|
||
))
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
}
|