refactor(networknodes): adapt to lingui i18n

libremesh · Jan 27, 2022 · fd94bad · fd94bad
1 parent c5b5146
commit fd94bad
Show file tree

Hide file tree

Showing 10 changed files with 53 additions and 43 deletions.
diff --git a/package.json b/package.json
@@ -85,7 +85,6 @@
     "leaflet.gridlayer.googlemutant": "0.13.4",
     "preact": "10.5.7",
     "preact-cli": "3.0.0",
-    "preact-i18nline": "2.0.0",
     "preact-router": "3.2.1",
     "react-hook-form": "6.9.2",
     "react-query": "2.23.1",

diff --git a/plugins/lime-plugin-delete-nodes/src/deleteNodesMenu.js b/plugins/lime-plugin-delete-nodes/src/deleteNodesMenu.js
@@ -1,8 +1,8 @@
 import { h } from 'preact';
-import I18n from 'i18n-js';
+import { Trans } from '@lingui/macro'; 
 
 const Menu = () => (
-	<a href={'#/deletenodes'}>{I18n.t('Delete Nodes')}</a>
+	<a href={'#/deletenodes'}><Trans>Delete Nodes</Trans></a>
 );
 
 export default Menu;
diff --git a/plugins/lime-plugin-delete-nodes/src/deleteNodesPage.js b/plugins/lime-plugin-delete-nodes/src/deleteNodesPage.js
@@ -6,7 +6,7 @@ import { useEffect, useState } from 'preact/hooks';
 import { useSet } from 'react-use';
 import { useMarkNodesAsGone, useNetworkNodes } from 'plugins/lime-plugin-network-nodes/src/networkNodesQueries'
 import style from './deleteNodesStyle.less';
