From 500fdd282caa7bab4aac2fc4f2d39c2956cc0c95 Mon Sep 17 00:00:00 2001
From: 6ea86b96 <6ea86b96@gmail.com>
Date: Wed, 28 Jun 2017 14:12:01 +0700
Subject: [PATCH] Move client settings into redux

---
 ui/js/actions/settings.js         | 12 ++++++++++++
 ui/js/component/fileCard/index.js |  4 ++--
 ui/js/component/fileTile/index.js |  4 ++--
 ui/js/component/video/index.js    |  4 ++--
 ui/js/constants/action_types.js   |  1 +
 ui/js/page/filePage/index.js      |  4 ++--
 ui/js/page/settings/index.js      |  6 ++++--
 ui/js/page/settings/view.jsx      |  7 +++----
 ui/js/reducers/settings.js        | 18 +++++++++++++++++-
 ui/js/selectors/app.js            |  8 --------
 ui/js/selectors/settings.js       |  7 ++++++-
 11 files changed, 51 insertions(+), 24 deletions(-)

diff --git a/ui/js/actions/settings.js b/ui/js/actions/settings.js
index 8268989d8..f4fd86142 100644
--- a/ui/js/actions/settings.js
+++ b/ui/js/actions/settings.js
@@ -29,3 +29,15 @@ export function doSetDaemonSetting(key, value) {
     });
   };
 }
+
+export function doSetClientSetting(key, value) {
+  lbry.setClientSetting(key, value);
+
+  return {
+    type: types.CLIENT_SETTING_CHANGED,
+    data: {
+      key,
+      value,
+    },
+  };
+}
diff --git a/ui/js/component/fileCard/index.js b/ui/js/component/fileCard/index.js
index a3c699998..65d162009 100644
--- a/ui/js/component/fileCard/index.js
+++ b/ui/js/component/fileCard/index.js
@@ -2,7 +2,7 @@ import React from "react";
 import { connect } from "react-redux";
 import { doNavigate } from "actions/app";
 import { doResolveUri } from "actions/content";
