Fixed color of weather icon when changing theme

client/src/components/UI/Icons/WeatherIcon/WeatherIcon.tsx

@@ -10,7 +10,7 @@ interface Props {
 }
 
 export const WeatherIcon = (props: Props): JSX.Element => {
-  const { theme } = useSelector((state: State) => state.theme);
+  const { activeTheme } = useSelector((state: State) => state.theme);
 
   const icon = props.isDay
     ? new IconMapping().mapIcon(props.weatherStatusCode, TimeOfDay.day)
@@ -18,7 +18,7 @@ export const WeatherIcon = (props: Props): JSX.Element => {
 
   useEffect(() => {
     const delay = setTimeout(() => {
-      const skycons = new Skycons({ color: theme.colors.accent });
+      const skycons = new Skycons({ color: activeTheme.colors.accent });
       skycons.add(`weather-icon`, icon);
       skycons.play();
     }, 1);
@@ -26,7 +26,7 @@ export const WeatherIcon = (props: Props): JSX.Element => {
     return () => {
       clearTimeout(delay);
     };
-  }, [props.weatherStatusCode, icon, theme.colors.accent]);
+  }, [props.weatherStatusCode, icon, activeTheme.colors.accent]);
 
   return <canvas id={`weather-icon`} width="50" height="50"></canvas>;
 };

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

@@ -7,7 +7,7 @@ import {
   UpdateConfigAction,
   UpdateQueryAction,
 } from '../actions/config';
-import axios from 'axios';
+import axios, { AxiosError } from 'axios';
 import { ApiResponse, Config, Query } from '../../interfaces';
 import { ActionType } from '../action-types';
 import { storeUIConfig, applyAuth } from '../../utility';
@@ -103,7 +103,15 @@ export const addQuery =
         payload: res.data.data,
       });
     } catch (err) {
-      console.log(err);
+      const error = err as AxiosError<{ error: string }>;
+
+      dispatch<any>({
+        type: ActionType.createNotification,
+        payload: {
+          title: 'Error',
+          message: error.response?.data.error,
+        },
+      });
     }
   };
 

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

@@ -15,6 +15,11 @@ export const setTheme =
     for (const [key, value] of Object.entries(colors)) {
       document.body.style.setProperty(`--color-${key}`, value);
     }
+
+    dispatch({
+      type: ActionType.setTheme,
+      payload: colors,
+    });
   };
 
 export const fetchThemes =
@@ -30,3 +35,33 @@ export const fetchThemes =
       console.log(err);
     }
   };
+
+// export const addTheme = () => async (dispatch: Dispatch<>) => {
+//   try {
+//     // const res = await axios.post<>('/api/themes')
+//   } catch (err) {}
+// };
+
+// export const addQuery =
+// (query: Query) => async (dispatch: Dispatch<AddQueryAction>) => {
+//   try {
+//     const res = await axios.post<ApiResponse<Query>>('/api/queries', query, {
+//       headers: applyAuth(),
+//     });
+
+//     dispatch({
+//       type: ActionType.addQuery,
+//       payload: res.data.data,
+//     });
+//   } catch (err) {
+//     const error = err as AxiosError<{ error: string }>;
+
+//     dispatch<any>({
+//       type: ActionType.createNotification,
+//       payload: {
+//         title: 'Error',
+//         message: error.response?.data.error,
+//       },
+//     });
+//   }
+// };

client/src/store/actions/theme.ts

@@ -1,8 +1,9 @@
 import { ActionType } from '../action-types';
-import { Theme } from '../../interfaces';
+import { Theme, ThemeColors } from '../../interfaces';
 
 export interface SetThemeAction {
   type: ActionType.setTheme;
+  payload: ThemeColors;
 }
 
 export interface FetchThemesAction {

client/src/store/reducers/theme.ts

@@ -1,14 +1,28 @@
 import { Action } from '../actions';
 import { ActionType } from '../action-types';
-import { Theme } from '../../interfaces/Theme';
+import { Theme, ThemeColors } from '../../interfaces/Theme';
-import { arrayPartition } from '../../utility';
+import { arrayPartition, parsePABToTheme } from '../../utility';
 
 interface ThemeState {
+  activeTheme: Theme;
   themes: Theme[];
   userThemes: Theme[];
 }
 
+const savedTheme: ThemeColors = parsePABToTheme(localStorage.theme) || {
+  primary: '#effbff',
+  accent: '#6ee2ff',
+  background: '#242b33',
+};
+
 const initialState: ThemeState = {
+  activeTheme: {
+    name: 'main',
+    isCustom: false,
+    colors: {
+      ...savedTheme,
+    },
+  },
   themes: [],
   userThemes: [],
 };
@@ -18,6 +32,16 @@ export const themeReducer = (
   action: Action
 ): ThemeState => {
   switch (action.type) {
+    case ActionType.setTheme: {
+      return {
+        ...state,
+        activeTheme: {
+          ...state.activeTheme,
+          colors: action.payload,
+        },
+      };
+    }
+
     case ActionType.fetchThemes: {
       const [themes, userThemes] = arrayPartition<Theme>(
         action.payload,