HTTP Client

\n {bookmarks.length\n ? (\n {\n if (selectedTab === \"bookmarks\") {\n setSelectedTab(undefined);\n return;\n }\n\n setSelectedTab(\"bookmarks\");\n }}\n >\n \n \n )\n : undefined}\n {\n if (selectedTab === \"history\") {\n setSelectedTab(undefined);\n return;\n }\n\n setSelectedTab(\"history\");\n }}\n >\n \n \n

\n {\n const updated: HistoryItem[] = [\n {\n timestamp: Date.now(),\n request: req,\n },\n ...history,\n ];\n setHistory(updated);\n localStorage.setItem(\n \"history\",\n JSON.stringify(\n await Promise.all(\n updated.map(async (item) => ({\n timestamp: item.timestamp,\n request: await serializeRequest(item.request),\n })),\n ),\n ),\n );\n const resp = await fetch(req);\n setResponse(resp);\n }}\n >\n \n

\n {response\n ? (\n

\n \n

\n )\n : undefined}\n

\n {selectedTab === \"history\"\n ? (\n {\n setHistory([]);\n localStorage.removeItem(\"history\");\n }}\n >\n {history.map((item) => {\n return (\n

\n setRequest(item.request)}\n >\n

{item.request.method}

{item.request.url}

\n \n \n

\n );\n })}\n \n )\n : selectedTab === \"bookmarks\"\n ? (\n \n {props.bookmarks.map((bookmark) => {\n return (\n

\n setRequest(bookmark.request)}\n >\n

{bookmark.label}

\n \n \n

\n );\n })}\n \n )\n : undefined}\n

