Host should work, cannot solve an error

smart-hut/src/components/HostModal.js

@@ -0,0 +1,190 @@
+import React, { Component } from "react";
+import { Button, Header, Modal, Icon, Responsive } from "semantic-ui-react";
+import { connect } from "react-redux";
+import { RemoteService } from "../remote";
+import { appActions } from "../storeActions";
+//import { update } from "immutability-helper";
+
+class HostModal extends Component {
+  constructor(props) {
+    super(props);
+    this.state = this.initialState;
+    this.setInitialState();
+
+    this.addHostModal = this.addHostModal.bind(this);
+    this.modifyHostModal = this.modifyHostModal.bind(this);
+    this.deleteHost = this.deleteHost.bind(this);
+  }
+
+  get initialState() {
+    return {
+      //INITIAL STATE HERE
+    };
+  }
+
+  setInitialState() {
+    this.setState(this.initialState);
+  }
+
+  get type() {
+    return !this.props.id ? "new" : "modify";
+  }
+
+  addHostModal = (e) => {
+    /*let data = {
+      // DATA HERE
+    };*/
+    // TODO CALL TO REMOTE SERVER TO ADD SCENE
+    /*this.props
+      .saveRoom(data, null)
+      .then(() => {
+        this.setInitialState();
+        this.closeModal();
+      })
+      .catch((err) => console.error("error in creating room", err));*/
+  };
+
+  modifyHostModal = (e) => {
+    /* let data = {
+      // DATA HERE
+    };*/
+    // TODO CALL TO REMOTE SERVER TO MODIFY SCENE
+    /*this.props
+      .saveRoom(data, this.props.id)
+      .then(() => {
+        this.setInitialState();
+        this.closeModal();
+      })
+      .catch((err) => console.error("error in updating room", err));*/
+  };
+
+  deleteHost = (e) => {
+    // TODO CALL TO REMOTE SERVER TO DELETE SCENE
+    /*
+    this.props
+      .deleteRoom(this.props.id)
+      .then(() => this.closeModal())
+      .catch((err) => console.error("error in deleting room", err));*/
+  };
+
+  changeSomething = (event) => {
+    let nam = event.target.name;
+    let val = event.target.value;
+    this.setState({ [nam]: val });
+  };
+
+  closeModal = (e) => {
+    this.setState({ openModal: false });
+  };
+
+  openModal = (e) => {
+    this.setState({ openModal: true });
+  };
+
+  render() {
+    return (
+      <div>
+        {!this.props.nicolaStop ? (
+          <div>
+            <Responsive minWidth={768}>
+              {this.type === "new" ? (
+                <Button
+                  icon
+                  labelPosition="left"
+                  inverted
+                  onClick={this.openModal}
+                >
+                  <Icon name="plus" size="small" />
+                  ADD AUTOMATION
+                </Button>
+              ) : (
+                <Icon name="pencil" size="small" onClick={this.openModal} />
+              )}
+            </Responsive>
+            <Responsive maxWidth={768}>
+              {this.type === "new" ? (
+                <Button
+                  icon
+                  fluid
+                  labelPosition="left"
+                  onClick={this.openModal}
+                >
+                  <Icon name="plus" size="small" />
+                  ADD AUTOMATION
+                </Button>
+              ) : (
+                <Button
+                  icon
+                  fluid
+                  labelPosition="left"
+                  onClick={this.openModal}
+                >
+                  <Icon name="pencil" size="small" />
+                  EDIT AUTOMATION
+                </Button>
+              )}
+            </Responsive>
+          </div>
+        ) : null}
+
+        <Modal closeIcon onClose={this.closeModal} open={this.state.openModal}>
+          <Header>
+            {this.type === "new" ? "Add new hosts" : "Modify hosts"}
+          </Header>
+          <Modal.Content>
+            {
+              //TODO FORM TO ADD OR MODIFY SCENE
+            }
+
+            {this.type === "modify" ? (
+              <Button
+                icon
+                labelPosition="left"
+                inverted
+                color="red"
+                onClick={this.deleteHost}
+              >
+                <Icon name="trash alternate" />
+                Delete Host
+              </Button>
+            ) : null}
+          </Modal.Content>
+          <Modal.Actions>
+            <Button color="red" onClick={this.closeModal}>
+              <Icon name="remove" />{" "}
+              {this.type === "new" ? "Cancel" : "Discard changes"}
+            </Button>
+
+            <Button
+              color="green"
+              onClick={
+                this.type === "new"
+                  ? this.addHostModal
+                  : this.modifyHostModal
+              }
+            >
+              <Icon name="checkmark" />{" "}
+              {this.type === "new" ? "Add hosts" : "Save changes"}
+            </Button>
+          </Modal.Actions>
+        </Modal>
+      </div>
+    );
+  }
+}
+
+const setActiveHost = (activeHost) => {
+  return (dispatch) =>
+    dispatch(appActions.setActiveHost(activeHost));
+};
+
+const mapStateToProps = (state, ownProps) => ({
+  hostss: ownProps.id ? state.hostss[ownProps.id] : null,
+});
+const HostModalContainer = connect(
+  mapStateToProps,
+  { ...RemoteService, setActiveHost },
+  null,
+  { forwardRef: true }
+)(HostModal);
+export default HostModalContainer;

