Source

components/NavItems.js

//React
import React, { useRef, useState } from "react";
import { Link } from "@reach/router";

//Components
import SaveChangesModal from "./SaveChangesModal";

//Redux
import { connect } from "react-redux";

//Styles
import { Nav, Navbar } from "react-bootstrap";

//Other
import PropTypes from "prop-types";

/**
 *  Navbar items.
 *
 * @component
 */
const NavItems = ({ loadedContract }) => {
  /**
   * Toggle modal button reference hook.
   * @constant
   *
   * @type {Object}
   */
  const toggleModalButtonRef = useRef();

  /**
   * URL state hook.
   * @constant
   *
   * @type {[string, function]}
   */
  const [url, setUrl] = useState("#");

  return (
    <>
      <SaveChangesModal
        context="navLink"
        toggleModalButtonRef={toggleModalButtonRef}
        url={url}
      />

      <Navbar.Collapse id="basic-navbar-nav">
        {loadedContract ? (
          <Nav className="me-auto">
            <Nav.Link
              as={Link}
              to="/"
              onClick={(e) => {
                e.preventDefault();
                setUrl("/");
                toggleModalButtonRef.current.click();
              }}
            >
              Home
            </Nav.Link>
            <Nav.Link
              as={Link}
              to="process-editor"
              onClick={(e) => {
                e.preventDefault();
                setUrl("process-editor");
                toggleModalButtonRef.current.click();
              }}
            >
              Process editor
            </Nav.Link>
            <Nav.Link
              as={Link}
              to="activity-properties"
              onClick={(e) => {
                e.preventDefault();
                setUrl("activity-properties");
                toggleModalButtonRef.current.click();
              }}
            >
              Activity properties
            </Nav.Link>
            <Nav.Link
              as={Link}
              to="data-model"
              onClick={(e) => {
                e.preventDefault();
                setUrl("data-model");
                toggleModalButtonRef.current.click();
              }}
            >
              Data model
            </Nav.Link>
          </Nav>
        ) : (
          <Nav className="me-auto">
            <Nav.Link as={Link} to="/">
              Home
            </Nav.Link>
          </Nav>
        )}
      </Navbar.Collapse>
    </>
  );
};

const mapStateToProps = (state) => {
  return {
    loadedContract: state.contracts.loadedContract,
  };
};

NavItems.propTypes = {
  /**
   * Loaded contract JSON.
   */
  loadedContract: PropTypes.object,
};

export default connect(mapStateToProps)(NavItems);