feat(neuron-ui): add clear cache button on the general settings

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

@@ -1,28 +1,48 @@
 import React, { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Stack, PrimaryButton, Spinner } from 'office-ui-fabric-react'
+import { StateWithDispatch, AppActions } from 'states/stateProvider/reducer'
+import { clearCellCache } from 'services/remote'
 
-const GeneralSetting = () => {
+const GeneralSetting = ({ dispatch }: React.PropsWithoutRef<StateWithDispatch>) => {
   const [t] = useTranslation()
   const [clearing, setClearing] = useState(false)
 
   const clearCache = useCallback(() => {
     // TODO: real clear action
     setClearing(true)
     setTimeout(() => {
-      setClearing(false)
-    }, 2000)
-  }, [])
+      clearCellCache()
+        .catch(err => {
+          dispatch({
+            type: AppActions.AddNotification,
+            payload: {
+              type: 'alert',
+              timestamp: +new Date(),
+              content: err.message,
+            },
+          })
+        })
+        .finally(() => {
+          setClearing(false)
+        })
+    }, 1000)
+  }, [dispatch])
 
   return (
     <Stack tokens={{ childrenGap: 15 }} horizontal horizontalAlign="start">
       <PrimaryButton
-        text={t('settings.general.clear-cache')}
         onClick={clearCache}
         disabled={clearing}
         ariaDescription="Create new network configuration"
-      />
-      {clearing ? <Spinner /> : null}
+        styles={{
+          root: {
+            minWidth: 150,
+          },
+        }}
+      >
+        {clearing ? <Spinner /> : t('settings.general.clear-cache')}
+      </PrimaryButton>
     </Stack>
   )
 }

packages/neuron-ui/src/services/remote/app.ts

@@ -5,8 +5,11 @@ export const getNeuronWalletState = apiMethodWrapper<void>(api => () => api.load
 export const handleViewError = apiMethodWrapper<string>(api => errorMessage => api.handleViewError(errorMessage))
 export const contextMenu = apiMethodWrapper<{ type: string; id: string }>(api => params => api.contextMenu(params))
 
+export const clearCellCache = apiMethodWrapper<void>(api => () => api.clearCellCache())
+
 export default {
   getNeuronWalletState,
   handleViewError,
   contextMenu,
+  clearCellCache,
 }

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

@@ -2,9 +2,23 @@ import React from 'react'
 import { storiesOf } from '@storybook/react'
 import { withKnobs } from '@storybook/addon-knobs'
 import GeneralSetting from 'components/GeneralSetting'
+import initStates from 'states/initStates'
+
+const states: { [title: string]: boolean } = {
+  'Clear cell cache on': true,
+  'Clear cell cache off': false,
+}
 
 const stories = storiesOf('GeneralSettings', module)
 
+Object.entries(states).forEach(([title]) => {
+  const props = { ...initStates, settings: { ...initStates.settings }, dispatch: () => {} }
+  stories.add(title, () => <GeneralSetting {...props} />)
+})
+
 stories.addDecorator(withKnobs).add('With knobs', () => {
-  return <GeneralSetting />
+  const props = {
+    ...initStates,
+  }
+  return <GeneralSetting {...props} dispatch={() => {}} />
 })

packages/neuron-wallet/src/controllers/api.ts

@@ -297,4 +297,10 @@ export default class ApiController {
   ) {
     return DaoController.getDaoCells(params)
   }
+
+  // settings
+  @MapApiResponse
+  public static async clearCellCache () {
+    return Promise.resolve()
+  }
 }