import React, { useEffect, useState } from "react"; import PropTypes from "prop-types"; import { connect } from "react-redux"; import { botType } from "../botType"; import Wizard from "./Wizard"; import { makeStyles } from "@material-ui/core/styles"; const useStyles = makeStyles(theme => ({ bot: { position: "fixed", bottom: theme.spacing(2), right: theme.spacing(2), zIndex: 1 }, botPosition: { position: "absolute" } })); const BotsManager = ({ bot }) => { const [type, setType] = useState(bot.type); const classes = useStyles(); useEffect(() => { if (bot.type) setType(bot.type); }, [bot.type]); return ( <div className={classes.botPosition}> <div className={classes.bot}>{type === botType.wizard && <Wizard />}</div> </div> ); }; BotsManager.propTypes = { bot: PropTypes.object }; function mapStateToProps(state) { return { bot: state.bot }; } function mapDispatchToProps() { return {}; } export default connect(mapStateToProps, mapDispatchToProps)(BotsManager);