feat(i18n): update translations for home and network components

src/components/common/NavMenu.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
 import { Dropdown, Icon, Menu } from 'antd';
+import { usePrefixedTranslation } from 'hooks';
 import { useStoreActions } from 'store';
 import { NETWORK } from 'components/routing';
 
@@ -16,17 +16,17 @@ const Styled = {
 };
 
 const NavMenu: React.FC = () => {
-  const { t } = useTranslation();
+  const { l } = usePrefixedTranslation('cmps.common.NavMenu');
   const { navigateTo } = useStoreActions(s => s.app);
   const menu = (
     <Menu theme="dark">
       <Menu.Item onClick={() => navigateTo(NETWORK)}>
         <Icon type="plus-circle" />
-        {t('cmps.nav-menu.create-network', 'Create Network')}
+        {l('createNetwork')}
       </Menu.Item>
       <Menu.Item>
         <Icon type="setting" />
-        {t('cmps.nav-menu.settings', 'Settings')}
+        {l('settings')}
       </Menu.Item>
     </Menu>
   );

src/components/home/GetStarted.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 import styled from '@emotion/styled';
 import { Button } from 'antd';
+import { usePrefixedTranslation } from 'hooks';
 import { NETWORK } from 'components/routing';
 import logobw from 'resources/logo_bw.png';
 
@@ -27,14 +27,14 @@ const Styled = {
 };
 
 const GetStarted: React.FC = () => {
-  const { t } = useTranslation();
+  const { l } = usePrefixedTranslation('cmps.home.GetStarted');
 
   return (
     <Styled.GetStarted>
-      <Styled.Header>{t('cmps.get-started.title', "Let's get started!")}</Styled.Header>
+      <Styled.Header>{l('title')}</Styled.Header>
       <Link to={NETWORK}>
         <Button type="primary" size="large">
-          {t('cmps.get-started.create-btn', 'Create a Lightning Network')}
+          {l('createBtn')}
         </Button>
       </Link>
     </Styled.GetStarted>

src/components/home/Home.tsx

@@ -1,8 +1,8 @@
 import React, { useEffect } from 'react';
 import { useAsync } from 'react-async-hook';
-import { useTranslation } from 'react-i18next';
 import { info } from 'electron-log';
-import { Alert, Col, Row } from 'antd';
+import { Col, Row } from 'antd';
+import { usePrefixedTranslation } from 'hooks';
 import { useStoreActions, useStoreState } from 'store';
 import { Loader } from 'components/common';
 import { GetStarted, NetworkCard } from './';
@@ -10,10 +10,21 @@ import { GetStarted, NetworkCard } from './';
 const Home: React.FC = () => {
   useEffect(() => info('Rendering Home component'), []);
 
-  const { t } = useTranslation();
+  const { l } = usePrefixedTranslation('cmps.home.Home');
+  const { notify } = useStoreActions(s => s.app);
   const { networks, loaded } = useStoreState(s => s.network);
   const { load } = useStoreActions(s => s.network);
-  const loadAsync = useAsync(() => load(), [], { executeOnMount: !loaded });
+  const loadAsync = useAsync(
+    async () => {
+      try {
+        await load();
+      } catch (error) {
+        notify({ message: l('loadError'), error });
+      }
+    },
+    [],
+    { executeOnMount: !loaded },
+  );
 
   if (loadAsync.loading) {
     return <Loader />;
@@ -21,18 +32,6 @@ const Home: React.FC = () => {
 
   return (
     <>
-      {loadAsync.error && (
-        <Alert
-          type="error"
-          showIcon
-          closable
-          message={t(
-            'cmps.home.load-error-msg',
-            'Unable to load previously save networks',
-          )}
-          description={loadAsync.error.message}
-        />
-      )}
       {networks.length === 0 && <GetStarted />}
       <Row gutter={16}>
         {networks.map(n => (

src/components/home/NetworkCard.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import styled from '@emotion/styled';
 import { Card, Col, Icon, Row, Statistic } from 'antd';
+import { usePrefixedTranslation } from 'hooks';
 import { useStoreActions } from 'store';
 import { Network } from 'types';
 import { StatusBadge } from 'components/common';
@@ -13,6 +14,7 @@ const Styled = {
 };
 
 const NetworkCard: React.FC<{ network: Network }> = ({ network }) => {
+  const { l } = usePrefixedTranslation('cmps.home.NetworkCard');
   const { navigateTo } = useStoreActions(s => s.app);
 
   return (
@@ -25,14 +27,14 @@ const NetworkCard: React.FC<{ network: Network }> = ({ network }) => {
       <Row>
         <Col span={12}>
           <Statistic
-            title="Lightning Nodes"
+            title={l('lightningNodes')}
             value={network.nodes.lightning.length}
             suffix={<Icon type="thunderbolt" />}
           />
         </Col>
         <Col span={12}>
           <Statistic
-            title="Bitcoin Nodes"
+            title={l('bitcoinNodes')}
             value={network.nodes.bitcoin.length}
             suffix={<Icon type="link" />}
           />

src/components/layouts/AppLayout.spec.tsx

@@ -12,7 +12,7 @@ describe('AppLayout component', () => {
       return (
         <AppLayout>
           <p>Hello World!</p>
-          <p>{t('cmps.get-started.title')}</p>
+          <p>{t('cmps.home.GetStarted.title')}</p>
         </AppLayout>
       );
     };

src/components/network/NetworkActions.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import { useTranslation } from 'react-i18next';
 import { Button, Dropdown, Icon, Menu } from 'antd';
 import { ButtonType } from 'antd/lib/button';
+import { usePrefixedTranslation } from 'hooks';
 import { Status } from 'types';
 
 interface Props {
@@ -44,7 +44,7 @@ const config: {
 };
 
 const NetworkActions: React.FC<Props> = ({ status, onClick }) => {
-  const { t } = useTranslation();
+  const { l } = usePrefixedTranslation('cmps.network.NetworkActions');
   const loading = status === Status.Starting || status === Status.Stopping;
   const { label, type, icon } = config[status];
 
@@ -52,11 +52,11 @@ const NetworkActions: React.FC<Props> = ({ status, onClick }) => {
     <Menu theme="dark">
       <Menu.Item key="1">
         <Icon type="form" />
-        {t('cmps.network-actions.menu-rename', 'Rename')}
+        {l('menuRename')}
       </Menu.Item>
       <Menu.Item key="2">
         <Icon type="close" />
-        {t('cmps.network-actions.menu-delete', 'Delete')}
+        {l('menuDelete')}
       </Menu.Item>
     </Menu>
   );
@@ -64,7 +64,7 @@ const NetworkActions: React.FC<Props> = ({ status, onClick }) => {
   return (
     <>
       <Button key="start" type={type} icon={icon} loading={loading} onClick={onClick}>
-        {t(`cmps.network-actions.primary-btn-${label.toLocaleLowerCase()}`, label)}
+        {l(`primaryBtn${label}`)}
       </Button>
       <Dropdown key="options" overlay={menu}>
         <Button icon="more" />

src/components/network/NewNetwork.spec.tsx

@@ -27,7 +27,7 @@ describe('NewNetwork component', () => {
   it('should display an error if empty name is submitted', () => {
     const { getByText, createBtn } = renderComponent();
     fireEvent.click(createBtn);
-    expect(getByText('name is required')).toBeInTheDocument();
+    expect(getByText('required')).toBeInTheDocument();
   });
 
   describe('with valid submission', () => {

src/components/network/NewNetwork.tsx

@@ -1,8 +1,8 @@
 import React, { FormEvent, useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
 import { info } from 'electron-log';
 import { Button, Card, Col, Form, Input, InputNumber, Row } from 'antd';
 import { FormComponentProps } from 'antd/lib/form';
+import { usePrefixedTranslation } from 'hooks';
 import { useStoreActions } from 'store';
 
 interface FormProps {
@@ -14,7 +14,7 @@ interface FormProps {
 const NewNetwork: React.SFC<FormComponentProps> = ({ form }) => {
   useEffect(() => info('Rendering NewNetwork component'), []);
 
-  const { t } = useTranslation();
+  const { l } = usePrefixedTranslation('cmps.network.NewNetwork');
   const { addNetwork } = useStoreActions(s => s.network);
 
   const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
@@ -27,35 +27,26 @@ const NewNetwork: React.SFC<FormComponentProps> = ({ form }) => {
   };
 
   return (
-    <Card title={t('cmps.new-network.title', 'Create a new Lightning Network')}>
+    <Card title={l('title')}>
       <Form onSubmit={handleSubmit} colon={false}>
-        <Form.Item label={t('cmps.new-network.name-label', 'Network Name')}>
+        <Form.Item label={l('nameLabel')}>
           {form.getFieldDecorator('name', {
-            rules: [{ required: true, message: 'name is required' }],
-          })(
-            <Input
-              placeholder={t('cmps.new-network.name-phldr', 'My Lightning Simnet')}
-            />,
-          )}
+            rules: [{ required: true, message: l('cmps.forms.required') }],
+          })(<Input placeholder={l('namePhldr')} />)}
         </Form.Item>
         <Row gutter={16}>
           <Col span={12}>
-            <Form.Item
-              label={t('cmps.new-network.lnd-nodes-label', 'How many LND nodes?')}
-            >
+            <Form.Item label={l('lndNodesLabel')}>
               {form.getFieldDecorator('lndNodes', {
-                rules: [{ required: true, message: 'required' }],
+                rules: [{ required: true, message: l('cmps.forms.required') }],
                 initialValue: 2,
               })(<InputNumber min={1} max={10} />)}
             </Form.Item>
           </Col>
           <Col span={12}>
             <Form.Item
-              label={t(
-                'cmps.new-network.bitcoind-nodes-label',
-                'How many bitcoind nodes?',
-              )}
-              help={t('cmps.new-network.bitcoind-nodes-soon', 'Coming Soon') + '...'}
+              label={l('bitcoindNodesLabel')}
+              help={l('bitcoindNodesSoon') + '...'}
             >
               {form.getFieldDecorator('bitcoindNodes', {
                 rules: [{ required: true, message: 'required' }],
@@ -66,7 +57,7 @@ const NewNetwork: React.SFC<FormComponentProps> = ({ form }) => {
         </Row>
         <Form.Item>
           <Button type="primary" htmlType="submit">
-            {t('cmps.new-network.btn-create', 'Create')}
+            {l('btnCreate')}
           </Button>
         </Form.Item>
       </Form>

src/i18n/locales/en-US.json

@@ -5,28 +5,10 @@
   "enums.status.Stopped": "Stopped",
   "enums.status.Error": "Error",
   "cmps.forms.required": "required",
-  "cmps.nav-menu.create-network": "Create Network",
-  "cmps.nav-menu.settings": "Settings",
-  "cmps.home.load-error-msg": "Unable to load previously save networks",
-  "cmps.get-started.title": "Let's get started!",
-  "cmps.get-started.create-btn": "Create a Lightning Network",
-  "cmps.new-network.title": "Create a new Lightning Network",
-  "cmps.new-network.name-label": "Network Name",
-  "cmps.new-network.name-phldr": "My Lightning Simnet",
-  "cmps.new-network.lnd-nodes-label": "How many LND nodes?",
-  "cmps.new-network.bitcoind-nodes-label": "How many bitcoind nodes?",
-  "cmps.new-network.bitcoind-nodes-soon": "Coming Soon",
-  "cmps.new-network.btn-create": "Create",
-  "cmps.new-network.success-msg": "Created network",
-  "cmps.network-actions.menu-rename": "Rename",
-  "cmps.network-actions.menu-delete": "Delete",
-  "cmps.network-actions.primary-btn-starting": "Starting",
-  "cmps.network-actions.primary-btn-stop": "Stop",
-  "cmps.network-actions.primary-btn-stopping": "Stopping",
-  "cmps.network-actions.primary-btn-start": "Start",
-  "cmps.network-actions.primary-btn-restart": "Restart",
   "cmps.common.form.LightningNodeSelect.balance": "Balance",
   "cmps.common.CopyIcon.message": "Copied {{label}} to clipboard",
+  "cmps.common.NavMenu.createNetwork": "Create Network",
+  "cmps.common.NavMenu.settings": "Settings",
   "cmps.designer.lnd.OpenChannelModal.title": "Open New Channel",
   "cmps.designer.lnd.OpenChannelModal.source": "Source",
   "cmps.designer.lnd.OpenChannelModal.dest": "Destination",
@@ -112,5 +94,24 @@
   "cmps.designer.lnd.LndDetails.connect": "Connect",
   "cmps.designer.lnd.LndDetails.actions": "Actions",
   "cmps.designer.lnd.LndDetails.waitingNotice": "Waiting for LND to come online",
-  "cmps.designer.lnd.LndDetails.connectError": "Unable to connect to node"
+  "cmps.designer.lnd.LndDetails.connectError": "Unable to connect to node",
+  "cmps.home.GetStarted.title": "Let's get started!",
+  "cmps.home.GetStarted.createBtn": "Create a Lightning Network",
+  "cmps.home.Home.loadError": "Unable to load previously save networks",
+  "cmps.home.NetworkCard.lightningNodes": "Lightning Nodes",
+  "cmps.home.NetworkCard.bitcoinNodes": "Bitcoin Nodes",
+  "cmps.network.NetworkActions.menuRename": "Rename",
+  "cmps.network.NetworkActions.menuDelete": "Delete",
+  "cmps.network.NetworkActions.primaryBtnStarting": "Starting",
+  "cmps.network.NetworkActions.primaryBtnStop": "Stop",
+  "cmps.network.NetworkActions.primaryBtnStopping": "Stopping",
+  "cmps.network.NetworkActions.primaryBtnStart": "Start",
+  "cmps.network.NetworkActions.primaryBtnRestart": "Restart",
+  "cmps.network.NewNetwork.title": "Create a new Lightning Network",
+  "cmps.network.NewNetwork.nameLabel": "Network Name",
+  "cmps.network.NewNetwork.namePhldr": "My Lightning Simnet",
+  "cmps.network.NewNetwork.lndNodesLabel": "How many LND nodes?",
+  "cmps.network.NewNetwork.bitcoindNodesLabel": "How many bitcoind nodes?",
+  "cmps.network.NewNetwork.bitcoindNodesSoon": "Coming Soon",
+  "cmps.network.NewNetwork.btnCreate": "Create"
 }

src/i18n/locales/es.json

@@ -5,28 +5,10 @@
   "enums.status.Stopped": "Detenido",
   "enums.status.Error": "Error",
   "cmps.forms.required": "necesario",
-  "cmps.nav-menu.create-network": "Crear red",
-  "cmps.nav-menu.settings": "Configuraciones",
-  "cmps.home.load-error-msg": "No se pueden cargar las redes guardadas previamente",
-  "cmps.get-started.title": "Empecemos",
-  "cmps.get-started.create-btn": "Crea tu primera red",
-  "cmps.new-network.title": "Crear una nueva red Lightning",
-  "cmps.new-network.name-label": "Nombre de red",
-  "cmps.new-network.name-phldr": "Mi Lightning Simnet",
-  "cmps.new-network.lnd-nodes-label": "¿Cuántos nodos de LND?",
-  "cmps.new-network.bitcoind-nodes-label": "¿Cuántos nodos de bitcoind?",
-  "cmps.new-network.bitcoind-nodes-soon": "Próximamente",
-  "cmps.new-network.btn-create": "Crear",
-  "cmps.new-network.success-msg": "Red creada",
-  "cmps.network-actions.menu-rename": "Rebautizar",
-  "cmps.network-actions.menu-delete": "Borrar",
-  "cmps.network-actions.primary-btn-starting": "Comenzando",
-  "cmps.network-actions.primary-btn-stop": "Detener",
-  "cmps.network-actions.primary-btn-stopping": "Parada",
-  "cmps.network-actions.primary-btn-start": "Comienzo",
-  "cmps.network-actions.primary-btn-restart": "Reiniciar",
   "cmps.common.form.LightningNodeSelect.balance": "Equilibrar",
   "cmps.common.CopyIcon.message": "Copiado {{label}} al portapapeles",
+  "cmps.common.NavMenu.createNetwork": "Crear red",
+  "cmps.common.NavMenu.settings": "Configuraciones",
   "cmps.designer.lnd.OpenChannelModal.title": "Abrir nuevo canal",
   "cmps.designer.lnd.OpenChannelModal.source": "Fuente",
   "cmps.designer.lnd.OpenChannelModal.dest": "Destino",
@@ -112,5 +94,24 @@
   "cmps.designer.lnd.LndDetails.connect": "Conectar",
   "cmps.designer.lnd.LndDetails.actions": "Comportamiento",
   "cmps.designer.lnd.LndDetails.waitingNotice": "Esperando a que LND se conecte",
-  "cmps.designer.lnd.LndDetails.connectError": "No se puede conectar al nodo"
+  "cmps.designer.lnd.LndDetails.connectError": "No se puede conectar al nodo",
+  "cmps.home.GetStarted.title": "Empecemos",
+  "cmps.home.GetStarted.createBtn": "Crea tu primera red",
+  "cmps.home.Home.loadError": "No se pueden cargar las redes guardadas previamente",
+  "cmps.home.NetworkCard.lightningNodes": "Nodos Relámpagos",
+  "cmps.home.NetworkCard.bitcoinNodes": "Nodos de Bitcoin",
+  "cmps.network.NetworkActions.menuRename": "Rebautizar",
+  "cmps.network.NetworkActions.menuDelete": "Borrar",
+  "cmps.network.NetworkActions.primaryBtnStarting": "Comenzando",
+  "cmps.network.NetworkActions.primaryBtnStop": "Detener",
+  "cmps.network.NetworkActions.primaryBtnStopping": "Parada",
+  "cmps.network.NetworkActions.primaryBtnStart": "Comienzo",
+  "cmps.network.NetworkActions.primaryBtnRestart": "Reiniciar",
+  "cmps.network.NewNetwork.title": "Crear una nueva red Lightning",
+  "cmps.network.NewNetwork.nameLabel": "Nombre de red",
+  "cmps.network.NewNetwork.namePhldr": "Mi Lightning Simnet",
+  "cmps.network.NewNetwork.lndNodesLabel": "¿Cuántos nodos de LND?",
+  "cmps.network.NewNetwork.bitcoindNodesLabel": "¿Cuántos nodos de bitcoind?",
+  "cmps.network.NewNetwork.bitcoindNodesSoon": "Próximamente",
+  "cmps.network.NewNetwork.btnCreate": "Crear"
 }