use refetch

app/src/app.css

@@ -1,7 +1,7 @@
 header {
   display: flex;
   align-items: center;
-  justify-content: space-evenly
+  justify-content: space-evenly;
 }
 
 a[href^="/"] {

app/src/components/editor.tsx

@@ -1,14 +1,21 @@
+import type Pages from "../protocol/pages";
 import "./editor.css";
 
-export default () => (
-  <textarea
-    class="editor"
-    autofocus
-    onInput={(e) => {
-      e.currentTarget.setAttribute(
-        "rows",
-        String(Math.max(2, e.currentTarget.value.split("\n").length))
-      );
-    }}
-  ></textarea>
-);
+export default (props: {
+  id: number;
+  onUpdatePage: (content: Pages.RequestContentPage) => void;
+}) => {
+  return (
+    <textarea
+      id={String(props.id)}
+      class="editor"
+      autofocus
+      onInput={(e) => {
+        const text = e.currentTarget.value;
+        const lines = text.split("\n");
+        props.onUpdatePage({ id: props.id, title: lines[0] ?? "", text });
+        e.currentTarget.setAttribute("rows", String(Math.max(2, lines.length)));
+      }}
+    ></textarea>
+  );
+};

app/src/helpers/beforeunload.ts

@@ -0,0 +1,18 @@
+function beforeunload() {
+  function listener(e: BeforeUnloadEvent) {
+    e.preventDefault();
+    e.returnValue = "";
+  }
+
+  function block() {
+    window.addEventListener("beforeunload", listener);
+  }
+
+  function unblock() {
+    window.removeEventListener("beforeunload", listener);
+  }
+
+  return { block, unblock };
+}
+
+export default beforeunload;

app/src/helpers/throttle.ts

@@ -0,0 +1,21 @@
+function throttle<Fn extends (...args: any[]) => any>(
+  fn: Fn,
+  ms: number
+): (...args: Parameters<Fn>) => void {
+  let throttledFn = () => undefined;
+  let throttled: boolean = false;
+
+  return (...args: Parameters<Fn>): void => {
+    throttledFn = () => fn(...args);
+    if (throttled) return;
+
+    setTimeout(() => {
+      throttledFn();
+      throttled = false;
+    }, ms);
+
+    throttled = true;
+  };
+}
+
+export default throttle;

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 />
+      <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;