GladysAssistant · Pierre-Gilles · Apr 19, 2021 · Apr 8, 2021 · Apr 19, 2021
diff --git a/front/package-lock.json b/front/package-lock.json
diff --git a/front/package.json b/front/package.json
@@ -49,7 +49,7 @@
     "linkstate": "^1.1.1",
     "preact": "^10.3.2",
     "preact-cli-plugin-fast-async": "^1.0.1",
-    "preact-i18n": "^2.0.0-preactx.2",
+    "preact-i18n": "^2.3.1-preactx",
     "preact-router": "^3.2.1",
     "qrcode": "^1.4.2",
     "react-big-calendar": "^0.22.1",

diff --git a/front/src/components/boxs/device-in-room/EditDeviceInRoom.jsx b/front/src/components/boxs/device-in-room/EditDeviceInRoom.jsx
@@ -6,6 +6,7 @@ import Select from 'react-select';
 import BaseEditBox from '../baseEditBox';
 import RoomSelector from '../../house/RoomSelector';
 import { getDeviceFeatureName } from '../../../utils/device';
+import withIntlAsProp from '../../../utils/withIntlAsProp';
 import { DEVICE_FEATURE_TYPES } from '../../../../../server/utils/constants';
 
 import actions from '../../../actions/dashboard/edit-boxes/editDevicesInRoom';
@@ -43,7 +44,7 @@ class EditDeviceInRoom extends Component {
         device.features.forEach(feature => {
           const featureOption = {
             value: feature.selector,
-            label: getDeviceFeatureName(this.context.intl.dictionary, device, feature)
+            label: getDeviceFeatureName(this.props.intl.dictionary, device, feature)
           };
           // for now, we only supports binary on/off and sensors
           if (feature.read_only || SUPPORTED_FEATURE_TYPES.includes(feature.type)) {
@@ -118,4 +119,4 @@ class EditDeviceInRoom extends Component {
   }
 }
 
-export default EditDeviceInRoom;
+export default withIntlAsProp(EditDeviceInRoom);
diff --git a/front/src/components/device/SelectDeviceFeature.jsx b/front/src/components/device/SelectDeviceFeature.jsx
@@ -3,6 +3,7 @@ import { connect } from 'unistore/preact';
 import Select from 'react-select';
 
 import { getDeviceFeatureName } from '../../utils/device';
+import withIntlAsProp from '../../utils/withIntlAsProp';
 
 @connect('httpClient', {})
 class SelectDeviceFeature extends Component {
@@ -26,7 +27,7 @@ class SelectDeviceFeature extends Component {
 
             roomDeviceFeatures.push({
               value: feature.selector,
-              label: getDeviceFeatureName(this.context.intl.dictionary, device, feature)
+              label: getDeviceFeatureName(this.props.intl.dictionary, device, feature)
             });
           });
         });
@@ -109,4 +110,4 @@ class SelectDeviceFeature extends Component {
   }
 }
 
-export default SelectDeviceFeature;
+export default withIntlAsProp(SelectDeviceFeature);
diff --git a/front/src/routes/calendar/index.js b/front/src/routes/calendar/index.js
@@ -2,6 +2,7 @@ import { Component } from 'preact';
 import { connect } from 'unistore/preact';
 import actions from '../../actions/calendar';
 import { isBright } from '../../utils/color';
+import withIntlAsProp from '../../utils/withIntlAsProp';
 import dayjs from 'dayjs';
 import localizedFormat from 'dayjs/plugin/localizedFormat';
 import localeData from 'dayjs/plugin/localeData';
@@ -76,7 +77,7 @@ class Map extends Component {
                         onRangeChange={this.onRangeChange}
                         defaultView="week"
                         culture={props.user.language}
-                        messages={this.context.intl.dictionary.calendar}
+                        messages={this.props.intl.dictionary.calendar}
                         scrollToTime={dayjs().subtract(2, 'hour')}
                         eventPropGetter={this.eventPropGetter}
                       />
@@ -92,4 +93,4 @@ class Map extends Component {
   }
 }
 
-export default Map;
+export default withIntlAsProp(Map);
diff --git a/front/src/routes/integration/IntegrationPage.jsx b/front/src/routes/integration/IntegrationPage.jsx
@@ -4,10 +4,11 @@ import { Text, Localizer } from 'preact-i18n';
 import IntegrationMenu from './IntegrationMenu';
 import IntegrationCategory from './IntegrationCategory';
 import actions from '../../actions/integration';
