rewrite action -> doSetTheme

ui/dist/themes/light.css

@@ -0,0 +1,6 @@
+:root {
+    --color-primary: #155B4A;
+    --color-canvas: #f5f5f5;
+    --color-bg: #ffffff;
+    --color-bg-alt: #D9D9D9;
+}

ui/js/actions/app.js

@@ -12,7 +12,7 @@ import {
   selectHistoryForward,
 } from "selectors/app";
 import { doSearch } from "actions/search";
-import { doFetchDaemonSettings } from "actions/settings";
+import { doFetchDaemonSettings, doSetClientSetting } from "actions/settings";
 import { doAuthenticate } from "actions/user";
 import { doFileList } from "actions/file_info";
 import { toQueryString } from "util/query_params";
@@ -351,3 +351,22 @@ export function doQuit() {
     remote.app.quit();
   };
 }
+
+export function doGetThemes() {
+  const dir = `${remote.app.getAppPath()}/dist/themes`;
+
+  // Get all .css files
+  const files = fs
+    .readdirSync(dir)
+    .filter(file => path.extname(file) === ".css");
+
+  return function(dispatch, getState) {
+    // Find themes
+    const themes = files.map(file => ({
+      name: file.replace(".css", ""),
+      path: `./themes/${file}`,
+    }));
+
+    dispatch(doSetClientSetting("themes", themes));
+  };
+}

ui/js/actions/settings.js

@@ -1,8 +1,6 @@
 import * as types from "constants/action_types";
+import * as settings from "constants/settings";
 import lbry from "lbry";
-import { readdirSync } from "fs";
-import { extname } from "path";
-import { remote } from "electron";
 
 export function doFetchDaemonSettings() {
   return function(dispatch, getState) {
@@ -45,34 +43,23 @@ export function doSetClientSetting(key, value) {
   };
 }
 
-export function doSetTheme(themeName) {
-  const name = themeName || "light";
-  const link = document.getElementById("theme");
-
+export function doSetTheme(name) {
   return function(dispatch, getState) {
-    const { themes } = getState().settings.clientSettings;
-    const theme = themes.find(theme => theme.name === name);
+    const last = lbry.getClientSetting(settings.THEME);
+    const find = name => themes.find(theme => theme.name === name);
 
-    if (theme) {
+    // Get themes
+    const themes = lbry.getClientSetting(settings.THEMES);
+
+    // Find theme
+    const theme = find(name) || find(last) || find("light");
+
+    if (theme.path) {
+      // update theme
+      const link = document.getElementById("theme");
       link.href = theme.path;
-      dispatch(doSetClientSetting("theme", theme));
+
+      dispatch(doSetClientSetting(settings.THEME, theme.name));
     }
   };
 }
-
-export function doGetThemes() {
-  const path = `${remote.app.getAppPath()}/dist/themes`;
-
-  // Get all .css files
-  const files = readdirSync(path).filter(file => extname(file) === ".css");
-
-  return function(dispatch, getState) {
-    // Find themes
-    const themes = files.map(file => ({
-      name: file.replace(".css", ""),
-      path: `./themes/${file}`,
-    }));
-
-    dispatch(doSetClientSetting("themes", themes));
-  };
-}

ui/js/component/app/index.js

@@ -6,6 +6,7 @@ import {
   doOpenModal,
   doAlertError,
   doRecordScroll,
+  doGetThemes,
 } from "actions/app";
 
 import { doFetchRewardedContent } from "actions/content";
@@ -29,6 +30,7 @@ const perform = dispatch => ({
   updateBalance: balance => dispatch(doUpdateBalance(balance)),
   fetchRewardedContent: () => dispatch(doFetchRewardedContent()),
   recordScroll: scrollPosition => dispatch(doRecordScroll(scrollPosition)),
+  getThemes: () => dispatch(doGetThemes()),
   setTheme: name => dispatch(doSetTheme(name)),
 });
 

ui/js/component/app/view.jsx

@@ -11,6 +11,7 @@ class App extends React.PureComponent {
       checkUpgradeAvailable,
       updateBalance,
       fetchRewardedContent,
+      getThemes,
       setTheme,
     } = this.props;
 
@@ -32,6 +33,10 @@ class App extends React.PureComponent {
 
     window.addEventListener("scroll", this.scrollListener);
 
+    // Load themes
+    getThemes();
+
+    // Select theme
     setTheme();
   }
 

ui/js/lbry.js

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

ui/js/page/settings/index.js

@@ -5,14 +5,8 @@ import {
   doSetDaemonSetting,
   doSetClientSetting,
   doSetTheme,
-  doGetThemes,
 } from "actions/settings";
-import {
-  selectDaemonSettings,
-  selectShowNsfw,
-  selectThemes,
-  selectTheme,
-} from "selectors/settings";
+import { selectDaemonSettings, selectShowNsfw } from "selectors/settings";
 import SettingsPage from "./view";
 
 const select = state => ({
@@ -25,7 +19,6 @@ const perform = dispatch => ({
   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

@@ -38,10 +38,6 @@ class SettingsPage extends React.PureComponent {
     setTimeout(clear, 1000, { once: true });
   }
 
-  getThemes() {
-    this.props.getThemes();
-  }
-
   setDaemonSetting(name, value) {
     this.props.setDaemonSetting(name, value);
   }
@@ -118,9 +114,7 @@ class SettingsPage extends React.PureComponent {
 
   onShowUnavailableChange(event) {}
 
-  componentDidMount() {
-    this.getThemes();
-  }
+  componentDidMount() {}
 
   render() {
     const { daemonSettings } = this.props;

ui/js/reducers/settings.js

@@ -1,11 +1,13 @@
 import * as types from "constants/action_types";
+import * as settings from "constants/settings";
 import lbry from "lbry";
 
 const reducers = {};
 const defaultState = {
   clientSettings: {
     showNsfw: lbry.getClientSetting("showNsfw"),
-    themes: [],
+    theme: lbry.getClientSetting(settings.THEME),
+    themes: lbry.getClientSetting(settings.THEMES),
   },
 };
 
@@ -26,12 +28,6 @@ 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,13 +21,3 @@ export const selectShowNsfw = createSelector(
   selectClientSettings,
   clientSettings => !!clientSettings.showNsfw
 );
-
-export const selectThemes = createSelector(
-  selectClientSettings,
-  clientSettings => clientSettings.themes
-);
-
-export const selectTheme = createSelector(
-  selectClientSettings,
-  clientSettings => clientSettings.theme
-);