From 177f08355a8faa106b132ecb97117f276a6d9953 Mon Sep 17 00:00:00 2001
From: Amir Hossein Salar <ah.salar@gmail.com>
Date: Tue, 26 Jan 2021 13:39:20 +0330
Subject: [PATCH] changes for handling theme edge-cases

---
 web/src/actions/appActions.js              | 4 +++-
 web/src/components/ConfigProvider/index.js | 2 +-
 web/src/containers/App/Socket.js           | 5 +++--
 web/src/utils/theme.js                     | 5 +++++
 4 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/web/src/actions/appActions.js b/web/src/actions/appActions.js
index aab7e0f036..ded329c128 100644
--- 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
index 91230e9691..209efb5aee 100644
--- 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
index 676570d83d..75f7d2c3b6 100644
--- 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
index b7695f810c..fc3078c07a 100644
--- 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);
+};