Fix #1280: When switching dashboard, similar box should be refreshed

front/src/components/boxs/camera/Camera.jsx

@@ -31,20 +31,29 @@ const CameraBox = ({ children, ...props }) => (
   </div>
 );
 
-@connect('session,DashboardBoxDataCamera,DashboardBoxStatusCamera', actions)
 class CameraBoxComponent extends Component {
+  refreshData = () => {
+    this.props.getCameraImage(this.props.box, this.props.x, this.props.y);
+  };
   updateDeviceStateWebsocket = payload =>
     this.props.deviceFeatureWebsocketEvent(this.props.box, this.props.x, this.props.y, payload);
 
   componentDidMount() {
-    this.props.getCameraImage(this.props.box, this.props.x, this.props.y);
-
+    this.refreshData();
     this.props.session.dispatcher.addListener(
       WEBSOCKET_MESSAGE_TYPES.DEVICE.NEW_STRING_STATE,
       this.updateDeviceStateWebsocket
     );
   }
 
+  componentDidUpdate(previousProps) {
+    const cameraChanged = get(previousProps, 'box.camera') !== get(this.props, 'box.camera');
+    const nameChanged = get(previousProps, 'box.name') !== get(this.props, 'box.name');
+    if (cameraChanged || nameChanged) {
+      this.refreshData();
+    }
+  }
+
   componentWillUnmount() {
     this.props.session.dispatcher.removeListener(
       WEBSOCKET_MESSAGE_TYPES.DEVICE.NEW_STRING_STATE,
@@ -61,4 +70,4 @@ class CameraBoxComponent extends Component {
   }
 }
 
-export default CameraBoxComponent;
+export default connect('session,DashboardBoxDataCamera,DashboardBoxStatusCamera', actions)(CameraBoxComponent);

front/src/components/boxs/device-in-room/DevicesInRoomsBox.jsx

@@ -80,18 +80,28 @@ const RoomCard = ({ children, ...props }) => {
   );
 };
 
-@connect('session,user,DashboardBoxDataDevicesInRoom,DashboardBoxStatusDevicesInRoom', actions)
 class DevicesInRoomComponent extends Component {
+  refreshData = () => {
+    this.props.getDevicesInRoom(this.props.box, this.props.x, this.props.y);
+  };
   updateDeviceStateWebsocket = payload => this.props.deviceFeatureWebsocketEvent(this.props.x, this.props.y, payload);
 
   componentDidMount() {
-    this.props.getDevicesInRoom(this.props.box, this.props.x, this.props.y);
+    this.refreshData();
     this.props.session.dispatcher.addListener(
       WEBSOCKET_MESSAGE_TYPES.DEVICE.NEW_STATE,
       this.updateDeviceStateWebsocket
     );
   }
 
+  componentDidUpdate(previousProps) {
+    const roomChanged = get(previousProps, 'box.room') !== get(this.props, 'box.room');
+    const deviceFeaturesChanged = get(previousProps, 'box.device_features') !== get(this.props, 'box.device_features');
+    if (roomChanged || deviceFeaturesChanged) {
+      this.refreshData();
+    }
+  }
+
   componentWillUnmount() {
     this.props.session.dispatcher.removeListener(
       WEBSOCKET_MESSAGE_TYPES.DEVICE.NEW_STATE,
@@ -121,4 +131,7 @@ class DevicesInRoomComponent extends Component {
   }
 }
 
-export default DevicesInRoomComponent;
+export default connect(
+  'session,user,DashboardBoxDataDevicesInRoom,DashboardBoxStatusDevicesInRoom',
+  actions
+)(DevicesInRoomComponent);

front/src/components/boxs/room-humidity/RoomHumidity.jsx

@@ -40,10 +40,20 @@ const RoomHumidityBox = ({ children, ...props }) => (
   </div>
 );
 
-@connect('DashboardBoxDataHumidityInRoom,DashboardBoxStatusHumidityInRoom', actions)
 class RoomHumidityBoxComponent extends Component {
-  componentDidMount() {
+  refreshData = () => {
     this.props.getHumidityInRoom(this.props.box, this.props.x, this.props.y);
+  };
+
+  componentDidMount() {
+    this.refreshData();
+  }
+
+  componentDidUpdate(previousProps) {
+    const roomChanged = get(previousProps, 'box.room') !== get(this.props, 'box.room');
+    if (roomChanged) {
+      this.refreshData();
+    }
   }
 
   render(props, {}) {
@@ -56,4 +66,7 @@ class RoomHumidityBoxComponent extends Component {
   }
 }
 
-export default RoomHumidityBoxComponent;
+export default connect(
+  'DashboardBoxDataHumidityInRoom,DashboardBoxStatusHumidityInRoom',
+  actions
+)(RoomHumidityBoxComponent);

front/src/components/boxs/room-temperature/RoomTemperature.jsx

@@ -29,10 +29,20 @@ const RoomTemperatureBox = ({ children, ...props }) => (
   </div>
 );
 
-@connect('DashboardBoxDataTemperatureInRoom,DashboardBoxStatusTemperatureInRoom', actions)
 class RoomTemperatureBoxComponent extends Component {
-  componentDidMount() {
+  refreshData = () => {
     this.props.getTemperatureInRoom(this.props.box, this.props.x, this.props.y);
+  };
+
+  componentDidMount() {
+    this.refreshData();
+  }
+
+  componentDidUpdate(previousProps) {
+    const roomChanged = get(previousProps, 'box.room') !== get(this.props, 'box.room');
+    if (roomChanged) {
+      this.refreshData();
+    }
   }
 
   render(props, {}) {
@@ -47,4 +57,7 @@ class RoomTemperatureBoxComponent extends Component {
   }
 }
 
-export default RoomTemperatureBoxComponent;
+export default connect(
+  'DashboardBoxDataTemperatureInRoom,DashboardBoxStatusTemperatureInRoom',
+  actions
+)(RoomTemperatureBoxComponent);

front/src/components/boxs/user-presence/EditUserPresenceBox.jsx

@@ -90,7 +90,13 @@ class EditUserPresence extends Component {
 
   render(props, { users, selectedUsers, loading }) {
     return (
-      <UserPresenceBox users={users} selectedUsers={selectedUsers} loading={loading} updateUsers={this.updateUsers} />
+      <UserPresenceBox
+        {...props}
+        users={users}
+        selectedUsers={selectedUsers}
+        loading={loading}
+        updateUsers={this.updateUsers}
+      />
     );
   }
 }

front/src/components/boxs/user-presence/UserPresence.jsx

@@ -1,5 +1,6 @@
 import { Component } from 'preact';
 import { connect } from 'unistore/preact';
+import get from 'get-value';
 import { Text } from 'preact-i18n';
 import { RequestStatus } from '../../../utils/consts';
 import update from 'immutability-helper';
@@ -150,14 +151,23 @@ class UserPresenceComponent extends Component {
       });
     }
   };
+
   componentDidMount() {
     this.getUsersWithPresence();
-    this.props.session.dispatcher.addListener(WEBSOCKET_MESSAGE_TYPES.USER_PRESENCE.BACK_HOME, payload =>
-      this.userChanged(payload)
-    );
-    this.props.session.dispatcher.addListener(WEBSOCKET_MESSAGE_TYPES.USER_PRESENCE.LEFT_HOME, payload =>
-      this.userChanged(payload)
-    );
+    this.props.session.dispatcher.addListener(WEBSOCKET_MESSAGE_TYPES.USER_PRESENCE.BACK_HOME, this.userChanged);
+    this.props.session.dispatcher.addListener(WEBSOCKET_MESSAGE_TYPES.USER_PRESENCE.LEFT_HOME, this.userChanged);
+  }
+
+  componentDidUpdate(previousProps) {
+    const usersChanged = get(previousProps, 'box.users') !== get(this.props, 'box.users');
+    if (usersChanged) {
+      this.getUsersWithPresence();
+    }
+  }
+
+  componentWillUnmount() {
+    this.props.session.dispatcher.removeListener(WEBSOCKET_MESSAGE_TYPES.USER_PRESENCE.BACK_HOME, this.userChanged);
+    this.props.session.dispatcher.removeListener(WEBSOCKET_MESSAGE_TYPES.USER_PRESENCE.LEFT_HOME, this.userChanged);
   }
 
   render(props, { usersWithPresence, dashboardUserPresenceGetUsersStatus }) {

front/src/components/boxs/weather/WeatherBox.jsx

@@ -212,13 +212,31 @@ const WeatherBox = ({ children, ...props }) => (
   </div>
 );
 
-@connect('DashboardBoxDataWeather,DashboardBoxStatusWeather,user', actions)
 class WeatherBoxComponent extends Component {
-  componentDidMount() {
-    // get the weather
+  refreshData = () => {
     this.props.getWeather(this.props.box, this.props.x, this.props.y);
+  };
+  componentDidMount() {
+    this.refreshData();
     // refresh weather every interval
-    setInterval(() => this.props.getWeather(this.props.box, this.props.x, this.props.y), BOX_REFRESH_INTERVAL_MS);
+    this.interval = setInterval(() => this.refreshData, BOX_REFRESH_INTERVAL_MS);
+  }
+
+  componentDidUpdate(previousProps) {
+    const houseChanged = get(previousProps, 'box.house') !== get(this.props, 'box.house');
+    const advancedWeatherChanged =
+      get(previousProps, 'box.modes.advancedWeather') !== get(this.props, 'box.modes.advancedWeather');
+    const dailyForecastChanged =
+      get(previousProps, 'box.modes.dailyForecast') !== get(this.props, 'box.modes.dailyForecast');
+    const hourlyForecastChanged =
+      get(previousProps, 'box.modes.hourlyForecast') !== get(this.props, 'box.modes.hourlyForecast');
+    if (houseChanged || advancedWeatherChanged || dailyForecastChanged || hourlyForecastChanged) {
+      this.refreshData();
+    }
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.interval);
   }
 
   render(props, {}) {
@@ -314,4 +332,4 @@ class WeatherBoxComponent extends Component {
   }
 }
 
-export default WeatherBoxComponent;
+export default connect('DashboardBoxDataWeather,DashboardBoxStatusWeather,user', actions)(WeatherBoxComponent);