Skip to content

Commit 26e957e

Browse files
germanferrerogermanferrero
committed
refactor(networknodes): adapt to lingui i18n
1 parent 6649c96 commit 26e957e

10 files changed

Lines changed: 53 additions & 43 deletions

File tree

‎package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,6 @@
8383
"leaflet.gridlayer.googlemutant": "0.13.4",
8484
"preact": "10.5.7",
8585
"preact-cli": "3.0.0",
86-
"preact-i18nline": "2.0.0",
8786
"preact-router": "3.2.1",
8887
"react-hook-form": "6.9.2",
8988
"react-query": "2.23.1",

‎plugins/lime-plugin-delete-nodes/src/deleteNodesMenu.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { h } from 'preact';
2-
import I18n from 'i18n-js';
2+
import { Trans } from '@lingui/macro';
33

44
const Menu = () => (
5-
<a href={'#/deletenodes'}>{I18n.t('Delete Nodes')}</a>
5+
<a href={'#/deletenodes'}><Trans>Delete Nodes</Trans></a>
66
);
77

88
export default Menu;

‎plugins/lime-plugin-delete-nodes/src/deleteNodesPage.js‎

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { useEffect, useState } from 'preact/hooks';
66
import { useSet } from 'react-use';
77
import { useMarkNodesAsGone, useNetworkNodes } from 'plugins/lime-plugin-network-nodes/src/networkNodesQueries'
88
import style from './deleteNodesStyle.less';
9-
import I18n from 'i18n-js';
9+
import { Trans } from '@lingui/macro';
1010

