fix(exposes): fix boolean values translations

nurikk · Jul 30, 2021 · 7e21370 · 7e21370
1 parent e516301
commit 7e21370
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 34 deletions.
diff --git a/src/components/display-value/DisplayValue.tsx b/src/components/display-value/DisplayValue.tsx
@@ -6,48 +6,52 @@ type DisplayValueProps = {
  name: string;
  value: unknown;
 }
+function BooleanValueView(props: DisplayValueProps): JSX.Element {
+ const { value, name } = props;
+ const { t } = useTranslation("values");
+ const booleansMap = {
+ contact: new Map<boolean, string | JSX.Element>([
+ [true, t('closed')],
+ [false, t('open')],
+ ]),
 
-const booleansMap = {
- contact: new Map<boolean, string | JSX.Element>([
- [true, 'closed'],
- [false, 'open'],
- ]),
-
- occupancy: new Map([
- [true, 'occupied'],
- [false, 'clear']
- ]),
- water_leak: new Map<boolean, string | JSX.Element>([
- [true, <span className={cx("text-danger", "animation-blinking")} key="Leaking">Leaking</span>],
- [false, 'clear']
- ]),
+ occupancy: new Map([
+ [true, t('occupied')],
+ [false, t('clear')]
+ ]),
+ water_leak: new Map<boolean, string | JSX.Element>([
+ [true, <span className={cx("text-danger", "animation-blinking")} key="Leaking">{t('leaking')}</span>],
+ [false, t('clear')]
+ ]),
 
- tamper: new Map<boolean, string | JSX.Element>([
- [true, <span className={cx("text-danger", "animation-blinking")} key="tampered">Tampered</span>],
- [false, 'clear']
- ]),
- supported: new Map([
- [true, 'supported'],
- [false, 'not_supported']
- ]),
+  tamper: new Map<boolean, string | JSX.Element>([
+  [true, <span className={cx("text-danger", "animation-blinking")} key="tampered">{t('tampered')}</span>],
+  [false, 'clear']
+  ]),
+  supported: new Map([
+  [true, t('supported')],
+  [false, t('not_supported')]
+  ]),
 
- _default: new Map([
- [true, 'true'],
- [false, 'false']
- ])
-};
+ _default: new Map([
+ [true, t('true')],
+ [false, t('false')]
+ ])
+ };
+ const mapValue = booleansMap[name] || booleansMap._default;
+ return <>{mapValue.get(value)}</>;
+}
 
 export function DisplayValue(props: DisplayValueProps): JSX.Element {
  const { t } = useTranslation("values");
- const { value, name } = props;
+ const { value } = props;
  switch (typeof value) {
  case 'boolean':
- const mapValue = booleansMap[name] || booleansMap._default;
- return <>{t(mapValue.get(value))}</>;
+ return <BooleanValueView {...props}/>
  case "undefined":
  return <>N/A</>;
  case "object":
- return <>{value === null ? 'null' : JSON.stringify(value)}</>;
+ return <>{value === null ? t('null') : JSON.stringify(value)}</>;
  case "string":
  return <>{value === "" ? <small className="text-muted">{t('empty_string')}</small> : value}</>;
  default:

diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
@@ -121,7 +121,8 @@
  "pressure": "Pressure",
  "soil_moisture": "Soil Moisture",
  "state": "State",
- "temperature": "Temperature"
+ "temperature": "Temperature",
+ "tamper": "Tamper"
  },
  "groups": {
  "add_to_group": "Add to group",
@@ -256,7 +257,9 @@
  "open": "Open",
  "supported": "Supported",
  "true": "True",
- "empty_string": "Empty string(\"\")"
+ "empty_string": "Empty string(\"\")",
+ "leaking": "Leaking",
+ "tampered": "Tampered"
  },
  "zigbee": {
  "actions": "Actions",
@@ -296,4 +299,4 @@
  "zigbee_manufacturer": "Zigbee Manufacturer",
  "zigbee_model": "Zigbee Model"
  }
-}
+}