[Content] refactor and grab Max Purchase Price

ui/component/maxPurchasePrice/index.js

@@ -0,0 +1,13 @@
+import { connect } from 'react-redux';
+import { doSetDaemonSetting } from 'redux/actions/settings';
+import { selectDaemonSettings } from 'redux/selectors/settings';
+import MaxPurchasePrice from './view';
+
+const select = (state) => ({
+  daemonSettings: selectDaemonSettings(state),
+});
+const perform = (dispatch) => ({
+  setDaemonSetting: (key, value) => dispatch(doSetDaemonSetting(key, value)),
+});
+
+export default connect(select, perform)(MaxPurchasePrice);

ui/component/maxPurchasePrice/view.jsx

@@ -0,0 +1,72 @@
+// @flow
+import React from 'react';
+import { FormField, FormFieldPrice } from 'component/common/form';
+
+type Price = {
+  currency: string,
+  amount: number,
+};
+
+type DaemonSettings = {
+  download_dir: string,
+  share_usage_data: boolean,
+  max_key_fee?: Price,
+  max_connections_per_download?: number,
+  save_files: boolean,
+  save_blobs: boolean,
+  ffmpeg_path: string,
+};
+
+type SetDaemonSettingArg = boolean | string | number | Price;
+
+type Props = {
+  daemonSettings: DaemonSettings,
+  setDaemonSetting: (string, ?SetDaemonSettingArg) => void,
+};
+
+export default function MaxPurchasePrice(props: Props) {
+  const { daemonSettings, setDaemonSetting } = props;
+
+  const defaultMaxKeyFee = { currency: 'USD', amount: 50 };
+  const disableMaxKeyFee = !(daemonSettings && daemonSettings.max_key_fee);
+
+  function onKeyFeeDisableChange(isDisabled: boolean) {
+    if (isDisabled) {
+      setDaemonSetting('max_key_fee');
+    }
+  }
+
+  function onKeyFeeChange(newValue: Price) {
+    setDaemonSetting('max_key_fee', newValue);
+  }
+
+  return (
+    <>
+      <FormField
+        type="radio"
+        name="no_max_purchase_no_limit"
+        checked={disableMaxKeyFee}
+        label={__('No Limit')}
+        onChange={() => onKeyFeeDisableChange(true)}
+      />
+      <FormField
+        type="radio"
+        name="max_purchase_limit"
+        checked={!disableMaxKeyFee}
+        onChange={() => {
+          onKeyFeeDisableChange(false);
+          onKeyFeeChange(defaultMaxKeyFee);
+        }}
+        label={__('Choose limit')}
+      />
+
+      <FormFieldPrice
+        name="max_key_fee"
+        min={0}
+        onChange={onKeyFeeChange}
+        price={daemonSettings.max_key_fee ? daemonSettings.max_key_fee : defaultMaxKeyFee}
+        disabled={disableMaxKeyFee}
+      />
+    </>
+  );
+}

ui/component/settingContent/view.jsx

@@ -15,6 +15,8 @@ const HELP_AUTOPLAY =
 const HELP_HIDE_REPOSTS = 'You will not see reposts by people you follow or receive email notifying about them.';
 const HELP_SHOW_MATURE =
   'Mature content may include nudity, intense sexuality, profanity, or other adult content. By displaying mature content, you are affirming you are of legal age to view mature content in your country or jurisdiction.  ';
+const HELP_MAX_PURCHASE_PRICE =
+  'This will prevent you from purchasing any content over a certain cost, as a safety measure.';
 
 type Props = {
   isAuthenticated: boolean,
@@ -108,6 +110,12 @@ export default function SettingContent(props: Props) {
               </SettingsRow>
             </>
           )}
+
+          {/* @if TARGET='app' */}
+          <SettingsRow title={__('Max purchase price')} subtitle={__(HELP_MAX_PURCHASE_PRICE)} useVerticalSeparator>
+            <MaxPurchasePrice />
+          </SettingsRow>
+          {/* @endif */}
         </>
       }
     />

ui/page/settingsAdvanced/index.js

