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

import React, { Component } from "react";
import DevicePanel from "../components/dashboard/DevicePanel";
import Navbar from "./Navbar";
import MyHeader from "../components/HeaderController";

import { call } from "../client_server";
import { Grid, Responsive } from "semantic-ui-react";
/*
  rooms -> actual rooms
  activeItem -> the current room in view
  devices -> current device in current room view


  id of Home is -1
*/

export default class Dashboard extends Component {
  constructor(props) {
    super(props);
    this.state = {
      rooms: [],
      activeItem: -1,
      devices: [],
      image: "",
      tkn: this.props.tkn,
    };

    this.addRoom = this.addRoom.bind(this);
    this.deleteRoom = this.deleteRoom.bind(this);
    this.updateRoom = this.updateRoom.bind(this);
    this.addDevice = this.addDevice.bind(this);
    this.handleItemClick = this.handleItemClick.bind(this);
  }

  getDevices() {
    if (this.state.activeItem === -1) {
      call
        .getAllDevices()
        .then((res) => {
          if (res.status === 200) {
            console.log(res.data);
            this.setState({
              devices: res.data,
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    } else {
      call
        .getAllDevicesByRoom(this.state.activeItem)
        .then((res) => {
          if (res.status === 200) {
            console.log(res.data);
            this.setState({
              devices: res.data,
            });
          }
        })
        .catch((err) => {});
    }
  }

  getRooms() {
    call
      .getAllRooms(this.props.tkn)
      .then((res) => {
        this.setState({
          rooms: res.data,
        });
      })
      .catch((err) => {});
  }

  componentDidMount() {
    this.getRooms();
    this.getDevices();
  }

  addRoom(data) {
    call
      .createRoom(data)
      .then((res) => {
        if (res.status === 200 && res.data) {
          this.getRooms();
        }
      })
      .catch((err) => {
        console.log(err);
      });
  }

  deleteRoom() {
    let data = {
      id: this.state.activeItem,
    };
    call
      .deleteRoom(data)
      .then((res) => {
        //remove room in state.rooms
        this.getRooms();
        this.handleItemClick(-1);
      })
      .catch((err) => {
        console.log(err);
      });
  }

  updateRoom(data) {
    data.id = this.state.activeItem;
    call
      .updateRoom(data)
      .then((res) => {
        if (res.status === 200 && res.data) {
          this.getRooms();
          this.forceUpdate();
        }
      })
      .catch((err) => {});
  }

  handleItemClick(id) {
    this.setState({
      activeItem: id,
    });
    if (id === -1) {
      call
        .getAllDevices(this.props.tkn)
        .then((res) => {
          if (res.status === 200) {
            this.setState({
              devices: res.data,
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    } else {
      call
        .getAllDevicesByRoom(id, this.props.tkn)
        .then((res) => {
          if (res.status === 200) {
            this.setState({
              devices: res.data,
            });
            this.forceUpdate();
          }
        })
        .catch((err) => {
          console.log(err);
        });
    }
    this.state.rooms.forEach((item) => {
      if (item.id === id) {
        this.setState({ room: item });
      }
    });
  }

  addDevice(data) {
    data.params["roomId"] = this.state.activeItem;
    call
      .devicePost(data, this.props.tkn)
      .then((res) => {
        this.setState((state) => ({
          devices: state.devices.concat([res.data]),
        }));
        return this.state.devices;
      })
      .catch((err) => {});
  }

  updateDeviceUi = (data) => {
    let ds = this.state.devices;
    ds.forEach((e) => {
      if (e.id === data.id) {
        e = data;
      }
    });
    this.setState({
      devices: ds,
    });

    return;
  };

  render() {
    return (
      <div style={{ height: "110vh", background: "#1b1c1d" }}>
        <Responsive minWidth={768}>
          <Grid>
            <Grid.Row color="black">
              <Grid.Column>
                <MyHeader logout={this.props.logout} />
              </Grid.Column>
            </Grid.Row>
            <Grid.Row color="black">
              <Grid.Column width={3}>
                <Navbar
                  activeItem={this.state.activeItem}
                  addRoom={this.addRoom}
                  updateRoom={this.updateRoom}
                  deleteRoom={this.deleteRoom}
                  rooms={this.state.rooms}
                  handleItemClick={this.handleItemClick}
                />
              </Grid.Column>

              <Grid.Column width={13}>
                <DevicePanel
                  tkn={this.props.tkn}
                  activeItem={this.state.activeItem}
                  addDevice={this.addDevice}
                  devices={this.state.devices}
                  room={this.state.room}
                />
              </Grid.Column>
            </Grid.Row>
          </Grid>
        </Responsive>
        <Responsive maxWidth={768}>
          <Grid inverted>
            <Grid.Row color="black">
              <Grid.Column>
                <MyHeader logout={this.props.logout} />
              </Grid.Column>
            </Grid.Row>
            <Grid.Row color="black">
              <Grid.Column color="black">
                <Navbar
                  activeItem={this.state.activeItem}
                  addRoom={this.addRoom}
                  updateRoom={this.updateRoom}
                  deleteRoom={this.deleteRoom}
                  rooms={this.state.rooms}
                  handleItemClick={this.handleItemClick}
                />
              </Grid.Column>
            </Grid.Row>
            <Grid.Row>
              <Grid.Column>
                <DevicePanel
                  img={this.state.image}
                  tkn={this.props.tkn}
                  activeItem={this.state.activeItem}
                  addDevice={this.addDevice}
                  devices={this.state.devices}
                  updateDev={this.updateDeviceUi}
                  room={this.state.room}
                />
              </Grid.Column>
            </Grid.Row>
          </Grid>
        </Responsive>
      </div>
    );
  }
}