jukebox-web/src/components/NavBar.js

import React, { Component } from "react";
import { NavLink } from "react-router-dom";
import Modal from "react-modal";
import "../assets/stylesheets/navbar.scss";

Modal.setAppElement("#root");

export default class NavBar extends Component {
  constructor(props) {
    super(props);
    this.state = {
      modalOpen_activeArm: false,
      modalOpacity: 0,
    };
    this.openModal = this.openModal.bind(this);
    this.closeModal = this.closeModal.bind(this);
  }

  componentDidMount() {
    let path = window.location.pathname;
    if (path.includes("statistics")) {
      document.getElementById("statistics").style.backgroundColor = "#007CBE";
      document.getElementById("statistics-s").style.color = "white";
    } 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 if (path.includes("settings")) {
      document.getElementById("settings").style.backgroundColor = "#007CBE";
      document.getElementById("settings-s").style.color = "white";
    } else {
      document.getElementById("browse").style.backgroundColor = "#007CBE";
      document.getElementById("browse-s").style.color = "white";
    }

    this.props.socket.addEventListener("message", this.handleMessage);
  }

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

  handleMessage = (event) => {
    try {
      const message = JSON.parse(event.data);
      if (message.type === "mode") {
        let mode = JSON.parse(message.data).mode.toLowerCase();
        console.log("Current Mode: " + mode);
        if (mode === "idle") {
          setTimeout(() => {
            if (mode === "idle") {
              this.closeModal("modalOpen_activeArm");
            }
          }, 3000);
        } else {
          this.openModal("modalOpen_activeArm");
        }
      }
    } catch (error) {
      console.error("");
    }
  };

  openModal = (modal) => {
    this.setState({ [modal]: true }, () => {
      setTimeout(() => this.setState({ modalOpacity: 1 }), 10);
    });
  };

  closeModal = (modal) => {
    this.setState({ modalOpacity: 0 }, () => {
      setTimeout(() => this.setState({ [modal]: false }), 300);
    });
  };

  returnCable = () => {
    this.props.socket.send(
      `{"type": "cable_get","call": "send","data": {"tray": 0}}`
    );
  };

  cancelAction = () => {
    this.props.socket.send(
      `{"type": "cancel_action","call": "request","data": {}}`
    );
  };

  render() {
    const { modalOpen_activeArm, modalOpacity } = this.state;

    const modalStyle = {
      content: {
        opacity: modalOpacity,
        transition: "opacity 300ms ease-in-out",
        top: "50%",
        left: "50%",
        right: "auto",
        bottom: "auto",
        marginRight: "-50%",
        width: "auto",
        height: "auto",
        transform: "translate(-50%, -50%)",
        overflow: "hidden",
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "center",
        borderRadius: "20px",
        background:
          "linear-gradient(-30deg, rgb(187, 194, 236) 0%, rgba(255, 255, 255, 1) 100%)",
        boxShadow: "0 0 20px rgba(0, 0, 0, 0.5)",
        minWidth: "30%",
        minHeight: "30%",
      },
      overlay: {
        opacity: modalOpacity,
        transition: "opacity 300ms ease-in-out",
        backgroundColor: "rgba(255, 255, 255, 0.15)",
        backdropFilter: "blur(5px)",
      },
    };

    return (
      <div className="navbar">
        <div className="navbar-top">
          <div className="navbar-top-container">
            <div className="navbar-top-hamburger">≡</div>
            <NavLink className="navbar-settings" id="settings" to="/settings">
              <span id="settings-s">⚙️</span>
            </NavLink>
          </div>
          <h1>Jukebox</h1>
          <ol className="navbar-list">
            <NavLink className="navbar-list-item" id="browse" to="/browse">
              <span id="browse-s">🛍️ Browse</span>
            </NavLink>
            <NavLink className="navbar-list-item" id="map" to="/map">
              <span id="map-s">🗺️ Map</span>
            </NavLink>
            <NavLink
              className="navbar-list-item"
              id="statistics"
              to="/statistics"
            >
              <span id="statistics-s">📊 Statistics</span>
            </NavLink>
          </ol>
        </div>
        <div className="navbar-return" onClick={() => this.returnCable()}>
          <span id="browse-s">Return Cable</span>
        </div>

        <Modal
          isOpen={modalOpen_activeArm}
          contentLabel="show"
          style={modalStyle}
        >
          <div className="modal-container">
            <div className="modal-title">
              <span>⚠️</span>
              <span>Arm in Motion</span>
            </div>
            <div className="modal-body">
              <span>Please stay clear of the arm.</span>
            </div>
            <div className="modal-closeX" onClick={() => this.cancelAction()}>
              <span>Cancel Action</span>
            </div>
          </div>
        </Modal>
      </div>
    );
  }
}