From 580511ce6ecbb494eae0384117c75ec40357e133 Mon Sep 17 00:00:00 2001
From: Nicola Brunner <brunnn@usi.ch>
Date: Tue, 24 Mar 2020 16:03:08 +0100
Subject: [PATCH] is prettier

---
 smart-hut/src/components/HeaderController.js |  68 +++----
 smart-hut/src/components/SelectIcons.js      |   7 +-
 smart-hut/src/components/modalform.js        | 179 +++++++++++--------
 3 files changed, 130 insertions(+), 124 deletions(-)

diff --git a/smart-hut/src/components/HeaderController.js b/smart-hut/src/components/HeaderController.js
index 4391de6..acc4259 100644
--- a/smart-hut/src/components/HeaderController.js
+++ b/smart-hut/src/components/HeaderController.js
@@ -5,14 +5,11 @@ import {
   BrowserView,
   MobileView,
   isBrowser,
-  isMobile
+  isMobile,
 } from "react-device-detect";
 
 const AvatarImage = () => (
-  <Image 
-  src="avatar3.png" 
-  style={{ width: "25px", height: "auto" }} 
-  centered />
+  <Image src="avatar3.png" style={{ width: "25px", height: "auto" }} centered />
 );
 
 const IconHomeImage = () => (
@@ -35,15 +32,9 @@ const IconHomeImageMobile = () => (
   />
 );
 
-const TitleImage = () => (
-  <Image 
-    src="title7.png" 
-    size="medium" 
-    centered 
-  />
-);
+const TitleImage = () => <Image src="title7.png" size="medium" centered />;
 
-const BrowserStructure = (props) => ( 
+const BrowserStructure = (props) => (
   <Grid columns="equal" divided inverted padded>
     <Grid.Row color="black" textAlign="center">
       <Grid.Column width={3} height={0.5}>
@@ -76,10 +67,10 @@ const BrowserStructure = (props) => (
         </Dropdown>
       </Grid.Column>
     </Grid.Row>
-  </Grid> 
+  </Grid>
 );
 
-const MobileStructure = (props) => ( 
+const MobileStructure = (props) => (
   <Grid columns="equal" divided inverted padded>
     <Grid.Row color="black" textAlign="center">
       <Segment color="black" inverted>
@@ -90,36 +81,29 @@ const MobileStructure = (props) => (
       <Grid.Column>
         <IconHomeImage />
       </Grid.Column>
-      <Grid.Column >
-      <AvatarImage />
-      <Divider />
-      <Dropdown item icon="setting" size="huge">
-        <Dropdown.Menu>
-          <Dropdown.Item>
-            <Icon name="dropdown" />
-            <span className="text">Settings</span>
-            <Dropdown.Menu>
-              <Dropdown.Item>Document</Dropdown.Item>
-              <Dropdown.Item>Image</Dropdown.Item>
-            </Dropdown.Menu>
-          </Dropdown.Item>
-          <Dropdown.Item>See profile...</Dropdown.Item>
-          <Dropdown.Divider />
-          <Dropdown.Item onClick={props.logout}>Logout</Dropdown.Item>
-        </Dropdown.Menu>
-      </Dropdown>
+      <Grid.Column>
+        <AvatarImage />
+        <Divider />
+        <Dropdown item icon="setting" size="huge">
+          <Dropdown.Menu>
+            <Dropdown.Item>
+              <Icon name="dropdown" />
+              <span className="text">Settings</span>
+              <Dropdown.Menu>
+                <Dropdown.Item>Document</Dropdown.Item>
+                <Dropdown.Item>Image</Dropdown.Item>
+              </Dropdown.Menu>
+            </Dropdown.Item>
+            <Dropdown.Item>See profile...</Dropdown.Item>
+            <Dropdown.Divider />
+            <Dropdown.Item onClick={props.logout}>Logout</Dropdown.Item>
+          </Dropdown.Menu>
+        </Dropdown>
       </Grid.Column>
-  </Grid.Row>
-  </Grid> 
+    </Grid.Row>
+  </Grid>
 );
 
-
-
-
-
-
-
-
 export default class MyHeader extends React.Component {
   render() {
     return (
diff --git a/smart-hut/src/components/SelectIcons.js b/smart-hut/src/components/SelectIcons.js
index 44f3d3d..bbefcc1 100644
--- a/smart-hut/src/components/SelectIcons.js
+++ b/smart-hut/src/components/SelectIcons.js
@@ -1,5 +1,5 @@
-import React, { Component } from 'react';
-import { Button, Grid, Responsive } from 'semantic-ui-react'
+import React, { Component } from "react";
+import { Button, Grid, Responsive } from "semantic-ui-react";
 
 export default class SelectIcons extends Component {
   constructor(props) {
@@ -31,8 +31,7 @@ export default class SelectIcons extends Component {
 
     return (
       <Grid centered relaxed>
-      {
-        myicons.map((e, i) => {
+        {myicons.map((e, i) => {
           return (
             <Grid.Row key={i}>
               {e.map((e, i) => {
diff --git a/smart-hut/src/components/modalform.js b/smart-hut/src/components/modalform.js
index 12740a0..3669173 100644
--- a/smart-hut/src/components/modalform.js
+++ b/smart-hut/src/components/modalform.js
@@ -7,17 +7,17 @@ import {
   Input,
   Icon,
   Responsive,
-  Image
+  Image,
 } from "semantic-ui-react";
 import SelectIcons from "./SelectIcons";
 
-const NO_IMAGE="https://react.semantic-ui.com/images/wireframe/image.png";
+const NO_IMAGE = "https://react.semantic-ui.com/images/wireframe/image.png";
 
 export default class ModalWindow extends Component {
   constructor(props) {
     super(props);
 
-console.table(this.props);
+    console.table(this.props);
 
     this.state = {
       id: "",
@@ -84,14 +84,13 @@ console.table(this.props);
     let reader = new FileReader();
     reader.readAsDataURL(file.target.files[0]);
     reader.onload = () => {
-        this.state.img = reader.result;
-        this.setState(this.state);
+      this.state.img = reader.result;
+      this.setState(this.state);
     };
     reader.onerror = console.error;
   }
 
-  render(){
-
+  render() {
     const spaceDiv = {
       background: "#f4f4f4",
       padding: "10px 10px",
@@ -115,81 +114,105 @@ console.table(this.props);
             <Button icon fluid labelPosition="left" onClick={this.openModal}>
               <Icon name="plus" size="small" />
               ADD ROOM
-            </Button>)
-            :
-              <Icon name='pencil' size='small' onClick={this.openModal} />
-          }
-          </Responsive>
-          <Responsive maxWidth={768} >
-            {
-              this.props.type === "new" ?
-                <Button icon fluid labelPosition='left' onClick={this.openModal}>
-                  <Icon name='plus' size='small'/>
-                  ADD ROOM
-                </Button>
-              :
-                <Button icon fluid labelPosition='left' onClick={this.openModal}>
-                  <Icon name='pencil' size='small'/>
-                  EDIT ROOM
-                </Button>
-            }
-          </Responsive>
+            </Button>
+          ) : (
+            <Icon name="pencil" size="small" onClick={this.openModal} />
+          )}
+        </Responsive>
+        <Responsive maxWidth={768}>
+          {this.props.type === "new" ? (
+            <Button icon fluid labelPosition="left" onClick={this.openModal}>
+              <Icon name="plus" size="small" />
+              ADD ROOM
+            </Button>
+          ) : (
+            <Button icon fluid labelPosition="left" onClick={this.openModal}>
+              <Icon name="pencil" size="small" />
+              EDIT ROOM
+            </Button>
+          )}
+        </Responsive>
 
-        <Modal
-        onClose={this.closeModal}
-        open={this.state.openModal}>
-        <Header>{this.props.type === "new" ? "Add new room" : "Modify room" }</Header>
-        <Modal.Content>
-          <Form>
-          <p>Insert the name of the room:</p>
-            <Form.Field>
-              <Input
-                label='Room name'
-                placeholder='Room Name'
-                name="name"
-                type='text'
-                onChange={this.changeSomething}
-                value={this.state.name}/>
-            </Form.Field>
-            <p>Insert an image of the room:</p>
-            <Form.Field>
+        <Modal onClose={this.closeModal} open={this.state.openModal}>
+          <Header>
+            {this.props.type === "new" ? "Add new room" : "Modify room"}
+          </Header>
+          <Modal.Content>
+            <Form>
+              <p>Insert the name of the room:</p>
+              <Form.Field>
+                <Input
+                  label="Room name"
+                  placeholder="Room Name"
+                  name="name"
+                  type="text"
+                  onChange={this.changeSomething}
+                  value={this.state.name}
+                />
+              </Form.Field>
+              <p>Insert an image of the room:</p>
+              <Form.Field>
+                <Image
+                  src={this.state.img == null ? NO_IMAGE : this.state.img}
+                  size="small"
+                  onClick={() => this.fileInputRef.current.click()}
+                />
 
-            <Image
-              src={this.state.img == null ? NO_IMAGE : this.state.img}
-              size='small'
-              onClick={() => this.fileInputRef.current.click()}/>
+                <input
+                  ref={this.fileInputRef}
+                  hidden
+                  label="Room image"
+                  type="file"
+                  name="img"
+                  accept="image/png, image/jpeg"
+                  onChange={this.getBase64.bind(this)}
+                />
+              </Form.Field>
+            </Form>
 
-            <input ref={this.fileInputRef} hidden label='Room image' type='file' name="img" accept="image/png, image/jpeg"
-            onChange={this.getBase64.bind(this)}/>
+            <div style={spaceDiv}>
+              <p>Select an icon:</p>
+              <SelectIcons
+                updateIcon={this.updateIcon}
+                currentIcon={
+                  this.props.type === "new" ? "home" : this.props.idRoom.icon
+                }
+              />
+            </div>
 
-            </Form.Field>
-          </Form>
+            {this.props.type === "modify" ? (
+              <Button
+                icon
+                labelPosition="left"
+                inverted
+                color="red"
+                onClick={this.deleteRoom}
+              >
+                <Icon name="trash alternate" />
+                Delete room
+              </Button>
+            ) : null}
+          </Modal.Content>
+          <Modal.Actions>
+            <Button color="red" onClick={this.closeModal}>
+              <Icon name="remove" />{" "}
+              {this.props.type === "new" ? "Cancel" : "Discard changes"}
+            </Button>
 
-          <div style={spaceDiv}>
-          <p>Select an icon:</p>
-          <SelectIcons updateIcon={this.updateIcon} currentIcon={this.props.type === "new" ? "home" : this.props.idRoom.icon }/>
-          </div>
-
-          {this.props.type === "modify" ?
-          <Button icon labelPosition='left' inverted color='red' onClick={this.deleteRoom}>
-            <Icon name='trash alternate' />
-            Delete room
-          </Button> : null }
-
-        </Modal.Content>
-        <Modal.Actions>
-          <Button color='red' onClick={this.closeModal}>
-            <Icon name='remove' /> {this.props.type === "new" ? "Cancel" : "Discard changes" }
-          </Button>
-
-
-          <Button color='green' onClick={this.props.type === "new" ? this.addRoomModal : this.modifyRoomModal}>
-            <Icon name='checkmark' /> {this.props.type === "new" ? "Add room" : "Save changes"}
-          </Button>
-
-        </Modal.Actions>
-          </Modal>
-        </div>
-    )
+            <Button
+              color="green"
+              onClick={
+                this.props.type === "new"
+                  ? this.addRoomModal
+                  : this.modifyRoomModal
+              }
+            >
+              <Icon name="checkmark" />{" "}
+              {this.props.type === "new" ? "Add room" : "Save changes"}
+            </Button>
+          </Modal.Actions>
+        </Modal>
+      </div>
+    );
   }
 }