Changed how theme is set and stored on client

client/src/store/action-creators/theme.ts

@@ -1,30 +1,32 @@
 import { Dispatch } from 'redux';
-import { SetThemeAction } from '../actions/theme';
+import { FetchThemesAction, SetThemeAction } from '../actions/theme';
 import { ActionType } from '../action-types';
-import { Theme } from '../../interfaces/Theme';
-import { themes } from '../../components/Settings/Themer/themes.json';
+import { Theme, ApiResponse, ThemeColors } from '../../interfaces';
+import { parseThemeToPAB } from '../../utility';
+import axios from 'axios';
 
 export const setTheme =
-  (name: string, remeberTheme: boolean = true) =>
+  (colors: ThemeColors, remeberTheme: boolean = true) =>
   (dispatch: Dispatch<SetThemeAction>) => {
-    const theme = themes.find((theme) => theme.name === name);
+    if (remeberTheme) {
+      localStorage.setItem('theme', parseThemeToPAB(colors));
+    }
 
-    if (theme) {
-      if (remeberTheme) {
-        localStorage.setItem('theme', name);
-      }
-
-      loadTheme(theme);
-
-      dispatch({
-        type: ActionType.setTheme,
-        payload: theme,
-      });
+    for (const [key, value] of Object.entries(colors)) {
+      document.body.style.setProperty(`--color-${key}`, value);
     }
   };
 
-export const loadTheme = (theme: Theme): void => {
-  for (const [key, value] of Object.entries(theme.colors)) {
-    document.body.style.setProperty(`--color-${key}`, value);
-  }
-};
+export const fetchThemes =
+  () => async (dispatch: Dispatch<FetchThemesAction>) => {
+    try {
+      const res = await axios.get<ApiResponse<Theme[]>>('/api/themes');
+
+      dispatch({
+        type: ActionType.fetchThemes,
+        payload: res.data.data,
+      });
+    } catch (err) {
+      console.log(err);
+    }
+  };

client/src/store/action-types/index.ts

@@ -1,6 +1,7 @@
 export enum ActionType {
   // THEME
   setTheme = 'SET_THEME',
+  fetchThemes = 'FETCH_THEMES',
   // CONFIG
   getConfig = 'GET_CONFIG',
   updateConfig = 'UPDATE_CONFIG',

client/src/store/actions/theme.ts

@@ -3,5 +3,9 @@ import { Theme } from '../../interfaces';
 
 export interface SetThemeAction {
   type: ActionType.setTheme;
-  payload: Theme;
+}
+
+export interface FetchThemesAction {
+  type: ActionType.fetchThemes;
+  payload: Theme[];
 }

client/src/store/reducers/theme.ts

@@ -3,18 +3,11 @@ import { ActionType } from '../action-types';
 import { Theme } from '../../interfaces/Theme';
 
 interface ThemeState {
-  theme: Theme;
+  themes: Theme[];
 }
 
 const initialState: ThemeState = {
-  theme: {
-    name: 'tron',
-    colors: {
-      background: '#242B33',
-      primary: '#EFFBFF',
-      accent: '#6EE2FF',
-    },
-  },
+  themes: [],
 };
 
 export const themeReducer = (
@@ -22,8 +15,9 @@ export const themeReducer = (
   action: Action
 ): ThemeState => {
   switch (action.type) {
-    case ActionType.setTheme:
-      return { theme: action.payload };
+    case ActionType.fetchThemes: {
+      return { themes: action.payload };
+    }
 
     default:
       return state;