\n );\n}\n\nexport function RequestList(props: {\n title: string;\n onClear?: () => void;\n children?: any;\n}) {\n return (\n \n

{props.title}

\n {props.onClear\n ? (\n \n )\n : undefined}\n

{props.children}\n \n );\n}\n\nfunction RequestInput(props: {\n isLoading?: boolean;\n request: Request;\n onRequest: (request: Request) => void;\n}) {\n const [selectedTab, setSelectedTab] = useState(\"headers\");\n\n const [method, setMethod] = useState(\"GET\");\n const [url, setUrl] = useState(\"\");\n const [headers, setHeaders] = useState<[string, string][]>([]);\n const [query, setQueryParams] = useState<[string, string][]>([]);\n\n useEffect(() => {\n setMethod(props.request?.method || \"GET\");\n setUrl(props.request?.url || \"\");\n setHeaders(Array.from(props.request?.headers.entries() || [[\"\", \"\"]]));\n const queryParams = Array.from(\n new URL(props.request?.url || \"\").searchParams.entries() || [[\"\", \"\"]],\n );\n setQueryParams(queryParams.length ? queryParams : [[\"\", \"\"]]);\n }, [props.request]);\n\n const [body, setBody] = useState(\"\");\n return (\n

Request

\n {\n setMethod(e.currentTarget.value);\n }}\n class=\"border rounded p-2 bg-gray-100\"\n >\n \n \n \n \n \n \n \n \n setUrl(e.currentTarget.value)}\n class={\"flex-grow border p-2 rounded\"}\n type=\"text\"\n />\n {\n const requestHeaders = new Headers();\n for (const [k, v] of headers) {\n if (k) {\n requestHeaders.set(k, v);\n }\n }\n\n if (body && !requestHeaders.has(\"content-type\")) {\n requestHeaders.set(\"content-type\", \"application/json\");\n }\n\n const requestUrl = new URL(url);\n for (const [k, v] of query) {\n if (!k) continue;\n requestUrl.searchParams.set(k, v);\n }\n\n props.onRequest(\n new Request(requestUrl, {\n method,\n headers: requestHeaders,\n body: body ? body : undefined,\n }),\n );\n }}\n class={\"bg-orange-400 hover:bg-orange-500 h-11 w-20 flex justify-center text-xl p-2 rounded text-white\"}\n >\n {props.isLoading\n ? (\n \n \n \n \n )\n : (\n \"Send\"\n )}\n \n

\n\n

setSelectedTab(\"query\")}\n >\n Query\n \n setSelectedTab(\"headers\")}\n >\n Headers\n \n setSelectedTab(\"body\")}\n >\n Body\n \n

\n {selectedTab === \"headers\"\n ? \n : selectedTab === \"query\"\n ? \n : }\n

\n );\n}\n\nfunction RequestTab(props: {\n selected: boolean;\n onSelect: () => void;\n children: any;\n}) {\n return (\n

\n \n {props.children}\n \n

\n );\n}\n\nfunction ResponseOutput(props: { response: Response }) {\n return (\n

Response

Status: {props.response.status}

\n {props.response.headers.has(\"content-type\")\n ?

Size: {props.response.headers.get(\"content-length\")}

\n : undefined}\n

Headers

\n \n

Body

\n \n

\n );\n}\n\nconst RequestBody = (props: {\n body: string;\n onBodyChange: (body: string) => void;\n}) => {\n const ref = useRef();\n useEffect(() => {\n if (!ref.current) return;\n const listener = (e: any) => {\n props.onBodyChange(e.detail);\n };\n\n ref.current.addEventListener(\"code-change\", listener);\n return () => {\n ref.current?.removeEventListener(\"code-change\", listener);\n };\n });\n return (\n

\n \n \n

\n );\n};\n\nconst ResponseBody = (props: { res: Response }) => {\n const ref = useRef();\n const contentType = props.res.headers.get(\"content-type\");\n const language = contentType ? parse(contentType).type.split(\"/\")[1] : \"json\";\n\n useEffect(() => {\n if (!ref.current) return;\n props.res.text().then((text) => {\n if (language === \"json\") {\n text = JSON.stringify(JSON.parse(text), null, 2);\n }\n // @ts-ignore\n ref.current.code = text;\n });\n }, [props.res]);\n\n return (\n \n \n );\n};\n\nconst Params = (props: {\n params: [string, string][];\n onChange: (params: [string, string][]) => void;\n}) => {\n return (\n

\n {props.params?.map(([name, value], idx) => (\n {\n props.onChange?.([\n ...props.params.slice(0, idx),\n [param.name, param.value],\n ...props.params.slice(idx + 1),\n ]);\n }}\n onRemove={() => {\n props.onChange?.([\n ...props.params.slice(0, idx),\n ...props.params.slice(idx + 1),\n ]);\n }}\n >\n \n ))}\n {\n props.onChange?.([...props.params, [\"\", \"\"]]);\n }}\n >\n Add Param\n \n

\n );\n};\n\nconst ResponseHeaders = () => {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

Name	Value
Cache-Control	max-age=0, private, must-revalidate
Content-Type	application/json

\n );\n};\n\nconst Param = (props: {\n param: { name: string; value: string };\n onParamChange?: (param: { name: string; value: string }) => void;\n onRemove?: () => void;\n}) => {\n return (\n

\n {\n props.onParamChange?.({\n ...props.param,\n name: e.currentTarget.value,\n });\n }}\n class=\"border rounded p-2 flex-grow\"\n />\n {\n props.onParamChange?.({\n ...props.param,\n value: e.currentTarget.value,\n });\n }}\n placeholder={\"Value\"}\n class=\"border rounded p-2 flex-grow\"\n />\n \n Remove\n \n

\n );\n};\n\nconst TrashIcon = (props: { class?: string }) => (\n \n \n \n \n \n \n \n);\n\nconst BookmarkIcon = () => (\n \n \n \n);\n\nconst HistoryIcon = () => (\n \n \n \n \n \n);\n\ntype SerializedRequest = {\n url: string;\n method: string;\n headers: [string, string][];\n body: string | undefined;\n};\n\nasync function serializeRequest(request: Request): Promise {\n return {\n url: request.url,\n method: request.method,\n headers: Array.from(request.headers.entries()),\n body: request.body ? Base64.encode(await request.text()) : undefined,\n };\n}\n\nfunction deserializeRequest(request: SerializedRequest): Request {\n return new Request(request.url, {\n method: request.method,\n headers: new Headers(request.headers),\n body: request.body ? Base64.decode(request.body) : undefined,\n });\n}\n\ntype HistoryItem = {\n timestamp: number;\n request: Request;\n};\n\nfunction loadHistory() {\n try {\n return JSON.parse(localStorage.getItem(\"history\") || \"[]\").map(\n (item: any) => ({\n timestamp: item.timestamp,\n request: deserializeRequest(item.request),\n }),\n );\n } catch (e) {\n localStorage.setItem(\"history\", \"[]\");\n return [];\n }\n}\n\ntype Bookmark = {\n label: string;\n request: Request;\n};\n\nconst root = document.getElementById(\"app\")!;\nconst bookmarks = root.hasAttribute(\"data-bookmarks\")\n ? JSON.parse(root.getAttribute(\"data-bookmarks\")!).map((bookmark: any) => ({\n label: bookmark.label,\n request: deserializeRequest(bookmark.request),\n }))\n : [];\n\nrender(\n ,\n document.getElementById(\"app\")!,\n);","deleted","label",[99],"permalink","https://www.val.town/x/pomdtr/http_client_component/code/main.tsx","extension","actionData","errors"]