feat(neuron-ui): optimize updating descriptions

1. reduce diff between origin descriptions and local description
2. add updating state in the description field

Author: Keith-CY

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

@@ -20,7 +20,7 @@ import { localNumberFormatter, shannonToCKBFormatter } from 'utils/formatters'
 
 const Addresses = ({
   app: {
-    loadings: { addressList: isLoading },
+    loadings: { addressList: isLoading, updateDescription: isUpdatingDescription },
   },
   wallet: { addresses = [], id: walletID },
   settings: { showAddressBook = false },
@@ -34,19 +34,13 @@ const Addresses = ({
     }
   }, [showAddressBook, history])
 
-  const { localDescription, onDescriptionPress, onDescriptionFieldBlur, onDescriptionChange } = useLocalDescription(
-    'address',
-    walletID,
-    useMemo(
-      () =>
-        addresses.map(({ address: key = '', description = '' }) => ({
-          key,
-          description,
-        })),
-      [addresses]
-    ),
-    dispatch
-  )
+  const {
+    localDescription,
+    onDescriptionPress,
+    onDescriptionFieldBlur,
+    onDescriptionChange,
+    onDescriptionFocus,
+  } = useLocalDescription('address', walletID, dispatch)
 
   const theme = getTheme()
   const { semanticColors } = theme
@@ -104,12 +98,15 @@ const Addresses = ({
             <TextField
               borderless
               title={item.description}
-              value={
-                (localDescription.find(local => local.key === item.address) || { description: '' }).description || ''
-              }
-              onKeyPress={onDescriptionPress(item.address)}
-              onBlur={onDescriptionFieldBlur(item.address)}
+              value={localDescription.key === item.address ? localDescription.description : item.description || ''}
+              onBlur={onDescriptionFieldBlur(item.address, item.description)}
+              onFocus={onDescriptionFocus}
+              onKeyPress={onDescriptionPress(item.address, item.description)}
               onChange={onDescriptionChange(item.address)}
+              disabled={localDescription.key === item.address && isUpdatingDescription}
+              iconProps={{
+                iconName: localDescription.key === item.address && isUpdatingDescription ? 'Updating' : '',
+              }}
               styles={(props: ITextFieldStyleProps) => {
                 return {
                   root: {
@@ -160,7 +157,16 @@ const Addresses = ({
         },
       },
     ],
-    [onDescriptionChange, localDescription, onDescriptionFieldBlur, onDescriptionPress, t, semanticColors]
+    [
+      onDescriptionChange,
+      localDescription,
+      onDescriptionFieldBlur,
+      onDescriptionPress,
+      onDescriptionFocus,
+      isUpdatingDescription,
+      t,
+      semanticColors,
+    ]
   )
 
   return (

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

@@ -13,7 +13,7 @@ import { useSearch } from './hooks'
 
 const History = ({
   app: {
-    loadings: { transactionList: isLoading },
+    loadings: { transactionList: isLoading, updateDescription: isUpdatingDescription },
   },
   wallet: { id },
   chain: {
@@ -45,7 +45,13 @@ const History = ({
           iconProps={{ iconName: 'Search', styles: { root: { height: '18px' } } }}
         />
       </Stack>
-      <TransactionList isLoading={isLoading} walletID={id} items={items} dispatch={dispatch} />
+      <TransactionList
+        isLoading={isLoading}
+        isUpdatingDescription={isUpdatingDescription}
+        walletID={id}
+        items={items}
+        dispatch={dispatch}
+      />
       <Pagination
         selectedPageIndex={pageNo - 1}
         pageCount={Math.ceil(totalCount / pageSize)}

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

@@ -46,30 +46,26 @@ const onRenderHeader = ({ group }: any) => {
 
 const TransactionList = ({
   isLoading = false,
+  isUpdatingDescription = false,
   items = [],
   walletID,
   dispatch,
 }: {
-  isLoading: boolean
+  isLoading?: boolean
+  isUpdatingDescription?: boolean
   walletID: string
   items: State.Transaction[]
   dispatch: StateDispatch
 }) => {
   const [t] = useTranslation()
 
-  const { localDescription, onDescriptionPress, onDescriptionFieldBlur, onDescriptionChange } = useLocalDescription(
-    'transaction',
-    walletID,
-    useMemo(
-      () =>
-        items.map(({ hash: key, description = '' }) => ({
-          key,
-          description,
-        })),
-      [items]
-    ),
-    dispatch
-  )
+  const {
+    localDescription,
+    onDescriptionPress,
+    onDescriptionFieldBlur,
+    onDescriptionChange,
+    onDescriptionFocus,
+  } = useLocalDescription('transaction', walletID, dispatch)
 
   const transactionColumns: IColumn[] = useMemo(
     (): IColumn[] =>
@@ -113,12 +109,15 @@ const TransactionList = ({
             return item ? (
               <TextField
                 title={item.description}
-                value={
-                  (localDescription.find(local => local.key === item.hash) || { description: '' }).description || ''
-                }
-                onKeyPress={onDescriptionPress(item.hash)}
-                onBlur={onDescriptionFieldBlur(item.hash)}
+                value={localDescription.key === item.hash ? localDescription.description : item.description || ''}
+                onFocus={onDescriptionFocus}
+                onBlur={onDescriptionFieldBlur(item.hash, item.description)}
+                onKeyPress={onDescriptionPress(item.hash, item.description)}
                 onChange={onDescriptionChange(item.hash)}
+                disabled={localDescription.key === item.hash && isUpdatingDescription}
+                iconProps={{
+                  iconName: localDescription.key === item.hash && isUpdatingDescription ? 'Updating' : '',
+                }}
                 borderless
                 styles={(props: ITextFieldStyleProps) => {
                   return {
@@ -152,7 +151,15 @@ const TransactionList = ({
       ].map(
         (col): IColumn => ({ fieldName: col.key, ariaLabel: col.name, isResizable: true, isCollapsable: false, ...col })
       ),
-    [localDescription, onDescriptionChange, onDescriptionFieldBlur, onDescriptionPress, t]
+    [
+      localDescription,
+      onDescriptionChange,
+      onDescriptionFieldBlur,
+      onDescriptionPress,
+      onDescriptionFocus,
+      isUpdatingDescription,
+      t,
+    ]
   )
 
   const { groups, txs } = useMemo(() => {

packages/neuron-ui/src/index.tsx

@@ -21,6 +21,7 @@ import {
   Scan as ScanIcon,
   Search as SearchIcon,
   SubtractCircle as RemoveIcon,
+  Update as UpdateIcon,
 } from 'grommet-icons'
 
 import 'styles/index.scss'
@@ -76,6 +77,7 @@ registerIcons({
     Leave: <LeaveIcon />,
     Connected: <ConnectedIcon size="small" color="green" />,
     Disconnected: <AlertIcon size="small" color="red" />,
+    Updating: <UpdateIcon size="16px" style={{ animation: 'rotate360 3s linear infinite' }} />,
   },
 })
 

packages/neuron-ui/src/states/initStates/app.ts

@@ -36,6 +36,7 @@ const appState: State.App = {
     sending: false,
     addressList: false,
     transactionList: false,
+    updateDescription: false,
   },
 }
 

packages/neuron-ui/src/states/stateProvider/actionCreators/transactions.ts

@@ -20,19 +20,31 @@ export const updateTransaction = (params: { walletID: string; hash: string }) =>
   })
 }
 export const updateTransactionList = (params: GetTransactionListParams) => (dispatch: StateDispatch) => {
+  getTransactionList(params).then(res => {
+    if (res.status) {
+      dispatch({
+        type: NeuronWalletActions.UpdateTransactionList,
+        payload: res.result,
+      })
+    } else {
+      addNotification({ type: 'alert', content: res.message.title })(dispatch)
+    }
+  })
+}
+
+export const updateTransactionDescription = (params: Controller.UpdateTransactionDescriptionParams) => (
+  dispatch: StateDispatch
+) => {
   dispatch({
     type: AppActions.UpdateLoadings,
     payload: {
-      transactionList: true,
+      updateDescription: true,
     },
   })
-  getTransactionList(params)
+  updateRemoteTransactionDescription(params)
     .then(res => {
       if (res.status) {
-        dispatch({
-          type: NeuronWalletActions.UpdateTransactionList,
-          payload: res.result,
-        })
+        dispatch({ type: AppActions.Ignore, payload: null })
       } else {
         addNotification({ type: 'alert', content: res.message.title })(dispatch)
       }
@@ -41,24 +53,12 @@ export const updateTransactionList = (params: GetTransactionListParams) => (disp
       dispatch({
         type: AppActions.UpdateLoadings,
         payload: {
-          transactionList: false,
+          updateDescription: false,
         },
       })
     })
 }
 
-export const updateTransactionDescription = (params: Controller.UpdateTransactionDescriptionParams) => (
-  dispatch: StateDispatch
-) => {
-  updateRemoteTransactionDescription(params).then(res => {
-    if (res.status) {
-      dispatch({ type: AppActions.Ignore, payload: null })
-    } else {
-      addNotification({ type: 'alert', content: res.message.title })(dispatch)
-    }
-  })
-}
-
 export default {
   updateTransaction,
   updateTransactionList,

packages/neuron-ui/src/states/stateProvider/actionCreators/wallets.ts

@@ -156,16 +156,31 @@ export const updateAddressList = (params: Controller.GetAddressesByWalletIDParam
 export const updateAddressDescription = (params: Controller.UpdateAddressDescriptionParams) => (
   dispatch: StateDispatch
 ) => {
-  updateRemoteAddressDescription(params).then(res => {
-    if (res.status) {
+  dispatch({
+    type: AppActions.UpdateLoadings,
+    payload: {
+      updateDescription: true,
+    },
+  })
+  updateRemoteAddressDescription(params)
+    .then(res => {
+      if (res.status) {
+        dispatch({
+          type: AppActions.Ignore,
+          payload: null,
+        })
+      } else {
+        addNotification({ type: 'alert', content: res.message.title })(dispatch)
+      }
+    })
+    .finally(() => {
       dispatch({
-        type: AppActions.Ignore,
-        payload: null,
+        type: AppActions.UpdateLoadings,
+        payload: {
+          updateDescription: false,
+        },
       })
-    } else {
-      addNotification({ type: 'alert', content: res.message.title })(dispatch)
-    }
-  })
+    })
 }
 
 export const deleteWallet = (params: Controller.DeleteWalletParams) => (dispatch: StateDispatch) => {

packages/neuron-ui/src/stories/TransactionList.stories.tsx

@@ -5,18 +5,21 @@ import transactions from './data/transactions'
 
 const stories = storiesOf('TransactionList', module)
 Object.entries(transactions).forEach(([title, list]) => {
-  stories.add(title, () => <TransactionList isLoading={false} walletID="1" items={list} dispatch={() => {}} />)
+  stories.add(title, () => (
+    <TransactionList isLoading={false} isUpdatingDescription={false} walletID="1" items={list} dispatch={() => {}} />
+  ))
 })
 
 stories.add('Wtih empty pending list', () => (
   <TransactionList
     isLoading={false}
+    isUpdatingDescription={false}
     walletID="1"
     items={transactions['Content List'].filter(item => item.status !== 'pending')}
     dispatch={() => {}}
   />
 ))
 
 stories.add('Shimmered List', () => {
-  return <TransactionList isLoading={false} walletID="1" items={[]} dispatch={() => {}} />
+  return <TransactionList isLoading={false} isUpdatingDescription={false} walletID="1" items={[]} dispatch={() => {}} />
 })

packages/neuron-ui/src/styles/index.scss

@@ -65,3 +65,13 @@ navbar {
     text-overflow: ellipsis
   }
 }
+
+@keyframes rotate360 {
+  from {
+    transform: rotate(0)
+  }
+
+  to {
+    transform: rotate(360deg)
+  }
+}

packages/neuron-ui/src/types/App/index.d.ts

@@ -79,6 +79,7 @@ declare namespace State {
       sending: boolean
       addressList: boolean
       transactionList: boolean
+      updateDescription: boolean
     }
   }