From 0c0448abef23aa67ce15d29b4fb6bd6c92e2a0ff Mon Sep 17 00:00:00 2001
From: infinite-persistence <inf.persistence@gmail.com>
Date: Sun, 8 Aug 2021 11:13:04 +0800
Subject: [PATCH] [System] grab "Share usage and diagnostic data"

---
 ui/component/settingSystem/index.js | 11 +++++-
 ui/component/settingSystem/view.jsx | 41 +++++++++++++++++++++++
 ui/page/settings/index.js           |  7 +---
 ui/page/settings/view.jsx           | 52 -----------------------------
 4 files changed, 52 insertions(+), 59 deletions(-)

diff --git a/ui/component/settingSystem/index.js b/ui/component/settingSystem/index.js
index 712a8af41..1d7cacc02 100644
--- a/ui/component/settingSystem/index.js
+++ b/ui/component/settingSystem/index.js
@@ -1,7 +1,14 @@
 import { connect } from 'react-redux';
 import { doWalletStatus, selectWalletIsEncrypted } from 'lbry-redux';
-import { doClearCache, doNotifyDecryptWallet, doNotifyEncryptWallet, doNotifyForgetPassword } from 'redux/actions/app';
+import {
+  doClearCache,
+  doNotifyDecryptWallet,
+  doNotifyEncryptWallet,
+  doNotifyForgetPassword,
+  doToggle3PAnalytics,
+} from 'redux/actions/app';
 import { doSetDaemonSetting, doClearDaemonSetting, doFindFFmpeg } from 'redux/actions/settings';
+import { selectAllowAnalytics } from 'redux/selectors/app';
 import { selectDaemonSettings, selectFfmpegStatus, selectFindingFFmpeg } from 'redux/selectors/settings';
 import { selectUserVerifiedEmail } from 'redux/selectors/user';
 import SettingSystem from './view';
