feat: initial theming support

3 files changed, 45 insertions, 18 deletions

diff --git a/src/ducks/app.js b/src/ducks/app.js
index 1086413..366f4b0 100644
--- a/src/ducks/app.js
+++ b/src/ducks/app.js
@@ -3,10 +3,12 @@ import { fetchConfigs } from 'd/configs';
 import { closeModal } from 'd/modals';
 
 const UpdateClashAPIConfig = 'app/UpdateClashAPIConfig';
+const SwitchTheme = 'app/SwitchTheme';
 
 const StorageKey = 'yacd.haishan.me';
 
 export const getClashAPIConfig = s => s.app.clashAPIConfig;
+export const getTheme = s => s.app.theme;
 
 // TODO to support secret
 export function updateClashAPIConfig({ hostname: iHostname, port, secret }) {
@@ -25,6 +27,15 @@ export function updateClashAPIConfig({ hostname: iHostname, port, secret }) {
   };
 }
 
+export function switchTheme() {
+  return (dispatch, getState) => {
+    const currentTheme = getTheme(getState());
+    const theme = currentTheme === 'light' ? 'dark' : 'light';
+    dispatch({ type: SwitchTheme, payload: { theme } });
+  };
+}
+
+// type Theme = 'light' | 'dark';
 const defaultState = {
   clashAPIConfig: {
     hostname: '127.0.0.1',
@@ -36,16 +47,20 @@ const defaultState = {
 function getInitialState() {
   let s = loadState(StorageKey);
   if (!s) s = defaultState;
-  return s;
+  // TODO flat clashAPIConfig?
+  return { theme: 'dark', ...s };
 }
-const initialState = getInitialState();
 
-export default function reducer(state = initialState, { type, payload }) {
+export default function reducer(state = getInitialState(), { type, payload }) {
   switch (type) {
     case UpdateClashAPIConfig: {
       return { ...state, clashAPIConfig: { ...payload } };
     }
 
+    case SwitchTheme: {
+      return { ...state, ...payload };
+    }
+
     default:
       return state;
   }
diff --git a/src/ducks/configs.js b/src/ducks/configs.js
index 0edc8e0..a7d4b83 100644
--- a/src/ducks/configs.js
+++ b/src/ducks/configs.js
@@ -1,6 +1,7 @@
 import * as configsAPI from 'a/configs';
-import { openModal } from 'd/modals';
 import * as trafficAPI from 'a/traffic';
+import { openModal } from 'd/modals';
+import { getClashAPIConfig } from 'd/app';
 
 const CompletedFetchConfigs = 'configs/CompletedFetchConfigs';
 const OptimisticUpdateConfigs = 'configs/OptimisticUpdateConfigs';
@@ -12,7 +13,8 @@ export function fetchConfigs() {
   return async (dispatch, getState) => {
     let res;
     try {
-      res = await configsAPI.fetchConfigs();
+      const apiSetup = getClashAPIConfig(getState());
+      res = await configsAPI.fetchConfigs(apiSetup);
     } catch (err) {
       // FIXME
       // eslint-disable-next-line no-console
@@ -44,7 +46,8 @@ export function fetchConfigs() {
       // normally user will land on the "traffic chart" page first
       // calling this here will let the data start streaming
       // the traffic chart should already subscribed to the streaming
-      trafficAPI.fetchData();
+      const apiSetup = getClashAPIConfig(getState());
+      trafficAPI.fetchData(apiSetup);
     } else {
       dispatch(markHaveFetchedConfig());
     }
@@ -62,8 +65,9 @@ function markHaveFetchedConfig() {
 
 export function updateConfigs(partialConfg) {
   return async (dispatch, getState) => {
+    const apiSetup = getClashAPIConfig(getState());
     configsAPI
-      .updateConfigs(partialConfg)
+      .updateConfigs(apiSetup, partialConfg)
       .then(
         res => {
           if (res.ok === false) {
diff --git a/src/ducks/proxies.js b/src/ducks/proxies.js
index 7fec378..43b57b8 100644
--- a/src/ducks/proxies.js
+++ b/src/ducks/proxies.js
@@ -1,5 +1,6 @@
 import { createSelector } from 'reselect';
 import * as proxiesAPI from 'a/proxies';
+import { getClashAPIConfig } from 'd/app';
 
 // see all types:
 // https://github.com/Dreamacro/clash/blob/master/constant/adapters.go
@@ -10,15 +11,18 @@ const ProxyGroupTypes = ['Fallback', 'URLTest', 'Selector'];
 export const getProxies = s => s.proxies.proxies;
 export const getDelay = s => s.proxies.delay;
 export const getProxyGroupNames = s => s.proxies.groupNames;
-export const getUserProxies = createSelector(getProxies, proxies => {
-  let o = {};
-  for (const prop in proxies) {
-    if (ProxyTypeBuiltin.indexOf(prop) < 0) {
-      o[prop] = proxies[prop];
+export const getUserProxies = createSelector(
+  getProxies,
+  proxies => {
+    let o = {};
+    for (const prop in proxies) {
+      if (ProxyTypeBuiltin.indexOf(prop) < 0) {
+        o[prop] = proxies[prop];
+      }
     }
+    return o;
   }
-  return o;
-});
+);
 
 const CompletedFetchProxies = 'proxies/CompletedFetchProxies';
 const OptimisticSwitchProxy = 'proxies/OptimisticSwitchProxy';
@@ -43,12 +47,14 @@ export function fetchProxies() {
   return async (dispatch, getState) => {
     // TODO handle errors
 
-    const proxiesCurr = getProxies(getState());
+    const state = getState();
+    const proxiesCurr = getProxies(state);
     // TODO this is too aggressive...
     if (Object.keys(proxiesCurr).length > 0) return;
 
+    const apiConfig = getClashAPIConfig(state);
     // TODO show loading animation?
-    const json = await proxiesAPI.fetchProxies();
+    const json = await proxiesAPI.fetchProxies(apiConfig);
     let { proxies = {} } = json;
 
     const groupNames = retrieveGroupNamesFrom(proxies);
@@ -63,9 +69,10 @@ export function fetchProxies() {
 
 export function switchProxy(name1, name2) {
   return async (dispatch, getState) => {
+    const apiConfig = getClashAPIConfig(getState());
     // TODO display error message
     proxiesAPI
-      .requestToSwitchProxy(name1, name2)
+      .requestToSwitchProxy(apiConfig, name1, name2)
       .then(
         res => {
           if (res.ok === false) {
@@ -97,7 +104,8 @@ export function switchProxy(name1, name2) {
 
 function requestDelayForProxyOnce(name) {
   return async (dispatch, getState) => {
-    const res = await proxiesAPI.requestDelayForProxy(name);
+    const apiConfig = getClashAPIConfig(getState());
+    const res = await proxiesAPI.requestDelayForProxy(apiConfig, name);
     let error = '';
     if (res.ok === false) {
       error = res.statusText;