refactor: 過多的設定不再占據左側欄，而是盡可能集中在一個方框內

aqzhyi · Jun 19, 2020 · 2d01f89 · 2d01f89
1 parent 9d5dbea
commit 2d01f89
Show file tree

Hide file tree

Showing 4 changed files with 191 additions and 106 deletions.
diff --git a/src/actions/setMacroAmount.ts → src/actions/setMacroAmount.tsx b/src/actions/setMacroAmount.ts → src/actions/setMacroAmount.tsx
@@ -1,41 +1,45 @@
+import React from 'react'
 import { createAction, createAsyncThunk } from '@reduxjs/toolkit'
 import { RootState } from '@/store/_store'
 import { storage } from '@/storage'
 import toast from 'cogo-toast'
+import { i18n } from '@/i18n'
 
 export const setMacroAmount = createAsyncThunk<
   number[],
-  void,
+  number[] | undefined,
   {
     rejectValue: string
   }
 >('setMacroAmount', async (props, thunkAPI) => {
   const state = thunkAPI.getState() as RootState
 
-  const newValue = prompt(
-    `請輸入「數字」，以「,」分隔。例如 200,500,1000,2000,3000`,
-    state.settings.betterEtoroUIConfig.executionAmount.join(','),
-  )
+  const newValue = (props?.join(',') ||
+    prompt(
+      `請輸入「數字」，以「,」分隔。例如 200,500,1000,2000,3000`,
+      state.settings.betterEtoroUIConfig.executionAmount.join(','),
+    )) as string
 
   if (newValue) {
     const thunkValue = newValue.split(',').map(Number)
 
     storage.saveConfig({ executionAmount: thunkValue })
 
-    toast.success(`設定已變更，當前：${newValue}`, {
-      position: 'bottom-left',
-    })
+    toast.success(
+      i18n.設定已變更(() => <span>{thunkValue.join(',')}</span>),
+      { position: 'bottom-left' },
+    )
 
     return thunkValue
   }
 
   toast.info(
-    `設定未變更，當前：${state.settings.betterEtoroUIConfig.executionAmount.join(
-      ',',
-    )}`,
-    {
-      position: 'bottom-left',
-    },
+    i18n.設定未變更(() => (
+      <span>
+        {state.settings.betterEtoroUIConfig.executionAmount.join(',')}
+      </span>
+    )),
+    { position: 'bottom-left' },
   )
 
   return thunkAPI.rejectWithValue('📣 使用者取消 prompt 操作')

diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx
@@ -1,16 +1,18 @@
-import * as React from 'react'
+import { setExchangeSelected } from '@/actions/setExchangeSelected'
+import { setMacroAmount } from '@/actions/setMacroAmount'
+import { setMacroEnabled } from '@/actions/setMacroEnabled'
 import HelperContent from '@/components/HelperContent'
-import toast from 'cogo-toast'
-import { exchange, getMYR, getNTD } from '@/exchange'
-import { storage } from '@/storage'
 import { emitter, Events } from '@/emitter'
-import { useAppSelector } from '@/hooks/useAppSelector'
+import { exchange, getMYR, getNTD } from '@/exchange'
 import { useAppDispatch } from '@/hooks/useAppDispatch'
-import { setExchangeSelected } from '@/actions/setExchangeSelected'
-import { setMacroEnabled } from '@/actions/setMacroEnabled'
-import { useInterval } from 'react-use'
-import { setMacroAmount } from '@/actions/setMacroAmount'
+import { useAppSelector } from '@/hooks/useAppSelector'
 import { i18n } from '@/i18n'
+import { storage } from '@/storage'
+import { Dialog } from '@blueprintjs/core'
+import { ChoiceGroup, Stack, TextField, TextFieldBase } from '@fluentui/react'
+import toast from 'cogo-toast'
+import * as React from 'react'
+import { useInterval } from 'react-use'
 
 const READY_FLAG = 'etoro-better-ui-sidebar-is-ready'
 
@@ -20,6 +22,8 @@ const Sidebar: React.FunctionComponent = () => {
   const settings = useAppSelector(state => state.settings)
   const dispatch = useAppDispatch()
   const [ping, setPing] = React.useState(0)
+  const [settingDialogOpen, settingDialogOpenSet] = React.useState(false)
+  const macroAmountInputRef = React.createRef<TextFieldBase>()
 
   useInterval(() => {
     const start = new Date().getTime()
@@ -46,6 +50,17 @@ const Sidebar: React.FunctionComponent = () => {
         {i18n.腳本標題()}
       </div>
 
+      <a
+        {...attrsToAppend}
+        className='i-menu-link pointer'
+        onClick={() => {
+          settingDialogOpenSet(value => !value)
+        }}
+      >
+        <span {...attrsToAppend} className='i-menu-icon sprite settings'></span>
+        {i18n.設定()}
+      </a>
+
       <a
         {...attrsToAppend}
         className='i-menu-link pointer'
@@ -73,80 +88,124 @@ const Sidebar: React.FunctionComponent = () => {
         <span {...attrsToAppend} className={'i-menu-icon sprite help'}></span>
       </HelperContent.RiskSpecification>
 
-      <span
-        {...attrsToAppend}
-        onClick={async () => {
-          const loading = toast.loading('設定變更中...', {
-            position: 'bottom-left',
-          })
-
-          const youSelected: typeof exchange['selected'] =
-            settings.exchange.selected === 'NTD' ? 'MYR' : 'NTD'
-
-          if (youSelected === 'NTD') {
-            exchange.NTD = await getNTD()
-          }
-
-          if (youSelected === 'MYR') {
-            exchange.MYR = await getMYR()
-          }
-
-          dispatch(setExchangeSelected(youSelected))
-          storage.saveConfig({ selectedExchange: youSelected })
-          emitter.emit(Events.settingChange)
-          toast.success(
-            i18n.設定已變更(() => <span>{youSelected}</span>),
-            {
-              position: 'bottom-left',
-            },
-          )
-
-          loading.hide?.()
-        }}
-        className='i-menu-link pointer'
-      >
-        <span {...attrsToAppend} className='i-menu-icon sprite settings'></span>
-        {i18n.設定幣別(settings.exchange.selected)}
-      </span>
-
-      <span
-        {...attrsToAppend}
-        onClick={() => {
-          const yourEnabled = !settings.isMacroEnabled
-          dispatch(setMacroEnabled(yourEnabled))
-          storage.saveConfig({ executionMacroEnabled: yourEnabled })
-          emitter.emit(Events.settingChange)
-          toast.success(
-            i18n.設定已變更(() => <span>{JSON.stringify(yourEnabled)}</span>),
-            {
-              position: 'bottom-left',
-            },
-          )
-        }}
-        className='i-menu-link pointer'
-      >
-        <span {...attrsToAppend} className='i-menu-icon sprite settings'></span>
-        {i18n.下單巨集(settings.isMacroEnabled)}
-      </span>
-
-      <span
-        {...attrsToAppend}
-        className='i-menu-link'
-        onClick={() => {
-          dispatch(setMacroAmount())
-        }}
-      >
-        <span {...attrsToAppend} className='i-menu-icon sprite settings'></span>
-        {i18n.巨集金額設定()}
-      </span>
-
       <span {...attrsToAppend} className='i-menu-link'>
         <span
           {...attrsToAppend}
           className='i-menu-icon sprite clubs-ref'
         ></span>
         {i18n.大概延遲(ping)}
       </span>
+
+      <Dialog
+        title={i18n.腳本標題()}
+        canEscapeKeyClose={true}
+        canOutsideClickClose={false}
+        onClose={() => {
+          settingDialogOpenSet(value => !value)
+        }}
+        isOpen={settingDialogOpen}
+      >
+        <Stack tokens={{ padding: 16, childrenGap: 32 }}>
+          <Stack.Item>
+            <TextField
+              componentRef={macroAmountInputRef}
+              label={i18n.下單巨集金額設定()}
+              defaultValue={settings.betterEtoroUIConfig.executionAmount.join(
+                ',',
+              )}
+              onKeyDown={event => {
+                if (event.key.toLowerCase() === 'enter') {
+                  const value = macroAmountInputRef.current?.value || '200'
+                  dispatch(setMacroAmount(value.split(',').map(Number)))
+                }
+              }}
+            ></TextField>
+          </Stack.Item>
+
+          <Stack.Item>
+            <ChoiceGroup
+              label={i18n.下單巨集啟用狀態(settings.isMacroEnabled)}
+              defaultSelectedKey={settings.isMacroEnabled ? 'ON' : 'OFF'}
+              options={[
+                {
+                  key: 'ON',
+                  text: 'ON',
+                  iconProps: { iconName: 'ActivateOrders' },
+                },
+                {
+                  key: 'OFF',
+                  text: 'OFF',
+                  iconProps: { iconName: 'DeactivateOrders' },
+                },
+              ]}
+              onChange={(event, option) => {
+                const yourEnabled = option?.key === 'ON' ? true : false
+
+                dispatch(setMacroEnabled(yourEnabled))
+
+                storage.saveConfig({ executionMacroEnabled: yourEnabled })
+
+                emitter.emit(Events.settingChange)
+
+                toast.success(
+                  i18n.設定已變更(() => (
+                    <span>{JSON.stringify(yourEnabled)}</span>
+                  )),
+                  { position: 'bottom-left' },
+                )
+              }}
+            ></ChoiceGroup>
+          </Stack.Item>
+
+          <Stack.Item>
+            <ChoiceGroup
+              label={i18n.設定幣別(settings.exchange.selected)}
+              defaultSelectedKey={settings.exchange.selected}
+              options={[
+                {
+                  key: 'NTD',
+                  text: 'NTD',
+                  iconProps: { iconName: 'AllCurrency' },
+                },
+                {
+                  key: 'MYR',
+                  text: 'MYR',
+                  iconProps: { iconName: 'AllCurrency' },
+                },
+              ]}
+              onChange={async (event, option) => {
+                const loading = toast.loading(i18n.設定變更中(), {
+                  position: 'bottom-left',
+                })
+
+                const youSelected = (option?.key ||
+                  'NTD') as typeof exchange['selected']
+
+                if (youSelected === 'NTD') {
+                  exchange.NTD = await getNTD()
+                }
+
+                if (youSelected === 'MYR') {
+                  exchange.MYR = await getMYR()
+                }
+
+                dispatch(setExchangeSelected(youSelected))
+
+                storage.saveConfig({ selectedExchange: youSelected })
+
+                emitter.emit(Events.settingChange)
+
+                toast.success(
+                  i18n.設定已變更(() => <span>{youSelected}</span>),
+                  { position: 'bottom-left' },
+                )
+
+                loading.hide?.()
+              }}
+            />
+          </Stack.Item>
+        </Stack>
+      </Dialog>
     </span>
   )
 }

diff --git a/src/i18n.tsx b/src/i18n.tsx
@@ -30,8 +30,10 @@ const zh = {
     )
   },
   設定幣別: (selectedText: string) => `設定幣別（當前：${selectedText}）`,
-  下單巨集: enabled => `下單巨集（當前：${enabled ? '啟用' : '停用'}）`,
-  巨集金額設定: () => '巨集金額設定',
+  下單巨集啟用狀態: enabled =>
+    `下單巨集輔助功能（當前：${enabled ? '啟用' : '停用'}）`,
+  下單巨集金額設定: () =>
+    '下單巨集金額設定（請用逗號隔開數字）e.g. 100,200,300,500,1000',
   大概延遲: (msValue: number) => `大概延遲：${msValue}ms`,
   槓桿: () => '槓桿',
   金額: () => '金額',
@@ -47,6 +49,7 @@ const zh = {
   },
   投資組合: () => '投資組合',
   動作沒有執行: () => '動作沒有執行，因為發現可能的出錯',
+  設定變更中: () => '設定變更中...',
   設定已變更: (PostComponent: React.FC) => {
     return (
       <span>
@@ -55,6 +58,14 @@ const zh = {
       </span>
     )
   },
+  設定未變更: (PostComponent: React.FC) => {
+    return (
+      <span>
+        設定未變更：
+        <PostComponent />
+      </span>
+    )
+  },
 }
 
 const en: typeof zh = {
@@ -90,8 +101,10 @@ const en: typeof zh = {
     )
   },
   設定幣別: (selectedText: string) => `Currency（Now：${selectedText}）`,
-  下單巨集: enabled => `Macro（Now：${enabled ? 'enabled' : 'disabled'}）`,
-  巨集金額設定: () => 'Order Macro Setting',
+  下單巨集啟用狀態: enabled =>
+    `Macro（Now：${enabled ? 'enabled' : 'disabled'}）`,
+  下單巨集金額設定: () =>
+    'Order Macro Setting, each numbers have to split by comma. e.g. 100,200,300,500,1000',
   大概延遲: (msValue: number) => `Infer Delay：${msValue}ms`,
   槓桿: () => 'Lever',
   金額: () => 'Amount',
@@ -107,10 +120,19 @@ const en: typeof zh = {
   },
   投資組合: () => 'portfolio',
   動作沒有執行: () => 'No Action Execution, Seems Somethings broken.',
+  設定變更中: () => 'loading...',
   設定已變更: (PostComponent: React.FC) => {
     return (
       <span>
-        Setting Changed：
+        Has been changed：
+        <PostComponent />
+      </span>
+    )
+  },
+  設定未變更: (PostComponent: React.FC) => {
+    return (
+      <span>
+        nothing changes：
         <PostComponent />
       </span>
     )