Merge pull request #301 from lbryio/nsfw

Move client settings into redux

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,
+    },
+  };
+}

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),
   });

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),
   });

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),

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";

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),
   });
 

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 { doSetDaemonSetting, doSetClientSetting } from "actions/settings";
-import { selectDaemonSettings } from "selectors/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);

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.  "
               )}

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);

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 || {}

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
+);