import React, { Component } from "react"; import { Menu, Button, Icon, Grid, Responsive, Dropdown, } from "semantic-ui-react"; import { editButtonStyle } from "../components/dashboard/devices/styleComponents"; import SceneModal from "../components/SceneModal"; import { RemoteService } from "../remote"; import { connect } from "react-redux"; import { appActions } from "../storeActions"; class ScenesNavbar extends Component { constructor(props) { super(props); this.state = { editMode: false, }; this.toggleEditMode = this.toggleEditMode.bind(this); this.openCurrentModalMobile = this.openCurrentModalMobile.bind(this); this.selectScene = this.selectScene.bind(this); this.getScenes(); } get activeItemScene() { return this.props.activeScene; } set activeItemScene(item) { this.props.setActiveScene(item); } get activeItemSceneName() { if (this.props.activeScene === -1) return "Scene"; return this.props.scenes[this.props.activeScene].name; } getScenes() { this.props.fetchAllScenes().catch(console.error); } openCurrentModalMobile() { //console.log(this.activeItemScene, this.props.sceneModalRefs); const currentModal = this.props.sceneModalRefs[this.activeItemScene] .current; currentModal.openModal(); } toggleEditMode(e) { this.setState((prevState) => ({ editMode: !prevState.editMode })); } selectScene(e, { id }) { this.activeItemScene = id || -1; this.getStates(id); } getStates(sceneId) { if (sceneId) { this.props .fetchStates(sceneId) .catch((err) => console.error(`error fetching states:`, err)); } } render() { return (
Scenes {Object.values(this.props.scenes).map((e, i) => { return ( {e.name} {this.state.editMode ? ( ) : null} ); })} Scenes {Object.values(this.props.scenes).map((e, i) => { return ( {e.name} ); })} {this.activeItemScene !== -1 ? ( ) : null}
); } } const setActiveScene = (activeScene) => { return (dispatch) => dispatch(appActions.setActiveScene(activeScene)); }; const mapStateToProps = (state, _) => ({ scenes: state.scenes, sceneModalRefs: Object.keys(state.scenes).reduce( (acc, key) => ({ ...acc, [key]: React.createRef() }), {} ), get isActiveDefaultScene() { return state.active.activeScene === -1; }, activeScene: state.active.activeScene, }); const ScenesNavbarContainer = connect(mapStateToProps, { ...RemoteService, setActiveScene, })(ScenesNavbar); export default ScenesNavbarContainer;