Merge pull request #500 from ahslr/web-2.0

changes for handling theme edge-cases
hollaex · Jan 26, 2021 · 91d4242 · 91d4242
2 parents dacb2b4 + 177f083
commit 91d4242
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 4 deletions.
diff --git a/web/src/actions/appActions.js b/web/src/actions/appActions.js
@@ -1,4 +1,5 @@
 import { setLanguage as storeLanguageInBrowser } from '../utils/string';
+import { hasTheme } from 'utils/theme';
 import { DEFAULT_LANGUAGE, LANGUAGE_KEY } from '../config/constants';
 import axios from 'axios';
 
@@ -267,8 +268,9 @@ export const getExchangeInfo = () => {
 				dispatch(setConfig(res.data));
 				if (res.data.defaults) {
 					const themeColor = localStorage.getItem('theme');
+					const isThemeValid = hasTheme(themeColor, res.data.color);
 					const language = localStorage.getItem(LANGUAGE_KEY);
-					if (!themeColor && res.data.defaults.theme) {
+					if (res.data.defaults.theme && (!themeColor || !isThemeValid)) {
 						dispatch(changeTheme(res.data.defaults.theme));
 						localStorage.setItem('theme', res.data.defaults.theme);
 					}

diff --git a/web/src/components/ConfigProvider/index.js b/web/src/components/ConfigProvider/index.js
@@ -119,7 +119,7 @@ class ConfigProvider extends Component {
 			<ProjectConfig.Provider
 				value={{
 					defaults,
-					icons: icons[activeTheme],
+					icons: icons[activeTheme] || {},
 					allIcons: icons,
 					color,
 					themeOptions,

diff --git a/web/src/containers/App/Socket.js b/web/src/containers/App/Socket.js
@@ -46,7 +46,7 @@ import {
 	requestInitial,
 	requestConstant,
 } from '../../actions/appActions';
-
+import { hasTheme } from 'utils/theme';
 import { playBackgroundAudioNotification } from '../../utils/utils';
 import { getToken, isLoggedIn } from '../../utils/token';
 
@@ -139,8 +139,9 @@ class Container extends Component {
 					this.props.setConfig(res.data);
 					if (res.data.defaults) {
 						const themeColor = localStorage.getItem('theme');
+						const isThemeValid = hasTheme(themeColor, res.data.color);
 						const language = localStorage.getItem(LANGUAGE_KEY);
-						if (!themeColor && res.data.defaults.theme) {
+						if (res.data.defaults.theme && (!themeColor || !isThemeValid)) {
 							this.props.changeTheme(res.data.defaults.theme);
 							localStorage.setItem('theme', res.data.defaults.theme);
 						}

diff --git a/web/src/utils/theme.js b/web/src/utils/theme.js
@@ -20,3 +20,8 @@ export const getChatMinimized = () => {
 export const setChatMinimized = (minimized) => {
 	localStorage.setItem(CHAT_STATUS_KEY, minimized);
 };
+
+export const hasTheme = (theme = '', themes = {}) => {
+	const themeKeys = Object.keys(themes);
+	return themeKeys.includes(theme);
+};