sync settings generally based on navigation and settings paths

ui/component/header/view.jsx

@@ -42,7 +42,6 @@ type Props = {
   authHeader: boolean,
   backout: {
     backLabel?: string,
-    backCB?: () => void,
     backNavDefault?: string,
     title: string,
     simpleTitle: string, // Just use the same value as `title` if `title` is already short (~< 10 chars), unless you have a better idea for title overlfow on mobile
@@ -87,7 +86,7 @@ const Header = (props: Props) => {
   const isSignInPage = history.location.pathname.includes(PAGES.AUTH_SIGNIN);
   const isPwdResetPage = history.location.pathname.includes(PAGES.AUTH_PASSWORD_RESET);
   const hasBackout = Boolean(backout);
-  const { backLabel, backCB, backNavDefault, title: backTitle, simpleTitle: simpleBackTitle } = backout || {};
+  const { backLabel, backNavDefault, title: backTitle, simpleTitle: simpleBackTitle } = backout || {};
 
   // Sign out if they click the "x" when they are on the password prompt
   const authHeaderAction = syncError ? { onClick: signOut } : { navigate: '/' };
@@ -121,9 +120,6 @@ const Header = (props: Props) => {
 
     window.removeEventListener('popstate', onBackout);
 
-    if (backCB) {
-      backCB();
-    }
     if (e.type !== 'popstate') {
       // if not initiated by pop (back button)
       if (hasNavigated && !backNavDefault) {

ui/component/page/view.jsx

@@ -21,7 +21,6 @@ type Props = {
   noSideNavigation: boolean,
   backout: {
     backLabel?: string,
-    backCB?: () => void,
     backNavDefault?: string,
     title: string,
     simpleTitle: string, // Just use the same value as `title` if `title` is already short (~< 10 chars), unless you have a better idea for title overlfow on mobile

ui/component/router/index.js

@@ -4,7 +4,7 @@ import { selectHasNavigated, selectScrollStartingPosition, selectWelcomeVersion
 import Router from './view';
 import { normalizeURI, makeSelectTitleForUri } from 'lbry-redux';
 import { doSetHasNavigated } from 'redux/actions/app';
-
+import { doSyncClientSettings } from 'redux/actions/settings';
 const select = state => {
   const { pathname, hash } = state.router.location;
   const urlPath = pathname + hash;
@@ -34,6 +34,7 @@ const select = state => {
 
 const perform = dispatch => ({
   setHasNavigated: () => dispatch(doSetHasNavigated()),
+  syncSettings: () => dispatch(doSyncClientSettings()),
 });
 
 export default connect(select, perform)(Router);

ui/component/router/view.jsx

@@ -97,6 +97,7 @@ type Props = {
   welcomeVersion: number,
   hasNavigated: boolean,
   setHasNavigated: () => void,
+  syncSettings: () => void,
 };
 
 function AppRouter(props: Props) {
@@ -110,13 +111,15 @@ function AppRouter(props: Props) {
     welcomeVersion,
     hasNavigated,
     setHasNavigated,
+    syncSettings,
   } = props;
   const { entries } = history;
   const entryIndex = history.index;
   const urlParams = new URLSearchParams(search);
   const resetScroll = urlParams.get('reset_scroll');
+  const [prevPath, setPrevPath] = React.useState(pathname);
 
-  // for people arriving at settings page from deeplinks, know whether they can "go back"
+  // For people arriving at settings page from deeplinks, know whether they can "go back"
   useEffect(() => {
     const unlisten = history.listen((location, action) => {
       if (action === 'PUSH') {
@@ -126,6 +129,27 @@ function AppRouter(props: Props) {
     return unlisten;
   }, [hasNavigated, setHasNavigated]);
 
+  // Sync when no longer on a settings page, or when entering settings pages
+  useEffect(() => {
+    const unlisten = history.listen(location => {
+      if (!location.pathname.includes(PAGES.SETTINGS) && prevPath.includes(PAGES.SETTINGS)) {
+        syncSettings();
+      } else if (location.pathname.includes(PAGES.SETTINGS) && !prevPath.includes(PAGES.SETTINGS)) {
+        syncSettings();
+      }
+    });
+    return unlisten;
+  }, [prevPath, syncSettings]);
+
+  useEffect(() => {
+    const unlisten = history.listen(location => {
+      if (prevPath !== location.pathname && setPrevPath) {
+        setPrevPath(location.pathname);
+      }
+    });
+    return unlisten;
+  }, [prevPath, setPrevPath]);
+
   useEffect(() => {
     if (uri) {
       const { channelName, streamName } = parseURI(uri);

ui/page/settings/view.jsx

@@ -66,7 +66,6 @@ type Props = {
   openModal: string => void,
   language?: string,
   syncEnabled: boolean,
-  syncSettings: () => void,
 };
 
 type State = {
@@ -87,7 +86,6 @@ class SettingsPage extends React.PureComponent<Props, State> {
     (this: any).onAutomaticDarkModeChange = this.onAutomaticDarkModeChange.bind(this);
     (this: any).onChangeTime = this.onChangeTime.bind(this);
     (this: any).onConfirmForgetPassword = this.onConfirmForgetPassword.bind(this);
-    (this: any).onDone = this.onDone.bind(this);
   }
 
   componentDidMount() {
@@ -103,14 +101,6 @@ class SettingsPage extends React.PureComponent<Props, State> {
     }
   }
 
-  onDone() {
-    const { syncSettings } = this.props;
-
-    if (this.props.syncEnabled) {
-      syncSettings();
-    }
-  }
-
   onThemeChange(event: SyntheticInputEvent<*>) {
     const { value } = event.target;
 
@@ -189,7 +179,6 @@ class SettingsPage extends React.PureComponent<Props, State> {
         noFooter
         noSideNavigation
         backout={{
-          backCB: () => this.onDone(),
           title: __('Settings'),
           backLabel: __('Done'),
         }}

ui/page/settingsAdvanced/view.jsx

@@ -77,7 +77,6 @@ class SettingsPage extends React.PureComponent<Props, State> {
     (this: any).onThemeChange = this.onThemeChange.bind(this);
     (this: any).onAutomaticDarkModeChange = this.onAutomaticDarkModeChange.bind(this);
     (this: any).onConfirmForgetPassword = this.onConfirmForgetPassword.bind(this);
-    (this: any).onDone = this.onDone.bind(this);
   }
 
   componentDidMount() {
@@ -104,14 +103,6 @@ class SettingsPage extends React.PureComponent<Props, State> {
     }
   }
 
-  onDone() {
-    const { syncSettings } = this.props;
-
-    if (this.props.syncEnabled) {
-      syncSettings();
-    }
-  }
-
   onFFmpegFolder(path: string) {
     this.setDaemonSetting('ffmpeg_path', path);
     this.findFFmpeg();
@@ -211,7 +202,6 @@ class SettingsPage extends React.PureComponent<Props, State> {
         noFooter
         noSideNavigation
         backout={{
-          backCB: () => this.onDone(),
           title: __('Advanced Settings'),
           backLabel: __('Done'),
         }}