fixed add states daoes not show states already in scene

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

@@ -32,11 +32,16 @@ class NewSceneDevice extends Component {
       openModal: false,
       sceneDevices: this.props.scene ? this.props.scene.sceneStates : {},
       deviceName: "",
+      availableDevices: [],
     };
     this.getDevices();
+    //this.getSceneStates();
+    this.availableDevices();
+    //console.log(this.state);
 
     this.setSceneState = this.setSceneState.bind(this);
     this.createState = this.createState.bind(this);
+    this.availableDevices = this.availableDevices.bind(this);
   }
 
   getDevices() {
@@ -45,6 +50,12 @@ class NewSceneDevice extends Component {
       .catch((err) => console.error(`error fetching devices:`, err));
   }
 
+  // getSceneStates() {
+  //   this.props
+  //     .fetchStates(this.props.activeScene)
+  //     .catch((err) => console.error(`error fetching states`, err));
+  // }
+
   handleOpen = () => {
     this.setState({ openModal: true });
   };
@@ -53,6 +64,28 @@ class NewSceneDevice extends Component {
     this.setState({ openModal: false });
   };
 
+  availableDevices() {
+    let availableDevices = [];
+    this.props.devices.forEach((e) => {
+      if (
+        Object.values(this.props.sceneStates).filter((d) => e.id === d.deviceId)
+          .length < 1
+      ) {
+        if (e.flowType === "OUTPUT") {
+          availableDevices.push({
+            key: e.id,
+            text: e.name,
+            value: e.id,
+          });
+        }
+      } else {
+        //console.log("NOT FOUND", e);
+      }
+    });
+    this.setState({ availableDevices: availableDevices });
+    //return availableDevices;
+  }
+
   resetState = () => {
     this.setState(this.baseState);
     this.handleClose();
@@ -80,18 +113,6 @@ class NewSceneDevice extends Component {
   }
 
   render() {
-    const availableDevices = [];
-    this.props.devices.forEach((e) => {
-      if (!Object.keys(this.state.sceneDevices).find((d) => e.id === d)) {
-        if (e.flowType === "OUTPUT") {
-          availableDevices.push({
-            key: e.id,
-            text: e.name,
-            value: e.id,
-          });
-        }
-      }
-    });
     return (
       <Modal
         closeIcon
@@ -122,7 +143,8 @@ class NewSceneDevice extends Component {
                 fluid
                 multiple
                 onChange={this.setSceneState}
-                options={availableDevices}
+                onClick={() => this.availableDevices()}
+                options={this.state.availableDevices}
               />
             </Form.Field>
           </Form>
@@ -145,6 +167,17 @@ class NewSceneDevice extends Component {
 
 const mapStateToProps = (state, _) => ({
   devices: Object.values(state.devices),
+  get sceneStates() {
+    if (state.active.activeScene !== -1) {
+      const stateArray = [
+        ...state.scenes[state.active.activeScene].sceneStates,
+      ].sort();
+      console.log(state.scenes[state.active.activeScene]);
+      return stateArray.map((id) => state.sceneStates[id]);
+    } else {
+      return [];
+    }
+  },
   activeScene: state.active.activeScene,
 });
 const NewSceneDeviceContainer = connect(

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

@@ -30,7 +30,7 @@ class ScenesPanel extends Component {
                 <Header as="h3">Add devices - Apply Scene</Header>
               </Card.Header>
               <Segment basic style={{ width: "100%", height: "100%" }}>
-                <NewSceneDevice />
+                <NewSceneDevice states={this.props.sceneStates} />
               </Segment>
             </Card.Content>
             <Card.Content extra>
@@ -68,6 +68,7 @@ const mapStateToProps = (state, _) => ({
       const stateArray = [
         ...state.scenes[state.active.activeScene].sceneStates,
       ].sort();
+      console.log(state.scenes[state.active.activeScene]);
       return stateArray.map((id) => state.sceneStates[id]);
     } else {
       return [];