feat: live update request preview on submit (#29)

Author: gr2m

api/detail.js

@@ -1,4 +1,5 @@
 import { request as octokitRequest } from "@octokit/request";
+import fetch from "node-fetch";
 
 import { OPENAPI_PATHS } from "../public/components/openapi-paths.js";
 import { parameterField } from "../public/components/parameter-field.js";
@@ -21,7 +22,13 @@ module.exports = async (request, response) => {
   let apiResponse;
   if (request.method === "POST") {
     const options = JSON.parse(decodeURIComponent(request.body.requestOptions));
-    apiResponse = await octokitRequest(options);
+    const { url, ...rest } = octokitRequest.endpoint(options);
+    const response = await fetch(url, rest);
+    apiResponse = {
+      status: response.status,
+      headers: Object.fromEntries(response.headers.entries()),
+      data: await response.json()
+    };
   }
 
   if (method && path) {
@@ -84,6 +91,7 @@ module.exports = async (request, response) => {
           const options = Object.fromEntries(
             Object.entries(rest).filter(([key, value]) => value !== "")
           );
+
           const requestOptions = {
             baseUrl: "https://api.github.com",
             method,
@@ -130,7 +138,7 @@ module.exports = async (request, response) => {
 
     <section>
       <h2>Parameters</h2>
-      <form>
+      <form id="parametersForm">
         <table>
           <thead>
             <tr>
@@ -158,11 +166,9 @@ module.exports = async (request, response) => {
       </form>
   
       <form method="POST">
-        <input type="hidden" name="requestOptions" value="${encodeURIComponent(
-          JSON.stringify(requestOptions)
-        )}">
-
+        <div id="requestPreview">
         ${requestPreview(requestOptions)}
+        </div> 
 
         <p><button type="submit">Send request</button></p>
       </form>
@@ -173,6 +179,8 @@ module.exports = async (request, response) => {
     <p>See documentation on <a href="${
       endpoint.documentationUrl
     }">GitHub developer guides</a></p>
+
+    <script type="module" src="/detail.js"></script>
   </body>
 </html>
 `);

api/search.js

@@ -70,7 +70,7 @@ What would you like to request?<br />
 ${searchResults({ query, results })}
 </div>
 
-<script type="module" src="/client.js"></script>
+<script type="module" src="/search.js"></script>
 </body>
 </html>
 `);

public/components/request-preview.js

@@ -12,6 +12,10 @@ ${Object.entries(headers)
 ${body ? JSON.stringify(body, null, 2) : ""}
 </code></pre>
     </section>
+
+    <input type="hidden" name="requestOptions" value="${encodeURIComponent(
+      JSON.stringify(options)
+    )}">
   `;
 }
 

public/detail.js

@@ -0,0 +1,42 @@
+import { requestPreview } from "/components/request-preview.js";
+
+const $parametersForm = document.querySelector(`#parametersForm`);
+const $requestPreview = document.querySelector(`#requestPreview`);
+
+$parametersForm.addEventListener("submit", event => {
+  const form = new FormData($parametersForm);
+  const { token, ...rest } = Object.fromEntries(form.entries());
+
+  const options = Object.fromEntries(
+    Object.entries(rest).filter(([key, value]) => value !== "")
+  );
+
+  const path = decodeURIComponent(location.pathname);
+  const [method] = path.substr(1).split("/");
+  const url = path.substr(method.length + 1);
+
+  const requestOptions = {
+    baseUrl: "https://api.github.com",
+    method,
+    url,
+    headers: {
+      authorization: `token ${token}`,
+      accept: "application/vnd.github.v3+json",
+      "user-agent": `octokit.rest`
+    },
+    mediaType: {
+      previews: []
+    },
+    ...options
+  };
+
+  $requestPreview.innerHTML = requestPreview(requestOptions);
+
+  const query = new URLSearchParams();
+  for (const [parameter, value] of Object.entries({ token, ...rest })) {
+    query.append(parameter, value);
+  }
+  window.history.pushState({}, null, `?${query}`);
+
+  event.preventDefault();
+});