fix(network): add error handling when creating a new network

jamaljsr · Aug 4, 2022 · 4cfa285 · 4cfa285
1 parent 1c649f6
commit 4cfa285
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 8 deletions.
diff --git a/src/components/network/NewNetwork.spec.tsx b/src/components/network/NewNetwork.spec.tsx
@@ -2,13 +2,16 @@ import React from 'react';
 import { fireEvent, waitFor } from '@testing-library/react';
 import os from 'os';
 import { CustomImage } from 'types';
-import { renderWithProviders, suppressConsoleErrors } from 'utils/tests';
+import { injections, renderWithProviders, suppressConsoleErrors } from 'utils/tests';
 import { HOME, NETWORK_VIEW } from 'components/routing';
 import NewNetwork from './NewNetwork';
 
 jest.mock('os');
 
 const mockOS = os as jest.Mocked<typeof os>;
+const mockDockerService = injections.dockerService as jest.Mocked<
+  typeof injections.dockerService
+>;
 
 describe('NewNetwork component', () => {
   const customImages: CustomImage[] = [
@@ -104,5 +107,14 @@ describe('NewNetwork component', () => {
         expect(injections.dockerService.saveComposeFile).toBeCalled();
       });
     });
+
+    it('should display an error if the submission fails', async () => {
+      mockDockerService.saveComposeFile.mockRejectedValue(new Error('asdf'));
+      const { createBtn, nameInput, findByText } = renderComponent();
+      fireEvent.change(nameInput, { target: { value: 'test' } });
+      fireEvent.click(createBtn);
+      expect(await findByText('Unable to create the new network')).toBeInTheDocument();
+      expect(await findByText('asdf')).toBeInTheDocument();
+    });
   });
 });
diff --git a/src/components/network/NewNetwork.tsx b/src/components/network/NewNetwork.tsx
@@ -1,4 +1,5 @@
 import React, { useEffect } from 'react';
+import { useAsyncCallback } from 'react-async-hook';
 import { info } from 'electron-log';
 import styled from '@emotion/styled';
 import {
@@ -41,15 +42,19 @@ const NewNetwork: React.SFC = () => {
 
   const { l } = usePrefixedTranslation('cmps.network.NewNetwork');
   const theme = useTheme();
-  const { navigateTo } = useStoreActions(s => s.app);
+  const { navigateTo, notify } = useStoreActions(s => s.app);
   const { addNetwork } = useStoreActions(s => s.network);
   const { settings } = useStoreState(s => s.app);
   const { custom: customNodes } = settings.nodeImages;
 
-  const handleSubmit = (values: any) => {
-    values.customNodes = values.customNodes || {};
-    addNetwork(values);
-  };
+  const createAsync = useAsyncCallback(async (values: any) => {
+    try {
+      values.customNodes = values.customNodes || {};
+      await addNetwork(values);
+    } catch (error: any) {
+      notify({ message: l('createError'), error });
+    }
+  });
 
   const initialCustomValues = customNodes.reduce((result, node) => {
     result[node.id] = 0;
@@ -74,7 +79,7 @@ const NewNetwork: React.SFC = () => {
             bitcoindNodes: 1,
             customNodes: initialCustomValues,
           }}
-          onFinish={handleSubmit}
+          onFinish={createAsync.execute}
         >
           <Form.Item
             name="name"
@@ -142,7 +147,7 @@ const NewNetwork: React.SFC = () => {
             </Col>
           </Row>
           <Form.Item>
-            <Button type="primary" htmlType="submit">
+            <Button type="primary" htmlType="submit" loading={createAsync.loading}>
               {l('btnCreate')}
             </Button>
           </Form.Item>

diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
@@ -288,6 +288,7 @@
   "cmps.network.NewNetwork.managedLabel": "How many Managed Nodes?",
   "cmps.network.NewNetwork.clightningWindows": "Not supported on Windows yet.",
   "cmps.network.NewNetwork.btnCreate": "Create Network",
+  "cmps.network.NewNetwork.createError": "Unable to create the new network",
   "cmps.nodeImages.CommandVariables.header": "Command Variable Substitutions",
   "cmps.nodeImages.CommandVariables.tableTitle": "Wrap the variables below in double braces to use them in the command",
   "cmps.nodeImages.CommandVariables.variable": "Variable",