Source: frontend/iconViews/DrinkIcon.js

  1. //Brennan Wilkes
  3. //imports
  4. import React from "react";
  5. import "../bootstrap-import.js";
  6. import axios from "axios";
  8. import "./iconView.css";
  10. //capitalization one liner using regex
  11. const capitalize = s => String(s).toLowerCase().replace(/(?:^|\s|["'([{])+\S/g, l => l.toUpperCase());
  13. /**
  14. 	An icon preview view for a drink recipe
  15. 	@class
  16. 	@memberof frontend
  17. 	@extends React.Component
  18. */
  19. class DrinkIcon extends React.Component{
  21. 	/**
  22. 		Binds methods
  23. 		@param {any[]} Must contain a click callback and full drink details. Details should be gathered at parent level
  24. 	*/
  25. 	constructor(props){
  26. 		super(props);
  27. 		this.state = this.props.drinkInfo;
  28. 	}
  30. 	/**
  31. 		Renders a icon view of the drink, using the drink image and name
  32. 	*/
  33. 	render(){
  34. 		return <>
  35. 			<div className="iconWrapper" onClick={event=>{
  36. 				this.props.clickCallback(this.state.id);
  37. 			}}>
  38. 				<img className="iconItem" src={this.state.imgURL} />
  39. 				<div><h3 className="h6 bg-secondary text-light" >{capitalize(this.state.name)}</h3></div>
  40. 			</div>
  41. 		</>
  42. 	}
  43. }
  45. export default DrinkIcon;