implement getThemes action

ui/js/actions/settings.js

@@ -1,5 +1,8 @@
 import * as types from "constants/action_types";
 import lbry from "lbry";
+import { readdirSync } from "fs";
+import { extname } from "path";
+import { remote } from "electron";
 
 export function doFetchDaemonSettings() {
   return function(dispatch, getState) {
@@ -41,3 +44,23 @@ export function doSetClientSetting(key, value) {
     },
   };
 }
+
+export function getThemes() {
+  // Themes path
+  const themesPath = `${remote.app.getAppPath()}/dist/themes`;
+
+  // Get all .css files
+  const files = readdirSync(themesPath).filter(function(file) {
+    return extname(file) === ".css";
+  });
+
+  // Get theme name
+  const themes = files.map(function(file) {
+    return file.replace(".css", "");
+  });
+
+  return {
+    type: types.GET_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";
@@ -112,5 +115,4 @@ export const CLAIM_REWARD_STARTED = "CLAIM_REWARD_STARTED";
 export const CLAIM_REWARD_SUCCESS = "CLAIM_REWARD_SUCCESS";
 export const CLAIM_REWARD_FAILURE = "CLAIM_REWARD_FAILURE";
 export const CLAIM_REWARD_CLEAR_ERROR = "CLAIM_REWARD_CLEAR_ERROR";
-export const FETCH_REWARD_CONTENT_COMPLETED =
-  "FETCH_REWARD_CONTENT_COMPLETED";
+export const FETCH_REWARD_CONTENT_COMPLETED = "FETCH_REWARD_CONTENT_COMPLETED";

ui/js/page/settings/index.js

@@ -1,7 +1,11 @@
 import React from "react";
 import { connect } from "react-redux";
 import { doClearCache } from "actions/app";
-import { doSetDaemonSetting, doSetClientSetting } from "actions/settings";
+import {
+  doSetDaemonSetting,
+  doSetClientSetting,
+  getThemes,
+} from "actions/settings";
 import { selectDaemonSettings, selectShowNsfw } from "selectors/settings";
 import SettingsPage from "./view";
 
@@ -13,6 +17,7 @@ const select = state => ({
 const perform = dispatch => ({
   setDaemonSetting: (key, value) => dispatch(doSetDaemonSetting(key, value)),
   clearCache: () => dispatch(doClearCache()),
+  getThemes: () => dispatch(getThemes()),
   setClientSetting: (key, value) => dispatch(doSetClientSetting(key, value)),
 });
 

ui/js/page/settings/view.jsx

@@ -3,10 +3,7 @@ import { FormField, FormRow } from "component/form.js";
 import SubHeader from "component/subHeader";
 import lbry from "lbry.js";
 import Link from "component/link";
-import getThemes from "util/getThemes";
-
-const { remote } = require("electron");
-const themes = getThemes();
+import { remote } from "electron";
 
 class SettingsPage extends React.PureComponent {
   constructor(props) {
@@ -37,6 +34,10 @@ class SettingsPage extends React.PureComponent {
     setTimeout(clear, 1000, { once: true });
   }
 
+  getThemes() {
+    return this.props.getThemes().data.themes;
+  }
+
   setDaemonSetting(name, value) {
     this.props.setDaemonSetting(name, value);
   }
@@ -273,7 +274,7 @@ class SettingsPage extends React.PureComponent {
               defaultValue={lbry.getClientSetting("theme")}
               className="form-field__input--inline"
             >
-              {themes.map((name, index) =>
+              {this.getThemes().map((name, index) =>
                 <option key={index} value={name}>{__(`${name} theme`)}</option>
               )}
             </FormField>

ui/js/util/getThemes.js

@@ -1,21 +0,0 @@
-// Todo: Add  a better way to do this
-const { readdirSync } = require("fs");
-const { extname } = require("path");
-const { remote } = require("electron");
-
-function getThemes() {
-  // Themes path
-  const themesPath = `${remote.app.getAppPath()}/dist/themes`;
-
-  // Get all themes / only .css
-  const themes = readdirSync(themesPath).filter(function(file) {
-    return extname(file) === ".css";
-  });
-
-  // Remove file extension (css)
-  return themes.map(function(theme) {
-    return theme.replace(".css", "");
-  });
-}
-
-export default getThemes;