rewrite themes-system -> action / reducer

ui/dist/index.html

@@ -6,6 +6,7 @@
 
         <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400italic,600italic,600' rel='stylesheet' type='text/css'>
         <link href="./css/all.css" rel="stylesheet" type="text/css" media="screen,print" />
+        <link id="theme" href="" rel="stylesheet" type="text/css" media="screen,print" />
         <link rel="icon" type="image/png" href="./img/fav/favicon-32x32.png" sizes="32x32">
         <link rel="icon" type="image/png" href="./img/fav/favicon-194x194.png" sizes="194x194">
         <link rel="icon" type="image/png" href="./img/fav/favicon-96x96.png" sizes="96x96">

ui/js/actions/settings.js

@@ -45,24 +45,33 @@ export function doSetClientSetting(key, value) {
   };
 }
 
-export function getThemes() {
+export function doSetTheme(name) {
-  /*
+  const link = document.getElementById("theme");
-  // Themes path
+
-  const themesPath = `${remote.app.getAppPath()}/dist/themes`;
+  return function(dispatch, getState) {
+    const { themes } = getState().settings.clientSettings;
+    const theme = themes.find(theme => theme.name === name);
+
+    link.href = theme.path;
+
+    dispatch(doSetClientSetting("theme", theme));
+  };
+}
+
+export function doGetThemes() {
+  const path = `${remote.app.getAppPath()}/dist/themes`;
 
   // Get all .css files
-  const files = readdirSync(themesPath).filter(function(file) {
+  const files = readdirSync(path).filter(file => extname(file) === ".css");
-    return extname(file) === ".css";
-  });
 
   // Get theme name
-  const themes = files.map(function(file) {
+  const themes = files.map(file => ({
-    return file.replace(".css", "");
+    name: file.replace(".css", ""),
-  });
+    path: `./themes/${file}`,
+    fullPath: `${path}/${file}`,
+  }));
 
-  return {
+  return function(dispatch, getState) {
-    type: types.GET_THEMES,
+    dispatch(doSetClientSetting("themes", themes));
-    data: { themes },
   };
-  */
 }

ui/js/constants/action_types.js

@@ -85,6 +85,9 @@ export const SEARCH_CANCELLED = "SEARCH_CANCELLED";
 export const DAEMON_SETTINGS_RECEIVED = "DAEMON_SETTINGS_RECEIVED";
 export const CLIENT_SETTING_CHANGED = "CLIENT_SETTING_CHANGED";
 
+// THEMES
+export const GET_THEMES = "GET_THEMES";
+
 // User
 export const AUTHENTICATION_STARTED = "AUTHENTICATION_STARTED";
 export const AUTHENTICATION_SUCCESS = "AUTHENTICATION_SUCCESS";

ui/js/constants/settings.js

@@ -3,4 +3,5 @@ export const FIRST_RUN_ACKNOWLEDGED = "welcome_acknowledged";
 export const LANGUAGE = "language";
 export const SHOW_NSFW = "showNsfw";
 export const SHOW_UNAVAILABLE = "showUnavailable";
-export const GET_THEMES = "theme";
+export const THEME = "theme";
+export const THEMES = "themes";

ui/js/lbry.js

@@ -19,7 +19,8 @@ let lbry = {
     customLighthouseServers: [],
     showDeveloperMenu: false,
     language: "en",
-    theme: "light",
+    theme: { name: "light", path: "" },
+    themes: [],
   },
 };
 

ui/js/page/settings/index.js

@@ -1,8 +1,18 @@
 import React from "react";
 import { connect } from "react-redux";
 import { doClearCache } from "actions/app";
-import { doSetDaemonSetting, doSetClientSetting } from "actions/settings";
+import {
-import { selectDaemonSettings, selectShowNsfw } from "selectors/settings";
+  doSetDaemonSetting,
+  doSetClientSetting,
+  doSetTheme,
+  doGetThemes,
+} from "actions/settings";
+import {
+  selectDaemonSettings,
+  selectShowNsfw,
+  selectThemes,
+  selectTheme,
+} from "selectors/settings";
 import SettingsPage from "./view";
 
 const select = state => ({
@@ -14,6 +24,8 @@ const perform = dispatch => ({
   setDaemonSetting: (key, value) => dispatch(doSetDaemonSetting(key, value)),
   clearCache: () => dispatch(doClearCache()),
   setClientSetting: (key, value) => dispatch(doSetClientSetting(key, value)),
+  setTheme: name => dispatch(doSetTheme(name)),
+  getThemes: () => dispatch(doGetThemes()),
 });
 
 export default connect(select, perform)(SettingsPage);

ui/js/page/settings/view.jsx

@@ -21,7 +21,7 @@ class SettingsPage extends React.PureComponent {
       language: lbry.getClientSetting(settings.LANGUAGE),
       clearingCache: false,
       theme: lbry.getClientSetting(settings.THEME),
-      themes: [],
+      themes: lbry.getClientSetting(settings.THEMES),
     };
   }
 
@@ -39,8 +39,7 @@ class SettingsPage extends React.PureComponent {
   }
 
   getThemes() {
-    //const { themes } = this.props.getThemes().data;
+    this.props.getThemes();
-    //this.setState({ themes });
   }
 
   setDaemonSetting(name, value) {
@@ -53,8 +52,7 @@ class SettingsPage extends React.PureComponent {
   }
 
   setTheme(value) {
-    //setTheme(value);
+    this.props.setTheme(value);
-    //this.props.setClientSetting("theme", value);
   }
 
   onRunOnStartChange(event) {
@@ -121,7 +119,6 @@ class SettingsPage extends React.PureComponent {
   onShowUnavailableChange(event) {}
 
   componentDidMount() {
-    const { themes } = this.state;
     this.getThemes();
   }
 
@@ -252,8 +249,10 @@ class SettingsPage extends React.PureComponent {
               defaultValue={lbry.getClientSetting("theme")}
               className="form-field__input--inline"
             >
-              {this.state.themes.map((name, index) =>
+              {this.state.themes.map((theme, index) =>
-                <option key={index} value={name}>{__(`${name} theme`)}</option>
+                <option key={index} value={theme.name}>
+                  {__(`${theme.name} theme`)}
+                </option>
               )}
             </FormField>
 

ui/js/reducers/settings.js

@@ -5,6 +5,7 @@ const reducers = {};
 const defaultState = {
   clientSettings: {
     showNsfw: lbry.getClientSetting("showNsfw"),
+    themes: [],
   },
 };
 
@@ -25,6 +26,12 @@ reducers[types.CLIENT_SETTING_CHANGED] = function(state, action) {
   });
 };
 
+reducers[types.GET_THEMES] = function(state, action) {
+  return Object.assign({}, state, {
+    themes: action.data.themes,
+  });
+};
+
 export default function reducer(state = defaultState, action) {
   const handler = reducers[action.type];
   if (handler) return handler(state, action);

ui/js/selectors/settings.js

@@ -21,3 +21,13 @@ export const selectShowNsfw = createSelector(
   selectClientSettings,
   clientSettings => !!clientSettings.showNsfw
 );
+
+export const selectThemes = createSelector(
+  selectClientSettings,
+  clientSettings => clientSettings.themes
+);
+
+export const selectTheme = createSelector(
+  selectClientSettings,
+  clientSettings => clientSettings.theme
+);