Store global settings in localStorage

Signed-off-by: Julius Volz <julius.volz@gmail.com>
This commit is contained in:
Julius Volz 2024-07-17 10:50:32 +02:00
parent b2bf2226df
commit c67b7a7c56
2 changed files with 52 additions and 7 deletions

View file

@ -6,6 +6,7 @@ import {
setCollapsedPools, setCollapsedPools,
updateTargetFilters, updateTargetFilters,
} from "./targetsPageSlice"; } from "./targetsPageSlice";
import { updateSettings } from "./settingsSlice";
const persistToLocalStorage = <T>(key: string, value: T) => { const persistToLocalStorage = <T>(key: string, value: T) => {
localStorage.setItem(key, JSON.stringify(value)); localStorage.setItem(key, JSON.stringify(value));
@ -31,3 +32,20 @@ startAppListening({
persistToLocalStorage(localStorageKeyTargetFilters, payload); persistToLocalStorage(localStorageKeyTargetFilters, payload);
}, },
}); });
startAppListening({
actionCreator: updateSettings,
effect: ({ payload }) => {
Object.entries(payload).forEach(([key, value]) => {
switch (key) {
case "useLocalTime":
case "enableQueryHistory":
case "enableAutocomplete":
case "enableSyntaxHighlighting":
case "enableLinter":
case "showAnnotations":
return persistToLocalStorage(`settings.${key}`, value);
}
});
},
});

View file

@ -1,5 +1,6 @@
import { PayloadAction, createSlice } from "@reduxjs/toolkit"; import { PayloadAction, createSlice } from "@reduxjs/toolkit";
import { useAppSelector } from "./hooks"; import { useAppSelector } from "./hooks";
import { initializeFromLocalStorage } from "./initializeFromLocalStorage";
interface Settings { interface Settings {
consolesLink: string | null; consolesLink: string | null;
@ -19,7 +20,15 @@ declare const GLOBAL_CONSOLES_LINK: string;
declare const GLOBAL_AGENT_MODE: string; declare const GLOBAL_AGENT_MODE: string;
declare const GLOBAL_READY: string; declare const GLOBAL_READY: string;
const initialState: Settings = { export const localStorageKeyUseLocalTime = "settings.useLocalTime";
export const localStorageKeyEnableQueryHistory = "settings.enableQueryHistory";
export const localStorageKeyEnableAutocomplete = "settings.enableAutocomplete";
export const localStorageKeyEnableSyntaxHighlighting =
"settings.enableSyntaxHighlighting";
export const localStorageKeyEnableLinter = "settings.enableLinter";
export const localStorageKeyShowAnnotations = "settings.showAnnotations";
export const initialState: Settings = {
consolesLink: consolesLink:
GLOBAL_CONSOLES_LINK === "CONSOLES_LINK_PLACEHOLDER" || GLOBAL_CONSOLES_LINK === "CONSOLES_LINK_PLACEHOLDER" ||
GLOBAL_CONSOLES_LINK === "" || GLOBAL_CONSOLES_LINK === "" ||
@ -29,12 +38,30 @@ const initialState: Settings = {
agentMode: GLOBAL_AGENT_MODE === "true", agentMode: GLOBAL_AGENT_MODE === "true",
ready: GLOBAL_READY === "true", ready: GLOBAL_READY === "true",
pathPrefix: "", pathPrefix: "",
useLocalTime: false, useLocalTime: initializeFromLocalStorage<boolean>(
enableQueryHistory: false, localStorageKeyUseLocalTime,
enableAutocomplete: true, false
enableSyntaxHighlighting: true, ),
enableLinter: true, enableQueryHistory: initializeFromLocalStorage<boolean>(
showAnnotations: false, localStorageKeyEnableQueryHistory,
false
),
enableAutocomplete: initializeFromLocalStorage<boolean>(
localStorageKeyEnableAutocomplete,
true
),
enableSyntaxHighlighting: initializeFromLocalStorage<boolean>(
localStorageKeyEnableSyntaxHighlighting,
true
),
enableLinter: initializeFromLocalStorage<boolean>(
localStorageKeyEnableLinter,
true
),
showAnnotations: initializeFromLocalStorage<boolean>(
localStorageKeyShowAnnotations,
true
),
}; };
export const settingsSlice = createSlice({ export const settingsSlice = createSlice({