NavLinks.js

import React, { useContext, useState } from "react";
import { NavLink } from "react-router-dom";

import { AuthContext } from "../../context/auth-context";
import Modal from "../UIElements/Modal";
import Button from "../FormElements/Button";
import "./NavLinks.css";

const NavLinks = (props) => {
  const auth = useContext(AuthContext);
  const [modalVisible, setModalVisible] = useState(false);

  return (
    <>
      {modalVisible && (
        <Modal
          onCancel={props.onClear}
          header="Are you sure you want to Log Out?"
          footer={
            <NavLink to="/">
              <Button onClick={auth.logout}>LOG OUT</Button>
            </NavLink>
          }
        />
      )}
      <ul className="nav-links">
        <li>
          <NavLink to="/users" exact>
            ALL USERS
          </NavLink>
        </li>
        {auth.isLoggedIn && (
          <>
            <li>
              <NavLink to={`/${auth.userId}/places`}>MY PLACES</NavLink>
            </li>
            <li>
              <NavLink to="/places/new">ADD PLACE</NavLink>
            </li>
            <li>
              <NavLink to="/">LOG IN</NavLink>
            </li>
            <li>
              <Button
                onClick={() =>
                  setModalVisible((prevModalVisible) => !prevModalVisible)
                }
              >
                LOG OUT
              </Button>
            </li>
          </>
        )}
      </ul>
    </>
  );
};

export default NavLinks;