diff --git a/lib/page-with-shareable-state.tsx b/lib/page-with-shareable-state.tsx index bb46d92..1003030 100644 --- a/lib/page-with-shareable-state.tsx +++ b/lib/page-with-shareable-state.tsx @@ -1,5 +1,6 @@ import React, { useCallback, useContext, useEffect, useState } from "react"; import { PageContext, PAGE_QUERY_ARG } from "./page"; +import type { PageName } from "./pages"; export type ComponentWithShareableStateProps = { /** The default state to use when the component is first rendered. */ @@ -34,6 +35,16 @@ export type PageWithShareableStateOptions = { /** The query string argument that will store the serialized state. */ export const STATE_QUERY_ARG = "s"; +export function createPageWithStateSearchParams( + page: PageName, + state: string +): URLSearchParams { + const search = new URLSearchParams(); + search.set(PAGE_QUERY_ARG, page); + search.set(STATE_QUERY_ARG, state); + return search; +} + /** * Create a component that represents a page which exposes some * aspect of its state in the current URL, so that it can be @@ -86,9 +97,7 @@ export function createPageWithShareableState({ (value: T) => { const newState = serialize(value); if (state !== newState) { - const newSearch = new URLSearchParams(); - newSearch.set(PAGE_QUERY_ARG, currPage); - newSearch.set(STATE_QUERY_ARG, newState); + const newSearch = createPageWithStateSearchParams(currPage, newState); setIsInOnChange(true); setLatestState(newState); pushState("?" + newSearch.toString()); diff --git a/lib/pages/gallery-page.tsx b/lib/pages/gallery-page.tsx index 44069a3..7cd7e2e 100644 --- a/lib/pages/gallery-page.tsx +++ b/lib/pages/gallery-page.tsx @@ -1,9 +1,24 @@ import React, { useContext, useEffect, useState } from "react"; import { GalleryComposition, GalleryContext } from "../gallery-context"; import { Page } from "../page"; +import { createPageWithStateSearchParams } from "../page-with-shareable-state"; + +function compositionRemixUrl(comp: GalleryComposition): string { + return ( + "?" + + createPageWithStateSearchParams(comp.kind, comp.serializedValue).toString() + ); +} const GalleryCompositionView: React.FC = (props) => { - return

{props.title}

; + return ( +

+ + {props.title} + {" "} + {props.kind} by {props.ownerName} +

+ ); }; export const GalleryPage: React.FC<{}> = () => {