From 76e61e1c0f30a00a9ebc19f500b33786375c04e5 Mon Sep 17 00:00:00 2001 From: Egor Zalenski Date: Tue, 12 Nov 2024 21:28:33 +0100 Subject: [PATCH 1/2] #RIVS-6156 - Change theme key of local storage --- redisinsight/ui/src/contexts/themeContext.tsx | 8 +++-- redisinsight/ui/src/electron/utils/index.ts | 1 + .../ui/src/electron/utils/ipcThemeChange.ts | 8 +++++ redisinsight/ui/src/services/storage.ts | 31 ++++++++++++------- redisinsight/ui/src/services/theme.ts | 9 +++--- 5 files changed, 39 insertions(+), 18 deletions(-) create mode 100644 redisinsight/ui/src/electron/utils/ipcThemeChange.ts diff --git a/redisinsight/ui/src/contexts/themeContext.tsx b/redisinsight/ui/src/contexts/themeContext.tsx index 4beccdaa06..5efbcac7fe 100644 --- a/redisinsight/ui/src/contexts/themeContext.tsx +++ b/redisinsight/ui/src/contexts/themeContext.tsx @@ -1,9 +1,10 @@ import React from 'react' +import { ipcThemeChange } from 'uiSrc/electron/utils' import { BrowserStorageItem, Theme, THEMES, THEME_MATCH_MEDIA_DARK } from '../constants' import { localStorageService, themeService } from '../services' interface Props { - children: React.ReactNode; + children: React.ReactNode } const THEME_NAMES = THEMES.map(({ value }) => value) @@ -36,14 +37,15 @@ export class ThemeProvider extends React.Component { } } - getSystemTheme = () => (window.matchMedia && window.matchMedia(THEME_MATCH_MEDIA_DARK).matches ? Theme.Dark : Theme.Light) + getSystemTheme = () => (window.matchMedia?.(THEME_MATCH_MEDIA_DARK)?.matches ? Theme.Dark : Theme.Light) changeTheme = (themeValue: any) => { let actualTheme = themeValue if (themeValue === Theme.System) { actualTheme = this.getSystemTheme() } - window.app?.ipc?.invoke?.('theme:change', themeValue) + + ipcThemeChange(themeValue) this.setState({ theme: actualTheme, usingSystemTheme: themeValue === Theme.System }, () => { themeService.applyTheme(themeValue) diff --git a/redisinsight/ui/src/electron/utils/index.ts b/redisinsight/ui/src/electron/utils/index.ts index 88cd6888b6..30c2ce2318 100644 --- a/redisinsight/ui/src/electron/utils/index.ts +++ b/redisinsight/ui/src/electron/utils/index.ts @@ -2,5 +2,6 @@ import { ipcCheckUpdates, ipcSendEvents } from './ipcCheckUpdates' export * from './ipcAuth' export * from './ipcAppRestart' +export * from './ipcThemeChange' export { ipcCheckUpdates, ipcSendEvents } diff --git a/redisinsight/ui/src/electron/utils/ipcThemeChange.ts b/redisinsight/ui/src/electron/utils/ipcThemeChange.ts new file mode 100644 index 0000000000..1cd1be46b3 --- /dev/null +++ b/redisinsight/ui/src/electron/utils/ipcThemeChange.ts @@ -0,0 +1,8 @@ +import { IpcInvokeEvent } from '../constants' + +export const ipcThemeChange = async (value: string) => { + await window.app?.ipc?.invoke?.( + IpcInvokeEvent.themeChange, + value, + ) +} diff --git a/redisinsight/ui/src/services/storage.ts b/redisinsight/ui/src/services/storage.ts index 2c94db4901..d7834812fb 100644 --- a/redisinsight/ui/src/services/storage.ts +++ b/redisinsight/ui/src/services/storage.ts @@ -1,17 +1,26 @@ import { isObjectLike } from 'lodash' +import { Maybe } from 'uiSrc/utils' import BrowserStorageItem from '../constants/storage' class StorageService { private storage: Storage - constructor(storage: Storage) { + private envKey: Maybe + + constructor(storage: Storage, envKey?: string) { this.storage = storage + this.envKey = envKey + } + + private getKey(itemName: string): string { + return this.envKey ? `${this.envKey}_${itemName}` : itemName } get(itemName: string = '') { + const key = this.getKey(itemName) let item try { - item = this.storage.getItem(itemName) + item = this.storage.getItem(key) } catch (error) { console.error(`getItem from storage error: ${error}`) } @@ -26,16 +35,13 @@ class StorageService { return null } - getAll() { - return this.storage - } - set(itemName: string = '', item: any) { try { + const key = this.getKey(itemName) if (isObjectLike(item)) { - this.storage.setItem(itemName, JSON.stringify(item)) + this.storage.setItem(key, JSON.stringify(item)) } else { - this.storage.setItem(itemName, item) + this.storage.setItem(key, item) } } catch (error) { console.error(`setItem to storage error: ${error}`) @@ -43,11 +49,14 @@ class StorageService { } remove(itemName: string = '') { - this.storage.removeItem(itemName) + const key = this.getKey(itemName) + this.storage.removeItem(key) } } -export const localStorageService = new StorageService(localStorage) -export const sessionStorageService = new StorageService(sessionStorage) +const envKey = window.__RI_PROXY_PATH__ + +export const localStorageService = new StorageService(localStorage, envKey) +export const sessionStorageService = new StorageService(sessionStorage, envKey) export const getObjectStorageField = (itemName = '', field = '') => { try { diff --git a/redisinsight/ui/src/services/theme.ts b/redisinsight/ui/src/services/theme.ts index 8fe84b98a8..976c35c270 100644 --- a/redisinsight/ui/src/services/theme.ts +++ b/redisinsight/ui/src/services/theme.ts @@ -13,17 +13,18 @@ class ThemeService { } applyTheme(newTheme: Theme) { - const actualTheme = newTheme + let actualTheme = newTheme + if (newTheme === Theme.System) { if (window.matchMedia && window.matchMedia(THEME_MATCH_MEDIA_DARK).matches) { - newTheme = Theme.Dark + actualTheme = Theme.Dark } else { - newTheme = Theme.Light + actualTheme = Theme.Light } } const sheet = new CSSStyleSheet() - sheet?.replaceSync(this.themes[newTheme]) + sheet?.replaceSync(this.themes[actualTheme]) document.adoptedStyleSheets = [sheet] From c9c590c486d514e05511f9d55eb67a80b43290fe Mon Sep 17 00:00:00 2001 From: Egor Zalenski Date: Tue, 12 Nov 2024 21:30:27 +0100 Subject: [PATCH 2/2] #RIVS-6156 - Change theme key of local storage --- redisinsight/ui/src/services/theme.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/redisinsight/ui/src/services/theme.ts b/redisinsight/ui/src/services/theme.ts index 976c35c270..66352a6f29 100644 --- a/redisinsight/ui/src/services/theme.ts +++ b/redisinsight/ui/src/services/theme.ts @@ -16,7 +16,7 @@ class ThemeService { let actualTheme = newTheme if (newTheme === Theme.System) { - if (window.matchMedia && window.matchMedia(THEME_MATCH_MEDIA_DARK).matches) { + if (window.matchMedia?.(THEME_MATCH_MEDIA_DARK)?.matches) { actualTheme = Theme.Dark } else { actualTheme = Theme.Light @@ -29,7 +29,7 @@ class ThemeService { document.adoptedStyleSheets = [sheet] localStorageService.set(BrowserStorageItem.theme, actualTheme) - document.body.classList.value = `theme_${newTheme}` + document.body.classList.value = `theme_${actualTheme}` } static getTheme() {