diff --git a/apps/roam/src/components/DiscourseNodeMenu.tsx b/apps/roam/src/components/DiscourseNodeMenu.tsx index d73975c2f..f264240c8 100644 --- a/apps/roam/src/components/DiscourseNodeMenu.tsx +++ b/apps/roam/src/components/DiscourseNodeMenu.tsx @@ -27,6 +27,9 @@ import { getNewDiscourseNodeText } from "~/utils/formatUtils"; import { OnloadArgs } from "roamjs-components/types"; import { formatHexColor } from "./settings/DiscourseNodeCanvasSettings"; import posthog from "posthog-js"; +import { + getPersonalSetting, +} from "~/components/settings/utils/accessors"; type Props = { textarea?: HTMLTextAreaElement; @@ -415,9 +418,10 @@ export const NodeMenuTriggerComponent = ({ const [isActive, setIsActive] = useState(false); const [comboKey, setComboKey] = useState( () => - (extensionAPI.settings.get( - "personal-node-menu-trigger", - ) as IKeyCombo) || { modifiers: 0, key: "" }, + getPersonalSetting(["Personal node menu trigger"]) || { + modifiers: 0, + key: "", + }, ); const handleKeyDown = useCallback( diff --git a/apps/roam/src/components/DiscourseNodeSearchMenu.tsx b/apps/roam/src/components/DiscourseNodeSearchMenu.tsx index 021fc005c..7695730dc 100644 --- a/apps/roam/src/components/DiscourseNodeSearchMenu.tsx +++ b/apps/roam/src/components/DiscourseNodeSearchMenu.tsx @@ -24,8 +24,11 @@ import { OnloadArgs } from "roamjs-components/types"; import getDiscourseNodes, { DiscourseNode } from "~/utils/getDiscourseNodes"; import getDiscourseNodeFormatExpression from "~/utils/getDiscourseNodeFormatExpression"; import { Result } from "~/utils/types"; -import { getSetting } from "~/utils/extensionSettings"; import MiniSearch from "minisearch"; +import { + getPersonalSetting, + setPersonalSetting, +} from "~/components/settings/utils/accessors"; type Props = { textarea: HTMLTextAreaElement; @@ -710,7 +713,7 @@ export const NodeSearchMenuTriggerSetting = ({ }) => { const extensionAPI = onloadArgs.extensionAPI; const [nodeSearchTrigger, setNodeSearchTrigger] = useState( - getSetting("node-search-trigger", "@"), + getPersonalSetting(["Node search menu trigger"]) ?? "@", ); const handleNodeSearchTriggerChange = ( diff --git a/apps/roam/src/components/settings/DefaultFilters.tsx b/apps/roam/src/components/settings/DefaultFilters.tsx index f9daeb85f..b966cad67 100644 --- a/apps/roam/src/components/settings/DefaultFilters.tsx +++ b/apps/roam/src/components/settings/DefaultFilters.tsx @@ -3,6 +3,10 @@ import React, { useEffect, useState } from "react"; import type { OnloadArgs } from "roamjs-components/types"; import type { Filters } from "roamjs-components/components/Filter"; import posthog from "posthog-js"; +import { + getPersonalSetting, + setPersonalSetting, +} from "~/components/settings/utils/accessors"; // // TODO - REWORK THIS COMPONENT @@ -105,10 +109,10 @@ const DefaultFilters = ({ const [filters, setFilters] = useState(() => Object.fromEntries( Object.entries( - (extensionAPI.settings.get("default-filters") as Record< - string, - StoredFilters - >) || {}, + getPersonalSetting>([ + "Query", + "Default filters", + ]) as Record, ).map(([k, v]) => [ k, { @@ -146,7 +150,9 @@ const DefaultFilters = ({ ]), ), ); - }, [filters]); + void extensionAPI.settings.set("default-filters", serialized); + setPersonalSetting(["Query", "Default filters"], serialized); + }, [extensionAPI.settings, filters]); return (
( () => - (extensionAPI.settings.get(settingKey) as IKeyCombo) || { + getPersonalSetting([blockPropKey]) || { modifiers: 0, key: "", }, diff --git a/apps/roam/src/components/settings/QueryPagesPanel.tsx b/apps/roam/src/components/settings/QueryPagesPanel.tsx index f810b1918..eaa23f7bd 100644 --- a/apps/roam/src/components/settings/QueryPagesPanel.tsx +++ b/apps/roam/src/components/settings/QueryPagesPanel.tsx @@ -2,19 +2,16 @@ import { Button, InputGroup } from "@blueprintjs/core"; import posthog from "posthog-js"; import React, { useState } from "react"; import type { OnloadArgs } from "roamjs-components/types"; +import { + getPersonalSetting, + setPersonalSetting, +} from "~/components/settings/utils/accessors"; -export const getQueryPages = (extensionAPI: OnloadArgs["extensionAPI"]) => { - const value = extensionAPI.settings.get("query-pages") as - | string[] - | string - | Record; - return typeof value === "string" - ? [value] - : Array.isArray(value) - ? value - : typeof value === "object" && value !== null - ? Object.keys(value) - : ["queries/*"]; +export const getQueryPages = ( + extensionAPI: OnloadArgs["extensionAPI"], +): string[] => { + void extensionAPI; + return getPersonalSetting(["Query", "Query pages"]) as string[]; }; const QueryPagesPanel = ({ @@ -24,6 +21,11 @@ const QueryPagesPanel = ({ }) => { const [texts, setTexts] = useState(() => getQueryPages(extensionAPI)); const [value, setValue] = useState(""); + const persistQueryPages = (newTexts: string[]) => { + setPersonalSetting(["Query", "Query pages"], newTexts); + void extensionAPI.settings.set("query-pages", newTexts); + }; + return (
{ const newTexts = [...texts, value]; setTexts(newTexts); - extensionAPI.settings.set("query-pages", newTexts); + persistQueryPages(newTexts); setValue(""); posthog.capture("Query Page: Page Format Added", { newType: value, @@ -70,7 +72,7 @@ const QueryPagesPanel = ({ onClick={() => { const newTexts = texts.filter((_, jndex) => index !== jndex); setTexts(newTexts); - extensionAPI.settings.set("query-pages", newTexts); + persistQueryPages(newTexts); }} />
diff --git a/apps/roam/src/components/settings/QuerySettings.tsx b/apps/roam/src/components/settings/QuerySettings.tsx index 121e69c95..e08e790d3 100644 --- a/apps/roam/src/components/settings/QuerySettings.tsx +++ b/apps/roam/src/components/settings/QuerySettings.tsx @@ -4,7 +4,6 @@ import { Label } from "@blueprintjs/core"; import Description from "roamjs-components/components/Description"; import { DEFAULT_PAGE_SIZE_KEY, HIDE_METADATA_KEY } from "~/data/userSettings"; import DefaultFilters from "./DefaultFilters"; -import { getQueryPages } from "./QueryPagesPanel"; import { PersonalFlagPanel, PersonalNumberPanel, @@ -34,9 +33,6 @@ const QuerySettings = ({ title="Default page size" description="The default page size used for query results" settingKeys={["Query", "Default page size"]} - initialValue={ - Number(extensionAPI.settings.get(DEFAULT_PAGE_SIZE_KEY)) || 10 - } onChange={(value) => { void extensionAPI.settings.set(DEFAULT_PAGE_SIZE_KEY, value); posthog.capture("Query Settings: Default Page Size Changed", { @@ -48,7 +44,6 @@ const QuerySettings = ({ title="Query pages" description="The title formats of pages that you would like to serve as pages that generate queries" settingKeys={["Query", "Query pages"]} - initialValue={getQueryPages(extensionAPI)} onChange={(values) => { void extensionAPI.settings.set("query-pages", values); }} diff --git a/apps/roam/src/components/settings/utils/accessors.ts b/apps/roam/src/components/settings/utils/accessors.ts index 9a9c6149f..c96676e49 100644 --- a/apps/roam/src/components/settings/utils/accessors.ts +++ b/apps/roam/src/components/settings/utils/accessors.ts @@ -217,7 +217,8 @@ const getLegacyPersonalLeftSidebarSetting = (): Record => { }; const getLegacyPersonalSetting = (keys: string[]): unknown => { - const mappedOldKey = PERSONAL_OLD_KEY_MAP.get(pathKey(keys)); + const path = pathKey(keys); + const mappedOldKey = PERSONAL_OLD_KEY_MAP.get(path); if (mappedOldKey) { return getSetting( mappedOldKey, diff --git a/apps/roam/src/utils/initializeObserversAndListeners.ts b/apps/roam/src/utils/initializeObserversAndListeners.ts index c5f431c97..44e1fc916 100644 --- a/apps/roam/src/utils/initializeObserversAndListeners.ts +++ b/apps/roam/src/utils/initializeObserversAndListeners.ts @@ -51,7 +51,6 @@ import { import { renderNodeTagPopupButton } from "./renderNodeTagPopup"; import { renderImageToolsMenu } from "./renderImageToolsMenu"; import { formatHexColor } from "~/components/settings/DiscourseNodeCanvasSettings"; -import { getSetting } from "./extensionSettings"; import { mountLeftSidebar } from "~/components/LeftSidebarView"; import { getUidAndBooleanSetting } from "./getExportSettings"; import { getCleanTagText } from "~/components/settings/NodeConfig"; @@ -263,12 +262,13 @@ export const initObservers = async ({ key: "trigger", defaultValue: "\\", }).trim(); - const personalTriggerCombo = - (onloadArgs.extensionAPI.settings.get( - "personal-node-menu-trigger", - ) as IKeyCombo) || undefined; + const personalTriggerCombo = getPersonalSetting([ + "Personal node menu trigger", + ]); const personalTrigger = personalTriggerCombo?.key; - const personalModifiers = getModifiersFromCombo(personalTriggerCombo); + const personalModifiers = personalTriggerCombo + ? getModifiersFromCombo(personalTriggerCombo) + : []; const leftSidebarObserver = createHTMLObserver({ tag: "DIV", @@ -330,7 +330,8 @@ export const initObservers = async ({ } }; - const customTrigger = getSetting("node-search-trigger", "@"); + const customTrigger = + getPersonalSetting(["Node search menu trigger"]) ?? "@"; const discourseNodeSearchTriggerListener = (e: Event) => { const evt = e as KeyboardEvent; diff --git a/apps/roam/src/utils/setQueryPages.ts b/apps/roam/src/utils/setQueryPages.ts index f851879e5..00fc9954c 100644 --- a/apps/roam/src/utils/setQueryPages.ts +++ b/apps/roam/src/utils/setQueryPages.ts @@ -1,18 +1,15 @@ import { OnloadArgs } from "roamjs-components/types"; +import { + getPersonalSetting, + setPersonalSetting, +} from "~/components/settings/utils/accessors"; export const setQueryPages = (onloadArgs: OnloadArgs) => { - const queryPages = onloadArgs.extensionAPI.settings.get("query-pages"); - const queryPageArray = Array.isArray(queryPages) - ? queryPages - : typeof queryPages === "object" - ? [] - : typeof queryPages === "string" && queryPages - ? [queryPages] - : []; + const queryPages = getPersonalSetting(["Query", "Query pages"]); + const queryPageArray = Array.isArray(queryPages) ? queryPages : []; if (!queryPageArray.includes("discourse-graph/queries/*")) { - onloadArgs.extensionAPI.settings.set("query-pages", [ - ...queryPageArray, - "discourse-graph/queries/*", - ]); + const updated = [...queryPageArray, "discourse-graph/queries/*"]; + void onloadArgs.extensionAPI.settings.set("query-pages", updated); + setPersonalSetting(["Query", "Query pages"], updated); } };