+import withIntlAsProp from '../../utils/withIntlAsProp';
 
 @connect('integrations,currentUrl,totalSize,searchKeyword,user', actions)
 class IntegrationPage extends Component {
-  searchWithI18n = e => this.props.search(e, this.context.intl);
+  searchWithI18n = e => this.props.search(e, this.props.intl);
 
   render({ category, integrations, totalSize, currentUrl, searchKeyword, user }) {
     return (
@@ -70,4 +71,4 @@ class IntegrationPage extends Component {
   }
 }
 
-export default IntegrationPage;
+export default withIntlAsProp(IntegrationPage);
diff --git a/.../routes/integration/all/bluetooth/setup-page/setup-peripheral/ConfigurePeripheralForm.jsx b/.../routes/integration/all/bluetooth/setup-page/setup-peripheral/ConfigurePeripheralForm.jsx
@@ -6,6 +6,7 @@ import cx from 'classnames';
 import get from 'get-value';
 import update from 'immutability-helper';
 
+import withIntlAsProp from '../../../../../../utils/withIntlAsProp';
 import { RequestStatus } from '../../../../../../utils/consts';
 import { DEVICE_FEATURE_CATEGORIES, DEVICE_FEATURE_TYPES } from '../../../../../../../../server/utils/constants';
 
@@ -88,7 +89,7 @@ class ConfigurePeripheralForm extends Component {
           $push: [
             {
               name: get(
-                this.context.intl.dictionary,
+                this.props.intl.dictionary,
                 `deviceFeatureCategory.${DEVICE_FEATURE_CATEGORIES.PRESENCE_SENSOR}.${DEVICE_FEATURE_TYPES.SENSOR.PUSH}`
               ),
               external_id: `${device.external_id}:${DEVICE_FEATURE_CATEGORIES.PRESENCE_SENSOR}`,
@@ -254,4 +255,4 @@ class ConfigurePeripheralForm extends Component {
   }
 }
 
-export default ConfigurePeripheralForm;
+export default withIntlAsProp(ConfigurePeripheralForm);
diff --git a/front/src/routes/integration/all/caldav/index.js b/front/src/routes/integration/all/caldav/index.js
@@ -3,6 +3,7 @@ import { connect } from 'unistore/preact';
 import actions from './actions';
 import CaldavPage from './CalDAV';
 import { RequestStatus } from '../../../../utils/consts';
+import withIntlAsProp from '../../../../utils/withIntlAsProp';
 
 @connect(
   'user,caldavHost,caldavUrl,caldavUsername,caldavPassword,caldavSaveSettingsStatus,caldavGetSettingsStatus,caldavCleanUpStatus,caldavSyncStatus',
@@ -19,8 +20,8 @@ class CaldavIntegration extends Component {
       props.caldavGetSettingsStatus === RequestStatus.Getting ||
       props.caldavCleanUpStatus === RequestStatus.Getting ||
       props.caldavSyncStatus === RequestStatus.Getting;
-    return <CaldavPage {...props} loading={loading} dictionary={this.context.intl.dictionary.integration.caldav} />;
+    return <CaldavPage {...props} loading={loading} dictionary={this.props.intl.dictionary.integration.caldav} />;
   }
 }
 
-export default CaldavIntegration;
+export default withIntlAsProp(CaldavIntegration);
diff --git a/front/src/routes/integration/all/mqtt/device-page/setup/index.js b/front/src/routes/integration/all/mqtt/device-page/setup/index.js
@@ -7,6 +7,7 @@ import uuid from 'uuid';
 import get from 'get-value';
 import update from 'immutability-helper';
 import { RequestStatus } from '../../../../../../utils/consts';
+import withIntlAsProp from '../../../../../../utils/withIntlAsProp';
 import { DEVICE_FEATURE_CATEGORIES } from '../../../../../../../../server/utils/constants';
 
 @connect('session,user,httpClient,houses,currentIntegration', actions)
@@ -160,25 +161,25 @@ class MqttDeviceSetupPage extends Component {
     const deviceFeaturesOptions = [];
     Object.keys(DEVICE_FEATURE_CATEGORIES).forEach(category => {
       const categoryValue = DEVICE_FEATURE_CATEGORIES[category];
-      if (get(this.context.intl.dictionary, `deviceFeatureCategory.${categoryValue}`)) {
+      if (get(this.props.intl.dictionary, `deviceFeatureCategory.${categoryValue}`)) {
         const categoryFeatureTypeOptions = [];
 
-        const types = Object.keys(get(this.context.intl.dictionary, `deviceFeatureCategory.${categoryValue}`));
+        const types = Object.keys(get(this.props.intl.dictionary, `deviceFeatureCategory.${categoryValue}`));
 
         types.forEach(type => {
           const typeValue = type;
           if (
-            get(this.context.intl.dictionary, `deviceFeatureCategory.${categoryValue}.${typeValue}`) &&
+            get(this.props.intl.dictionary, `deviceFeatureCategory.${categoryValue}.${typeValue}`) &&
             typeValue !== 'shortCategoryName'
           ) {
             categoryFeatureTypeOptions.push({
               value: `${categoryValue}|${typeValue}`,
-              label: get(this.context.intl.dictionary, `deviceFeatureCategory.${categoryValue}.${typeValue}`)
+              label: get(this.props.intl.dictionary, `deviceFeatureCategory.${categoryValue}.${typeValue}`)
             });
           }
         });
         deviceFeaturesOptions.push({
-          label: get(this.context.intl.dictionary, `deviceFeatureCategory.${categoryValue}.shortCategoryName`),
+          label: get(this.props.intl.dictionary, `deviceFeatureCategory.${categoryValue}.shortCategoryName`),
           options: categoryFeatureTypeOptions
         });
       }
@@ -255,4 +256,4 @@ class MqttDeviceSetupPage extends Component {
   }
 }
 
-export default MqttDeviceSetupPage;
+export default withIntlAsProp(MqttDeviceSetupPage);
diff --git a/front/src/routes/integration/all/zigbee2mqtt/discover-page/index.js b/front/src/routes/integration/all/zigbee2mqtt/discover-page/index.js
@@ -4,6 +4,7 @@ import actions from './actions';
 import Zigbee2mqttPage from '../Zigbee2mqttPage';
 import DiscoverTab from './DiscoverTab';
 import { WEBSOCKET_MESSAGE_TYPES } from '../../../../../../../server/utils/constants';
+import withIntlAsProp from '../../../../../utils/withIntlAsProp';
 
 @connect(
   'user,session,houses,zigbee2mqttDevices,discoverZigbee2mqtt,discoverZigbee2mqttError,permitJoin,gladysConnected,zigbee2mqttConnected,zigbee2mqttFrontend,usbConfigured,z2mEnabled',
@@ -41,10 +42,10 @@ class Zigbee2mqttIntegration extends Component {
   render(props, {}) {
     return (
       <Zigbee2mqttPage user={props.user}>
-        <DiscoverTab {...props} dictionary={this.context.intl.dictionary} />
+        <DiscoverTab {...props} dictionary={this.props.intl.dictionary} />
       </Zigbee2mqttPage>
     );
   }
 }
 
-export default Zigbee2mqttIntegration;
+export default withIntlAsProp(Zigbee2mqttIntegration);
diff --git a/front/src/routes/scene/edit-scene/actions/DeviceGetValueParams.jsx b/front/src/routes/scene/edit-scene/actions/DeviceGetValueParams.jsx
@@ -5,6 +5,7 @@ import get from 'get-value';
 
 import SelectDeviceFeature from '../../../../components/device/SelectDeviceFeature';
 import { getDeviceFeatureName } from '../../../../utils/device';
+import withIntlAsProp from '../../../../utils/withIntlAsProp';
 
 @connect('httpClient', {})
 class DeviceGetValue extends Component {
@@ -22,15 +23,15 @@ class DeviceGetValue extends Component {
 
   setVariables = (device, deviceFeature) => {
     const { columnIndex, index } = this.props;
-    const DEFAULT_VARIABLE_NAME = get(this.context.intl.dictionary, 'editScene.variables.device.get-value.last_value');
+    const DEFAULT_VARIABLE_NAME = get(this.props.intl.dictionary, 'editScene.variables.device.get-value.last_value');
     this.props.setVariables(columnIndex, index, [
       {
         name: 'last_value',
         type: 'device_feature',
         ready: device && deviceFeature,
         label:
           device && deviceFeature
-            ? getDeviceFeatureName(this.context.intl.dictionary, device, deviceFeature)
+            ? getDeviceFeatureName(this.props.intl.dictionary, device, deviceFeature)
             : DEFAULT_VARIABLE_NAME,
         data: {
           device,
@@ -68,4 +69,4 @@ class DeviceGetValue extends Component {
   }
 }
 
-export default DeviceGetValue;
+export default withIntlAsProp(DeviceGetValue);
diff --git a/front/src/routes/scene/edit-scene/actions/only-continue-if/OnlyContinueIfParams.jsx b/front/src/routes/scene/edit-scene/actions/only-continue-if/OnlyContinueIfParams.jsx
@@ -3,6 +3,8 @@ import { connect } from 'unistore/preact';
 import update from 'immutability-helper';
 import get from 'get-value';
 
+import withIntlAsProp from '../../../../../utils/withIntlAsProp';
+
 import Condition from './Condition';
 
 @connect('httpClient', {})
@@ -47,7 +49,7 @@ class OnlyContinueIf extends Component {
       actionGroup.forEach((action, index) => {
         if (this.props.variables[groupIndex][index]) {
           variableOptions.push({
-            label: `${groupIndex + 1}. ${get(this, `context.intl.dictionary.editScene.actions.${action.type}`)}`,
+            label: `${groupIndex + 1}. ${get(this, `props.intl.dictionary.editScene.actions.${action.type}`)}`,
             options: this.props.variables[groupIndex][index].map(option => ({
               label: option.label,
               value: `${groupIndex}.${index}.${option.name}`,
@@ -78,4 +80,4 @@ class OnlyContinueIf extends Component {
   }
 }
 
-export default OnlyContinueIf;
+export default withIntlAsProp(OnlyContinueIf);
diff --git a/front/src/utils/withIntlAsProp.js b/front/src/utils/withIntlAsProp.js
@@ -0,0 +1,7 @@
+import { IntlContext } from 'preact-i18n';
+
+const withIntlAsProp = WrappedComponent => props => (
+  <IntlContext.Consumer>{({ intl }) => <WrappedComponent intl={intl} {...props} />}</IntlContext.Consumer>
+);
+
+export default withIntlAsProp;