@@ -12,6 +19,7 @@ const select = (state) => ({
   findingFFmpeg: selectFindingFFmpeg(state),
   walletEncrypted: selectWalletIsEncrypted(state),
   isAuthenticated: selectUserVerifiedEmail(state),
+  allowAnalytics: selectAllowAnalytics(state),
 });
 
 const perform = (dispatch) => ({
@@ -23,6 +31,7 @@ const perform = (dispatch) => ({
   decryptWallet: () => dispatch(doNotifyDecryptWallet()),
   updateWalletStatus: () => dispatch(doWalletStatus()),
   confirmForgetPassword: (modalProps) => dispatch(doNotifyForgetPassword(modalProps)),
+  toggle3PAnalytics: (allow) => dispatch(doToggle3PAnalytics(allow)),
 });
 
 export default connect(select, perform)(SettingSystem);
diff --git a/ui/component/settingSystem/view.jsx b/ui/component/settingSystem/view.jsx
index c595cc1b3..68682cc04 100644
--- a/ui/component/settingSystem/view.jsx
+++ b/ui/component/settingSystem/view.jsx
@@ -42,6 +42,7 @@ type Props = {
   findingFFmpeg: boolean,
   walletEncrypted: boolean,
   isAuthenticated: boolean,
+  allowAnalytics: boolean,
   // --- perform ---
   setDaemonSetting: (string, ?SetDaemonSettingArg) => void,
   clearDaemonSetting: (string) => void,
@@ -51,6 +52,7 @@ type Props = {
   decryptWallet: () => void,
   updateWalletStatus: () => void,
   confirmForgetPassword: ({}) => void,
+  toggle3PAnalytics: (boolean) => void,
 };
 
 export default function SettingSystem(props: Props) {
@@ -60,6 +62,7 @@ export default function SettingSystem(props: Props) {
     findingFFmpeg,
     walletEncrypted,
     isAuthenticated,
+    allowAnalytics,
     setDaemonSetting,
     clearDaemonSetting,
     clearCache,
@@ -68,6 +71,7 @@ export default function SettingSystem(props: Props) {
     decryptWallet,
     updateWalletStatus,
     confirmForgetPassword,
+    toggle3PAnalytics,
   } = props;
 
   const [clearingCache, setClearingCache] = React.useState(false);
@@ -166,6 +170,43 @@ export default function SettingSystem(props: Props) {
           </SettingsRow>
           {/* @endif */}
 
+          {/* @if TARGET='app' */}
+          <SettingsRow
+            title={__('Share usage and diagnostic data')}
+            subtitle={
+              <React.Fragment>
+                {__(
+                  `This is information like error logging, performance tracking, and usage statistics. It includes your IP address and basic system details, but no other identifying information (unless you sign in to lbry.tv)`
+                )}{' '}
+                <Button button="link" label={__('Learn more')} href="https://lbry.com/privacypolicy" />
+              </React.Fragment>
+            }
+            useVerticalSeparator
+          >
+            <FormField
+              type="checkbox"
+              name="share_internal"
+              onChange={() => setDaemonSetting('share_usage_data', !daemonSettings.share_usage_data)}
+              checked={daemonSettings.share_usage_data}
+              label={<React.Fragment>{__('Allow the app to share data to LBRY.inc')}</React.Fragment>}
+              helper={
+                isAuthenticated
+                  ? __('Internal sharing is required while signed in.')
+                  : __('Internal sharing is required to participate in rewards programs.')
+              }
+              disabled={isAuthenticated && daemonSettings.share_usage_data}
+            />
+            <FormField
+              type="checkbox"
+              name="share_third_party"
+              onChange={(e) => toggle3PAnalytics(e.target.checked)}
+              checked={allowAnalytics}
+              label={__('Allow the app to access third party analytics platforms')}
+              helper={__('We use detailed analytics to improve all aspects of the LBRY experience.')}
+            />
+          </SettingsRow>
+          {/* @endif */}
+
           {/* @if TARGET='app' */}
           {/* Auto launch in a hidden state doesn't work on mac https://github.com/Teamwork/node-auto-launch/issues/81 */}
           {!IS_MAC && (
diff --git a/ui/page/settings/index.js b/ui/page/settings/index.js
index 50b889dce..e3822d1d0 100644
--- a/ui/page/settings/index.js
+++ b/ui/page/settings/index.js
@@ -1,7 +1,5 @@
 import { connect } from 'react-redux';
-import { doToggle3PAnalytics } from 'redux/actions/app';
-import { selectAllowAnalytics } from 'redux/selectors/app';
-import { doSetDaemonSetting, doEnterSettingsPage, doExitSettingsPage } from 'redux/actions/settings';
+import { doEnterSettingsPage, doExitSettingsPage } from 'redux/actions/settings';
 import { makeSelectClientSetting, selectDaemonSettings } from 'redux/selectors/settings';
 import { SETTINGS } from 'lbry-redux';
 import SettingsPage from './view';
@@ -9,15 +7,12 @@ import { selectUserVerifiedEmail } from 'redux/selectors/user';
 
 const select = (state) => ({
   daemonSettings: selectDaemonSettings(state),
-  allowAnalytics: selectAllowAnalytics(state),
   isAuthenticated: selectUserVerifiedEmail(state),
   autoDownload: makeSelectClientSetting(SETTINGS.AUTO_DOWNLOAD)(state),
   hideBalance: makeSelectClientSetting(SETTINGS.HIDE_BALANCE)(state),
 });
 
 const perform = (dispatch) => ({
-  setDaemonSetting: (key, value) => dispatch(doSetDaemonSetting(key, value)),
-  toggle3PAnalytics: (allow) => dispatch(doToggle3PAnalytics(allow)),
   enterSettings: () => dispatch(doEnterSettingsPage()),
   exitSettings: () => dispatch(doExitSettingsPage()),
 });
diff --git a/ui/page/settings/view.jsx b/ui/page/settings/view.jsx
index 6c82f05ed..ab2cc228a 100644
--- a/ui/page/settings/view.jsx
+++ b/ui/page/settings/view.jsx
@@ -2,7 +2,6 @@
 import * as PAGES from 'constants/pages';
 import * as ICONS from 'constants/icons';
 import * as React from 'react';
-import { FormField } from 'component/common/form';
 import Button from 'component/button';
 import Page from 'component/page';
 import SettingAccount from 'component/settingAccount';
@@ -18,18 +17,13 @@ type Price = {
   amount: number,
 };
 
-type SetDaemonSettingArg = boolean | string | number;
-
 type DaemonSettings = {
   download_dir: string,
   share_usage_data: boolean,
 };
 
 type Props = {
-  setDaemonSetting: (string, ?SetDaemonSettingArg) => void,
-  toggle3PAnalytics: (boolean) => void,
   daemonSettings: DaemonSettings,
-  allowAnalytics: boolean,
   isAuthenticated: boolean,
   instantPurchaseEnabled: boolean,
   instantPurchaseMax: Price,
@@ -49,18 +43,11 @@ class SettingsPage extends React.PureComponent<Props> {
     exitSettings();
   }
 
-  setDaemonSetting(name: string, value: ?SetDaemonSettingArg): void {
-    this.props.setDaemonSetting(name, value);
-  }
-
   render() {
     const {
       daemonSettings,
-      allowAnalytics,
       isAuthenticated,
       // autoDownload,
-      setDaemonSetting,
-      toggle3PAnalytics,
     } = this.props;
     const noDaemonSettings = !daemonSettings || Object.keys(daemonSettings).length === 0;
 
@@ -103,45 +90,6 @@ class SettingsPage extends React.PureComponent<Props> {
           </section>
         ) : (
           <div className={classnames('card-stack', { 'card--disabled': IS_WEB && !isAuthenticated })}>
-            {/* @if TARGET='app' */}
-            <Card
-              title={__('Share usage and diagnostic data')}
-              subtitle={
-                <React.Fragment>
-                  {__(
-                    `This is information like error logging, performance tracking, and usage statistics. It includes your IP address and basic system details, but no other identifying information (unless you sign in to lbry.tv)`
-                  )}{' '}
-                  <Button button="link" label={__('Learn more')} href="https://lbry.com/privacypolicy" />
-                </React.Fragment>
-              }
-              actions={
-                <>
-                  <FormField
-                    type="checkbox"
-                    name="share_internal"
-                    onChange={() => setDaemonSetting('share_usage_data', !daemonSettings.share_usage_data)}
-                    checked={daemonSettings.share_usage_data}
-                    label={<React.Fragment>{__('Allow the app to share data to LBRY.inc')}</React.Fragment>}
-                    helper={
-                      isAuthenticated
-                        ? __('Internal sharing is required while signed in.')
-                        : __('Internal sharing is required to participate in rewards programs.')
-                    }
-                    disabled={isAuthenticated && daemonSettings.share_usage_data}
-                  />
-                  <FormField
-                    type="checkbox"
-                    name="share_third_party"
-                    onChange={(e) => toggle3PAnalytics(e.target.checked)}
-                    checked={allowAnalytics}
-                    label={__('Allow the app to access third party analytics platforms')}
-                    helper={__('We use detailed analytics to improve all aspects of the LBRY experience.')}
-                  />
-                </>
-              }
-            />
-            {/* @endif */}
-
             {(isAuthenticated || !IS_WEB) && (
               <>
                 <Card