Website/db/app/core/state/GlobalState.ts
Mangiang 959c5fb0a6
Some checks failed
continuous-integration/drone/push Build is failing
fix: Fix theme handling
2021-12-19 12:51:52 -05:00

123 lines
4.8 KiB
TypeScript

import { ThemeKeys } from 'react-json-view'
import create from 'zustand'
// import { getLocaleList } from '../dataaccess/ItemBackend'
import { LocalStorageKeys, SessionStorageKeys } from '../dto/SaveKeys'
import { ItemHierarchy } from '../dto/ItemHierarchy'
import { ReactJsonViewThemes } from './ReactJsonViewThemes'
import { ThemeMode } from './ThemeMode'
import { ItemWithLocale } from '../dto/ItemWithLocale';
const getLocaleList = async () => {
return null;
}
export interface GlobalState {
sptarkovWebsiteUrl: string
sptarkovWorkshopUrl: string
sptarkovDocumentationUrl: string
preferedLocale: string
setPreferedLocale: (newLocale: string) => void
localesList: string[]
refreshLocalesList: () => void
preferedJsonViewerTheme: ThemeKeys
setPreferedJsonViewerTheme: (newJsonTheme: string) => void
preferedColorScheme: string
setPreferedColorScheme: (newColorScheme: ThemeMode) => void
searchInput: string
setSearchInput: (newInput: string) => void
desiredSearchInput: string
setDesiredSearchInput: (newInput: string) => void
itemsHierarchy: ItemHierarchy
initHierarchy: () => void
setHierarchy: (newHierarchy: ItemHierarchy) => void
selectedItem: ItemWithLocale | undefined
setSelectedItem: (newSelectedItem: ItemWithLocale | undefined) => void
}
const isClientSide = () => typeof window == 'object' || typeof window !== 'undefined';
const preferedLocale = isClientSide() ? localStorage?.getItem(LocalStorageKeys.PREFERED_LOCALE) : null
const storedPreferedJsonTheme = isClientSide() ? localStorage?.getItem(
LocalStorageKeys.PREFERED_JSON_THEME,
) : ThemeMode.DARK_MODE;
const preferedColorScheme = isClientSide() ? localStorage?.getItem(LocalStorageKeys.PREFERED_COLOR_SCHEME) : null;
export const useGlobalState = create<GlobalState>((set) => ({
sptarkovWebsiteUrl: process.env.REACT_APP_SPTARKOV_HOME ? process.env.REACT_APP_SPTARKOV_HOME : '',
sptarkovWorkshopUrl: process.env.REACT_APP_SPTARKOV_WORKSHOP ? process.env.REACT_APP_SPTARKOV_WORKSHOP : '',
sptarkovDocumentationUrl: process.env.REACT_APP_SPTARKOV_DOCUMENTATION ? process.env.REACT_APP_SPTARKOV_DOCUMENTATION : '',
// Locale
preferedLocale: preferedLocale ? preferedLocale : 'en',
setPreferedLocale: (newLocale: string) => {
if (isClientSide())
localStorage?.setItem(LocalStorageKeys.PREFERED_LOCALE, newLocale)
set((_state) => ({ preferedLocale: newLocale }))
},
localesList: [],
refreshLocalesList: async () => {
const locales = isClientSide() ? sessionStorage?.getItem(SessionStorageKeys.LOCALES) : "[en]";
const localesList = locales !== null && locales !== undefined && locales !== 'undefined' && locales !== 'null' ? JSON.parse(locales) : await getLocaleList()
if (!locales && isClientSide()) sessionStorage?.setItem(SessionStorageKeys.LOCALES, JSON.stringify(localesList ? localesList : null))
set((_state) => ({ localesList: localesList ? localesList : [] }))
},
// Json viewer theme
preferedJsonViewerTheme:
storedPreferedJsonTheme &&
ReactJsonViewThemes.includes(storedPreferedJsonTheme)
? (storedPreferedJsonTheme as ThemeKeys)
: (ReactJsonViewThemes[0] as ThemeKeys),
setPreferedJsonViewerTheme: (newJsonTheme: string) => {
if (isClientSide()) localStorage?.setItem(LocalStorageKeys.PREFERED_JSON_THEME, newJsonTheme)
set((_state) => ({ preferedJsonViewerTheme: newJsonTheme as ThemeKeys }))
},
// Prefered theme
preferedColorScheme: preferedColorScheme
? preferedColorScheme
: ThemeMode.DARK_MODE,
setPreferedColorScheme: (newColorScheme: ThemeMode) => {
if (isClientSide()) localStorage?.setItem(LocalStorageKeys.PREFERED_COLOR_SCHEME, newColorScheme)
set((_state) => ({ preferedColorScheme: newColorScheme }))
},
// SearchInput
searchInput: '',
setSearchInput: (newInput: string) =>
set((_state) => ({ searchInput: newInput })),
desiredSearchInput: '',
setDesiredSearchInput: (newInput: string) =>
set((_state) => ({ desiredSearchInput: newInput })),
// Hierarchy
itemsHierarchy: {},
initHierarchy: () => {
const itemsHierarchy = isClientSide() ? sessionStorage?.getItem(SessionStorageKeys.ITEMS_HIERARCHY) : "{}";
if (itemsHierarchy !== null && itemsHierarchy !== undefined && itemsHierarchy !== 'undefined') {
set((_state) => ({ itemsHierarchy: JSON.parse(itemsHierarchy) }))
}
},
setHierarchy: (newHierarchy: ItemHierarchy) => {
set((state) => {
const newStateHierarchy = Object.assign({}, state.itemsHierarchy, newHierarchy);
if (isClientSide()) sessionStorage?.setItem(SessionStorageKeys.ITEMS_HIERARCHY, JSON.stringify(newStateHierarchy ? newStateHierarchy : null))
return ({
itemsHierarchy: newStateHierarchy,
})
});
},
// Selected item
selectedItem: undefined,
setSelectedItem: (newSelectedItem: ItemWithLocale | undefined) =>
set((_state) => ({ selectedItem: newSelectedItem })),
}))