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 = {
      clicks: 0,
      modalOpen_return: 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 {
      document.getElementById("browse").style.backgroundColor = "#007CBE";
      document.getElementById("browse-s").style.color = "white";
    }
  }

  handleClick = () => {
    const { clicks, timer } = this.state;
    if (clicks === 0) {
      const newTimer = setTimeout(() => {
        this.setState({ clicks: 0 });
        clearTimeout(newTimer);
      }, 1000);
      this.setState({ timer: newTimer });
    }

    this.setState({ clicks: clicks + 1 });

    if (clicks + 1 === 2) {
      window.location.replace("/settings");

      clearTimeout(timer);
      this.setState({ clicks: 0, timer: null });
    }
  };

  componentWillUnmount() {
    if (this.state.timer) {
      clearTimeout(this.state.timer);
    }
  }

  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 = (tray) => {
    this.props.socket.send(
      `{"type": "cable_get","call": "send","data": {"tray": ${tray}}}`
    );
    console.log("Cable returned from tray " + tray);
    this.closeModal("modalOpen_return");
  };

  render() {
    const { modalOpen_return, 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>
            <div className="navbar-top-secret" onClick={this.handleClick}></div>
          </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.openModal("modalOpen_return")}
        >
          <span id="browse-s">Return Cable</span>
        </div>
        <Modal
          isOpen={modalOpen_return}
          onRequestClose={() => this.closeModal("modalOpen_return")}
          contentLabel="show"
          style={modalStyle}
        >
          <div className="modal-container">
            <div className="modal-title">
              <span>♻️</span>
              <span>Return Cable</span>
            </div>
            <div className="modal-body">
              <span>Select the tray you would like to return from.</span>
            </div>
            <div className="modal-tray">
              <div className="modal-return" onClick={() => this.returnCable(0)}>
                <span>1</span>
              </div>
              <div className="modal-return" onClick={() => this.returnCable(1)}>
                <span>2</span>
              </div>
              <div className="modal-return" onClick={() => this.returnCable(2)}>
                <span>3</span>
              </div>
              <div className="modal-return" onClick={() => this.returnCable(3)}>
                <span>4</span>
              </div>
            </div>
            <div
              className="modal-close"
              onClick={() => this.closeModal("modalOpen_return")}
            >
              <span>Cancel</span>
            </div>
          </div>
        </Modal>
      </div>
    );
  }
}