Function SwaggerUI

pwa/app/playground/components/SwaggerUI.tsx:70–126

({
  guide,
  ccall,
}: {
  guide: string;
  ccall: any;
})

}

export default function SwaggerUI({
  guide,
  ccall,
}: {
  guide: string;
  ccall: any;
}) {
  const [openApiDoc, setOpenApiDoc] = useState(null);

  useEffect(() => {
    let ignore = false;

    (async () => {
      await Promise.resolve();
      if (ignore) {
        return;
      }

      ccall("setenv", null, [STR, STR, "number"], ["APP_GUIDE", guide, 1]);
      const response = phpFetch(new URL("https://localhost/docs"), {
        ccall,
      });
      const docs = await response.json();
      setOpenApiDoc(docs);
    })();

    // @see https://marmelab.com/blog/2023/01/11/use-async-effect-react.html
    return () => {
      ignore = true;
    };
  }, [ccall, guide]);

  // req is a swagger request with some special options
  const requestInterceptor = useCallback(
    (req: any) => {
      req.userFetch = (url: string, opts: RequestInit) => {
        return phpFetch(new URL(url), { ...opts, ccall });
      };
      return req;
    },
    [ccall]
  );

  if (!openApiDoc) {
    return <div>Loading</div>;
  }

  return (
    <SwaggerUIReact
      docExpansion={"full"}
      tryItOutEnabled={true}
      requestInterceptor={requestInterceptor}
      spec={openApiDoc}
      syntaxHighlight={false} // react-syntax-highlighter is broken
    />
  );
}