diff --git a/front/package-lock.json b/front/package-lock.json index cab6dadd9c..287c31051b 100644 --- a/front/package-lock.json +++ b/front/package-lock.json @@ -13889,13 +13889,19 @@ "dev": true }, "preact-i18n": { - "version": "2.0.0-preactx.2", - "resolved": "https://registry.npmjs.org/preact-i18n/-/preact-i18n-2.0.0-preactx.2.tgz", - "integrity": "sha512-UEuiSajR+RHTaPneqqWMgC0dmT9R5IF+n8slNV5Uog533UGsncKaCeK1UyadlWKPKGHLaM5oZohGE9YF70xFnA==", + "version": "2.3.1-preactx", + "resolved": "https://registry.npmjs.org/preact-i18n/-/preact-i18n-2.3.1-preactx.tgz", + "integrity": "sha512-i/QGG3BQOWh4nFPXTnhazHGOq2STYMa9/0h6oiUkV+p/c5IDd0luPhRlXkAnEgGRZX3PjAEgx/tzWPQne61wuQ==", "requires": { - "dlv": "^1.1.2" + "dlv": "^1.1.2", + "preact-markup": "^2.0.0" } }, + "preact-markup": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/preact-markup/-/preact-markup-2.1.1.tgz", + "integrity": "sha512-8JL2p36mzK8XkspOyhBxUSPjYwMxDM0L5BWBZWxsZMVW8WsGQrYQDgVuDKkRspt2hwrle+Cxr/053hpc9BJwfw==" + }, "preact-render-spy": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/preact-render-spy/-/preact-render-spy-1.3.0.tgz", diff --git a/front/package.json b/front/package.json index f183780b68..2f8d331cfb 100644 --- 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 index e3a688f9ce..54f28e4251 100644 --- 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 index b1d388261e..f20bc10531 100644 --- 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 index 13667a47e8..1ea26ff1fe 100644 --- 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 index 6644efcd53..e1f715ba09 100644 --- 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/front/src/routes/integration/all/bluetooth/setup-page/setup-peripheral/ConfigurePeripheralForm.jsx b/front/src/routes/integration/all/bluetooth/setup-page/setup-peripheral/ConfigurePeripheralForm.jsx index 4bfbe73ef2..5f305bb788 100644 --- a/front/src/routes/integration/all/bluetooth/setup-page/setup-peripheral/ConfigurePeripheralForm.jsx +++ b/front/src/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 index 1d0e7355ec..8d456490b8 100644 --- 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 ; + return ; } } -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 index 6153cd281f..6bbb3f66d6 100644 --- 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 index 37f9482131..a27d8ffcdc 100644 --- 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 ( - + ); } } -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 index 4db7b1c982..6439f05d77 100644 --- 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,7 +23,7 @@ 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', @@ -30,7 +31,7 @@ class DeviceGetValue extends Component { 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 index 0b1db3145e..b2f25960ca 100644 --- 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 new file mode 100644 index 0000000000..30af5f11e9 --- /dev/null +++ b/front/src/utils/withIntlAsProp.js @@ -0,0 +1,7 @@ +import { IntlContext } from 'preact-i18n'; + +const withIntlAsProp = WrappedComponent => props => ( + {({ intl }) => } +); + +export default withIntlAsProp;