fixed mobile

smart-hut/src/components/modalform.js

@@ -102,12 +102,18 @@ export default class ModalWindow extends Component {
       padding: "10px 10px",
       margin: "10px 0px",
     };
-    console.log(this.state, this.idRoom);
     return (
+      <div>
+        {!this.props.nicolaStop ? (
           <div>
             <Responsive minWidth={768}>
               {this.props.type === "new" ? (
-            <Button icon labelPosition="left" inverted onClick={this.openModal}>
+                <Button
+                  icon
+                  labelPosition="left"
+                  inverted
+                  onClick={this.openModal}
+                >
                   <Icon name="plus" size="small" />
                   ADD ROOM
                 </Button>
@@ -117,17 +123,29 @@ export default class ModalWindow extends Component {
             </Responsive>
             <Responsive maxWidth={768}>
               {this.props.type === "new" ? (
-            <Button icon fluid labelPosition="left" onClick={this.openModal}>
+                <Button
+                  icon
+                  fluid
+                  labelPosition="left"
+                  onClick={this.openModal}
+                >
                   <Icon name="plus" size="small" />
                   ADD ROOM
                 </Button>
               ) : (
-            <Button icon fluid labelPosition="left" onClick={this.openModal}>
+                <Button
+                  icon
+                  fluid
+                  labelPosition="left"
+                  onClick={this.openModal}
+                >
                   <Icon name="pencil" size="small" />
                   EDIT ROOM
                 </Button>
               )}
             </Responsive>
+          </div>
+        ) : null}
 
         <Modal onClose={this.closeModal} open={this.state.openModal}>
           <Header>

smart-hut/src/views/Navbar.js

@@ -1,5 +1,12 @@
 import React, { Component } from "react";
-import { Menu, Grid, Icon, Responsive, Dropdown } from "semantic-ui-react";
+import {
+  Menu,
+  Button,
+  Grid,
+  Icon,
+  Responsive,
+  Dropdown,
+} from "semantic-ui-react";
 import { editButtonStyle } from "../components/dashboard/devices/styleComponents";
 import ModalWindow from "../components/modalform";
 
@@ -13,6 +20,11 @@ class Navbar extends Component {
       editMode: false,
       room: "",
     };
+
+    this.roomRefs = {};
+    this.props.rooms.forEach((e) => {
+      this.roomRefs[e.id] = React.createRef();
+    });
   }
 
   componentDidMount() {
@@ -26,13 +38,10 @@ class Navbar extends Component {
 
   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);
   };
@@ -137,6 +146,8 @@ class Navbar extends Component {
 
                 {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}
@@ -153,6 +164,14 @@ class Navbar extends Component {
                               <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>
                       );
                     })
@@ -167,15 +186,17 @@ class Navbar extends Component {
               </Grid.Column>
               {this.state.activeItem !== -1 ? (
                 <Grid.Column width={8}>
-                  <ModalWindow
-                    type="modify"
-                    idRoom={() => {
-                      console.log("MALUSA", this.activeRoom);
-                      return this.activeRoom;
-                    }}
-                    updateRoom={this.props.updateRoom}
-                    deleteRoom={this.props.deleteRoom}
-                  />
+                  <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>