POST, DELETE

Author: patrickgwsmith

app/model/fetching.ts

@@ -1,5 +1,7 @@
 export const identifiers = {
   getJSON: "getJSON",
+  postJSON: "postJSON",
+  deleteJSON: "deleteJSON",
 } as const;
 
 export function getJSON(url: string | URL) {
@@ -9,7 +11,27 @@ export function getJSON(url: string | URL) {
   });
 }
 
-export type FetchMessage = ReturnType<typeof getJSON>;
+export function postJSON(
+  url: string | URL,
+  body?: Parameters<typeof JSON.stringify>[0]
+) {
+  return Object.freeze({
+    type: identifiers.postJSON,
+    url: url.toString(),
+    body: body !== undefined ? JSON.stringify(body) : undefined,
+  });
+}
+
+export function deleteJSON(
+  url: string | URL,
+) {
+  return Object.freeze({
+    type: identifiers.deleteJSON,
+    url: url.toString(),
+  });
+}
+
+export type FetchMessage = ReturnType<typeof getJSON | typeof postJSON | typeof deleteJSON>;
 export type FetchReply = any;
 
 export type FetchGenerator<Result> = Generator<
@@ -20,7 +42,7 @@ export type FetchGenerator<Result> = Generator<
 
 export async function fetchComponent<Result>(
   generator: () => FetchGenerator<Result>,
-  options: { baseURL?: URL, signal?: AbortSignal } = {}
+  options: { baseURL?: URL; signal?: AbortSignal } = {}
 ) {
   const gen = generator();
   let reply: FetchReply | undefined;
@@ -35,7 +57,24 @@ export async function fetchComponent<Result>(
 
     if (result.value.type === identifiers.getJSON) {
       const url = new URL(result.value.url, options.baseURL);
-      const data = fetch(url.toString(), { signal: options.signal }).then(res => res.json());
+      const data = fetch(url.toString(), { signal: options.signal }).then(
+        (res) => res.json()
+      );
+      reply = await data;
+    } else if (result.value.type === identifiers.postJSON) {
+      const url = new URL(result.value.url, options.baseURL);
+      const data = fetch(url.toString(), {
+        method: "POST",
+        body: result.value.body,
+        signal: options.signal,
+      }).then((res) => res.json());
+      reply = await data;
+    } else if (result.value.type === identifiers.deleteJSON) {
+      const url = new URL(result.value.url, options.baseURL);
+      const data = fetch(url.toString(), {
+        method: "DELETE",
+        signal: options.signal,
+      }).then((res) => res.json());
       reply = await data;
     }
   }

app/routes/make/fetch.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
-import { fetchComponent, getJSON } from "../../model/fetching";
+import { fetchComponent, getJSON, postJSON } from "../../model/fetching";
 import { parseFormData, parseJSON, read } from "../../model/schemas";
-import { useAsyncFunc } from "../../view/async";
+import { useAsyncAction, useAsyncFunc } from "../../view/async";
 import { CodeBlock } from "../../view/code";
 import { NamedSection } from "../../view/semantics";
 
@@ -37,15 +37,49 @@ function* BundlePhobiaFormSchema() {
   };
 }
 
+const publicStoreURL = new URL("https://public-store.collected.workers.dev");
+function* PublicStoreListItems() {
+  const rawData: unknown = yield getJSON(new URL("/items", publicStoreURL));
+
+  return parseJSON(rawData, function* Schema() {
+    const result: string[] = yield read.array("result", "string");
+    return result;
+  });
+}
+function* PublicStoreCreateItem() {
+  const rawData: unknown = yield postJSON(new URL("/items", publicStoreURL));
+
+  return parseJSON(rawData, function* Schema() {
+    const result: number = yield read.number("result");
+    return result;
+  });
+}
+function* PublicStoreDeleteItems() {
+  yield postJSON(new URL("/items", publicStoreURL));
+}
+
 export default function MakeFetchHappen() {
   const [packageName, updatePackageName] = useState("react");
 
-  const bundlephobiaData = useAsyncFunc(
+  const [bundlephobiaData] = useAsyncFunc(
     (signal) =>
       fetchComponent(BundlePhobiaAPI.bind(null, packageName), { signal }),
     [packageName]
   );
 
+  const [performCreate, createResult] = useAsyncAction((signal) =>
+    fetchComponent(PublicStoreCreateItem, { signal })
+  );
+  const [performDelete, deleteResult] = useAsyncAction((signal) =>
+    fetchComponent(PublicStoreDeleteItems, { signal })
+  );
+  console.log(createResult);
+
+  const [listData] = useAsyncFunc(
+    (signal) => fetchComponent(PublicStoreListItems, { signal }),
+    [createResult.completedCount, deleteResult.completedCount]
+  );
+
   return (
     <main data-measure="center">
       <h1>Fetch</h1>
@@ -79,6 +113,22 @@ export default function MakeFetchHappen() {
           </CodeBlock>
         )}
       </NamedSection>
+
+      <NamedSection id="list" heading={<h2>List</h2>}>
+        <button type="button" onClick={performCreate}>
+          Add Random Item
+        </button>
+        <button type="button" onClick={performDelete}>
+          Delete Items
+        </button>
+        {listData == null ? (
+          <div>Loading…</div>
+        ) : (
+          <CodeBlock language="json">
+            {JSON.stringify(listData, null, 2)}
+          </CodeBlock>
+        )}
+      </NamedSection>
     </main>
   );
 }

app/view/async.tsx

@@ -1,19 +1,36 @@
-import { useEffect, useState } from "react";
+import { useEffect, useReducer, useState } from "react";
 
 export function useAsyncFunc<Data>(
   source: (signal: AbortSignal) => Promise<Data>,
-  dependencies: Array<any>
-): null | Data {
-  const [data, setData] = useState<Data | null>(null);
-  
+  dependencies: Array<unknown>
+): readonly [null | Data, { requestCount: number, completedCount: number }] {
+  const [state, setState] = useState<{ requestCount: number; completedCount: number; data: Data | null }>({
+    requestCount: 0,
+    completedCount: 0,
+    data: null
+  });
+
   useEffect(() => {
     const aborter = new AbortController();
-    
-    setData(null);
-    source(aborter.signal).then(setData);
+
+    setState(state => ({ ...state, requestCount: state.requestCount + 1 }));
+    source(aborter.signal).then(data => {
+      setState(state => ({ ...state, completedCount: state.completedCount + 1, data }))
+    });
 
     return () => aborter.abort();
   }, dependencies);
 
-  return data;
+  return Object.freeze([state.data, state] as const);
+}
+
+export function useAsyncAction<Data>(
+  source: (signal: AbortSignal) => Promise<Data>
+): readonly [() => void, { data: null | Data, requestCount: number, completedCount: number }] {
+  const [requestCount, request] = useReducer((n) => n + 1, 0);
+  const [data, result] = useAsyncFunc(
+    async (signal) => (requestCount > 0 ? source(signal) : null),
+    [requestCount]
+  );
+  return Object.freeze([request, { data, requestCount, completedCount: result.completedCount }] as const);
 }