As a user when I navigate to the My Rooms page I should see all my rooms displayed on nice cards
AC
WHEN the page loads
THEN I should see all the rooms displayed on cards
AND they should be bootstrap cards
Dev Notes
[x] In the MyRooms component set the state of plants to an empty array, then create a function called getRooms that will call the getRoomsByUid from roomData.js then set the state
[x] Create a componentDidMount() function and call this.getRooms
[x] inside the render make a variable called buildRoomCards that maps over the plants in state and creates `
[x] Inside the return make a button that opens a modal form for adding a new plant
[x] inside the return make a <div className="d-flex flex-wrap"> and them call {buildRoomCards}
[x] Inside the MyRooms component establish the prop-types, import the roomShape
[x] Define the props and links inside the render
[x] Make a list bootstrap card that has a delete button at the top, displays the a list of all the plants in the room with a thumbnail image of the plant
[x] The card should also have two buttons, one that links to the single-view for the room and another that links to a modal for editing
User Story
AC
WHEN the page loads THEN I should see all the rooms displayed on cards AND they should be bootstrap cards
Dev Notes
[x] In the
MyRooms
component set the state of plants to an empty array, then create a function calledgetRooms
that will call thegetRoomsByUid
fromroomData.js
then set the state[x] Create a
componentDidMount()
function and callthis.getRooms
[x] inside the render make a variable called
buildRoomCards
that maps over the plants in state and creates `[x] Inside the return make a button that opens a modal form for adding a new plant
[x] inside the return make a
<div className="d-flex flex-wrap">
and them call{buildRoomCards}
[x] Inside the
MyRooms
component establish the prop-types, import theroomShape
[x] Define the props and links inside the render
[x] Make a list bootstrap card that has a delete button at the top, displays the a list of all the plants in the room with a thumbnail image of the plant
[x] The card should also have two buttons, one that links to the single-view for the room and another that links to a modal for editing