From 1cc7be746b4c75f92f7f3352ebe2fe78598aee26 Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Mon, 9 Nov 2020 12:22:38 -0500
Subject: [PATCH] move splash animation out of settings

---
 ui/component/splash/index.js | 14 ++++++--------
 ui/component/splash/view.jsx |  8 ++++----
 ui/constants/action_types.js |  1 +
 ui/redux/actions/app.js      |  6 ++++++
 ui/redux/reducers/app.js     |  9 +++++++++
 ui/redux/selectors/app.js    |  2 ++
 ui/store.js                  |  1 +
 7 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/ui/component/splash/index.js b/ui/component/splash/index.js
index b7c664bc3..355096a47 100644
--- a/ui/component/splash/index.js
+++ b/ui/component/splash/index.js
@@ -1,18 +1,16 @@
 import * as MODALS from 'constants/modal_types';
 import { connect } from 'react-redux';
-import { selectDaemonVersionMatched, selectModal } from 'redux/selectors/app';
-import { doCheckDaemonVersion, doOpenModal, doHideModal } from 'redux/actions/app';
-import { doSetClientSetting, doClearDaemonSetting } from 'redux/actions/settings';
-import { DAEMON_SETTINGS, SETTINGS } from 'lbry-redux';
+import { selectDaemonVersionMatched, selectModal, selectSplashAnimationEnabled } from 'redux/selectors/app';
+import { doCheckDaemonVersion, doOpenModal, doHideModal, doToggleSplashAnimation } from 'redux/actions/app';
+import { doClearDaemonSetting } from 'redux/actions/settings';
+import { DAEMON_SETTINGS } from 'lbry-redux';
 import { doToast } from 'redux/actions/notifications';
 import SplashScreen from './view';
 