-import { selectObscureNsfw } from "selectors/app";
+import { selectShowNsfw } from "selectors/settings";
 import {
   makeSelectClaimForUri,
   makeSelectMetadataForUri,
@@ -20,7 +20,7 @@ const makeSelect = () => {
   const select = (state, props) => ({
     claim: selectClaimForUri(state, props),
     fileInfo: selectFileInfoForUri(state, props),
-    obscureNsfw: selectObscureNsfw(state),
+    obscureNsfw: !selectShowNsfw(state),
     metadata: selectMetadataForUri(state, props),
     isResolvingUri: selectResolvingUri(state, props),
   });
diff --git a/ui/js/component/fileTile/index.js b/ui/js/component/fileTile/index.js
index 58a34b13d..6e9936fe1 100644
--- a/ui/js/component/fileTile/index.js
+++ b/ui/js/component/fileTile/index.js
@@ -7,7 +7,7 @@ import {
   makeSelectMetadataForUri,
 } from "selectors/claims";
 import { makeSelectFileInfoForUri } from "selectors/file_info";
-import { selectObscureNsfw } from "selectors/app";
+import { selectShowNsfw } from "selectors/settings";
 import { makeSelectIsResolvingForUri } from "selectors/content";
 import FileTile from "./view";
 
@@ -20,7 +20,7 @@ const makeSelect = () => {
   const select = (state, props) => ({
     claim: selectClaimForUri(state, props),
     fileInfo: selectFileInfoForUri(state, props),
-    obscureNsfw: selectObscureNsfw(state),
+    obscureNsfw: !selectShowNsfw(state),
     metadata: selectMetadataForUri(state, props),
     isResolvingUri: selectResolvingUri(state, props),
   });
diff --git a/ui/js/component/video/index.js b/ui/js/component/video/index.js
index 97345a368..98db6b35a 100644
--- a/ui/js/component/video/index.js
+++ b/ui/js/component/video/index.js
@@ -14,7 +14,7 @@ import {
   makeSelectDownloadingForUri,
 } from "selectors/file_info";
 import { makeSelectCostInfoForUri } from "selectors/cost_info";
-import { selectObscureNsfw } from "selectors/app";
+import { selectShowNsfw } from "selectors/settings";
 import Video from "./view";
 
 const makeSelect = () => {
@@ -29,7 +29,7 @@ const makeSelect = () => {
     costInfo: selectCostInfo(state, props),
     fileInfo: selectFileInfo(state, props),
     metadata: selectMetadata(state, props),
-    obscureNsfw: selectObscureNsfw(state),
+    obscureNsfw: !selectShowNsfw(state),
     modal: selectCurrentModal(state),
     isLoading: selectIsLoading(state, props),
     isDownloading: selectIsDownloading(state, props),
diff --git a/ui/js/constants/action_types.js b/ui/js/constants/action_types.js
index b40bc9d1d..e622787e0 100644
--- a/ui/js/constants/action_types.js
+++ b/ui/js/constants/action_types.js
@@ -69,6 +69,7 @@ export const SEARCH_CANCELLED = "SEARCH_CANCELLED";
 
 // Settings
 export const DAEMON_SETTINGS_RECEIVED = "DAEMON_SETTINGS_RECEIVED";
+export const CLIENT_SETTING_CHANGED = "CLIENT_SETTING_CHANGED";
 
 // User
 export const AUTHENTICATION_STARTED = "AUTHENTICATION_STARTED";
diff --git a/ui/js/page/filePage/index.js b/ui/js/page/filePage/index.js
index d7ec5f282..f6629214c 100644
--- a/ui/js/page/filePage/index.js
+++ b/ui/js/page/filePage/index.js
@@ -10,7 +10,7 @@ import {
   makeSelectMetadataForUri,
 } from "selectors/claims";
 import { makeSelectCostInfoForUri } from "selectors/cost_info";
-import { selectObscureNsfw } from "selectors/app";
+import { selectShowNsfw } from "selectors/settings";
 import FilePage from "./view";
 
 const makeSelect = () => {
@@ -25,7 +25,7 @@ const makeSelect = () => {
     contentType: selectContentType(state, props),
     costInfo: selectCostInfo(state, props),
     metadata: selectMetadata(state, props),
-    obscureNsfw: selectObscureNsfw(state),
+    showNsfw: !selectShowNsfw(state),
     fileInfo: selectFileInfo(state, props),
   });
 
diff --git a/ui/js/page/settings/index.js b/ui/js/page/settings/index.js
index 96fd8aec1..c74b918af 100644
--- a/ui/js/page/settings/index.js
+++ b/ui/js/page/settings/index.js
@@ -1,17 +1,19 @@
 import React from "react";
 import { connect } from "react-redux";
 import { doClearCache } from "actions/app";
-import { doSetDaemonSetting } from "actions/settings";
-import { selectDaemonSettings } from "selectors/settings";
+import { doSetDaemonSetting, doSetClientSetting } from "actions/settings";
+import { selectDaemonSettings, selectShowNsfw } from "selectors/settings";
 import SettingsPage from "./view";
 
 const select = state => ({
   daemonSettings: selectDaemonSettings(state),
+  showNsfw: selectShowNsfw(state),
 });
 
 const perform = dispatch => ({
   setDaemonSetting: (key, value) => dispatch(doSetDaemonSetting(key, value)),
   clearCache: () => dispatch(doClearCache()),
+  setClientSetting: (key, value) => dispatch(doSetClientSetting(key, value)),
 });
 
 export default connect(select, perform)(SettingsPage);
diff --git a/ui/js/page/settings/view.jsx b/ui/js/page/settings/view.jsx
index 9a7d15f6c..0d2ce195f 100644
--- a/ui/js/page/settings/view.jsx
+++ b/ui/js/page/settings/view.jsx
@@ -10,12 +10,11 @@ class SettingsPage extends React.PureComponent {
   constructor(props) {
     super(props);
 
-    const daemonSettings = this.props.daemonSettings;
+    const { daemonSettings } = this.props;
 
     this.state = {
       isMaxUpload: daemonSettings && daemonSettings.max_upload != 0,
       isMaxDownload: daemonSettings && daemonSettings.max_download != 0,
-      showNsfw: lbry.getClientSetting("showNsfw"),
       showUnavailable: lbry.getClientSetting("showUnavailable"),
       language: lbry.getClientSetting("language"),
       clearingCache: false,
@@ -83,7 +82,7 @@ class SettingsPage extends React.PureComponent {
   }
 
   onShowNsfwChange(event) {
-    lbry.setClientSetting("showNsfw", event.target.checked);
+    this.props.setClientSetting("showNsfw", event.target.checked);
   }
 
   // onLanguageChange(language) {
@@ -238,7 +237,7 @@ class SettingsPage extends React.PureComponent {
               label={__("Show NSFW content")}
               type="checkbox"
               onChange={this.onShowNsfwChange.bind(this)}
-              defaultChecked={this.state.showNsfw}
+              defaultChecked={this.props.showNsfw}
               helper={__(
                 "NSFW content may include nudity, intense sexuality, profanity, or other adult content. By displaying NSFW content, you are affirming you are of legal age to view mature content in your country or jurisdiction.  "
               )}
diff --git a/ui/js/reducers/settings.js b/ui/js/reducers/settings.js
index 651bf5a1a..4b78284cc 100644
--- a/ui/js/reducers/settings.js
+++ b/ui/js/reducers/settings.js
@@ -1,7 +1,12 @@
 import * as types from "constants/action_types";
+import lbry from "lbry";
 
 const reducers = {};
-const defaultState = {};
+const defaultState = {
+  clientSettings: {
+    showNsfw: lbry.getClientSetting("showNsfw"),
+  },
+};
 
 reducers[types.DAEMON_SETTINGS_RECEIVED] = function(state, action) {
   return Object.assign({}, state, {
@@ -9,6 +14,17 @@ reducers[types.DAEMON_SETTINGS_RECEIVED] = function(state, action) {
   });
 };
 
+reducers[types.CLIENT_SETTING_CHANGED] = function(state, action) {
+  const { key, value } = action.data;
+  const clientSettings = Object.assign({}, state.clientSettings);
+
+  clientSettings[key] = value;
+
+  return Object.assign({}, state, {
+    clientSettings,
+  });
+};
+
 export default function reducer(state = defaultState, action) {
   const handler = reducers[action.type];
   if (handler) return handler(state, action);
diff --git a/ui/js/selectors/app.js b/ui/js/selectors/app.js
index 8a6435499..f6acd6d07 100644
--- a/ui/js/selectors/app.js
+++ b/ui/js/selectors/app.js
@@ -177,14 +177,6 @@ export const selectDaemonReady = createSelector(
   state => state.daemonReady
 );
 
-/**
- * Calls to lbry.getClientSetting shouldn't be happening in selector logic, but settings have not
- * properly been reworked into redux framework. This added as a bug fix to NSFW settings not refreshing.
- */
-export const selectObscureNsfw = () => {
-  return !lbry.getClientSetting("showNsfw");
-};
-
 export const selectSnackBar = createSelector(
   _selectState,
   state => state.snackBar || {}
diff --git a/ui/js/selectors/settings.js b/ui/js/selectors/settings.js
index 428f09400..91c6fc467 100644
--- a/ui/js/selectors/settings.js
+++ b/ui/js/selectors/settings.js
@@ -9,10 +9,15 @@ export const selectDaemonSettings = createSelector(
 
 export const selectClientSettings = createSelector(
   _selectState,
-  state => state.clientSettings
+  state => state.clientSettings || {}
 );
 
 export const selectSettingsIsGenerous = createSelector(
   selectDaemonSettings,
   settings => settings && settings.is_generous_host
 );
+
+export const selectShowNsfw = createSelector(
+  selectClientSettings,
+  clientSettings => !!clientSettings.showNsfw
+);