product details - beer

[phillipsja97]

UserStory

• When the user clicks on a certain product, they should be lead to a details modal that will give the individual details for that item and an option to add to cart.

AC

WHEN The user clicks on an individual beer item THEN A modal will pop up with more details on that item AND The user will see two options: An add item to cart and go to card, and an add item to cart but keep shopping button.

DevNotes

• Using the controlled modal from semantic-UI modal: https://react.semantic-ui.com/modules/modal/
• Create a new folder in components/shared called ProductModal.
• In ProductModal folder created ProdectModal.js and ProductModal.scss.
• In ProductModal.js start by these imports:

  import React from 'react';
  import { Button, Header, Icon, Modal, Card, Image } from 'semantic-ui-react';

• Next, create the class ProductModal.

  
  class ProductModal extends Component {
  render() {
    const { modalOpen, handleClose } = this.props;
  return (
    <Modal
      trigger={<Button onClick={this.handleOpen}>Show Modal</Button>}
      open={this.state.modalOpen}
      onClose={this.handleClose}
      basic
      size='small'
    >
      <Header icon='browser' content='Cookies policy' />
      <Modal.Content>
      <Card>
        <Image src='https://react.semantic-ui.com/images/avatar/large/daniel.jpg' wrapped ui={false} />
        <Card.Content>
          <Card.Header>Daniel</Card.Header>
          <Card.Meta>Joined in 2016</Card.Meta>
          <Card.Description>
            Daniel is a comedian living in Nashville.
          </Card.Description>
        </Card.Content>
        <Card.Content extra>
          10 Friends
        </Card.Content>
      </Card>
      </Modal.Content>
      <Modal.Actions>
        <Button color='green' onClick={this.handleClose} inverted>
          <Icon name='checkmark' />
          Add to Cart
        </Button>
        <Button color='green' onClick={this.handleClose} inverted>
          <Icon name='checkmark' />
          Keep Shopping
        </Button>
      </Modal.Actions>
    </Modal>
  )
  }
  }

export default ProductModal;

* In ```SingleBeer.js```  add this in the state:

state = { modalOpen: false }

* Use this import statement in ```SingleBeer.js```: ```import ProductModal from '../ProductModal/ProductModal';```
* Add these functions in ```SingleBeer.js```

handleOpen = () => this.setState({ modalOpen: true })

handleClose = () => this.setState({ modalOpen: false })

* At the bottom of the render() in ```SingleBeer.js```use the ProductModal:

* In the ProductModal use the product data props to fill out the card info.
* For now, set the buttons in the modal to just return an 'alert('Todo later')';