diff --git a/src/containers/App.tsx b/src/containers/App.tsx index 5971195..0a92cca 100644 --- a/src/containers/App.tsx +++ b/src/containers/App.tsx @@ -7,11 +7,14 @@ import useDarkMode from "use-dark-mode"; import Inspector from "./Inspector"; import useQueryParams from "../hooks/useQueryParams"; import * as monaco from "monaco-editor"; +import useOpenrpcDocument from "../hooks/useOpenrpcDocument"; const App: React.FC = () => { const darkMode = useDarkMode(); const [query] = useQueryParams(); const theme = darkMode.value ? darkTheme : lightTheme; + const openrpcDocument = useOpenrpcDocument(query.openrpcDocument, query.schemaUrl); + useEffect(() => { const t = darkMode.value ? "vs-dark" : "vs"; monaco.editor.setTheme(t); @@ -27,7 +30,7 @@ const App: React.FC = () => { customTransport={query.customTransport} transport={query.transport} url={query.url} - openrpcDocument={query.openrpcDocument} + openrpcDocument={openrpcDocument} request={query.request} /> diff --git a/src/hooks/useOpenrpcDocument.ts b/src/hooks/useOpenrpcDocument.ts new file mode 100644 index 0000000..0106941 --- /dev/null +++ b/src/hooks/useOpenrpcDocument.ts @@ -0,0 +1,24 @@ +import { useEffect, useState } from "react"; + +const useOpenrpcDocument = (openrpcDocument?: string, schemaUrl?: string) => { + + const [openrpcDoc, setOpenrpcDoc] = useState(openrpcDocument); + useEffect(() => { + async function retrieveOpenrpcDocument() { + try { + if (!openrpcDocument && schemaUrl) { + const response = await fetch(schemaUrl); + const doc = await response.json(); + setOpenrpcDoc(doc); + } + + } catch (e) { + setOpenrpcDoc(undefined); + } + } + retrieveOpenrpcDocument(); + }, [openrpcDocument, schemaUrl]); + return openrpcDoc; +}; + +export default useOpenrpcDocument;