@@ -11,7 +11,6 @@ import {
 } from 'redux/actions/settings';
 import {
   makeSelectClientSetting,
-  selectLanguage,
   selectDaemonSettings,
   selectFfmpegStatus,
   selectFindingFFmpeg,
@@ -30,7 +29,6 @@ const select = (state) => ({
   hideBalance: makeSelectClientSetting(SETTINGS.HIDE_BALANCE)(state),
   ffmpegStatus: selectFfmpegStatus(state),
   findingFFmpeg: selectFindingFFmpeg(state),
-  language: selectLanguage(state),
   syncEnabled: makeSelectClientSetting(SETTINGS.ENABLE_SYNC)(state),
 });
 

ui/page/settingsAdvanced/view.jsx

@@ -48,7 +48,6 @@ type Props = {
   ffmpegStatus: { available: boolean, which: string },
   findingFFmpeg: boolean,
   findFFmpeg: () => void,
-  language?: string,
   syncEnabled: boolean,
   enterSettings: () => void,
   exitSettings: () => void,
@@ -68,9 +67,7 @@ class SettingsAdvancedPage extends React.PureComponent<Props, State> {
       storedPassword: false,
     };
 
-    (this: any).onKeyFeeChange = this.onKeyFeeChange.bind(this);
     (this: any).onMaxConnectionsChange = this.onMaxConnectionsChange.bind(this);
-    (this: any).onKeyFeeDisableChange = this.onKeyFeeDisableChange.bind(this);
     (this: any).onInstantPurchaseMaxChange = this.onInstantPurchaseMaxChange.bind(this);
     (this: any).onThemeChange = this.onThemeChange.bind(this);
     (this: any).onAutomaticDarkModeChange = this.onAutomaticDarkModeChange.bind(this);
@@ -112,19 +109,11 @@ class SettingsAdvancedPage extends React.PureComponent<Props, State> {
     this.findFFmpeg();
   }
 
-  onKeyFeeChange(newValue: Price) {
-    this.setDaemonSetting('max_key_fee', newValue);
-  }
-
   onMaxConnectionsChange(event: SyntheticInputEvent<*>) {
     const { value } = event.target;
     this.setDaemonSetting('max_connections_per_download', value);
   }
 
-  onKeyFeeDisableChange(isDisabled: boolean) {
-    if (isDisabled) this.setDaemonSetting('max_key_fee');
-  }
-
   onThemeChange(event: SyntheticInputEvent<*>) {
     const { value } = event.target;
 
@@ -189,13 +178,10 @@ class SettingsAdvancedPage extends React.PureComponent<Props, State> {
       setClientSetting,
       hideBalance,
       findingFFmpeg,
-      language,
     } = this.props;
 
     const { storedPassword } = this.state;
     const noDaemonSettings = !daemonSettings || Object.keys(daemonSettings).length === 0;
-    const defaultMaxKeyFee = { currency: 'USD', amount: 50 };
-    const disableMaxKeyFee = !(daemonSettings && daemonSettings.max_key_fee);
     const connectionOptions = [1, 2, 4, 6, 10, 20];
     // @if TARGET='app'
     const { available: ffmpegAvailable, which: ffmpegPath } = ffmpegStatus;
@@ -249,47 +235,6 @@ class SettingsAdvancedPage extends React.PureComponent<Props, State> {
                 </React.Fragment>
               }
             />
-
-            <Card
-              title={__('Max purchase price')}
-              actions={
-                <React.Fragment>
-                  <FormField
-                    type="radio"
-                    name="no_max_purchase_no_limit"
-                    checked={disableMaxKeyFee}
-                    label={__('No Limit')}
-                    onChange={() => {
-                      this.onKeyFeeDisableChange(true);
-                    }}
-                  />
-                  <FormField
-                    type="radio"
-                    name="max_purchase_limit"
-                    checked={!disableMaxKeyFee}
-                    onChange={() => {
-                      this.onKeyFeeDisableChange(false);
-                      this.onKeyFeeChange(defaultMaxKeyFee);
-                    }}
-                    label={__('Choose limit')}
-                  />
-
-                  {!disableMaxKeyFee && (
-                    <FormFieldPrice
-                      language={language}
-                      name="max_key_fee"
-                      min={0}
-                      onChange={this.onKeyFeeChange}
-                      price={daemonSettings.max_key_fee ? daemonSettings.max_key_fee : defaultMaxKeyFee}
-                    />
-                  )}
-
-                  <p className="help">
-                    {__('This will prevent you from purchasing any content over a certain cost, as a safety measure.')}
-                  </p>
-                </React.Fragment>
-              }
-            />
             {/* @endif */}
 
             <Card