From 7f70aeb82809ee6277379724a3537d29b21589bb Mon Sep 17 00:00:00 2001
From: britea <andreabritesma@gmail.com>
Date: Wed, 25 Mar 2020 13:55:52 +0100
Subject: [PATCH] fixed minor bugs

---
 smart-hut/src/App.js                          |   3 +
 .../components/dashboard/devices/NewDevice.js |  60 +++-
 smart-hut/src/components/modalform.js         |   2 +-
 smart-hut/src/views/ConfirmResetPassword.js   |   3 +-
 smart-hut/src/views/FourOhFour.js             | 174 ++++++-----
 smart-hut/src/views/Navbar.js                 | 269 +++++++++---------
 6 files changed, 268 insertions(+), 243 deletions(-)

diff --git a/smart-hut/src/App.js b/smart-hut/src/App.js
index cadc1db..003ee6c 100644
--- a/smart-hut/src/App.js
+++ b/smart-hut/src/App.js
@@ -27,6 +27,7 @@ class App extends Component {
     super(props);
 
     let loggedIn = false;
+    let token = undefined;
 
     try {
       let userJsonString = localStorage.getItem("token");
@@ -34,6 +35,7 @@ class App extends Component {
       let date = new Date().getTime();
       if (userJsonString && exp && date < exp) {
         loggedIn = true;
+        token = userJsonString;
       } else {
         localStorage.removeItem("token");
         localStorage.removeItem("exp");
@@ -42,6 +44,7 @@ class App extends Component {
 
     this.state = {
       loggedIn: loggedIn,
+      token: token,
     };
 
     this.auth = this.auth.bind(this);
diff --git a/smart-hut/src/components/dashboard/devices/NewDevice.js b/smart-hut/src/components/dashboard/devices/NewDevice.js
index 9026c6f..b460007 100644
--- a/smart-hut/src/components/dashboard/devices/NewDevice.js
+++ b/smart-hut/src/components/dashboard/devices/NewDevice.js
@@ -144,11 +144,17 @@ export default class NewDevice extends Component {
         image: { avatar: true, src: "/img/switchOn.svg" },
       },
       {
-        key: "dimmer",
-        text: "Dimmer",
+        key: "buttonDimmer",
+        text: "Button Dimmer",
         value: "buttonDimmer",
         image: { avatar: true, src: "/img/dimmer.svg" },
       },
+      {
+        key: "knobDimmer",
+        text: "Knob Dimmer",
+        value: "knobDimmer",
+        image: { avatar: true, src: "/img/dimmer.svg" },
+      },
     ];
     const sensorOptions = [
       {
@@ -176,13 +182,27 @@ export default class NewDevice extends Component {
         image: { avatar: true, src: "/img/sensorOn.svg" },
       },
     ];
-    const availableLights = [];
+    const availableSwitchDevices = [];
+    const availableDimmerDevices = [];
     this.props.devices.forEach((d) => {
-      availableLights.push({
-        key: d.id,
-        text: d.name,
-        value: d.id,
-      });
+      if (
+        d.kind === "regularLight" ||
+        d.kind === "dimmableLight" ||
+        d.kind === "smartPlug"
+      ) {
+        availableSwitchDevices.push({
+          key: d.id,
+          text: d.name,
+          value: d.id,
+        });
+      }
+      if (d.kind === "dimmableLight") {
+        availableDimmerDevices.push({
+          key: d.id,
+          text: d.name,
+          value: d.id,
+        });
+      }
     });
     const step1 = (
       <Dropdown
@@ -222,7 +242,7 @@ export default class NewDevice extends Component {
           />
         </Form.Field>
       );
-      const switchDimmerOptions = (
+      const switchOptions = (
         <Form.Field style={{ marginTop: "1rem" }}>
           <label>Select the Lights You Want to Attach: </label>
           <Dropdown
@@ -231,7 +251,20 @@ export default class NewDevice extends Component {
             fluid
             multiple
             onChange={this.setLightsDimmerSwitch}
-            options={availableLights}
+            options={availableSwitchDevices}
+          />
+        </Form.Field>
+      );
+      const dimmerOptions = (
+        <Form.Field style={{ marginTop: "1rem" }}>
+          <label>Select the Lights You Want to Attach: </label>
+          <Dropdown
+            name="typeOfDevice"
+            placeholder="Select Lights"
+            fluid
+            multiple
+            onChange={this.setLightsDimmerSwitch}
+            options={availableDimmerDevices}
           />
         </Form.Field>
       );
@@ -239,9 +272,10 @@ export default class NewDevice extends Component {
         <Form>
           {deviceName}
           {this.state.typeOfDevice === "sensor" ? sensorForm : ""}
-          {this.state.typeOfDevice === "switch" ||
-          this.state.typeOfDevice === "dimmer"
-            ? switchDimmerOptions
+          {this.state.typeOfDevice === "switch" ? switchOptions : ""}
+          {this.state.typeOfDevice === "buttonDimmer" ||
+          this.state.typeOfDevice === "knobDimmer"
+            ? dimmerOptions
             : ""}
         </Form>
       );
diff --git a/smart-hut/src/components/modalform.js b/smart-hut/src/components/modalform.js
index 41951fd..14513a6 100644
--- a/smart-hut/src/components/modalform.js
+++ b/smart-hut/src/components/modalform.js
@@ -22,7 +22,7 @@ export default class ModalWindow extends Component {
     this.state = {
       id: "",
       selectedIcon: "",
-      name: this.props.type === "new" ? "" : this.props.idRoom.name,
+      name: this.props.type === "new" ? "Device" : this.props.idRoom.name,
       img: this.props.type === "new" ? null : this.props.idRoom.image,
       openModal: false,
     };
diff --git a/smart-hut/src/views/ConfirmResetPassword.js b/smart-hut/src/views/ConfirmResetPassword.js
index 6e09fc8..0d6123d 100644
--- a/smart-hut/src/views/ConfirmResetPassword.js
+++ b/smart-hut/src/views/ConfirmResetPassword.js
@@ -20,8 +20,7 @@ class Paragraph extends Component {
           <Message.Header>
             Congratulation<ins>s</ins>!
           </Message.Header>
-          Your password has been <del>succesffuly</del>
-          <ins>successfully</ins> reset
+          Your password has been successfully reset
         </Message>
       );
     }
diff --git a/smart-hut/src/views/FourOhFour.js b/smart-hut/src/views/FourOhFour.js
index 3934d03..14ae7af 100644
--- a/smart-hut/src/views/FourOhFour.js
+++ b/smart-hut/src/views/FourOhFour.js
@@ -29,99 +29,93 @@ export default class FourOhFour extends Component {
 
   render() {
     return (
-      <Segment.Group>
-        <Responsive as={Segment} minWidth={768}>
-          <div style={{ height: "110vh", background: "#1b1c1d" }}>
-            <Grid>
-              <Grid.Row color="black">
-                <Grid.Column>
-                  <MyHeader logout={this.props.logout} />
-                </Grid.Column>
-              </Grid.Row>
-              <Grid.Row color="black">
-                <Grid.Column width={16}>
-                  <Segment inverted color="red">
-                    <Grid>
-                      <Grid.Row>
-                        <Grid.Column textAlign="center">
-                          <h1>404 Page Not Found</h1>
-                        </Grid.Column>
-                      </Grid.Row>
-                      <Grid.Row>
-                        <Grid.Column width={8}>
-                          <Image centered src={this.state.meme} size="medium" />
-                        </Grid.Column>
-                        <Grid.Column width={8}>
-                          <p>
-                            Hey what are you doing here? Looks like you are
-                            lost, this room does not exist. Maybe you were
-                            looking for the kitchen, or the garage, or the
-                            bedroom, or your love room... so don't wait here and
-                            let's go back to our main room! ...or refresh this
-                            page some times...
-                          </p>
-                          <Button fluid inverted color="white">
-                            <Link style={{ color: "black" }} to="/">
-                              Let's go back to our main room!
-                            </Link>
-                          </Button>
-                        </Grid.Column>
-                      </Grid.Row>
-                    </Grid>
-                  </Segment>
-                </Grid.Column>
-              </Grid.Row>
-            </Grid>
-          </div>
+      <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={16}>
+                <Segment inverted color="red">
+                  <Grid>
+                    <Grid.Row>
+                      <Grid.Column textAlign="center">
+                        <h1>404 Page Not Found</h1>
+                      </Grid.Column>
+                    </Grid.Row>
+                    <Grid.Row>
+                      <Grid.Column width={8}>
+                        <Image centered src={this.state.meme} size="medium" />
+                      </Grid.Column>
+                      <Grid.Column width={8}>
+                        <p>
+                          Hey what are you doing here? Looks like you are lost,
+                          this room does not exist. Maybe you were looking for
+                          the kitchen, or the garage, or the bedroom, or your
+                          love room... so don't wait here and let's go back to
+                          our main room! ...or refresh this page some times...
+                        </p>
+                        <Button fluid inverted color="white">
+                          <Link style={{ color: "black" }} to="/">
+                            Let's go back to our main room!
+                          </Link>
+                        </Button>
+                      </Grid.Column>
+                    </Grid.Row>
+                  </Grid>
+                </Segment>
+              </Grid.Column>
+            </Grid.Row>
+          </Grid>
         </Responsive>
 
-        <Responsive as={Segment} maxWidth={768}>
-          <div style={{ background: "#1b1c1d" }}>
-            <Grid>
-              <Grid.Row color="black">
-                <Grid.Column>
-                  <MyHeader logout={this.props.logout} />
-                </Grid.Column>
-              </Grid.Row>
-              <Grid.Row color="black">
-                <Grid.Column width={16}>
-                  <Segment inverted color="red">
-                    <Grid>
-                      <Grid.Row>
-                        <Grid.Column textAlign="center">
-                          <h1>404 Page Not Found</h1>
-                        </Grid.Column>
-                      </Grid.Row>
-                      <Grid.Row>
-                        <Grid.Column width={16}>
-                          <Image centered src={this.state.meme} size="medium" />
-                        </Grid.Column>
-                      </Grid.Row>
-                      <Grid.Row>
-                        <Grid.Column width={16}>
-                          <p>
-                            Hey what are you doing here? Looks like you are
-                            lost, this room does not exist. Maybe you were
-                            looking for the kitchen, or the garage, or the
-                            bedroom, or your love room... so don't wait here and
-                            let's go back to our main room! ...or refresh this
-                            page some times...
-                          </p>
-                          <Button fluid inverted color="white">
-                            <Link style={{ color: "black" }} to="/">
-                              Let's go back to our main room!
-                            </Link>
-                          </Button>
-                        </Grid.Column>
-                      </Grid.Row>
-                    </Grid>
-                  </Segment>
-                </Grid.Column>
-              </Grid.Row>
-            </Grid>
-          </div>
+        <Responsive maxWidth={768}>
+          <Grid>
+            <Grid.Row color="black">
+              <Grid.Column>
+                <MyHeader logout={this.props.logout} />
+              </Grid.Column>
+            </Grid.Row>
+            <Grid.Row color="black">
+              <Grid.Column width={16}>
+                <Segment inverted color="red">
+                  <Grid>
+                    <Grid.Row>
+                      <Grid.Column textAlign="center">
+                        <h1>404 Page Not Found</h1>
+                      </Grid.Column>
+                    </Grid.Row>
+                    <Grid.Row>
+                      <Grid.Column width={16}>
+                        <Image centered src={this.state.meme} size="medium" />
+                      </Grid.Column>
+                    </Grid.Row>
+                    <Grid.Row>
+                      <Grid.Column width={16}>
+                        <p>
+                          Hey what are you doing here? Looks like you are lost,
+                          this room does not exist. Maybe you were looking for
+                          the kitchen, or the garage, or the bedroom, or your
+                          love room... so don't wait here and let's go back to
+                          our main room! ...or refresh this page some times...
+                        </p>
+                        <Button fluid inverted color="white">
+                          <Link style={{ color: "black" }} to="/">
+                            Let's go back to our main room!
+                          </Link>
+                        </Button>
+                      </Grid.Column>
+                    </Grid.Row>
+                  </Grid>
+                </Segment>
+              </Grid.Column>
+            </Grid.Row>
+          </Grid>
         </Responsive>
-      </Segment.Group>
+      </div>
     );
   }
 }
diff --git a/smart-hut/src/views/Navbar.js b/smart-hut/src/views/Navbar.js
index ee521cb..b115139 100644
--- a/smart-hut/src/views/Navbar.js
+++ b/smart-hut/src/views/Navbar.js
@@ -49,150 +49,145 @@ class Navbar extends Component {
   render() {
     //const { activeItem } = this.state
     return (
-      <div style={{ background: "#1b1c1d!important" }}>
-        <Segment.Group>
-          <Responsive as={Segment} minWidth={768}>
-            <Grid>
-              <Grid.Row color="black">
-                <button
-                  style={editButtonStyle}
-                  onClick={this.editModeController}
+      <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}
                 >
-                  Edit
-                </button>
-              </Grid.Row>
-              <Grid.Row color="black">
-                <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>
+                  <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}
+                {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>
+                <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 as={Segment} maxWidth={768}>
-            <Menu inverted>
-              <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>
+        <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) => {
-                        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>
-                          </Dropdown.Item>
-                        );
-                      })
-                    : null}
-                </Dropdown.Menu>
-              </Dropdown>
-            </Menu>
-            <Grid inverted>
-              <Grid.Row>
+                {this.props.rooms
+                  ? this.props.rooms.map((e, i) => {
+                      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>
+                        </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}>
-                  <ModalWindow type="new" addRoom={this.props.addRoom} />
+                  <ModalWindow
+                    type="modify"
+                    idRoom={this.state.activeRoom}
+                    updateRoom={this.props.updateRoom}
+                    deleteRoom={this.props.deleteRoom}
+                  />
                 </Grid.Column>
-                {this.state.activeItem !== -1 ? (
-                  <Grid.Column width={8}>
-                    <ModalWindow
-                      type="modify"
-                      idRoom={this.state.activeRoom}
-                      updateRoom={this.props.updateRoom}
-                      deleteRoom={this.props.deleteRoom}
-                    />
-                  </Grid.Column>
-                ) : null}
-              </Grid.Row>
-            </Grid>
-          </Responsive>
-        </Segment.Group>
+              ) : null}
+            </Grid.Row>
+          </Grid>
+        </Responsive>
       </div>
     );
   }