diff --git a/client/src/settings/settings-atoms.ts b/client/src/settings/settings-atoms.ts index 24f95a2e..a777f43a 100644 --- a/client/src/settings/settings-atoms.ts +++ b/client/src/settings/settings-atoms.ts @@ -14,11 +14,17 @@ const settingsStoreAtom = atomWithStorage('lean4web:setting }) /** The settings which are set in the searchParams of the opened URL */ -const settingsUrlAtom = atom((get) => { - const searchParams = get(locationAtom).searchParams - if (!searchParams) return {} - return decodeSettingsFromURL(searchParams) -}) +const settingsUrlAtom = atom( + (get) => { + const searchParams = get(locationAtom).searchParams + if (!searchParams) return {} + return decodeSettingsFromURL(searchParams) + }, + (get, set, val: URLSearchParams) => { + const location = get(locationAtom) + set(locationAtom, { ...location, searchParams: val }) + }, +) /** Needed in order for the `settingsAtom` not to update unless the values from the URL actually change */ const settingsUrlStableAtom = selectAtom(settingsUrlAtom, (settings) => settings, shallowEqual) @@ -58,8 +64,7 @@ export const settingsAtom = atom( } const newSearchParams = inUrl ? encodeSettingsToURL(settingsToStore) : new URLSearchParams() - const location = get(locationAtom) - set(locationAtom, { ...location, searchParams: newSearchParams }) + set(settingsUrlAtom, newSearchParams) }, ) diff --git a/client/src/store/import-atoms.ts b/client/src/store/import-atoms.ts index c59d8344..6679345f 100644 --- a/client/src/store/import-atoms.ts +++ b/client/src/store/import-atoms.ts @@ -18,7 +18,9 @@ export const importUrlBaseAtom = atom() * */ export const importUrlAtom = atom( - (get) => get(urlArgsStableAtom).url ?? get(importUrlBaseAtom), + (get) => { + return get(urlArgsStableAtom).url ?? get(importUrlBaseAtom) + }, (get, set, url: string) => { const urlArgs = get(urlArgsStableAtom) set(importUrlBaseAtom, url) diff --git a/doc/Development.md b/doc/Development.md index 42cb6d28..dd7e357d 100644 --- a/doc/Development.md +++ b/doc/Development.md @@ -40,53 +40,69 @@ The project uses various jotai atoms to describe the internal state. Below is an The colors symbolise outside influence: queries (blue), the page url (orange) or browser storage (green). Red atoms are "setter-only". -Atoms which are considered "prinicipal input" are in a rhomboid. +Atoms which are changed by "user input" displayed as rhomboid. ```mermaid graph TD; + locationAtom + %% getter + subgraph projects + projectsQueryAtom-->projectsAtom + projectsAtom-->defaultProjectAtom; + currentProjectAtom[/currentProjectAtom/] + defaultProjectAtom-->currentProjectAtom; + currentProjectAtom-->visibleProjectsAtom; + projectsAtom-->currentProjectAtom; + projectsAtom-->visibleProjectsAtom; + end + + subgraph settings + settingsUrlAtom-->settingsUrlStableAtom; + settingsAtom[/settingsAtom/] + settingsUrlStableAtom-->settingsAtom; + settingsAtom-->mobileAtom; + settingsBaseAtom<-->settingsAtom; + settingsStoreAtom<-->settingsAtom; + end + urlArgsAtom-->urlArgsStableAtom; urlArgsStableAtom-->importUrlAtom; - importUrlAtom-->importedCodeQueryAtom; - importedCodeQueryAtom-->importedCodeAtom; - projectsQueryAtom-->projectsAtom - projectsAtom-->defaultProjectAtom; - currentProjectAtom[/currentProjectAtom/] - projectsAtom-->currentProjectAtom; - defaultProjectAtom-->currentProjectAtom; - projectsAtom-->visibleProjectsAtom; - currentProjectAtom-->visibleProjectsAtom; - importUrlBaseAtom - importUrlAtom + + subgraph import from url + importUrlAtom-->importedCodeQueryAtom; + importedCodeQueryAtom-->importedCodeAtom; + + importUrlBaseAtom + importUrlAtom + end + codeAtom[/codeAtom/] urlArgsStableAtom-->codeAtom; importedCodeAtom-->codeAtom; - locationAtom-->settingsUrlAtom; - settingsUrlAtom-->settingsUrlStableAtom; - settingsAtom[/settingsAtom/] - settingsUrlStableAtom-->settingsAtom; - settingsAtom-->mobileAtom; + %% getter and setter + locationAtom<-->settingsUrlAtom; locationAtom<-->urlArgsAtom; importUrlBaseAtom<-->importUrlAtom; urlArgsAtom<-->currentProjectAtom; - settingsBaseAtom<-->settingsAtom; - settingsStoreAtom<-->settingsAtom; %% setter - importUrlAtom -.-> urlArgsAtom; - codeAtom -.-> urlArgsAtom; - importUrlBaseAtom <-.-> codeAtom; - settingsAtom -.-> locationAtom; + + urlArgsAtom -.- importUrlAtom; + urlArgsAtom -.settingsAtom, importedCodeAtom.- codeAtom; + importUrlBaseAtom -.- codeAtom; + settingsUrlAtom -.- settingsAtom; setImportUrlAndProjectAtom[/setImportUrlAndProjectAtom/] - importUrlAtom <-.-> setImportUrlAndProjectAtom - currentProjectAtom <-.-> setImportUrlAndProjectAtom + importUrlAtom -.- setImportUrlAndProjectAtom + currentProjectAtom -.- setImportUrlAndProjectAtom %% Styles - linkStyle 16 stroke: red; + linkStyle 9 stroke: red; + linkStyle 10 stroke: red; linkStyle 17 stroke: red; linkStyle 18 stroke: red; linkStyle 19 stroke: red;