feat(networks): add form to create a new network

TODO.md

@@ -1,4 +1,7 @@
 # TODO List
 
 - update app icon
+- live theme changer (https://medium.com/@mzohaib.qc/ant-design-dynamic-runtime-theme-1f9a1a030ba0)
+- POC for styled-components (https://github.com/styled-components/styled-components)
 - better UI design (https://material.io/design/color/dark-theme.html)
+- add network designer (https://github.com/projectstorm/react-diagrams)

src/components/network/NewNetwork.tsx

@@ -1,17 +1,54 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, FormEvent } from 'react';
 import { info } from 'electron-log';
+import { Form, Input, Button, notification } from 'antd';
+import { FormComponentProps } from 'antd/lib/form';
+import { useStoreActions } from 'store';
 
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface Props {}
+interface Props extends FormComponentProps {
+  name: string;
+}
 
-const NewNetwork: React.SFC<Props> = () => {
-  useEffect(() => info('Rendering Home component'), []);
+const NewNetwork: React.SFC<Props> = ({ form }) => {
+  useEffect(() => info('Rendering NewNetwork component'), []);
+
+  const { addNetwork } = useStoreActions(s => s.network);
+
+  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    form.validateFields((err, values) => {
+      if (!err) {
+        console.log('Received values of form: ', values);
+        addNetwork(values.name).then(() => {
+          notification.success({
+            message: (
+              <>
+                Created <b>{values.name}</b> network successfuly
+              </>
+            ),
+            top: 48,
+          });
+        });
+      }
+    });
+  };
 
   return (
     <div>
       <h1>Create a new Lightning Network</h1>
+      <Form onSubmit={handleSubmit}>
+        <Form.Item label="Network Name">
+          {form.getFieldDecorator('name', {
+            rules: [{ required: true }],
+          })(<Input placeholder="My Lightning Simnet" />)}
+        </Form.Item>
+        <Form.Item>
+          <Button type="primary" htmlType="submit">
+            Create
+          </Button>
+        </Form.Item>
+      </Form>
     </div>
   );
 };
 
-export default NewNetwork;
+export default Form.create<Props>()(NewNetwork);

src/react-app-env.d.ts

@@ -8,3 +8,23 @@ interface LocalConfig {
     [key: string]: string;
   };
 }
+
+interface BitcoinNode {
+  id: number;
+  name: string;
+}
+
+interface LightningNode {
+  id: number;
+  name: string;
+  bitcoinNodeId: number;
+}
+
+interface Network {
+  id: number;
+  name: string;
+  nodes: {
+    bitcoin: BitcoinNode[];
+    lightning: LightningNode[];
+  };
+}

src/store/models/index.ts

@@ -3,16 +3,19 @@ import { connectRouter, RouterState } from 'connected-react-router';
 import { History } from 'history';
 import { reducer, Reducer } from 'easy-peasy';
 import counterModel, { CounterModel } from './counter';
+import networkModel, { NetworkModel } from './network';
 
 export interface RootModel {
   router: Reducer<RouterState, AnyAction>;
   counter: CounterModel;
+  network: NetworkModel;
 }
 
 export const createModel = (history: History<any>): RootModel => {
   const rootModel: RootModel = {
     router: reducer(connectRouter(history) as any),
     counter: counterModel,
+    network: networkModel,
   };
   return rootModel;
 };

src/store/models/network.ts

@@ -0,0 +1,51 @@
+import { Action, action, Thunk, thunk } from 'easy-peasy';
+import { info } from 'electron-log';
+import { push } from 'connected-react-router';
+
+export interface NetworkModel {
+  networks: Network[];
+  add: Action<NetworkModel, string>;
+  addNetwork: Thunk<NetworkModel, string>;
+}
+
+const basicNetwork: Network = {
+  id: 0,
+  name: '',
+  nodes: {
+    bitcoin: [
+      {
+        id: 0,
+        name: 'bitcoind1',
+      },
+    ],
+    lightning: [
+      {
+        id: 0,
+        name: 'alice',
+        bitcoinNodeId: 0,
+      },
+      {
+        id: 0,
+        name: 'bob',
+        bitcoinNodeId: 0,
+      },
+    ],
+  },
+};
+
+const networkModel: NetworkModel = {
+  // state properties
+  networks: [],
+  // reducer actions (mutations allowed thx to immer)
+  add: action((state, name) => {
+    const network = { ...basicNetwork, name };
+    state.networks.push(network);
+    info(`Added new network '${network.name}' to redux sate`);
+  }),
+  addNetwork: thunk(async (actions, payload, { dispatch }) => {
+    actions.add(payload);
+    dispatch(push('/'));
+  }),
+};
+
+export default networkModel;