From 33a0af1bcd8f1313c418bd7ad0c0bc3427871582 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Sat, 10 Aug 2024 14:20:48 -0500
Subject: [PATCH] feat: state parsing

---
 src/app/tools/embed/[embed]/host/page.tsx | 33 ++++++++++++++++-------
 1 file changed, 24 insertions(+), 9 deletions(-)

diff --git a/src/app/tools/embed/[embed]/host/page.tsx b/src/app/tools/embed/[embed]/host/page.tsx
index 0000f1fb2..78483421f 100644
--- a/src/app/tools/embed/[embed]/host/page.tsx
+++ b/src/app/tools/embed/[embed]/host/page.tsx
@@ -1,8 +1,11 @@
 'use client';
 
-import { Code, Text } from '@radix-ui/themes';
+import { Code, Heading } from '@radix-ui/themes';
+import { useMemo } from 'react';
 import PageWrapper from '../../../../../components/PageWrapper';
+import * as EmbedState from '../../../../../stores/embedState';
 import { configurations } from '../../configurations';
+import { extractEmbedConfigDefaults } from '../../utilities';
 
 export interface EmbedPreviewControllerProps {
   configKey: string;
@@ -15,14 +18,26 @@ export default function Page({
   params: { embed: keyof typeof configurations };
   searchParams: { state: string };
 }) {
-  return (
-    <PageWrapper>
-      <Text>{params.embed}</Text>
+  const config = configurations[params.embed];
+  const initialState = useMemo(
+    () => ({
+      ...extractEmbedConfigDefaults(config),
+      ...(JSON.parse(searchParams.state) as EmbedState.EmbedState),
+    }),
+    [params.embed],
+  );
 
-      <Text></Text>
-      <Code color="gray">
-        <pre>{JSON.stringify(JSON.parse(searchParams['state']), null, 2)}</pre>
-      </Code>
-    </PageWrapper>
+  return (
+    <EmbedState.Provider data={initialState}>
+      <PageWrapper>
+        <Heading>
+          <Code>{params.embed}</Code>
+        </Heading>
+
+        <Code color="gray">
+          <pre>{JSON.stringify(initialState, null, 2)}</pre>
+        </Code>
+      </PageWrapper>
+    </EmbedState.Provider>
   );
 }