All files / components/Nav AppNavbar.js

100% Statements 9/9
100% Branches 31/31
100% Functions 4/4
100% Lines 9/9

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131              592x               81x 61x   20x         81x 55x   26x         296x           296x                                                                                                                                                                                          
import { Button, Container, Nav, Navbar, NavDropdown } from "react-bootstrap";
import { Link } from "react-router-dom";
import { hasRole } from "main/utils/currentUser";
import headerImg from "../../../assets/stork.png"
import AppNavbarLocalhost from "main/components/Nav/AppNavbarLocalhost"
 
function isParticipant(currentUser) {
  return (
    hasRole(currentUser, "ROLE_ADMIN")
    || hasRole(currentUser, "ROLE_DRIVER")
    || hasRole(currentUser, "ROLE_RIDER")
  );
}
 
function createRideRequest(currentUser) {
  if (hasRole(currentUser, "ROLE_RIDER") || hasRole(currentUser, "ROLE_ADMIN")) {
    return (<NavDropdown.Item data-testid="appnavbar-ride-create-dropdown" as={Link} to="/ride/create">Request Ride</NavDropdown.Item>)
  } else {
    return (<div data-testid="NO-appnavbar-ride-create-dropdown"></div>)
  }
}
 
function createShift(currentUser) {
  if (hasRole(currentUser, "ROLE_ADMIN")) {
    return (<NavDropdown.Item data-testid="appnavbar-shift-dropdown-create" as={Link} to="/shift/create">Create Shift</NavDropdown.Item>)
  } else {
    return (<div data-testid="NO-appnavbar-shift-dropdown-create"></div>)
  }
}
 
export default function AppNavbar({ currentUser, systemInfo, doLogout, currentUrl = window.location.href }) {
  const styles = {
    navbar: {
      backgroundColor: "#003660",
    }
  }
 
  return (
    <>
      {
        (currentUrl.startsWith("http://localhost:3000") || currentUrl.startsWith("http://127.0.0.1:3000")) && (
          <AppNavbarLocalhost url={currentUrl} />
        )
      }
 
      <Navbar expand="xl" variant="dark" sticky="top" data-testid="AppNavbar" style={styles.navbar}>
        <Container>
        <img data-testid="gauchoride-nav-logo" src={headerImg} alt="" style={{width: 80, height: 80, marginRight: 15}} />
 
          <Navbar.Brand as={Link} to="/">
            GauchoRide
          </Navbar.Brand>
 
          <Navbar.Toggle />
 
          <>
            {/* be sure that each NavDropdown has a unique id and data-testid */}
          </>
 
          <Navbar.Collapse>
            {/* This `nav` component contains all navigation items that show up on the left side */}
            <Nav className="me-auto" >
              {
                systemInfo?.springH2ConsoleEnabled && (
                  <>
                    <Nav.Link href="/h2-console">H2Console</Nav.Link>
                  </>
                )
              }
              {
                systemInfo?.showSwaggerUILink && (
                  <>
                    <Nav.Link href="/swagger-ui/index.html">Swagger</Nav.Link>
                  </>
                )
              }
              {
                hasRole(currentUser, "ROLE_ADMIN") && (
                  <NavDropdown title="Admin" id="appnavbar-admin-dropdown" data-testid="appnavbar-admin-dropdown" >
                    <NavDropdown.Item as={Link} to="/admin/users">Users</NavDropdown.Item>
                  </NavDropdown>
                )
              }
              {
                isParticipant(currentUser) && (
                  <NavDropdown title="Shift" id="appnavbar-shift-dropdown" data-testid="appnavbar-shift-dropdown" >
                    <NavDropdown.Item data-testid="appnavbar-shift-dropdown-table" as={Link} to="/shift/">Driver Shifts</NavDropdown.Item>
                    { createShift(currentUser) }
                    </NavDropdown>
                )
              }
              {
                isParticipant(currentUser) && (
                  <NavDropdown title="Ride Request" id="appnavbar-ride-dropdown" data-testid="appnavbar-ride-dropdown" >
                    <NavDropdown.Item data-testid="appnavbar-ride-dropdown-rides" as={Link} to="/ride/">Rides</NavDropdown.Item>
                    { createRideRequest(currentUser) }
                  </NavDropdown>
                )
              }
              {
                hasRole(currentUser, "ROLE_MEMBER") && (
                  <Nav.Link as={Link} to="/apply/rider">Apply to be a Rider</Nav.Link>
                )
              }
              {
                hasRole(currentUser, "ROLE_ADMIN") && (
                  <Nav.Link as={Link} to="/admin/applications/riders">Rider Applications</Nav.Link>
                )
              }
 
            </Nav>
 
            <Nav className="ml-auto">
              {/* This `nav` component contains all navigation items that show up on the right side */}
              {
                currentUser && currentUser.loggedIn ? (
                  <>
                    <Navbar.Text className="me-3" as={Link} to="/profile">Welcome, {currentUser.root.user.fullName}</Navbar.Text>
                    <Button onClick={doLogout}>Log Out</Button>
                  </>
                ) : (
                  <Button href="/oauth2/authorization/google">Log In</Button>
                )
              }
            </Nav>
          </Navbar.Collapse>
        </Container >
      </Navbar >
    </>
  );
}