PESPA Counter

P229:[{"_244":43,"_245":47,"_246":247},"app1","app2","diffPatch","diff --git a/index.js b/index.js\nindex 49baa65..c10df45 100644\n--- a/index.js\n+++ b/index.js\n@@ -3,24 +3,16 @@ import { serve } from '@hono/node-server'\n import { serveStatic } from '@hono/node-server/serve-static'\n import closeWithGrace from 'close-with-grace'\n import { Hono } from 'hono'\n+import { createElement as h } from 'react'\n+import { renderToStaticMarkup } from 'react-dom/server'\n import * as db from './db.js'\n+import { Counter } from './ui/counter.js'\n+import * as framework from './ui/framework.js'\n \n const PORT = Number(process.env.PORT ?? 3000)\n \n const app = new Hono({ strict: true })\n \n-app.get('/count', async (c) => {\n-\tconst count = await db.getCount()\n-\treturn c.json({ count })\n-})\n-\n-app.post('/update-count', async (c) => {\n-\tconst body = await c.req.json()\n-\tconst change = Number(body.change)\n-\tconst updatedCount = await db.changeCount(change)\n-\treturn c.json({ count: updatedCount })\n-})\n-\n app.use(\n \t'/ui/*',\n \tserveStatic({\n@@ -29,17 +21,51 @@ app.use(\n \t}),\n )\n \n-app.use(\n-\t'/*',\n-\tserveStatic({\n-\t\troot: './public',\n-\t\tindex: 'index.html',\n-\t}),\n-)\n+app.get('/data', async (c) => {\n+\tconst data = await framework.handleLoaderRequest(c.req)\n+\treturn c.json(data)\n+})\n+\n+app.get('/*', async (c) => {\n+\tconst initialData = await framework.handleLoaderRequest(c.req)\n+\tconst appHtml = renderToStaticMarkup(\n+\t\th(framework.FrameworkProvider, { initialData }, h(Counter)),\n+\t)\n+\tconst html = `\n+\t\t\n+\t\t\n+\t\t\t\n+\t\t\t\t\n+\t\t\t\t\n+\t\t\t\tPESPA Counter\n+\t\t\t\t\n+\t\t\t\n+\t\t\t\n+\t\t\t\t

${appHtml}

\n+\t\t\t\t\n+\t\t\t\t\n+\t\t\t\n+\t\t\n+\t`\n+\treturn c.html(html)\n+})\n+\n+app.post('/*', async (c) => {\n+\tconst response = await framework.handleActionRequest(c.req)\n \n-app.get('*', async (c) => {\n-\tconst html = await fs.readFile('./public/index.html', 'utf8')\n-\treturn c.html(html, 200)\n+\tif (c.req.header('Accept')?.includes('text/html')) {\n+\t\treturn c.redirect(c.req.url)\n+\t} else {\n+\t\treturn c.json(response)\n+\t}\n })\n \n const server = serve({ fetch: app.fetch, port: PORT }, (info) => {\ndiff --git a/package.json b/package.json\nindex 98962a8..ac5173e 100644\n--- a/package.json\n+++ b/package.json\n@@ -1,5 +1,5 @@\n {\n- \"name\": \"exercises_02.early-react_02.solution.spa\",\n+ \"name\": \"exercises_03.framework-react_01.problem.pespa\",\n \"version\": \"1.0.0\",\n \"main\": \"index.js\",\n \"type\": \"module\",\n@@ -14,7 +14,9 @@\n \"dependencies\": {\n \"@hono/node-server\": \"^1.16.0\",\n \"close-with-grace\": \"^2.2.0\",\n- \"hono\": \"^4.8.5\"\n+ \"hono\": \"^4.8.5\",\n+ \"react\": \"19.0.0-beta-94eed63c49-20240425\",\n+ \"react-dom\": \"19.0.0-beta-94eed63c49-20240425\"\n },\n \"devDependencies\": {\n \"@types/node\": \"^24.0.14\"\ndiff --git a/public/index.html b/public/index.html\ndeleted file mode 100644\nindex 7cb6716..0000000\n--- a/public/index.html\n+++ /dev/null\n@@ -1,21 +0,0 @@\n-\n-\n-\t\n-\t\t\n-\t\t\n-\t\tSPA Counter\n-\t\t\n-\t\n-\t\n-\t\t

\n-\t\t\n-\t\n-\ndiff --git a/ui/counter.js b/ui/counter.js\nindex c95d020..495ed75 100644\n--- a/ui/counter.js\n+++ b/ui/counter.js\n@@ -1,76 +1,47 @@\n-import { createElement as h, useReducer, useEffect } from 'react'\n+import { createElement as h } from 'react'\n+import { useLoaderData, useFetcher } from './framework.js'\n \n-function countReducer(state, action) {\n-\tswitch (action.type) {\n-\t\tcase 'FETCH_START':\n-\t\tcase 'UPDATE_START': {\n-\t\t\treturn { ...state, loading: true, error: null }\n-\t\t}\n-\t\tcase 'FETCH_SUCCESS':\n-\t\tcase 'UPDATE_SUCCESS': {\n-\t\t\treturn { ...state, count: action.payload, loading: false, error: null }\n-\t\t}\n-\t\tcase 'FETCH_ERROR':\n-\t\tcase 'UPDATE_ERROR': {\n-\t\t\treturn { ...state, loading: false, error: action.payload }\n-\t\t}\n-\t\tdefault: {\n-\t\t\tthrow new Error(`Invalid action type ${action.type}`)\n-\t\t}\n-\t}\n+export async function loader() {\n+\t// 🐨 dynamically import the ../db.js module (so it doesn't show up on the client)\n+\t// 🐨 return the count by awaiting db.getCount()\n+\treturn { count: 'TODO' }\n }\n \n-export function Counter() {\n-\tconst [state, dispatch] = useReducer(countReducer, {\n-\t\tcount: null,\n-\t\tloading: true,\n-\t\terror: null,\n-\t})\n-\n-\tuseEffect(() => {\n-\t\tasync function fetchCount() {\n-\t\t\tdispatch({ type: 'FETCH_START' })\n-\t\t\ttry {\n-\t\t\t\tconst response = await fetch('/count')\n-\t\t\t\tif (!response.ok) throw new Error('Failed to fetch count')\n-\t\t\t\tconst data = await response.json()\n-\t\t\t\tdispatch({ type: 'FETCH_SUCCESS', payload: data.count })\n-\t\t\t} catch (err) {\n-\t\t\t\tdispatch({ type: 'FETCH_ERROR', payload: err.message })\n-\t\t\t}\n-\t\t}\n-\n-\t\tfetchCount()\n-\t}, [])\n-\n-\tasync function updateCount(change) {\n-\t\tdispatch({ type: 'UPDATE_START' })\n-\t\ttry {\n-\t\t\tconst response = await fetch('/update-count', {\n-\t\t\t\tmethod: 'POST',\n-\t\t\t\tbody: JSON.stringify({ change }),\n-\t\t\t\theaders: { 'Content-Type': 'application/json' },\n-\t\t\t})\n-\t\t\tif (!response.ok) throw new Error('Failed to update count')\n-\t\t\tconst { count } = await response.json()\n-\t\t\tdispatch({ type: 'UPDATE_SUCCESS', payload: count })\n-\t\t} catch (err) {\n-\t\t\tdispatch({ type: 'UPDATE_ERROR', payload: err.message })\n-\t\t}\n-\t}\n-\n-\tif (state.loading && state.count === null) return h('div', null, 'Loading...')\n-\tif (state.error) return h('div', null, 'Error: ' + state.error)\n+export async function action({ request }) {\n+\t// 🐨 dynamically import the ../db.js module (so it doesn't show up on the client)\n+\t// 🐨 parse the form data\n+\t// 🐨 get the change from the form data and turn it into a number\n+\t// 🐨 update the count in the database by awaiting db.changeCount\n+\t// 🐨 return the success status\n+\treturn { success: true }\n+}\n \n+export function Counter() {\n+\t// 🐨 use the useLoaderData() hook to get the data from the loader\n+\tconst data = { count: 'TODO' }\n+\t// 🐨 use the useFetcher hook to get the fetcher from the framework (no action path necessary)\n \treturn h(\n \t\t'div',\n \t\tnull,\n-\t\th('h1', null, 'Count: ' + state.count),\n+\t\th(\n+\t\t\t'form', // 🐨 switch this 'form' to fetcher.Form\n+\t\t\t{ method: 'POST', action: '/counter' },\n+\t\t\th('h1', null, 'Count: ' + data.count),\n \t\t\th(\n \t\t\t\t'div',\n-\t\t\t{ style: { opacity: state.loading ? 0.6 : 1 } },\n-\t\t\th('button', { onClick: () => updateCount(-1) }, 'Decrement'),\n-\t\t\th('button', { onClick: () => updateCount(1) }, 'Increment'),\n+\t\t\t\t// 🐨 update this to use the fetcher.isPending property\n+\t\t\t\t{ style: { opacity: false ? 0.6 : 1 } },\n+\t\t\t\th(\n+\t\t\t\t\t'button',\n+\t\t\t\t\t{ type: 'submit', name: 'change', value: '-1' },\n+\t\t\t\t\t'Decrement',\n+\t\t\t\t),\n+\t\t\t\th(\n+\t\t\t\t\t'button',\n+\t\t\t\t\t{ type: 'submit', name: 'change', value: '1' },\n+\t\t\t\t\t'Increment',\n+\t\t\t\t),\n+\t\t\t),\n \t\t),\n \t)\n }\ndiff --git a/ui/framework.js b/ui/framework.js\nnew file mode 100644\nindex 0000000..a8e9b88\n--- /dev/null\n+++ b/ui/framework.js\n@@ -0,0 +1,83 @@\n+import {\n+\tcreateElement as h,\n+\tcreateContext,\n+\tuseContext,\n+\tuseState,\n+\tuseMemo,\n+\tuseTransition,\n+} from 'react'\n+\n+export const FrameworkContext = createContext()\n+\n+export function FrameworkProvider({ children, initialData }) {\n+\tconst [data, setData] = useState(initialData)\n+\n+\tasync function revalidate() {\n+\t\tconst response = await fetch('/data')\n+\t\tconst data = await response.json()\n+\t\tsetData(data)\n+\t}\n+\n+\treturn h(FrameworkContext.Provider, { value: { revalidate, data } }, children)\n+}\n+\n+export function useFetcher() {\n+\tconst framework = useContext(FrameworkContext)\n+\tconst [isPending, startTransition] = useTransition()\n+\tconst [data, setData] = useState()\n+\n+\tconst Form = useMemo(\n+\t\t() =>\n+\t\t\tfunction Form(props) {\n+\t\t\t\tconst framework = useContext(FrameworkContext)\n+\n+\t\t\t\treturn h('form', {\n+\t\t\t\t\t...props,\n+\t\t\t\t\tonSubmit: async (event) => {\n+\t\t\t\t\t\tstartTransition(async () => {\n+\t\t\t\t\t\t\tevent.preventDefault()\n+\t\t\t\t\t\t\tconst form = event.currentTarget\n+\n+\t\t\t\t\t\t\tconst formData = new FormData(form)\n+\n+\t\t\t\t\t\t\tconst { submitter } = event.nativeEvent\n+\n+\t\t\t\t\t\t\tif (submitter) {\n+\t\t\t\t\t\t\t\tformData.append(submitter.name, submitter.value)\n+\t\t\t\t\t\t\t}\n+\n+\t\t\t\t\t\t\tconst response = await fetch(form.action, {\n+\t\t\t\t\t\t\t\tmethod: form.method,\n+\t\t\t\t\t\t\t\tbody: formData,\n+\t\t\t\t\t\t\t})\n+\t\t\t\t\t\t\tif (response.ok) {\n+\t\t\t\t\t\t\t\tconst data = await response.json()\n+\t\t\t\t\t\t\t\tsetData(data)\n+\t\t\t\t\t\t\t\tawait framework.revalidate()\n+\t\t\t\t\t\t\t} else {\n+\t\t\t\t\t\t\t\tconsole.error('Failed to update the count')\n+\t\t\t\t\t\t\t}\n+\t\t\t\t\t\t})\n+\t\t\t\t\t},\n+\t\t\t\t})\n+\t\t\t},\n+\t\t[],\n+\t)\n+\n+\treturn { Form, data, isPending }\n+}\n+\n+export function useLoaderData() {\n+\tconst framework = useContext(FrameworkContext)\n+\treturn framework.data\n+}\n+\n+export async function handleLoaderRequest(request) {\n+\tconst counter = await import('./counter.js')\n+\treturn counter.loader()\n+}\n+\n+export async function handleActionRequest(request) {\n+\tconst counter = await import('./counter.js')\n+\treturn counter.action({ request })\n+}\ndiff --git a/ui/index.js b/ui/index.js\nindex c04ca04..f125fed 100644\n--- a/ui/index.js\n+++ b/ui/index.js\n@@ -1,6 +1,11 @@\n import { createElement as h } from 'react'\n-import { createRoot } from 'react-dom/client'\n+import { hydrateRoot } from 'react-dom/client'\n import { Counter } from './counter.js'\n+import { FrameworkProvider } from './framework.js'\n \n-const root = createRoot(document.getElementById('root'))\n-root.render(h(Counter))\n+const initialData = window.__initialData\n+\n+hydrateRoot(\n+\tdocument.getElementById('root'),\n+\th(FrameworkProvider, { initialData }, h(Counter)),\n+)"]

index.js-41+67App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

package.json-12+14App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

public/index.html-21+0App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

ui/counter.js-76+47App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

ui/framework.js-0+83App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

ui/index.js-6+11App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

index.js-41+67App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

package.json-12+14App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

public/index.html-21+0App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

ui/counter.js-76+47App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

ui/framework.js-0+83App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

ui/index.js-6+11App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2