Pass current state to peek modals when opening them via query param

This commit is contained in:
Andrew Kingston 2021-12-15 08:55:22 +00:00
parent d58b1ae7f0
commit 26d89f75d5
3 changed files with 32 additions and 9 deletions

View File

@ -1,8 +1,9 @@
<script> <script>
import { setContext, getContext } from "svelte" import { setContext, getContext, onMount } from "svelte"
import Router, { querystring } from "svelte-spa-router" import Router, { querystring } from "svelte-spa-router"
import { routeStore } from "stores" import { routeStore, stateStore } from "stores"
import Screen from "./Screen.svelte" import Screen from "./Screen.svelte"
import { get } from "svelte/store"
const { styleable } = getContext("sdk") const { styleable } = getContext("sdk")
const component = getContext("component") const component = getContext("component")
@ -17,15 +18,17 @@
} }
// Keep query params up to date // Keep query params up to date
$: { $: routeStore.actions.setQueryParams(parseQueryString($querystring))
const parseQueryString = query => {
let queryParams = {} let queryParams = {}
if ($querystring) { if (query) {
const urlSearchParams = new URLSearchParams($querystring) const urlSearchParams = new URLSearchParams(query)
for (const [key, value] of urlSearchParams) { for (const [key, value] of urlSearchParams) {
queryParams[key] = value queryParams[key] = value
} }
} }
routeStore.actions.setQueryParams(queryParams) return queryParams
} }
const getRouterConfig = routes => { const getRouterConfig = routes => {
@ -42,6 +45,19 @@
const onRouteLoading = ({ detail }) => { const onRouteLoading = ({ detail }) => {
routeStore.actions.setActiveRoute(detail.route) routeStore.actions.setActiveRoute(detail.route)
} }
// Initialise state store from query string on initial load
onMount(() => {
const queryParams = parseQueryString(get(querystring))
if (queryParams.state) {
try {
const state = JSON.parse(atob(queryParams.state))
stateStore.actions.initialise(state)
} catch (error) {
// Swallow error and do nothing
}
}
})
</script> </script>
{#key config.id} {#key config.id}

View File

@ -1,4 +1,5 @@
import { writable } from "svelte/store" import { writable, get } from "svelte/store"
import { stateStore } from "./state.js"
const initialState = { const initialState = {
showPeek: false, showPeek: false,
@ -14,7 +15,10 @@ const createPeekStore = () => {
let href = url let href = url
let external = !url.startsWith("/") let external = !url.startsWith("/")
if (!external) { if (!external) {
href = `${window.location.href.split("#")[0]}#${url}?peek=true` const state = get(stateStore)
const serialised = encodeURIComponent(btoa(JSON.stringify(state)))
const query = `peek=true&state=${serialised}`
href = `${window.location.href.split("#")[0]}#${url}?${query}`
} }
store.set({ store.set({
showPeek: true, showPeek: true,

View File

@ -34,6 +34,9 @@ const createStateStore = () => {
}) })
} }
// Initialises the temporary state store with a certain value
const initialise = tempStore.set
// Derive the combination of both persisted and non persisted stores // Derive the combination of both persisted and non persisted stores
const store = derived( const store = derived(
[tempStore, persistentStore], [tempStore, persistentStore],
@ -47,7 +50,7 @@ const createStateStore = () => {
return { return {
subscribe: store.subscribe, subscribe: store.subscribe,
actions: { setValue, deleteValue }, actions: { setValue, deleteValue, initialise },
} }
} }