use refetch

app/src/components/editor.tsx

@@ -1,29 +1,10 @@
+import type Pages from "../protocol/pages";
 import "./editor.css";
-import beforeunload from "../helpers/beforeunload";
-import throttle from "../helpers/throttle";
 
-const intervalMs = 333;
-
-const { block, unblock } = beforeunload();
-
-const updatePage = throttle(async function (params: {
+export default (props: {
   id: number;
-  title: string;
-  text: string;
-}) {
-  const res = await fetch(
-    new URL(`/pages?id=eq.${params.id}`, import.meta.env.QUOT_API_URL),
-    {
-      method: "PUT",
-      headers: { "content-type": "application/json" },
-      body: JSON.stringify(params),
-    }
-  );
-  if (res.ok) unblock();
-},
-intervalMs);
-
-export default (props: { id: number }) => {
+  onUpdatePage: (content: Pages.RequestContentPage) => void;
+}) => {
   return (
     <textarea
       id={String(props.id)}
@@ -32,8 +13,7 @@ export default (props: { id: number }) => {
       onInput={(e) => {
         const text = e.currentTarget.value;
         const lines = text.split("\n");
-        block();
-        updatePage({ id: props.id, title: lines[0] ?? "", text });
+        props.onUpdatePage({ id: props.id, title: lines[0] ?? "", text });
         e.currentTarget.setAttribute("rows", String(Math.max(2, lines.length)));
       }}
     ></textarea>

app/src/pages/index.tsx

@@ -1,19 +1,12 @@
 import { createResource } from "solid-js";
+import type Pages from "../protocol/pages";
 
-type PagesResponse = Array<{
-  id: number;
-  title: string;
-  text: string;
-  created: string;
-  updated: string;
-}>;
-
-async function fetchPages(): Promise<PagesResponse> {
+async function fetchPages(): Promise<Pages.Response> {
   const res = await fetch(
     new URL("/pages?order=updated.desc", import.meta.env.QUOT_API_URL)
   );
-  const data = await res.json();
-  return data as PagesResponse;
+  const data = (await res.json()) as Pages.Response;
+  return data;
 }
 
 export default () => {

app/src/pages/page.tsx

@@ -1,28 +1,55 @@
 import { createResource } from "solid-js";
+import type Pages from "../protocol/pages";
 import Editor from "../components/editor";
+import beforeunload from "../helpers/beforeunload";
+import throttle from "../helpers/throttle";
 
-type PageResponse = {
-  id: number;
-  title: string;
-  text: string;
-  created: string;
-  updated: string;
-};
+const intervalMs = 333;
+const { block, unblock } = beforeunload();
 
-async function fetchPage(id: number): Promise<PageResponse> {
+async function updatePage(
+  id: number,
+  content: Pages.RequestContentPage
+): Promise<boolean> {
+  const res = await fetch(
+    new URL(`/pages?id=eq.${id}`, import.meta.env.QUOT_API_URL),
+    {
+      method: "PUT",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify(content),
+    }
+  );
+  return res.ok;
+}
+
+async function fetchPage(id: number): Promise<Pages.RequestContentPage> {
   const res = await fetch(
     new URL(`/pages?id=eq.${id}`, import.meta.env.QUOT_API_URL)
   );
-  const [data] = await res.json();
-  return data as PageResponse;
+  const data = (await res.json()) as Pages.Response;
+  return data[0]!;
 }
 
 export default (props: { id: number }) => {
-  const [page] = createResource(props.id, fetchPage);
+  const [page, { refetch }] = createResource(props.id, fetchPage);
+  const throttledUpdate = throttle(
+    async (id: number, content: Pages.RequestContentPage) => {
+      if (await updatePage(id, content)) {
+        unblock();
+        refetch();
+      }
+    },
+    intervalMs
+  );
+
+  function onUpdatePage(content: Pages.RequestContentPage) {
+    block();
+    throttledUpdate(props.id, content);
+  }
 
   return (
     <main>
-      <Editor id={props.id} />
+      <Editor id={props.id} onUpdatePage={onUpdatePage} />
       <pre>{() => JSON.stringify(page(), null, " ")}</pre>
     </main>
   );

app/src/protocol/pages.ts

@@ -0,0 +1,20 @@
+namespace Pages {
+  export type RequestContentPage = {
+    id?: number;
+    title: string;
+    text: string;
+  };
+
+  export type ResponsePage = {
+    id: number;
+    title: string;
+    text: string;
+    created: string;
+    updated: string;
+  };
+
+  export type RequestContent = Array<RequestContentPage>;
+  export type Response = Array<ResponsePage>;
+}
+
+export default Pages;