Add json fetch support

Author: patrickgwsmith

app/model/fetching.ts

@@ -0,0 +1,42 @@
+export const identifiers = {
+  getJSON: "getJSON",
+} as const;
+
+export function getJSON(url: string | URL) {
+  return Object.freeze({
+    type: identifiers.getJSON,
+    url: url.toString(),
+  });
+}
+
+export type FetchMessage = ReturnType<typeof getJSON>;
+export type FetchReply = any;
+
+export type FetchGenerator<Result> = Generator<
+  FetchMessage,
+  Result,
+  FetchReply | undefined
+>;
+
+export async function fetchController<Result>(
+  baseURL: URL,
+  generator: () => FetchGenerator<Result>
+) {
+  const gen = generator();
+  let reply: FetchReply | undefined;
+
+  while (true) {
+    const result = gen.next(reply);
+    if (result.done) {
+      return result.value;
+    }
+
+    reply = undefined;
+
+    if (result.value.type === identifiers.getJSON) {
+      const url = new URL(result.value.url, baseURL);
+      const data = fetch(url.toString()).then(res => res.json());
+      reply = await data;
+    }
+  }
+}

app/model/schemas.ts

@@ -23,7 +23,7 @@ export type SchemaGenerator<Result> = Generator<
   SchemaReply | any
 >;
 
-export function parseSchema<Result>(
+export function parseJSON<Result>(
   source: Record<string, any>,
   generator: () => SchemaGenerator<Result>
 ) {

app/routes/make/schema.tsx

@@ -6,7 +6,7 @@ import { useState } from "react";
 import { useEffect } from "react";
 import {
   parseFormData,
-  parseSchema,
+  parseJSON,
   read,
   SchemaGenerator,
 } from "../../model/schemas";
@@ -30,7 +30,6 @@ function useFetch<Data>(source: URL): null | Data {
   const [data, setData] = useState<Data | null>(null);
 
   useEffect(() => {
-    console.log("Fetching");
     const controller = new AbortController();
     const signal = controller.signal;
 
@@ -77,9 +76,37 @@ function* ProfileSchema(): SchemaGenerator<ProfileData> {
   };
 }
 
+interface SwapiPersonData {
+  name: string;
+  height: string;
+  mass: string;
+}
+function* SwapiPersonSchema(): SchemaGenerator<SwapiPersonData> {
+  const name: string = yield read.string("name");
+  const height: string = yield read.string("height");
+  const mass: string = yield read.string("mass");
+
+  return {
+    name,
+    height,
+    mass,
+  };
+}
+function* SwapiPersonResource(): SchemaGenerator<SwapiPersonData> {
+  const name: string = yield read.string("name");
+  const height: string = yield read.string("height");
+  const mass: string = yield read.string("mass");
+
+  return {
+    name,
+    height,
+    mass,
+  };
+}
+
 export default function MakeRenderer() {
   function renderExample(input: any): JSX.Element {
-    const result = parseSchema(input, AWSRegionSchema);
+    const result = parseJSON(input, AWSRegionSchema);
 
     return (
       <div {...X(2)}>
@@ -97,14 +124,16 @@ export default function MakeRenderer() {
     favoriteNumber: 7,
   });
 
-  const personData = useFetch(new URL(`https://swapi.py4e.com/api/people/1`));
+  const personDataRaw: any = useFetch(new URL(`https://swapi.py4e.com/api/people/1`));
+  const personData = personDataRaw != null ? parseJSON(personDataRaw, SwapiPersonSchema) : null;
+  // const personData = personDataRaw;
 
   return (
     <main data-measure="center">
       <h1>Schema</h1>
 
       <h2>JSON</h2>
-      <CodeBlock language="javascript">{parseSchema.toString()}</CodeBlock>
+      <CodeBlock language="javascript">{parseJSON.toString()}</CodeBlock>
 
       <h2>Form Data</h2>
       <CodeBlock language="javascript">{parseFormData.toString()}</CodeBlock>