import React, { useState, useEffect } from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import {
Container, Loading, Row, Dimmer, Spacer, Text, Card,
} from "@nextui-org/react";
import { getBrew as getBrewAction } from "../actions/brew";
function BrewPage(props) {
const { getBrew, brew, loading } = props;
const [mixed, setMixed] = useState(false);
useEffect(() => {
getBrew(1);
}, []);
// container functionality should be prepended with a '_'
const _onMixBrew = () => {
setMixed(true);
};
if (loading) {
return (
<Container sm justify="center">
<Row justify="center">
<Loading size="lg" />
</Row>
</Container>
);
}
return (
<Container>
<Row justify="center">
<Text h2>The Brew</Text>
</Row>
<Spacer y={1} />
<Row justify="center">
<Card>
<Card.Body>
<BrewCard brew={brew} mixBrew={_onMixBrew} />
</Card.Body>
<Card.Footer>
{mixed && (
<Text color="success">
The brew is mixed
</Text>
)}
</Card.Footer>
</Row>
</Container>
);
}
BrewPage.propTypes = {
getBrew: PropTypes.func.isRequired,
brew: PropTypes.object.isRequired,
};
const mapStateToProps = (state) => {
return {
brew: state.brew.data,
loading: state.brew.loading,
};
};
const mapDispatchToProps = (dispatch) => {
return {
getBrew: (id) => dispatch(getBrewAction(id)),
};
};
export default connect(mapStateToProps, mapDispatchToProps)(BrewPage);