1111
export const DeleteNodesPage_ = ({ nodes, onDelete, isSubmitting, isSuccess }) => {
1212
const [selectedNodes, { toggle, has, reset }] = useSet(new Set([]));
@@ -26,13 +26,17 @@ export const DeleteNodesPage_ = ({ nodes, onDelete, isSubmitting, isSuccess }) =
2626
return (
2727
<div class="d-flex flex-column flex-grow-1 overflow-auto ">
2828
<div class="d-flex flex-column flex-grow-1 overflow-auto container container-padded">
29-
<h4>{I18n.t("Delete Nodes")}</h4>
29+
<h4><Trans>Delete Nodes</Trans></h4>
3030
{unreachableNodes.length > 0 &&
31-
<p>{I18n.t("Select the nodes which no longer belong to the network and "
32-
+ "delete them from the list of unreachable nodes")}</p>
31+
<p>
32+
<Trans>
33+
Select the nodes which no longer belong to the network and
34+
delete them from the list of unreachable nodes
35+
</Trans>
36+
</p>
3337
}
3438
{unreachableNodes.length === 0 &&
35-
<p>{I18n.t("There are no left unreachable nodes")}</p>
39+
<p><Trans>There are no left unreachable nodes</Trans></p>
3640
}
3741
<List>
3842
{unreachableNodes.map(node =>
@@ -48,15 +52,16 @@ export const DeleteNodesPage_ = ({ nodes, onDelete, isSubmitting, isSuccess }) =
4852
</div>
4953
<div class={style.bottomAction}>
5054
<span>
51-
{[selectedNodes.size,
52-
I18n.t('selected-nodes', { count: selectedNodes.size })
53-
].join(' ')}
55+
<Plural value={Number(selectedNodes.size)}
56+
one="# node selected"
57+
other="# nodes selected"
58+
/>
5459
</span>
5560
{!isSubmitting &&
5661
<button class="ml-auto"
5762
onClick={() => onDelete([...selectedNodes])}
5863
disabled={selectedNodes.size < 1}>
59-
{I18n.t("Delete")}
64+
<Trans>Delete</Trans>
6065
</button>
6166
}
6267
{isSubmitting &&
@@ -66,7 +71,7 @@ export const DeleteNodesPage_ = ({ nodes, onDelete, isSubmitting, isSuccess }) =
6671
}
6772
</div>
6873
{showSuccess &&
69-
<Toast type={"success"} text={I18n.t("Successfully deleted")} />
74+
<Toast type={"success"} text={<Trans>Successfully deleted</Trans>} />
7075
}
7176
</div>
7277
)

‎plugins/lime-plugin-network-nodes/src/components/expandableNode/index.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { h } from 'preact';
2-
import I18n from 'i18n-js';
2+
import { Trans } from '@lingui/macro';
33
import { ListItem } from 'components/list';
44
import style from './style.less';
55

@@ -15,8 +15,8 @@ export const ExpandableNode = ({ node, showMore, onClick }) => {
1515
<div class={style.moreData} onClick={e => e.stopPropagation()}>
1616
{ipv4 && <div>IPv4: <a href={`http://${ipv4}`}>{ipv4}</a></div>}
1717
{ipv6 && <div>IPv6: <a href={`http://[${ipv6}]`}>{ipv6}</a></div>}
18-
{board && <div>{I18n.t('Device')}: {board}</div>}
19-
{fw_version && <div>{I18n.t('Firmware')}: {fw_version}</div>}
18+
{board && <div><Trans>Device</Trans>: {board}</div>}
19+
{fw_version && <div><Trans>Firmware</Trans>: {fw_version}</div>}
2020
</div>
2121
}
2222
</div>

‎plugins/lime-plugin-network-nodes/src/networkNodesMenu.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { h } from 'preact';
2-
import I18n from 'i18n-js';
2+
import { Trans } from '@lingui/macro';
33

44
const Menu = () => (
5-
<a href={'#/networknodes'}>{I18n.t('Network Nodes')}</a>
5+
<a href={'#/networknodes'}><Trans>Network Nodes</Trans></a>
66
);
77

88
export default Menu;

‎plugins/lime-plugin-network-nodes/src/networkNodesPage.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,15 @@ import { Loading } from 'components/loading';
55
import { ExpandableNode } from './components/expandableNode';
66
import style from './networkNodesStyle.less';
77
import { useState } from 'preact/hooks';
8-
import I18n from 'i18n-js';
8+
import { Trans } from '@lingui/macro';
99

1010
export const _NetworkNodes = ({ nodes, isLoading, unfoldedNode, onUnfold }) => {
1111
if (isLoading) {
1212
return <div class="container container-center"><Loading /></div>
1313
}
1414
return (
1515
<div class="d-flex flex-column flex-grow-1 overflow-auto">
16-
<div class={style.title}>{I18n.t("Network Nodes")}</div>
16+
<div class={style.title}><Trans>Network Nodes</Trans></div>
1717
<List>
1818
{nodes.map((node) =>
1919
<ExpandableNode key={node.hostname}

‎plugins/lime-plugin-reachable-nodes/src/reachableNodesMenu.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { h } from 'preact';
22

3-
import I18n from 'i18n-js';
3+
import { Trans } from '@lingui/macro';
44

55
export const ReachableNodesMenu = () => (
6-
<a href={'#/reachablenodes'}>{I18n.t('Reachable Nodes')}</a>
7-
);
6+
<a href={'#/reachablenodes'}><Trans>Reachable Nodes</Trans></a>
7+
);

‎plugins/lime-plugin-reachable-nodes/src/reachableNodesPage.js‎

Lines changed: 17 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -6,22 +6,28 @@ import { List } from "components/list";
66
import { ExpandableNode } from "plugins/lime-plugin-network-nodes/src/components/expandableNode";
77
import { useNetworkNodes } from "plugins/lime-plugin-network-nodes/src/networkNodesQueries";
88
import Help from "components/help";
9-
import I18n from 'i18n-js';
9+
import { Trans } from '@lingui/macro';
1010

1111
const PageHelp = () => (
1212
<div>
1313
<p>
14-
<h5>{I18n.t("Reachable Nodes")}</h5>
15-
{I18n.t("These are the nodes that can be reached from your node, " +
16-
"i.e. there is a working path from your node to each of them.")}
14+
<h5><Trans>Reachable Nodes</Trans></h5>
15+
<Trans>
16+
These are the nodes that can be reached from your node,
17+
i.e. there is a working path from your node to each of them.
18+
</Trans>
1719
<br/>
18-
{I18n.t("This information is synced periodically " +
19-
"and can be outdated by some minutes")}
20+
<Trans>
21+
This information is synced periodically
22+
and can be outdated by some minutes.
23+
</Trans>
2024
</p>
2125
<p>
22-
<h5>{I18n.t("Unreachable Nodes")}</h5>
23-
{I18n.t("These are the nodes that can't be reached from your node, " +
24-
"it is possible that they are not turned on or a link to reach them is down.")}
26+
<h5><Trans>Unreachable Nodes</Trans></h5>
27+
<Trans>
28+
These are the nodes that can't be reached from your node,
29+
it is possible that they are not turned on or a link to reach them is down.
30+
</Trans>
2531
</p>
2632
</div>
2733
);
@@ -30,8 +36,8 @@ const PageTabs = ({ nodes, ...props }) => {
3036
const nReachable = Object.values(nodes).filter(n => n.status === "recently_reachable").length;
3137
const nUnreachable = Object.values(nodes).filter(n => n.status === "unreachable").length;
3238
const tabs = [
33-
{ key: 'recently_reachable', repr: I18n.t('Reachable (%{howMany})', { howMany: nReachable }) },
34-
{ key: 'unreachable', repr: I18n.t('Unreachable (%{howMany})', { howMany: nUnreachable }) },
39+
{ key: 'recently_reachable', repr: <Trans>Reachable ({nReachable}) </Trans>},
40+
{ key: 'unreachable', repr: <Trans>Unreachable ({nUnreachable}) </Trans>},
3541
];
3642
return <Tabs tabs={tabs} {...props} />
3743
}

‎plugins/lime-plugin-upgraded-nodes/src/upgradedNodesMenu.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { h } from 'preact';
2-
import I18n from 'i18n-js';
2+
import { Trans } from '@lingui/macro';
33

44
const Menu = () => (
5-
<a href={'#/upgradednodes'}>{I18n.t('Upgraded Nodes')}</a>
5+
<a href={'#/upgradednodes'}><Trans>Upgraded Nodes</Trans></a>
66
);
77

88
export default Menu;

‎plugins/lime-plugin-upgraded-nodes/src/upgradedNodesPage.js‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { ExpandableNode } from "plugins/lime-plugin-network-nodes/src/components
88
import { useNetworkNodes } from "plugins/lime-plugin-network-nodes/src/networkNodesQueries";
99
import { useNewVersion } from "plugins/lime-plugin-firmware/src/firmwareQueries";
1010
import Help from "components/help";
11-
import I18n from 'i18n-js';
11+
import { Trans } from '@lingui/macro';
1212

1313
function groupBy(xs, key) {
1414
return xs.reduce(function (rv, x) {
@@ -26,12 +26,12 @@ function groupBy(xs, key) {
2626
const PageHelp = () => (
2727
<div>
2828
<p>
29-
<h5>{I18n.t("Upgraded Nodes")}</h5>
30-
{I18n.t("These are the nodes running the last version of the Firmware")}
29+
<h5><Trans>Upgraded Nodes</Trans></h5>
30+
<Trans>These are the nodes running the last version of the Firmware</Trans>
3131
</p>
3232
<p>
33-
<h5>{I18n.t("Not Upgraded Nodes")}</h5>
34-
{I18n.t("These are the nodes that need to be upgraded to the last version of the Firmware")}
33+
<h5><Trans>Not Upgraded Nodes</Trans></h5>
34+
<Trans>These are the nodes that need to be upgraded to the last version of the Firmware</Trans>
3535
</p>
3636
</div>
3737
);
@@ -40,8 +40,8 @@ const PageTabs = ({ nodes, ...props }) => {
4040
const nUpgraded = nodes.filter(n => n.group === "upgraded").length;
4141
const nNotUpgraded = nodes.filter(n => n.group === "not_upgraded").length;
4242
const tabs = [
43-
{ key: 'upgraded', repr: I18n.t('Upgraded (%{howMany})', { howMany: nUpgraded }) },
44-
{ key: 'not_upgraded', repr: I18n.t('Not Upgraded (%{howMany})', { howMany: nNotUpgraded }) },
43+
{ key: 'upgraded', repr: <Trans>Upgraded ({nUpgraded})</Trans>},
44+
{ key: 'not_upgraded', repr: <Trans>Not Upgraded ({nNotUpgraded})</Trans>},
4545
];
4646
return <Tabs tabs={tabs} {...props} />
4747
}

0 commit comments

Comments
 (0)