Conditions to automations done (not connected to backend). I followed the same structure as in triggers

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

@@ -192,10 +192,12 @@ class AutomationSaveModal extends Component {
         super(props);
         this.state = {
             triggerList: [],
+            conditionsList: [],
             order: [],
             automationName: 'New Automation',
             editName: false,
             newTrigger: {},
+            newCondition: {},
             scenesFilter: null,
             openModal: false,
         };
@@ -226,13 +228,18 @@ class AutomationSaveModal extends Component {
         this.setautomationName = this._setter('automationName');
         this.setEditName = this._setter('editName');
         this.setNewTrigger = this._setter('newTrigger');
-
         this.addTrigger = this.addTrigger.bind(this);
         this.removeTrigger = this.removeTrigger.bind(this);
         this.onInputChange = this.onInputChange.bind(this);
         this.searchScenes = this.searchScenes.bind(this);
         this.orderScenes = this.orderScenes.bind(this);
         this.onChangeName = this.onChangeName.bind(this);
+
+        //Conditions
+        this.setNewCondition = this._setter("newCondition");
+        this.addCondition = this.addCondition.bind(this);
+        this.removeCondition = this.removeCondition.bind(this);
+
     }
 
     openModal = (e) => {
@@ -254,14 +261,15 @@ class AutomationSaveModal extends Component {
     triggerKind(trigger) {
         if ('operand' in trigger && 'value' in trigger) {
             return 'rangeTrigger';
-    } if ('on' in trigger) {
+        }
+        if ('on' in trigger) {
             return 'booleanTrigger';
         }
         return false;
         // throw new Error("Trigger kind not handled");
     }
 
-  _checkNewTrigger(trigger) {
+    _checkNewTrigger(trigger, isCondition = false) {
         const error = {
             result: false,
             message: 'There are missing fields!',
@@ -298,7 +306,8 @@ class AutomationSaveModal extends Component {
                 ) {
                     error.message = "The value can't exceed 100, as it's a percentage";
                     return error;
-        } if (
+                }
+                if (
                     deviceKind === 'sensor'
                     && device.sensor === 'HUMIDITY'
                     && trigger.value > 100
@@ -311,21 +320,29 @@ class AutomationSaveModal extends Component {
                 throw new Error('theoretically unreachable statement');
         }
 
-    const isNotDuplicate = !this.state.triggerList.some(
+        let isNotDuplicate = null;
+
+        if(isCondition === true){
+            isNotDuplicate = !this.state.conditionsList.some(
                 (t) => t.device === trigger.device && t.operand === trigger.operand,
             );
-
+        }else{
+            isNotDuplicate = !this.state.triggerList.some(
+                (t) => t.device === trigger.device && t.operand === trigger.operand,
+            );
+        }
+        const type = isCondition ? "condition" : "trigger"
+        const duplicationMessage = `You have already created a ${type} for this device with the same conditions`;
         return {
             result: isNotDuplicate,
             message: isNotDuplicate
                 ? null
-        : 'You have already created a trigger for this device with the same conditions',
+                : duplicationMessage
         };
     }
 
     addTrigger() {
         const {result, message} = this._checkNewTrigger(this.state.newTrigger);
-
         if (result) {
             this.setState(
                 update(this.state, {
@@ -478,6 +495,39 @@ Create new automation
         );
     }
 
+    // CONDITIONS
+
+    addCondition() {
+        // Same method used to check triggers and conditions, not a mistake
+        const {result, message} = this._checkNewTrigger(this.state.newCondition, true);
+        if (result) {
+            this.setState(
+                update(this.state, {
+                    conditionsList: {$push: [this.state.newCondition]},
+                }),
+            );
+        } else {
+            alert(message);
+        }
+    }
+
+    removeCondition(index) {
+        this.setState(
+            update(this.state, {conditionsList: {$splice: [[index, 1]]}}),
+        );
+    }
+
+    onInputChangeCondition = (val) => {
+        if (val.name === 'device') {
+            this.setNewCondition({[val.name]: val.value});
+        } else {
+            this.setNewCondition({
+                ...this.state.newCondition,
+                [val.name]: val.value,
+            });
+        }
+    }
+
     render() {
         return (
             <Modal
@@ -499,7 +549,6 @@ Create new automation
                             this.state.automationName
                         )}
                     </Header>
-
                     <Button
                         onClick={() => this.setEditName((prev) => !prev)}
                         style={{display: 'inline'}}
@@ -578,6 +627,42 @@ Create new automation
                             </Grid.Row>
                         </Grid>
                     </Segment>
+                    <Grid columns={1} stackable textAlign="center">
+                        <Grid.Row verticalAlign="middle">
+                            <Grid.Column>
+                                <Header>Add Conditions</Header>
+                                <List divided relaxed>
+                                    {this.state.conditionsList.length > 0
+                                    && this.state.conditionsList.map((condition, i) => {
+                                        const deviceName = this.deviceList.filter(
+                                            (d) => d.id === condition.device,
+                                        )[0].name;
+                                        const key = this._generateKey(condition);
+                                        return (
+                                            <Trigger
+                                                key={key}
+                                                index={i}
+                                                deviceName={deviceName}
+                                                trigger={condition}
+                                                onRemove={this.removeCondition}
+                                            />
+                                        );
+                                    })}
+                                    <CreateTrigger
+                                        devices={this.props.devices}
+                                        inputChange={this.onInputChangeCondition}
+                                    />
+                                </List>
+                                <Button
+                                    onClick={this.addCondition}
+                                    circular
+                                    icon="add"
+                                    color="blue"
+                                    size="huge"
+                                />
+                            </Grid.Column>
+                        </Grid.Row>
+                    </Grid>
                     <Grid>
                         <Grid.Row>
                             <Grid.Column style={{marginRight: '1rem'}}>