examples(react-fetch): show GitHub emojis

compasjs · Nov 3, 2023 · cc6b521 · cc6b521
1 parent b9c2887
commit cc6b521
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 34 deletions.
diff --git a/changelog.md b/changelog.md
@@ -4,32 +4,42 @@ editLink: false
 
 # Changelog
 
-
 ### [v0.8.0](https://github.com/compasjs/compas/releases/tag/v0.8.0)
 
 #### Features
 
-- feat(code-gen): generate RQ5 like object arguments while staying on RQ4 [`127699`](https://github.com/compasjs/compas/commit/127699362951d66d65b0c6abdc613fb9b420b035)
+- feat(code-gen): generate RQ5 like object arguments while staying on RQ4
+  [`127699`](https://github.com/compasjs/compas/commit/127699362951d66d65b0c6abdc613fb9b420b035)
   - References [#2644](https://github.com/compasjs/compas/pull/2644)
-- feat(code-gen): support react-query v5 [`e4862f`](https://github.com/compasjs/compas/commit/e4862f36f2879bda72ef14983cf4cbee216b9b70)
+- feat(code-gen): support react-query v5
+  [`e4862f`](https://github.com/compasjs/compas/commit/e4862f36f2879bda72ef14983cf4cbee216b9b70)
   - Closes [#2644](https://github.com/compasjs/compas/pull/2644)
 
 #### Dependency updates
 
-- build(deps): bump @aws-sdk/client-s3 from 3.428.0 to 3.436.0 ([#2907](https://github.com/compasjs/compas/pull/2907), [#2922](https://github.com/compasjs/compas/pull/2922))
+- build(deps): bump @aws-sdk/client-s3 from 3.428.0 to 3.436.0
+  ([#2907](https://github.com/compasjs/compas/pull/2907),
+  [#2922](https://github.com/compasjs/compas/pull/2922))
   - [Release notes](https://github.com/aws/aws-sdk-js-v3/releases)
-- build(deps): bump @aws-sdk/lib-storage from 3.428.0 to 3.436.0 ([#2907](https://github.com/compasjs/compas/pull/2907), [#2922](https://github.com/compasjs/compas/pull/2922))
+- build(deps): bump @aws-sdk/lib-storage from 3.428.0 to 3.436.0
+  ([#2907](https://github.com/compasjs/compas/pull/2907),
+  [#2922](https://github.com/compasjs/compas/pull/2922))
   - [Release notes](https://github.com/aws/aws-sdk-js-v3/releases)
-- build(deps): bump actions/setup-node from 3.8.1 to 4.0.0 ([#2919](https://github.com/compasjs/compas/pull/2919))
+- build(deps): bump actions/setup-node from 3.8.1 to 4.0.0
+  ([#2919](https://github.com/compasjs/compas/pull/2919))
   - Major version bump
   - [Release notes](https://github.com/actions/setup-node/releases)
-- build(deps): bump postgres from 3.4.0 to 3.4.1 ([#2922](https://github.com/compasjs/compas/pull/2922))
+- build(deps): bump postgres from 3.4.0 to 3.4.1
+  ([#2922](https://github.com/compasjs/compas/pull/2922))
   - [Release notes](https://github.com/porsager/postgres/releases)
-- build(deps): bump eslint from 8.51.0 to 8.52.0 ([#2922](https://github.com/compasjs/compas/pull/2922))
+- build(deps): bump eslint from 8.51.0 to 8.52.0
+  ([#2922](https://github.com/compasjs/compas/pull/2922))
   - [Release notes](https://github.com/eslint/eslint/releases)
-- build(deps): bump eslint-plugin-import from 2.28.1 to 2.29.0 ([#2922](https://github.com/compasjs/compas/pull/2922))
+- build(deps): bump eslint-plugin-import from 2.28.1 to 2.29.0
+  ([#2922](https://github.com/compasjs/compas/pull/2922))
   - [Release notes](https://github.com/import-js/eslint-plugin-import/releases)
-- build(deps): bump pino from 8.16.0 to 8.16.1 ([#2922](https://github.com/compasjs/compas/pull/2922))
+- build(deps): bump pino from 8.16.0 to 8.16.1
+  ([#2922](https://github.com/compasjs/compas/pull/2922))
   - [Release notes](https://github.com/pinojs/pino/releases)
 
 ### [v0.7.6](https://github.com/compasjs/compas/releases/tag/v0.7.6)
@@ -1004,4 +1014,4 @@ code-gen. Make sure that the API is updated before any consumer is.
 
 See the
 [history](https://github.com/compasjs/compas/blob/eaa62289e64516149a64b814ad36403c9316f313/changelog.md)
-for earlier changelogs (< v0.0.249).
+for earlier changelogs (< v0.0.249).
diff --git a/examples/react-fetch/scripts/generate.js b/examples/react-fetch/scripts/generate.js
@@ -1,9 +1,23 @@
-import { Generator } from "@compas/code-gen";
+import { readFileSync } from "node:fs";
+import { Generator, loadApiStructureFromOpenAPI } from "@compas/code-gen";
+import { dirnameForModule, pathJoin } from "@compas/stdlib";
 
-const generator = new Generator();
-generator.addStructure(
-  await (await fetch("https://ddv.tools/_compas/structure.json")).json(),
-);
+const generator = new Generator()
+  .addStructure(
+    loadApiStructureFromOpenAPI(
+      "github",
+      JSON.parse(
+        readFileSync(
+          pathJoin(
+            dirnameForModule(import.meta),
+            "../../../__fixtures__/code-gen/githubapi.json",
+          ),
+          "utf-8",
+        ),
+      ),
+    ),
+  )
+  .selectGroups(["emojis"]);
 
 generator.generate({
   targetLanguage: "ts",

diff --git a/examples/react-fetch/src/App.tsx b/examples/react-fetch/src/App.tsx
@@ -1,38 +1,25 @@
 import { keepPreviousData } from "@tanstack/react-query";
 import { useEffect, useState } from "react";
 import "./App.css";
+import { useEmojisEmojisGet } from "./generated/emojis/reactQueries.tsx";
 import {
   fetchWithBaseUrl,
   setFetchFn,
 } from "./generated/common/api-client.tsx";
-import { useDateConvertNumber } from "./generated/date/reactQueries.tsx";
 
 function App() {
-  const [dateInput, setDateInput] = useState(1687000000000);
-
   useEffect(() => {
-    setFetchFn(fetchWithBaseUrl(fetch, "https://ddv.tools/"));
+    setFetchFn(fetchWithBaseUrl(fetch, "https://api.github.com/"));
   }, []);
 
-  const { data } = useDateConvertNumber({
-    value: dateInput,
-    queryOptions: {
-      placeholderData: keepPreviousData,
-    },
-  });
+  const { data } = useEmojisEmojisGet({});
 
   return (
     <>
       <h1>Compas + React + Fetch + React Query</h1>
       <div className="card">
-        <span>Change the number:</span>
-        <input
-          type="number"
-          onChange={(element) => setDateInput(Number(element.target.value))}
-          value={dateInput}
-        />
-        {data && <p>Date is {data.isoString}</p>}
-        {!data && <p>Change the input to get a new value.</p>}
+        {data && <p>GitHub supports {Object.keys(data).length} emojis.</p>}
+        {!data && <p>Fetching emojis from GitHub</p>}
       </div>
 
       <div className="card">