As a User when I view a single plant it should have it's own dedicated page
As a User I should see the plants name, a big picture, and all the specifics from the collection about the specific plant
As a User I should be able to delete the plant from the single view and be redirected to My Plants page
As a User I should see a clickable button that allows me to water the plant
As a User I should see a clickable button that opens a pre-populated modal form for editing the plant details
AC
WHEN the page loads I should see the plant and all of it's details
THEN I should be able to delete the plant
AND I should be able to open a modal that edits the plant
AND I should be able to click a button that updates the lastWatered key in the collection to the current date
Dev Notes
[x] Set the state to an empty plant object to begin
[x] Create a componentDidMount() function that grabs the plantId from props, then call the getSinglePlant function previously made and pass it the plantId, then set the state plant: response.data
[x] Inside the render define plant = this.state
[x] Inside the return display the plant name in an h1 at the top followed by a large photo of the plant, an X button to delete the plant, followed by several p tags with the details of the plant
[x] The delete button should call a function inside the class that grabs the plantId from props and calls the deletePlant function in plantsData, then redirects you back to the My Plants page
User Story
As a User when I view a single plant it should have it's own dedicated page
As a User I should see the plants name, a big picture, and all the specifics from the collection about the specific plant
As a User I should be able to delete the plant from the single view and be redirected to My Plants page
As a User I should see a clickable button that allows me to water the plant
As a User I should see a clickable button that opens a pre-populated modal form for editing the plant details
AC
WHEN the page loads I should see the plant and all of it's details THEN I should be able to delete the plant AND I should be able to open a modal that edits the plant AND I should be able to click a button that updates the
lastWatered
key in the collection to the current dateDev Notes
[x] Set the state to an empty plant object to begin
[x] Create a
componentDidMount()
function that grabs theplantId
from props, then call thegetSinglePlant
function previously made and pass it theplantId
, then set the stateplant: response.data
[x] Inside the render define
plant = this.state
[x] Inside the return display the plant name in an
h1
at the top followed by a large photo of the plant, an X button to delete the plant, followed by severalp
tags with the details of the plant[x] The delete button should call a function inside the class that grabs the plantId from props and calls the
deletePlant
function inplantsData
, then redirects you back to the My Plants page