Localize all selects by passing a translation key as label (#1128)

Co-authored-by: Pierre-Gilles Leymarie <pierregilles.leymarie@gmail.com>
GladysAssistant · Apr 7, 2021 · e3f62e7 · e3f62e7
1 parent 8f834fe
commit e3f62e7
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 26 deletions.
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/select/index.jsx b/front/src/components/select/index.jsx
@@ -0,0 +1,21 @@
+import Select from 'react-select';
+import { useText } from 'preact-i18n';
+
+export const LocalizedSelect = props => {
+  const translatedLabels = useText(
+    (props.options || []).reduce((acc, option, index) => {
+      // we use the index as the key rather than the value
+      // this is in case two options have the same value but differing labels
+      acc[index] = option.label;
+      return acc;
+    }, {})
+  );
+
+  const options = (props.options || []).map((option, index) => ({
+    value: option.value,
+    label: translatedLabels[index]
+  }));
+  return <Select {...{ ...props, options }} />;
+};
+
+export default LocalizedSelect;
diff --git a/front/src/routes/scene/edit-scene/actions/ChooseActionTypeCard.jsx b/front/src/routes/scene/edit-scene/actions/ChooseActionTypeCard.jsx
@@ -1,7 +1,7 @@
 import { Component } from 'preact';
 import { connect } from 'unistore/preact';
-import Select from 'react-select';
-import { Text, withText } from 'preact-i18n';
+import LocalizedSelect from '../../../../components/select';
+import { Text } from 'preact-i18n';
 
 import { ACTIONS } from '../../../../../../server/utils/constants';
 
@@ -20,11 +20,6 @@ const ACTION_LIST = [
   ACTIONS.HTTP.REQUEST
 ];
 
-const TRANSLATIONS = ACTION_LIST.reduce((acc, action) => {
-  acc[`editScene.actions.${action}`] = `editScene.actions.${action}`;
-  return acc;
-}, {});
-@withText(TRANSLATIONS)
 @connect('httpClient', {})
 class ChooseActionType extends Component {
   state = {
@@ -43,7 +38,7 @@ class ChooseActionType extends Component {
   render(props, { currentAction }) {
     const options = ACTION_LIST.map(action => ({
       value: action,
-      label: props[`editScene.actions.${action}`]
+      label: `editScene.actions.${action}`
     }));
 
     return (
@@ -52,7 +47,7 @@ class ChooseActionType extends Component {
           <label class="form-label">
             <Text id="editScene.selectActionType" />
           </label>
-          <Select onChange={this.handleChange} value={currentAction} options={options} />
+          <LocalizedSelect onChange={this.handleChange} value={currentAction} options={options} />
         </div>
         <div class="form-group">
           <button onClick={this.changeBoxType} class="btn btn-success">

diff --git a/front/src/routes/scene/edit-scene/triggers/ChooseTriggerTypeCard.jsx b/front/src/routes/scene/edit-scene/triggers/ChooseTriggerTypeCard.jsx
@@ -1,7 +1,7 @@
 import { Component } from 'preact';
 import { connect } from 'unistore/preact';
 import { Text } from 'preact-i18n';
-import Select from 'react-select';
+import { LocalizedSelect } from '../../../../components/select';
 
 import { EVENTS } from '../../../../../../server/utils/constants';
 
@@ -35,11 +35,11 @@ class ChooseTriggerType extends Component {
           <label class="form-label">
             <Text id="editScene.selectTriggerLabel" />
           </label>
-          <Select
+          <LocalizedSelect
             value={currentTrigger}
             options={TRIGGER_LIST.map(trigger => ({
               value: trigger,
-              label: <Text id={`editScene.triggers.${trigger}`} />
+              label: `editScene.triggers.${trigger}`
             }))}
             onChange={this.handleChange}
           />

diff --git a/front/src/routes/scene/edit-scene/triggers/ScheduledTrigger.jsx b/front/src/routes/scene/edit-scene/triggers/ScheduledTrigger.jsx
@@ -4,7 +4,7 @@ import DatePicker from 'react-datepicker';
 import get from 'get-value';
 import { Text, Localizer } from 'preact-i18n';
 import { format } from 'date-fns';
-import Select from 'react-select';
+import { LocalizedSelect } from '../../../../components/select';
 
 import fr from 'date-fns/locale/fr';
 
@@ -210,39 +210,39 @@ class TurnOnLight extends Component {
                 <div class="form-label">
                   <Text id="editScene.triggersCard.scheduledTrigger.daysOfTheWeekLabel" />
                 </div>
-                <Select
+                <LocalizedSelect
                   defaultValue={[]}
                   isMulti
                   value={selectedWeekDaysOptions}
                   onChange={this.handleDayOfTheWeekChange}
                   options={[
                     {
                       value: 'monday',
-                      label: <Text id="editScene.triggersCard.scheduledTrigger.daysOfTheWeek.monday" />
+                      label: 'editScene.triggersCard.scheduledTrigger.daysOfTheWeek.monday'
                     },
                     {
                       value: 'tuesday',
-                      label: <Text id="editScene.triggersCard.scheduledTrigger.daysOfTheWeek.tuesday" />
+                      label: 'editScene.triggersCard.scheduledTrigger.daysOfTheWeek.tuesday'
                     },
                     {
                       value: 'wednesday',
-                      label: <Text id="editScene.triggersCard.scheduledTrigger.daysOfTheWeek.wednesday" />
+                      label: 'editScene.triggersCard.scheduledTrigger.daysOfTheWeek.wednesday'
                     },
                     {
                       value: 'thursday',
-                      label: <Text id="editScene.triggersCard.scheduledTrigger.daysOfTheWeek.thursday" />
+                      label: 'editScene.triggersCard.scheduledTrigger.daysOfTheWeek.thursday'
                     },
                     {
                       value: 'friday',
-                      label: <Text id="editScene.triggersCard.scheduledTrigger.daysOfTheWeek.friday" />
+                      label: 'editScene.triggersCard.scheduledTrigger.daysOfTheWeek.friday'
                     },
                     {
                       value: 'saturday',
-                      label: <Text id="editScene.triggersCard.scheduledTrigger.daysOfTheWeek.saturday" />
+                      label: 'editScene.triggersCard.scheduledTrigger.daysOfTheWeek.saturday'
                     },
                     {
                       value: 'sunday',
-                      label: <Text id="editScene.triggersCard.scheduledTrigger.daysOfTheWeek.sunday" />
+                      label: 'editScene.triggersCard.scheduledTrigger.daysOfTheWeek.sunday'
                     }
                   ]}
                 />