CharityBunyon / Create-Beauty

0 stars 0 forks source link

NavbarAuth Part 3- Adding Navbar #19

Closed CharityBunyon closed 4 years ago

CharityBunyon commented 4 years ago

Story

As a user, I should be able to log in and out of the application.

AC

WHEN the page load there should be a navbar with a link to login. AND when the user clicks the login link they will be transported the looks page

Dev Notes

[x] NavbarAuth component
import {Link} from react router dom
import Proptypes
[x] In Class component
add static PropTypes, authed: Proptypes.bool
add logMeOut function and pass through an event
[x] In Render

Create buildNav function const buildNavbar = () => { if (authed) { return:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container d-flex justify-content-center">
<Link class="navbar-brand brand-title" href="#">Create Beauty</Link>
</div>
<div class="">
  <button type="link" class="btn btn-link" onClick={this.logMeOut}>Logout</button>
</div>
</nav>

[x] In Return:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container d-flex justify-content-center">
<Link class="navbar-brand brand-title" href="#">Create Beauty</Link>
</div>
<div class="">
  <button className="btn btn-danger" onClick={ this.loginClickEvent }>Login</button>
  { buildNavbar() }
</div>
</nav>