smart-hut/src/components/dashboard/HostsPanel.js

@@ -0,0 +1,45 @@
+import React, { Component } from "react";
+import { connect } from "react-redux";
+import { RemoteService } from "../../remote";
+
+class HostsPanel extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <Grid doubling columns={2} divided="vertically">
+        {!this.props.isActiveDefaultHost
+          ? this.props.hostDevices.map((e, i) => {
+              return (
+                <Grid.Column key={i}>
+                  <Device tab={this.props.tab} id={e} />
+                </Grid.Column>
+              );
+            })
+          : null}
+        {!this.props.isActiveDefaultHost ? (
+          <Grid.Column>
+            <NewSceneDevice />
+          </Grid.Column>
+        ) : (
+          <Grid.Column>
+            Welcome to the Host View, select a host to view their devices.
+          </Grid.Column>
+        )}
+      </Grid>
+    );
+  }
+}
+
+const mapStateToProps = (state, _) => ({
+  activeTab: state.active.activeTab,
+  activeHost: state.active.activeHost,
+  hostDevices: state.hostDevices,
+});
+const HostsPanelContainer = connect(
+  mapStateToProps,
+  RemoteService
+)(HostsPanel);
+export default HostsPanelContainer;

smart-hut/src/remote.js

@@ -346,6 +346,26 @@ export const RemoteService = {
     };
   },
 
+  /**
+   * Fetches all devices in a particular room, or fetches all devices.
+   * This also updates the devices attribute on values in the map rooms.
+   * @param {Number|null} roomId the room to which fetch devices
+   *   from, null to fetch from all rooms
+   * @returns {Promise<Undefined, RemoteError>} promise that resolves to void and rejects
+   *  with user-fiendly errors as a RemoteError
+   */
+  fetchAllHosts: () => {
+    return (dispatch) => {
+      return Endpoint.get(`/user`)
+        .then((res) => void dispatch(actions.getHosts(res.data)))
+        .catch((err) => {
+            // TODO CHANGE ERROR MESSAGE
+          console.error(`Fetch hosts error`, err);
+          throw new RemoteError(["Network error"]);
+        });
+    };
+  },
+
   /**
    * Creates/Updates a room with the given data
    * @param {String} data.name the room's name,

smart-hut/src/store.js

@@ -469,6 +469,15 @@ function reducer(previousState, action) {
         },
       });
       break;
+      case "SET_ACTIVE_HOST":
+        newState = update(previousState, {
+          active: {
+            activeHost: {
+              $set: action.activeHost,
+            },
+          },
+        });
+        break;
     case "REDUX_WEBSOCKET::MESSAGE":
       const devices = JSON.parse(action.payload.message);
       //console.log("socket", JSON.stringify(devices, null, 2));
@@ -479,6 +488,13 @@ function reducer(previousState, action) {
         devices,
       });
       break;
+     case "GET_HOSTS":
+        change = {};
+        for (const host of action.hosts) {
+            change.$add = host;
+        }
+        newState = update(previousState, change);
+        break;
     default:
       console.warn(`Action type ${action.type} unknown`, action);
       return previousState;
@@ -497,6 +513,7 @@ const initState = {
     activeTab: "Devices",
     activeScene: -1,
     activeAutomation: -1,
+    activeHost: -1,
   },
   login: {
     loggedIn: false,
@@ -513,6 +530,12 @@ const initState = {
   devices: {},
   /** @type {[integer]SceneState} */
   sceneStates: {},
+  /** @type {[integer]Guest} */
+  guests: {},
+  /** @type {[integer]Host} */
+  hosts: {},
+  /** @type {[integer]HostDevice} */
+  hostDevices: {},
 };
 
 function createSmartHutStore() {

smart-hut/src/storeActions.js

@@ -91,6 +91,11 @@ const actions = {
     type: "DEVICE_DELETE",
     deviceId,
   }),