-import { makeSelectClientSetting } from 'redux/selectors/settings';
-
 const select = state => ({
   modal: selectModal(state),
   daemonVersionMatched: selectDaemonVersionMatched(state),
-  animationHidden: makeSelectClientSetting(SETTINGS.HIDE_SPLASH_ANIMATION)(state),
+  animationHidden: selectSplashAnimationEnabled(state),
 });
 
 const perform = dispatch => ({
@@ -20,7 +18,7 @@ const perform = dispatch => ({
   notifyUnlockWallet: shouldTryWithBlankPassword =>
     dispatch(doOpenModal(MODALS.WALLET_UNLOCK, { shouldTryWithBlankPassword })),
   hideModal: () => dispatch(doHideModal()),
-  setClientSetting: (key, value) => dispatch(doSetClientSetting(key, value)),
+  toggleSplashAnimation: () => dispatch(doToggleSplashAnimation()),
   clearWalletServers: () => dispatch(doClearDaemonSetting(DAEMON_SETTINGS.LBRYUM_SERVERS)),
   doShowSnackBar: message => dispatch(doToast({ isError: true, message })),
 });
diff --git a/ui/component/splash/view.jsx b/ui/component/splash/view.jsx
index 183a3b16f..73a7b08ad 100644
--- a/ui/component/splash/view.jsx
+++ b/ui/component/splash/view.jsx
@@ -3,7 +3,7 @@ import type { Node } from 'react';
 import * as MODALS from 'constants/modal_types';
 import * as ICONS from 'constants/icons';
 import React from 'react';
-import { Lbry, SETTINGS } from 'lbry-redux';
+import { Lbry } from 'lbry-redux';
 import Button from 'component/button';
 import ModalWalletUnlock from 'modal/modalWalletUnlock';
 import ModalIncompatibleDaemon from 'modal/modalIncompatibleDaemon';
@@ -28,7 +28,7 @@ type Props = {
     id: string,
   },
   animationHidden: boolean,
-  setClientSetting: (string, boolean) => void,
+  toggleSplashAnimation: () => void,
   clearWalletServers: () => void,
   doShowSnackBar: string => void,
 };
@@ -242,7 +242,7 @@ export default class SplashScreen extends React.PureComponent<Props, State> {
 
   render() {
     const { error, details } = this.state;
-    const { animationHidden, setClientSetting } = this.props;
+    const { animationHidden, toggleSplashAnimation } = this.props;
 
     return (
       <div className="splash">
@@ -290,7 +290,7 @@ export default class SplashScreen extends React.PureComponent<Props, State> {
           <Button
             className="splash__animation-toggle"
             label={!animationHidden ? __('I feel woosy! Stop spinning!') : __('Spin Spin Sugar')}
-            onClick={() => setClientSetting(SETTINGS.HIDE_SPLASH_ANIMATION, !animationHidden)}
+            onClick={() => toggleSplashAnimation()}
           />
         )}
         {error && (
diff --git a/ui/constants/action_types.js b/ui/constants/action_types.js
index 849b18033..ef15e2bf0 100644
--- a/ui/constants/action_types.js
+++ b/ui/constants/action_types.js
@@ -29,6 +29,7 @@ export const SET_ALLOW_ANALYTICS = 'SET_ALLOW_ANALYTICS';
 export const SET_HAS_NAVIGATED = 'SET_HAS_NAVIGATED';
 export const SET_SYNC_LOCK = 'SET_SYNC_LOCK';
 export const TOGGLE_YOUTUBE_SYNC_INTEREST = 'TOGGLE_YOUTUBE_SYNC_INTEREST';
+export const TOGGLE_SPLASH_ANIMATION = 'TOGGLE_SPLASH_ANIMATION';
 
 // Navigation
 export const CHANGE_AFTER_AUTH_PATH = 'CHANGE_AFTER_AUTH_PATH';
diff --git a/ui/redux/actions/app.js b/ui/redux/actions/app.js
index e4e9f01ba..58ffc2796 100644
--- a/ui/redux/actions/app.js
+++ b/ui/redux/actions/app.js
@@ -676,3 +676,9 @@ export function doToggleInterestedInYoutubeSync() {
     type: ACTIONS.TOGGLE_YOUTUBE_SYNC_INTEREST,
   };
 }
+
+export function doToggleSplashAnimation() {
+  return {
+    type: ACTIONS.TOGGLE_SPLASH_ANIMATION,
+  };
+}
diff --git a/ui/redux/reducers/app.js b/ui/redux/reducers/app.js
index b2fd8783a..175f4c583 100644
--- a/ui/redux/reducers/app.js
+++ b/ui/redux/reducers/app.js
@@ -37,6 +37,7 @@ export type AppState = {
   isUpgradeSkipped: ?boolean,
   hasClickedComment: boolean,
   enhancedLayout: boolean,
+  splashAnimationEnabled: boolean,
   searchOptionsExpanded: boolean,
   isPasswordSaved: boolean,
   welcomeVersion: number,
@@ -70,6 +71,7 @@ const defaultState: AppState = {
   isUpgradeAvailable: undefined,
   isUpgradeSkipped: undefined,
   enhancedLayout: false,
+  splashAnimationEnabled: true,
   searchOptionsExpanded: false,
   currentScroll: 0,
   scrollHistory: [0],
@@ -291,6 +293,13 @@ reducers[ACTIONS.TOGGLE_YOUTUBE_SYNC_INTEREST] = (state, action) => {
   };
 };
 
+reducers[ACTIONS.TOGGLE_SPLASH_ANIMATION] = (state, action) => {
+  return {
+    ...state,
+    splashAnimationEnabled: !state.splashAnimationEnabled,
+  };
+};
+
 reducers[LBRY_REDUX_ACTIONS.USER_STATE_POPULATE] = (state, action) => {
   const { welcomeVersion, allowAnalytics } = action.data;
   return {
diff --git a/ui/redux/selectors/app.js b/ui/redux/selectors/app.js
index 305a6cc08..ac6041dd4 100644
--- a/ui/redux/selectors/app.js
+++ b/ui/redux/selectors/app.js
@@ -82,3 +82,5 @@ export const selectScrollStartingPosition = createSelector(selectState, state =>
 export const selectIsPasswordSaved = createSelector(selectState, state => state.isPasswordSaved);
 
 export const selectInterestedInYoutubeSync = createSelector(selectState, state => state.interestedInYoutubeSync);
+
+export const selectSplashAnimationEnabled = createSelector(selectState, state => state.splashAnimationEnabled);
diff --git a/ui/store.js b/ui/store.js
index 75489acab..440cb2f0f 100644
--- a/ui/store.js
+++ b/ui/store.js
@@ -57,6 +57,7 @@ const appFilter = createFilter('app', [
   'allowAnalytics',
   'welcomeVersion',
   'interestedInYoutubeSync',
+  'splashAnimationEnabled',
 ]);
 // We only need to persist the receiveAddress for the wallet
 const walletFilter = createFilter('wallet', ['receiveAddress']);