From 85d64fb0fba8824f7b16622b155bb89ed1e528f2 Mon Sep 17 00:00:00 2001
From: Luke Sugiura <junichi.sugiura@dappface.com>
Date: Sat, 23 Nov 2019 12:45:45 +0100
Subject: [PATCH] Refactor settings handlers with generic high-order function
 (#1926)

* refactor settings handlers with generic high-order function

* upgrade @polkadot/ui-settings
---
 packages/app-settings/src/General.tsx  | 23 ++++++++++-------------
 packages/react-components/package.json |  2 +-
 yarn.lock                              |  9 +++++++++
 3 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/packages/app-settings/src/General.tsx b/packages/app-settings/src/General.tsx
index c3e73fc662..7d4e6a1fde 100644
--- a/packages/app-settings/src/General.tsx
+++ b/packages/app-settings/src/General.tsx
@@ -8,7 +8,7 @@ import { Option } from './types';
 import React, { useEffect, useState } from 'react';
 import { isLedgerCapable } from '@polkadot/react-api';
 import { Button, Dropdown } from '@polkadot/react-components';
-import uiSettings from '@polkadot/ui-settings';
+import uiSettings, { SettingsStruct } from '@polkadot/ui-settings';
 
 import translate from './translate';
 import { createIdenticon, createOption, save, saveAndReload } from './util';
@@ -40,12 +40,9 @@ function General ({ className, isModalContent, onClose, t }: Props): React.React
     );
   }, [settings]);
 
-  const _onChangeApiUrl = (apiUrl: string): void => setSettings({ ...settings, apiUrl });
-  const _onChangeIcon = (icon: string): void => setSettings({ ...settings, icon });
-  const _onChangeLedgerConn = (ledgerConn: string): void => setSettings({ ...settings, ledgerConn });
-  const _onChangePrefix = (prefix: number): void => setSettings({ ...settings, prefix });
-  const _onChangeUiMode = (uiMode: string): void => setSettings({ ...settings, uiMode });
-  const _onChangeI18nLang = (i18nLang: string): void => setSettings({ ...settings, i18nLang });
+  const _handleChange = (key: keyof SettingsStruct) => <T extends string | number>(value: T): void => {
+    setSettings({ ...settings, [key]: value });
+  };
   const _saveAndReload = (): void => saveAndReload(settings);
   const _save = (): void => {
     save(settings);
@@ -56,7 +53,7 @@ function General ({ className, isModalContent, onClose, t }: Props): React.React
 
   return (
     <div className={className}>
-      <SelectUrl onChange={_onChangeApiUrl} />
+      <SelectUrl onChange={_handleChange('apiUrl')} />
       {!isModalContent && (
         <>
           <div className='ui--row'>
@@ -64,7 +61,7 @@ function General ({ className, isModalContent, onClose, t }: Props): React.React
               defaultValue={prefix}
               help={t('Override the default ss58 prefix for address generation')}
               label={t('address prefix')}
-              onChange={_onChangePrefix}
+              onChange={_handleChange('prefix')}
               options={prefixOptions}
             />
           </div>
@@ -73,7 +70,7 @@ function General ({ className, isModalContent, onClose, t }: Props): React.React
               defaultValue={icon}
               help={t('Override the default identity icon display with a specific theme')}
               label={t('default icon theme')}
-              onChange={_onChangeIcon}
+              onChange={_handleChange('icon')}
               options={iconOptions}
             />
           </div>
@@ -82,7 +79,7 @@ function General ({ className, isModalContent, onClose, t }: Props): React.React
               defaultValue={uiMode}
               help={t('Adjust the mode from basic (with a limited number of beginner-user-friendly apps) to full (with all basic & advanced apps available)')}
               label={t('interface operation mode')}
-              onChange={_onChangeUiMode}
+              onChange={_handleChange('uiMode')}
               options={uiSettings.availableUIModes}
             />
           </div>
@@ -92,7 +89,7 @@ function General ({ className, isModalContent, onClose, t }: Props): React.React
                 defaultValue={ledgerConn}
                 help={t('Manage your connection to Ledger S')}
                 label={t('manage hardware connections')}
-                onChange={_onChangeLedgerConn}
+                onChange={_handleChange('ledgerConn')}
                 options={ledgerConnOptions}
               />
             </div>
@@ -101,7 +98,7 @@ function General ({ className, isModalContent, onClose, t }: Props): React.React
             <Dropdown
               defaultValue={i18nLang}
               label={t('default interface language')}
-              onChange={_onChangeI18nLang}
+              onChange={_handleChange('i18nLang')}
               options={uiSettings.availableLanguages}
             />
           </div>
diff --git a/packages/react-components/package.json b/packages/react-components/package.json
index af92f49d10..c645e1ee95 100644
--- a/packages/react-components/package.json
+++ b/packages/react-components/package.json
@@ -16,7 +16,7 @@
     "@polkadot/react-identicon": "^0.47.0-beta.7",
     "@polkadot/react-query": "^0.37.0-beta.112",
     "@polkadot/ui-keyring": "^0.47.0-beta.7",
-    "@polkadot/ui-settings": "^0.47.0-beta.7",
+    "@polkadot/ui-settings": "0.47.0-beta.9",
     "@types/chart.js": "^2.8.10",
     "@types/i18next": "^13.0.0",
     "@types/react-copy-to-clipboard": "^4.3.0",
diff --git a/yarn.lock b/yarn.lock
index 23ff757611..5d3b14d856 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2280,6 +2280,15 @@
   optionalDependencies:
     "@ledgerhq/hw-transport-node-hid" "^4.73.7"
 
+"@polkadot/ui-settings@0.47.0-beta.9":
+  version "0.47.0-beta.9"
+  resolved "https://registry.yarnpkg.com/@polkadot/ui-settings/-/ui-settings-0.47.0-beta.9.tgz#59fd7f0a831ef932f5e877a27065a00da0e69ac7"
+  integrity sha512-57RK1oS3A23oHnHmMQLIo10pBKCOYINFsiv9fECuER+L4elFF/2/KuLD7uZJy0nOoN2Nk8OO/MiPVKxRD8yw+w==
+  dependencies:
+    "@babel/runtime" "^7.7.2"
+    "@types/store" "^2.0.2"
+    store "^2.0.12"
+
 "@polkadot/ui-settings@^0.47.0-beta.7":
   version "0.47.0-beta.7"
   resolved "https://registry.yarnpkg.com/@polkadot/ui-settings/-/ui-settings-0.47.0-beta.7.tgz#a7e341980827acdba1c5580c2a2f2b2f5c146ea1"