Looks READ

[CharityBunyon]

Story

• As a user, when I log in I should see all of my makeup looks.

AC

WHEN the page loads, AND the user is logged in THEN they should see all of their makeup looks

Dev Notes

• [ ] Create Looks component (src/components/shared/Looks/Looks.js
• [ ] Import react, lookshape, and sass file

In Class Component

• [ ] put lookshape in static propTypes
• [ ] In render function: set look object as this.props(arbituary input to beused to grab the keys of my looks data.
• [ ] Return domstring (example below)

<div class="card" style="width: 18rem;">
    <h5 class="card-title">Card title</h5>
    <div class="card-body">
      <img class="card-img-top" src="https://images.unsplash.com/photo-1551392505-f4056032826e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1400&q=60" alt="Card image cap">
    </div>
    <div>
      <Link className="btn btn-outline-dark" to={`/look/${look.id}`}>View </Link>
      <button class="btn btn-outline-dark">Delete</button>
    </div>
  </div>

• [ ] export Looks

In Home Component

• [ ] import react, sass, lookData, authdata, and Looks component.

In Class compoenent:

• [ ] the state of looks will live here (my looks will be "pushed" into this empty array)
• [ ] create ComponentDidMount: use the this keyword to bind the function getLooks
• [ ] create getLooks function that will grab the uid of each look and create then(pass looks and set.State of looks) and catch(err) promise

In Render:

• [ ] create div with class of d-flex, flexwrap
• [ ] create an objct that would map over the looks and display them on top of the dom/add look key id
• [ ] Export Home- will go to App.js
• [ ] make sure Home is imported to App and that it has it's own privateroute!