-import I18n from 'i18n-js';
+import { Trans } from '@lingui/macro'; 
 
 export const DeleteNodesPage_ = ({ nodes, onDelete, isSubmitting, isSuccess }) => {
     const [selectedNodes, { toggle, has, reset }] = useSet(new Set([]));
@@ -26,13 +26,17 @@ export const DeleteNodesPage_ = ({ nodes, onDelete, isSubmitting, isSuccess }) =
     return (
         <div class="d-flex flex-column flex-grow-1 overflow-auto ">
             <div class="d-flex flex-column flex-grow-1 overflow-auto container container-padded">
-                <h4>{I18n.t("Delete Nodes")}</h4>
+                <h4><Trans>Delete Nodes</Trans></h4>
                 {unreachableNodes.length > 0 &&
-                    <p>{I18n.t("Select the nodes which no longer belong to the network and "
-                        + "delete them from the list of unreachable nodes")}</p>
+                    <p>
+                        <Trans>
+                            Select the nodes which no longer belong to the network and
+                            delete them from the list of unreachable nodes
+                        </Trans>
+                    </p>
                 }
                 {unreachableNodes.length === 0 &&
-                    <p>{I18n.t("There are no left unreachable nodes")}</p>
+                    <p><Trans>There are no left unreachable nodes</Trans></p>
                 }
                 <List>
                     {unreachableNodes.map(node =>
@@ -48,15 +52,16 @@ export const DeleteNodesPage_ = ({ nodes, onDelete, isSubmitting, isSuccess }) =
             </div>
             <div class={style.bottomAction}>
                 <span>
-                    {[selectedNodes.size,
-                    I18n.t('selected-nodes', { count: selectedNodes.size })
-                    ].join(' ')}
+                    <Plural value={Number(selectedNodes.size)}
+                        one="# node selected"
+                        other="# nodes selected"
+                    />
                 </span>
                 {!isSubmitting &&
                     <button class="ml-auto"
                         onClick={() => onDelete([...selectedNodes])}
                         disabled={selectedNodes.size < 1}>
-                        {I18n.t("Delete")}
+                        <Trans>Delete</Trans>
                     </button>
                 }
                 {isSubmitting &&
@@ -66,7 +71,7 @@ export const DeleteNodesPage_ = ({ nodes, onDelete, isSubmitting, isSuccess }) =
                 }
             </div>
             {showSuccess &&
-                <Toast type={"success"} text={I18n.t("Successfully deleted")} />
+                <Toast type={"success"} text={<Trans>Successfully deleted</Trans>} />
             }
         </div>
     )

diff --git a/plugins/lime-plugin-network-nodes/src/components/expandableNode/index.js b/plugins/lime-plugin-network-nodes/src/components/expandableNode/index.js
@@ -1,5 +1,5 @@
 import { h } from 'preact';
-import I18n from 'i18n-js';
+import { Trans } from '@lingui/macro'; 
 import { ListItem } from 'components/list';
 import style from './style.less';
 
@@ -15,8 +15,8 @@ export const ExpandableNode = ({ node, showMore, onClick }) => {
                     <div class={style.moreData} onClick={e => e.stopPropagation()}>
                         {ipv4 && <div>IPv4: <a href={`http://${ipv4}`}>{ipv4}</a></div>}
                         {ipv6 && <div>IPv6: <a href={`http://[${ipv6}]`}>{ipv6}</a></div>}
-                        {board && <div>{I18n.t('Device')}: {board}</div>}
-                        {fw_version && <div>{I18n.t('Firmware')}: {fw_version}</div>}
+                        {board && <div><Trans>Device</Trans>: {board}</div>}
+                        {fw_version && <div><Trans>Firmware</Trans>: {fw_version}</div>}
                     </div>
                 }
             </div>

diff --git a/plugins/lime-plugin-network-nodes/src/networkNodesMenu.js b/plugins/lime-plugin-network-nodes/src/networkNodesMenu.js
@@ -1,8 +1,8 @@
 import { h } from 'preact';
-import I18n from 'i18n-js';
+import { Trans } from '@lingui/macro'; 
 
 const Menu = () => (
-	<a href={'#/networknodes'}>{I18n.t('Network Nodes')}</a>
+	<a href={'#/networknodes'}><Trans>Network Nodes</Trans></a>
 );
 
 export default Menu;
diff --git a/plugins/lime-plugin-network-nodes/src/networkNodesPage.js b/plugins/lime-plugin-network-nodes/src/networkNodesPage.js
@@ -5,15 +5,15 @@ import { Loading } from 'components/loading';
 import { ExpandableNode } from './components/expandableNode';
 import style from './networkNodesStyle.less';
 import { useState } from 'preact/hooks';
-import I18n from 'i18n-js';
+import { Trans } from '@lingui/macro'; 
 
 export const _NetworkNodes = ({ nodes, isLoading, unfoldedNode, onUnfold }) => {
     if (isLoading) {
         return <div class="container container-center"><Loading /></div>
     }
     return (
         <div class="d-flex flex-column flex-grow-1 overflow-auto">
-            <div class={style.title}>{I18n.t("Network Nodes")}</div>
+            <div class={style.title}><Trans>Network Nodes</Trans></div>
             <List>
                 {nodes.map((node) =>
                     <ExpandableNode key={node.hostname} 

diff --git a/plugins/lime-plugin-reachable-nodes/src/reachableNodesMenu.js b/plugins/lime-plugin-reachable-nodes/src/reachableNodesMenu.js
@@ -1,7 +1,7 @@
 import { h } from 'preact';
 
-import I18n from 'i18n-js';
+import { Trans } from '@lingui/macro'; 
 
 export const ReachableNodesMenu = () => (
-	<a href={'#/reachablenodes'}>{I18n.t('Reachable Nodes')}</a>
-);
+	<a href={'#/reachablenodes'}><Trans>Reachable Nodes</Trans></a>
+);
diff --git a/plugins/lime-plugin-reachable-nodes/src/reachableNodesPage.js b/plugins/lime-plugin-reachable-nodes/src/reachableNodesPage.js
@@ -6,22 +6,28 @@ import { List } from "components/list";
 import { ExpandableNode } from "plugins/lime-plugin-network-nodes/src/components/expandableNode";
 import { useNetworkNodes } from "plugins/lime-plugin-network-nodes/src/networkNodesQueries";
 import Help from "components/help";
-import I18n from 'i18n-js';
+import { Trans } from '@lingui/macro'; 
 
 const PageHelp = () => (
     <div>
         <p>
-            <h5>{I18n.t("Reachable Nodes")}</h5>
-            {I18n.t("These are the nodes that can be reached from your node, " +
-                "i.e. there is a working path from your node to each of them.")}
+            <h5><Trans>Reachable Nodes</Trans></h5>
+            <Trans>
+                These are the nodes that can be reached from your node,
+                i.e. there is a working path from your node to each of them.
+            </Trans>
             <br/>
-            {I18n.t("This information is synced periodically " +
-                "and can be outdated by some minutes")}
+            <Trans>
+                This information is synced periodically
+                and can be outdated by some minutes.
+            </Trans>
         </p>
         <p>
-            <h5>{I18n.t("Unreachable Nodes")}</h5>
-            {I18n.t("These are the nodes that can't be reached from your node, " +
-                "it is possible that they are not turned on or a link to reach them is down.")}
+            <h5><Trans>Unreachable Nodes</Trans></h5>
+            <Trans>
+                These are the nodes that can't be reached from your node,
+                it is possible that they are not turned on or a link to reach them is down.
+            </Trans>
         </p>
     </div>
 );
@@ -30,8 +36,8 @@ const PageTabs = ({ nodes, ...props }) => {
     const nReachable = Object.values(nodes).filter(n => n.status === "recently_reachable").length;
     const nUnreachable = Object.values(nodes).filter(n => n.status === "unreachable").length;
     const tabs = [
-        { key: 'recently_reachable', repr: I18n.t('Reachable (%{howMany})', { howMany: nReachable }) },
-        { key: 'unreachable', repr: I18n.t('Unreachable (%{howMany})', { howMany: nUnreachable }) },
+        { key: 'recently_reachable', repr: <Trans>Reachable ({nReachable}) </Trans>},
+        { key: 'unreachable', repr: <Trans>Unreachable ({nUnreachable}) </Trans>},
     ];
     return <Tabs tabs={tabs} {...props} />
 }

diff --git a/plugins/lime-plugin-upgraded-nodes/src/upgradedNodesMenu.js b/plugins/lime-plugin-upgraded-nodes/src/upgradedNodesMenu.js
@@ -1,8 +1,8 @@
 import { h } from 'preact';
-import I18n from 'i18n-js';
+import { Trans } from '@lingui/macro'; 
 
 const Menu = () => (
-	<a href={'#/upgradednodes'}>{I18n.t('Upgraded Nodes')}</a>
+	<a href={'#/upgradednodes'}><Trans>Upgraded Nodes</Trans></a>
 );
 
 export default Menu;
diff --git a/plugins/lime-plugin-upgraded-nodes/src/upgradedNodesPage.js b/plugins/lime-plugin-upgraded-nodes/src/upgradedNodesPage.js
@@ -8,7 +8,7 @@ import { ExpandableNode } from "plugins/lime-plugin-network-nodes/src/components
 import { useNetworkNodes } from "plugins/lime-plugin-network-nodes/src/networkNodesQueries";
 import { useNewVersion } from "plugins/lime-plugin-firmware/src/firmwareQueries";
 import Help from "components/help";
-import I18n from 'i18n-js';
+import { Trans } from '@lingui/macro'; 
 
 function groupBy(xs, key) {
     return xs.reduce(function (rv, x) {
@@ -26,12 +26,12 @@ function groupBy(xs, key) {
 const PageHelp = () => (
     <div>
         <p>
-            <h5>{I18n.t("Upgraded Nodes")}</h5>
-            {I18n.t("These are the nodes running the last version of the Firmware")}
+            <h5><Trans>Upgraded Nodes</Trans></h5>
+            <Trans>These are the nodes running the last version of the Firmware</Trans>
         </p>
         <p>
-            <h5>{I18n.t("Not Upgraded Nodes")}</h5>
-            {I18n.t("These are the nodes that need to be upgraded to the last version of the Firmware")}
+            <h5><Trans>Not Upgraded Nodes</Trans></h5>
+            <Trans>These are the nodes that need to be upgraded to the last version of the Firmware</Trans>
         </p>
     </div>
 );
@@ -40,8 +40,8 @@ const PageTabs = ({ nodes, ...props }) => {
     const nUpgraded = nodes.filter(n => n.group === "upgraded").length;
     const nNotUpgraded = nodes.filter(n => n.group === "not_upgraded").length;
     const tabs = [
-        { key: 'upgraded', repr: I18n.t('Upgraded (%{howMany})', { howMany: nUpgraded }) },
-        { key: 'not_upgraded', repr: I18n.t('Not Upgraded (%{howMany})', { howMany: nNotUpgraded }) },
+        { key: 'upgraded', repr: <Trans>Upgraded ({nUpgraded})</Trans>},
+        { key: 'not_upgraded', repr: <Trans>Not Upgraded ({nNotUpgraded})</Trans>},
     ];
     return <Tabs tabs={tabs} {...props} />
 }