From b604c9357c3abd1fcbdd2b5ad5456f695a8f44c2 Mon Sep 17 00:00:00 2001 From: Tad Scritchfield Date: Tue, 16 Nov 2021 10:43:23 -0600 Subject: [PATCH 1/6] add mock server for local dev --- example/mock-server.js | 22 ++++++++++++++++++++++ example/mock-views/breeds.html | 17 +++++++++++++++++ example/package.json | 6 ++++++ 3 files changed, 45 insertions(+) create mode 100644 example/mock-server.js create mode 100644 example/mock-views/breeds.html diff --git a/example/mock-server.js b/example/mock-server.js new file mode 100644 index 0000000..6c76d09 --- /dev/null +++ b/example/mock-server.js @@ -0,0 +1,22 @@ +const express = require("express"); +var cors = require("cors"); +const app = express(); +const port = process.env.SERVER_PORT ? Number(process.env.SERVER_PORT) : 3333; + +app.use(cors()); + +app.get("/", (req, res) => { + res.send("Mock Example Server"); +}); + +app.get("/breeds/list/all", (req, res) => { + res.json({ + breeds: ["Labrador", "German Shepard", "Poodle"], + }); +}); + +app.use("/views", express.static("mock-views")); + +app.listen(port, () => { + console.log(`Example app listening at http://localhost:${port}`); +}); diff --git a/example/mock-views/breeds.html b/example/mock-views/breeds.html new file mode 100644 index 0000000..6214267 --- /dev/null +++ b/example/mock-views/breeds.html @@ -0,0 +1,17 @@ + + + + + + + Breeds View + + +

Breeds

+ + + diff --git a/example/package.json b/example/package.json index f8a479d..1fee440 100644 --- a/example/package.json +++ b/example/package.json @@ -7,6 +7,8 @@ "react-scripts": "^4.0.3" }, "scripts": { + "dev": "PORT=3005 yarn start & yarn server", + "server": "node mock-server.js", "start": "react-scripts start" }, "eslintConfig": { @@ -23,5 +25,9 @@ "last 1 firefox version", "last 1 safari version" ] + }, + "devDependencies": { + "cors": "^2.8.5", + "express": "^4.17.1" } } From 51f01f11465ca57b477a48f582f14bb415095763 Mon Sep 17 00:00:00 2001 From: Tad Scritchfield Date: Tue, 16 Nov 2021 10:43:44 -0600 Subject: [PATCH 2/6] add option to render html response --- example/src/dog-workspace.ts | 15 ++++++++++++++ src/route/ApiResponse.tsx | 40 ++++++++++++++++++++++++++++++++++-- 2 files changed, 53 insertions(+), 2 deletions(-) diff --git a/example/src/dog-workspace.ts b/example/src/dog-workspace.ts index ebf2dbd..7316bef 100644 --- a/example/src/dog-workspace.ts +++ b/example/src/dog-workspace.ts @@ -41,6 +41,21 @@ export const dogWorkspace = { }, }, }, + { + name: "HTML response", + path: "/views/breeds.html", + responses: { + "200": { + description: "successful operation", + // schema: { + // type: "array", + // items: { + // $ref: "#/definitions/Dog", + // }, + // }, + }, + }, + }, { name: "View Random Breed Image", diff --git a/src/route/ApiResponse.tsx b/src/route/ApiResponse.tsx index f3c90aa..d2e5897 100644 --- a/src/route/ApiResponse.tsx +++ b/src/route/ApiResponse.tsx @@ -8,6 +8,7 @@ import Helpers from "../lib/helpers"; import { Route } from "../types"; export default function ApiResponse({ route }: { route: Route }) { + const [shouldRenderHTML, setShouldRenderHTML] = React.useState(false); const { routeConfig, darkMode } = useGlobalContext(); const routeConfigVars = get(routeConfig, route.name, { response: { @@ -33,6 +34,7 @@ export default function ApiResponse({ route }: { route: Route }) { } const isJSON = response.data && isObject(response.data); + const isHTML = !isJSON && response.data && response.data.startsWith("<"); const hasResponseHeaders = !!Object.keys(response?.headers || {}).length; @@ -85,16 +87,50 @@ export default function ApiResponse({ route }: { route: Route }) { /> )} - {response.data && !isJSON && ( + {isHTML && !shouldRenderHTML && (
+ {response.data}
)} + {isHTML && shouldRenderHTML && ( +
+ +