+
+  getHosts: (hosts) => ({
+      type: "GET_HOSTS",
+      hosts,
+  })
 };
 
 export const appActions = {
@@ -111,6 +116,10 @@ export const appActions = {
     type: "SET_ACTIVE_AUTOMATION",
     activeAutomation,
   }),
+  setActiveHosts: (activeHost = -1) => ({
+    type: "SET_ACTIVE_HOST",
+    activeHost,
+  }),
 };
 
 export default actions;

smart-hut/src/views/Dashboard.js

@@ -2,8 +2,11 @@ import React, { Component } from "react";
 import DevicePanel from "../components/dashboard/DevicePanel";
 import ScenesPanel from "../components/dashboard/ScenesPanel";
 import AutomationsPanel from "../components/dashboard/AutomationsPanel";
+import HostsPanel from "../components/dashboard/HostsPanel";
 import Navbar from "./Navbar";
 import ScenesNavbar from "./ScenesNavbar";
+import AutomationsNavbar from "./AutomationsNavbar";
+import HostsNavbar from "./HostsNavbar";
 import MyHeader from "../components/HeaderController";
 import { Grid, Responsive, Button, Menu } from "semantic-ui-react";
 import {
@@ -55,6 +58,8 @@ class Dashboard extends Component {
         return <ScenesPanel tab={this.state.activeTab} />;
       case "Automations":
         return <AutomationsPanel />;
+      case "Hosts":
+        return <HostsPanel />;
       default:
         return <h1>ERROR</h1>;
     }
@@ -66,6 +71,10 @@ class Dashboard extends Component {
         return <Navbar />;
       case "Scenes":
         return <ScenesNavbar />;
+      case "Automations":
+        return <AutomationsNavbar />;
+      case "Hosts":
+        return <HostsNavbar />;
       default:
         return <h1>ERROR</h1>;
     }
@@ -106,6 +115,12 @@ class Dashboard extends Component {
                     active={this.activeTab === "Automations"}
                     onClick={this.selectTab}
                   />
+                  <Menu.Item
+                    name="Hosts"
+                    content="Hosts"
+                    active={this.activeTab === "Hosts"}
+                    onClick={this.selectTab}
+                  />
                 </Menu>
               </Grid.Column>
 
@@ -153,6 +168,14 @@ class Dashboard extends Component {
                   color={this.activeTab === "Automations" ? "yellow" : "grey"}
                   onClick={this.selectTab}
                 />
+                <Button
+                  basic
+                  name="Hosts"
+                  content="Hosts"
+                  active={this.activeTab === "Hosts"}
+                  color={this.activeTab === "Hosts" ? "yellow" : "grey"}
+                  onClick={this.selectTab}
+                />
               </Grid.Column>
             </Grid.Row>
             {this.hasNavbar && (

smart-hut/src/views/HostsNavbar.js

@@ -0,0 +1,204 @@
+import React, { Component } from "react";
+import {
+  Menu,
+  Button,
+  Grid,
+  Icon,
+  Responsive,
+  Dropdown,
+} from "semantic-ui-react";
+import { editButtonStyle } from "../components/dashboard/devices/styleComponents";
+import HostModal from "../components/HostModal";
+import { RemoteService } from "../remote";
+import { connect } from "react-redux";
+import { appActions } from "../storeActions";
+
+class HostsNavbar extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      editMode: false,
+    };
+
+    this.toggleEditMode = this.toggleEditMode.bind(this);
+    this.openCurrentModalMobile = this.openCurrentModalMobile.bind(this);
+  }
+
+  get activeItemHost() {
+    return this.props.activeHost;
+  }
+
+  set activeItemHost(item) {
+    this.props.setActiveHost(item);
+  }
+
+  get activeItemHostsName() {
+    if (this.props.activeHost === -1) return "Home";
+    return this.props.hosts[this.props.activeHost].name;
+  }
+
+  openCurrentModalMobile() {
+    console.log(this.activeItemHost, this.props.hostsModalRefs);
+    const currentModal = this.props.hostsModalRefs[
+      this.activeItemHost
+    ].current;
+    currentModal.openModal();
+  }
+
+  toggleEditMode(e) {
+    this.setState((prevState) => ({ editMode: !prevState.editMode }));
+  }
+
+  render() {
+    return (
+      <div style={{ background: "#1b1c1d!important", padding: "0 20px" }}>
+        <Responsive minWidth={768}>
+          <Grid>
+            <Grid.Row color="black">
+              <button style={editButtonStyle} onClick={this.toggleEditMode}>
+                Edit
+              </button>
+            </Grid.Row>
+            <Grid.Row>
+              <Menu inverted fluid vertical>
+                <Menu.Item
+                  key={-1}
+                  id={null}
+                  name="hosts"
+                  active={this.activeItemHost === -1}
+                  onClick={this.selectHosts}
+                >
+                  <Grid>
+                    <Grid.Row>
+                      <Grid.Column>
+                        <Icon name="home" size="small" />
+                      </Grid.Column>
+                      <Grid.Column>AUTOMATIONS</Grid.Column>
+                    </Grid.Row>
+                  </Grid>
+                </Menu.Item>
+                {Object.values(this.props.hosts).map((e, i) => {
+                      return (
+                        <Menu.Item
+                          id={e.id}
+                          key={i}
+                          name={e.name}
+                          active={this.activeItemHost === e.id}
+                          onClick={this.selectHosts}
+                        >
+                          <Grid>
+                            <Grid.Row>
+                              <Grid.Column width={12}>{e.name}</Grid.Column>
+                              <Grid.Column floated="right">
+                                {this.state.editMode ? (
+                                  <HostModal id={e.id} />
+                                ) : null}
+                              </Grid.Column>
+                            </Grid.Row>
+                          </Grid>
+                        </Menu.Item>
+                      );
+                })}
+                <Menu.Item name="newM">
+                  <Grid>
+                    <Grid.Row centered name="new">
+                      <HostModal id={null} />
+                    </Grid.Row>
+                  </Grid>
+                </Menu.Item>
+              </Menu>
+            </Grid.Row>
+          </Grid>
+        </Responsive>
+
+        <Responsive maxWidth={768}>
+          <Menu>
+            <Dropdown item fluid text={this.activeItemHostName}>
+              <Dropdown.Menu>
+                <Dropdown.Item
+                  key={-1}
+                  id={null}
+                  name="scene"
+                  active={this.activeItemHost === -1}
+                  onClick={this.selectHosts}
+                >
+                  <Grid>
+                    <Grid.Row>
+                      <Grid.Column>
+                        <Icon name="home" size="small" />
+                      </Grid.Column>
+                      <Grid.Column>Hosts</Grid.Column>
+                    </Grid.Row>
+                  </Grid>
+                </Dropdown.Item>
+
+                {Object.values(this.props.hosts).map((e, i) => {
+                  return (
+                    <Menu.Item
+                      id={e.id}
+                      key={i}
+                      name={e.name}
+                      active={this.activeItemHost === e.id}
+                      onClick={this.selectHosts}
+                    >
+                      <Grid>
+                        <Grid.Row>
+                          <Grid.Column width={12}>{e.name}</Grid.Column>
+                          <Grid.Column floated="right">
+                            {this.state.editMode ? (
+                              <HostModal id={e.id} />
+                            ) : null}
+                          </Grid.Column>
+                        </Grid.Row>
+                      </Grid>
+                    </Menu.Item>
+                  );
+                })}
+
+              </Dropdown.Menu>
+            </Dropdown>
+          </Menu>
+          <Grid inverted>
+            <Grid.Row>
+              <Grid.Column width={8}>
+                <HostModal id={null} />
+              </Grid.Column>
+              {this.activeItemHost !== -1 ? (
+                <Grid.Column width={8}>
+                  <Button
+                    icon
+                    fluid
+                    labelPosition="left"
+                    onClick={this.openCurrentModalMobile}
+                  >
+                    <Icon name="pencil" size="small" />
+                    EDIT AUTOMATION
+                  </Button>
+                </Grid.Column>
+              ) : null}
+            </Grid.Row>
+          </Grid>
+        </Responsive>
+      </div>
+    );
+  }
+}
+
+const setActiveHost = (activeHost) => {
+  return (dispatch) =>
+    dispatch(appActions.setActiveHost(activeHost));
+};
+
+const mapStateToProps = (state, _) => ({
+  hosts: state.hosts,
+  activeHost: state.active.activeHost,
+  hostModalRefs: Object.keys(state.hosts).reduce(
+    (acc, key) => ({ ...acc, [key]: React.createRef() }),
+    {}
+  ),
+});
+const HostsNavbarContainer = connect(mapStateToProps, {
+  ...RemoteService,
+  setActiveHost,
+})(HostsNavbar);
+export default HostsNavbarContainer;