frontend/smart-hut/src/views/Navbar.js

import React, { Component } from "react";
import {
  Menu,
  Button,
  Grid,
  Icon,
  Responsive,
  Dropdown,
} from "semantic-ui-react";
import { editButtonStyle } from "../components/dashboard/devices/styleComponents";
import ModalWindow from "../components/modalform";

class Navbar extends Component {
  constructor(props) {
    super(props);
    this.state = {
      activeItemName: "Home",
      activeItem: -1,
      edited: "",
      editMode: false,
      room: "",
    };

    this.roomRefs = {};
    this.props.rooms.forEach((e) => {
      this.roomRefs[e.id] = React.createRef();
    });
  }

  componentDidMount() {
    this.setState({
      activeItem: this.props.activeItem,
    });
  }

  editModeController = (e) =>
    this.setState((prevState) => ({ editMode: !prevState.editMode }));

  handleClick = (e, { id, name }) => {
    const room = this.props.rooms.filter((d) => d.id === id)[0];
    //console.log(room);
    this.setState({
      activeItem: id,
      activeItemName: name,
    });
    this.activeRoom = room;
    //console.log(this.activeRoom);
    this.forceUpdate();
    this.props.handleItemClick(id);
  };

  render() {
    return (
      <div style={{ background: "#1b1c1d!important", padding: "0 20px" }}>
        <Responsive minWidth={768}>
          <Grid>
            <Grid.Row color="black">
              <button style={editButtonStyle} onClick={this.editModeController}>
                Edit
              </button>
            </Grid.Row>
            <Grid.Row>
              <Menu inverted fluid vertical>
                <Menu.Item
                  key={-1}
                  id={-1}
                  name="Home"
                  active={this.state.activeItem === -1}
                  onClick={this.handleClick}
                >
                  <Grid>
                    <Grid.Row>
                      <Grid.Column>
                        <Icon name="home" size="small" />
                      </Grid.Column>
                      <Grid.Column>HOME</Grid.Column>
                    </Grid.Row>
                  </Grid>
                </Menu.Item>

                {this.props.rooms
                  ? this.props.rooms.map((e, i) => {
                      return (
                        <Menu.Item
                          id={e.id}
                          key={i}
                          name={e.name}
                          active={this.state.activeItem === e.id}
                          onClick={this.handleClick}
                        >
                          <Grid>
                            <Grid.Row>
                              <Grid.Column>
                                <Icon name={e.icon} size="small" />
                              </Grid.Column>
                              <Grid.Column width={8}>{e.name}</Grid.Column>
                              <Grid.Column floated="right">
                                {this.state.editMode ? (
                                  <ModalWindow
                                    type="modify"
                                    idRoom={e}
                                    updateRoom={this.props.updateRoom}
                                    deleteRoom={this.props.deleteRoom}
                                  />
                                ) : null}
                              </Grid.Column>
                            </Grid.Row>
                          </Grid>
                        </Menu.Item>
                      );
                    })
                  : null}

                <Menu.Item
                  name="newM"
                  active={this.state.activeItem === "newM"}
                >
                  <Grid>
                    <Grid.Row centered name="new">
                      <ModalWindow type="new" addRoom={this.props.addRoom} />
                    </Grid.Row>
                  </Grid>
                </Menu.Item>
              </Menu>
            </Grid.Row>
          </Grid>
        </Responsive>

        <Responsive maxWidth={768}>
          <Menu>
            <Dropdown item fluid text={this.state.activeItemName}>
              <Dropdown.Menu>
                <Dropdown.Item
                  key={-1}
                  id={-1}
                  name="Home"
                  active={this.state.activeItem === "Home"}
                  onClick={this.handleClick}
                >
                  <Grid>
                    <Grid.Row>
                      <Grid.Column>
                        <Icon name="home" size="small" />
                      </Grid.Column>
                      <Grid.Column>Home</Grid.Column>
                    </Grid.Row>
                  </Grid>
                </Dropdown.Item>

                {this.props.rooms
                  ? this.props.rooms.map((e, i) => {
                      if (!this.roomRefs[e.id])
                        this.roomRefs[e.id] = React.createRef();
                      return (
                        <Dropdown.Item
                          id={e.id}
                          key={i}
                          name={e.name}
                          active={this.state.activeItem === e.id}
                          onClick={this.handleClick}
                        >
                          <Grid>
                            <Grid.Row>
                              <Grid.Column width={1}>
                                <Icon name={e.icon} size="small" />
                              </Grid.Column>
                              <Grid.Column>{e.name}</Grid.Column>
                            </Grid.Row>
                          </Grid>
                          <ModalWindow
                            ref={this.roomRefs[e.id]}
                            type="modify"
                            nicolaStop={true}
                            idRoom={e}
                            updateRoom={this.props.updateRoom}
                            deleteRoom={this.props.deleteRoom}
                          />
                        </Dropdown.Item>
                      );
                    })
                  : null}
              </Dropdown.Menu>
            </Dropdown>
          </Menu>
          <Grid inverted>
            <Grid.Row>
              <Grid.Column width={8}>
                <ModalWindow type="new" addRoom={this.props.addRoom} />
              </Grid.Column>
              {this.state.activeItem !== -1 ? (
                <Grid.Column width={8}>
                  <Button
                    icon
                    fluid
                    labelPosition="left"
                    onClick={() =>
                      this.roomRefs[this.state.activeItem].current.openModal()
                    }
                  >
                    <Icon name="pencil" size="small" />
                    EDIT ROOM
                  </Button>
                </Grid.Column>
              ) : null}
            </Grid.Row>
          </Grid>
        </Responsive>
      </div>
    );
  }
}

export default Navbar;