WeatherIcon. Small changes to theme state

client/src/store/actions/actionTypes.ts

@@ -1,6 +1,6 @@
 import {
   GetAppsAction,
-  SetTheme,
+  SetThemeAction,
   PinAppAction,
   AddAppAction,
   DeleteAppAction
@@ -17,4 +17,4 @@ export enum ActionTypes {
   deleteApp = 'DELETE_APP'
 }
 
-export type Action = GetAppsAction<any> | SetTheme | PinAppAction | AddAppAction | DeleteAppAction;
+export type Action = GetAppsAction<any> | SetThemeAction | PinAppAction | AddAppAction | DeleteAppAction;

client/src/store/actions/theme.ts

@@ -3,9 +3,9 @@ import { themes } from '../../components/Themer/themes.json';
 import { Theme } from '../../interfaces/Theme';
 import { ActionTypes } from './actionTypes';
 
-export interface SetTheme {
+export interface SetThemeAction {
   type: ActionTypes.setTheme,
-  payload: string
+  payload: Theme
 }
 
 export const setTheme = (themeName: string) => (dispatch: Dispatch) => {
@@ -15,14 +15,14 @@ export const setTheme = (themeName: string) => (dispatch: Dispatch) => {
     localStorage.setItem('theme', themeName);
     loadTheme(theme);
 
-    dispatch<SetTheme>({
+    dispatch<SetThemeAction>({
       type: ActionTypes.setTheme,
-      payload: themeName
+      payload: theme
     })
   }
 }
 
-export const loadTheme = (theme: Theme) => {
+export const loadTheme = (theme: Theme): void => {
   for (const [key, value] of Object.entries(theme.colors)) {
     document.body.style.setProperty(`--color-${key}`, value);
   }

client/src/store/reducers/theme.ts

@@ -1,20 +1,24 @@
 import { ActionTypes, Action } from '../actions';
+import { Theme } from '../../interfaces/Theme';
 
 export interface State {
-  theme: string;
+  theme: Theme;
 }
 
 const initialState: State = {
-  theme: 'blues'
-}
-
-const setTheme = (state: State, action: Action): State => {
-  return { theme: action.payload };
+  theme: {
+    name: 'blues',
+    colors: {
+      background: '#2B2C56',
+      primary: '#EFF1FC',
+      accent: '#6677EB'
+    }
+  }
 }
 
 const themeReducer = (state = initialState, action: Action) => {
   switch (action.type) {
-    case ActionTypes.setTheme: return setTheme(state, action);
+    case ActionTypes.setTheme: return { theme: action.payload };
     default: return state;
   }
 }