Merge pull request #733 from Keith-CY/subscribe-networks-from-neuron-ui

use remote module instead of channels

packages/neuron-ui/src/components/Addresses/index.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useMemo } from 'react'
 import { RouteComponentProps } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
 import {
-  DetailsList,
+  ShimmeredDetailsList,
   TextField,
   IColumn,
   DetailsListLayoutMode,
@@ -11,19 +11,21 @@ import {
   getTheme,
 } from 'office-ui-fabric-react'
 
+import { contextMenu } from 'services/remote'
 import { StateWithDispatch } from 'states/stateProvider/reducer'
 
-import { appCalls } from 'services/UILayer'
-
 import { useLocalDescription } from 'utils/hooks'
 import { MIN_CELL_WIDTH, Routes } from 'utils/const'
 import { localNumberFormatter, shannonToCKBFormatter } from 'utils/formatters'
 
 const Addresses = ({
-  wallet: { id, addresses = [] },
+  app: {
+    loadings: { addressList: isLoading },
+  },
+  wallet: { addresses = [], id: walletID },
   settings: { showAddressBook = false },
-  dispatch,
   history,
+  dispatch,
 }: React.PropsWithoutRef<StateWithDispatch & RouteComponentProps>) => {
   const [t] = useTranslation()
   useEffect(() => {
@@ -34,7 +36,7 @@ const Addresses = ({
 
   const { localDescription, onDescriptionPress, onDescriptionFieldBlur, onDescriptionChange } = useLocalDescription(
     'address',
-    id,
+    walletID,
     useMemo(
       () =>
         addresses.map(({ address: key = '', description = '' }) => ({
@@ -97,15 +99,17 @@ const Addresses = ({
         maxWidth: 350,
         isResizable: true,
         isCollapsible: false,
-        onRender: (item?: State.Address, idx?: number) => {
-          return item && undefined !== idx ? (
+        onRender: (item?: State.Address) => {
+          return item ? (
             <TextField
               borderless
               title={item.description}
-              value={localDescription[idx] || ''}
-              onKeyPress={onDescriptionPress(idx)}
-              onBlur={onDescriptionFieldBlur(idx)}
-              onChange={onDescriptionChange(idx)}
+              value={
+                (localDescription.find(local => local.key === item.address) || { description: '' }).description || ''
+              }
+              onKeyPress={onDescriptionPress(item.address)}
+              onBlur={onDescriptionFieldBlur(item.address)}
+              onChange={onDescriptionChange(item.address)}
               styles={(props: ITextFieldStyleProps) => {
                 return {
                   root: {
@@ -160,27 +164,14 @@ const Addresses = ({
   )
 
   return (
-    <DetailsList
+    <ShimmeredDetailsList
+      enableShimmer={isLoading}
       checkboxVisibility={CheckboxVisibility.hidden}
       layoutMode={DetailsListLayoutMode.justified}
       columns={addressColumns.map(col => ({ ...col, name: t(col.name) }))}
       items={addresses}
       onItemContextMenu={item => {
-        appCalls.contextMenu({ type: 'addressList', id: item.identifier })
-      }}
-      styles={{
-        contentWrapper: {
-          selectors: {
-            '.ms-DetailsRow-cell': {
-              display: 'flex',
-              alignItems: 'center',
-            },
-            '.text-overflow': {
-              overflow: 'hidden',
-              textOverflow: 'ellipsis',
-            },
-          },
-        },
+        contextMenu({ type: 'addressList', id: item.identifier })
       }}
     />
   )

packages/neuron-ui/src/components/ErrorBoundary/index.tsx

@@ -1,12 +1,10 @@
 import React, { Component } from 'react'
-import { appCalls } from 'services/UILayer'
 import { Stack, Spinner } from 'office-ui-fabric-react'
+import { handleViewError } from 'services/remote'
 
 const handleError = (error: Error) => {
-  appCalls.handleViewError(error.toString())
-  setTimeout(() => {
-    window.location.reload()
-  }, 0)
+  handleViewError(error.toString())
+  window.location.reload()
   return { hasError: true }
 }
 

packages/neuron-ui/src/components/GeneralSetting/index.tsx

@@ -3,12 +3,12 @@ import { Stack, Toggle } from 'office-ui-fabric-react'
 import { useTranslation } from 'react-i18next'
 
 import { StateWithDispatch } from 'states/stateProvider/reducer'
-import actionCreators from 'states/stateProvider/actionCreators'
+import { toggleAddressBook } from 'states/stateProvider/actionCreators'
 
 const GeneralSetting = ({ settings: { showAddressBook }, dispatch }: React.PropsWithoutRef<StateWithDispatch>) => {
   const [t] = useTranslation()
   const onToggle = useCallback(() => {
-    dispatch(actionCreators.toggleAddressBook())
+    dispatch(toggleAddressBook())
   }, [dispatch])
   return (
     <Stack tokens={{ childrenGap: 15 }}>

packages/neuron-ui/src/components/History/hooks.ts

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react'
 import { AppActions } from 'states/stateProvider/reducer'
-import actionCreators from 'states/stateProvider/actionCreators'
+import { updateTransactionList } from 'states/stateProvider/actionCreators/transactions'
 import { queryParsers } from 'utils/parser'
 
 const backToTop = () => {
@@ -31,8 +31,7 @@ export const useSearch = (search: string = '', walletID: string = '', dispatch:
       type: AppActions.CleanTransactions,
       payload: null,
     })
-
-    dispatch(actionCreators.getTransactions({ ...params, keywords: params.keywords, walletID }))
+    updateTransactionList({ ...params, keywords: params.keywords, walletID })(dispatch)
   }, [search, walletID, dispatch])
   return { keywords, onKeywordsChange, setKeywords }
 }

packages/neuron-ui/src/components/History/index.tsx

@@ -34,6 +34,9 @@ registerIcons({
 })
 
 const History = ({
+  app: {
+    loadings: { transactionList: isLoading },
+  },
   wallet: { id },
   chain: {
     transactions: { pageNo = 1, pageSize = 15, totalCount = 0, items = [] },
@@ -64,7 +67,7 @@ const History = ({
           iconProps={{ iconName: 'Search', styles: { root: { height: '18px' } } }}
         />
       </Stack>
-      <TransactionList walletID={id} items={items} dispatch={dispatch} />
+      <TransactionList isLoading={isLoading} walletID={id} items={items} dispatch={dispatch} />
       <Pagination
         selectedPageIndex={pageNo - 1}
         pageCount={Math.ceil(totalCount / pageSize)}

packages/neuron-ui/src/components/NetworkEditor/hooks.ts

@@ -1,7 +1,9 @@
 import { useState, useEffect, useMemo, useCallback } from 'react'
 
 import { AppActions, StateDispatch } from 'states/stateProvider/reducer'
-import actionCreators from 'states/stateProvider/actionCreators'
+import { createNetwork, updateNetwork } from 'states/stateProvider/actionCreators'
+
+import { Message, MAX_NETWORK_NAME_LENGTH } from 'utils/const'
 
 import i18n from 'utils/i18n'
 
@@ -119,11 +121,86 @@ export const useHandleSubmit = (
   name: string = '',
   remote: string = '',
   networks: State.Network[] = [],
+  history: any,
   dispatch: StateDispatch
 ) =>
-  useCallback(() => {
-    dispatch(actionCreators.createOrUpdateNetwork({ id, name, remote }, networks))
-  }, [id, name, remote, networks, dispatch])
+  useCallback(async () => {
+    const warning = {
+      type: 'warning',
+      timestamp: Date.now(),
+      content: '',
+    }
+    if (!name) {
+      return dispatch({
+        type: AppActions.AddNotification,
+        payload: {
+          ...warning,
+          content: i18n.t(Message.NameRequired),
+        },
+      })
+    }
+    if (name.length > MAX_NETWORK_NAME_LENGTH) {
+      return dispatch({
+        type: AppActions.AddNotification,
+        payload: {
+          ...warning,
+          content: i18n.t(Message.LengthOfNameShouldBeLessThanOrEqualTo, {
+            length: MAX_NETWORK_NAME_LENGTH,
+          }),
+        },
+      })
+    }
+    if (!remote) {
+      return dispatch({
+        type: AppActions.AddNotification,
+        payload: {
+          ...warning,
+          content: i18n.t(Message.URLRequired),
+        },
+      })
+    }
+    if (!remote.startsWith('http')) {
+      return dispatch({
+        type: AppActions.AddNotification,
+        payload: {
+          ...warning,
+          content: i18n.t(Message.ProtocolRequired),
+        },
+      })
+    }
+    // verification, for now, only name is unique
+    if (id === 'new') {
+      if (networks.some(network => network.name === name)) {
+        return dispatch({
+          type: AppActions.AddNotification,
+          payload: {
+            ...warning,
+            content: i18n.t(Message.NetworkNameUsed),
+          },
+        })
+      }
+      return createNetwork({
+        name,
+        remote,
+      })(dispatch, history)
+    }
+    if (networks.some(network => network.name === name && network.id !== id)) {
+      return dispatch({
+        type: AppActions.AddNotification,
+        payload: {
+          ...warning,
+          content: i18n.t(Message.NetworkNameUsed),
+        },
+      })
+    }
+    return updateNetwork({
+      networkID: id!,
+      options: {
+        name,
+        remote,
+      },
+    })(dispatch, history)
+  }, [id, name, remote, networks, history, dispatch])
 
 export default {
   useInitialize,

packages/neuron-ui/src/components/NetworkEditor/index.tsx

@@ -24,7 +24,7 @@ const NetworkEditor = ({
   const cachedNetworks = useRef(networks)
   const cachedNetwork = cachedNetworks.current.find(network => network.id === id)
   const { invalidParams, notModified } = useIsInputsValid(editor, cachedNetwork)
-  const handleSubmit = useHandleSubmit(id, editor.name.value, editor.remote.value, networks, dispatch)
+  const handleSubmit = useHandleSubmit(id, editor.name.value, editor.remote.value, networks, history, dispatch)
 
   return (
     <Stack tokens={{ childrenGap: 15 }}>

packages/neuron-ui/src/components/NetworkSetting/index.tsx

@@ -4,32 +4,27 @@ import { useTranslation } from 'react-i18next'
 import { Stack, PrimaryButton, ChoiceGroup, IChoiceGroupOption } from 'office-ui-fabric-react'
 
 import { StateWithDispatch } from 'states/stateProvider/reducer'
-import actionCreators from 'states/stateProvider/actionCreators'
 import chainState from 'states/initStates/chain'
-import { appCalls } from 'services/UILayer'
+import { setCurrentNetowrk, contextMenu } from 'services/remote'
 
 import { Routes } from 'utils/const'
 
 const onContextMenu = (id: string = '') => () => {
-  appCalls.contextMenu({ type: 'networkList', id })
+  contextMenu({ type: 'networkList', id })
 }
 
 const NetworkSetting = ({
   chain = chainState,
   settings: { networks = [] },
-  dispatch,
   history,
 }: React.PropsWithoutRef<StateWithDispatch & RouteComponentProps>) => {
   const [t] = useTranslation()
 
-  const onChoiceChange = useCallback(
-    (_e, option?: IChoiceGroupOption) => {
-      if (option) {
-        dispatch(actionCreators.setNetwork(option.key))
-      }
-    },
-    [dispatch]
-  )
+  const onChoiceChange = useCallback((_e, option?: IChoiceGroupOption) => {
+    if (option) {
+      setCurrentNetowrk(option.key)
+    }
+  }, [])
 
   const goToCreateNetwork = useCallback(() => {
     history.push(`${Routes.NetworkEditor}/new`)

packages/neuron-ui/src/components/Overview/index.tsx

@@ -22,7 +22,7 @@ import {
 } from 'office-ui-fabric-react'
 
 import { StateWithDispatch } from 'states/stateProvider/reducer'
-import actionCreators from 'states/stateProvider/actionCreators'
+import { updateTransactionList } from 'states/stateProvider/actionCreators'
 
 import { showErrorMessage } from 'services/remote'
 
@@ -100,7 +100,12 @@ const Overview = ({
   const minerInfoRef = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
-    dispatch(actionCreators.getTransactions({ pageNo: 1, pageSize: PAGE_SIZE, keywords: '', walletID: id }))
+    updateTransactionList({
+      pageNo: 1,
+      pageSize: PAGE_SIZE,
+      keywords: '',
+      walletID: id,
+    })(dispatch)
   }, [id, dispatch])
 
   const onTransactionRowRender = useCallback((props?: IDetailsRowProps) => {