Function Main

src/ui/Main.tsx:16–169

()

import { isEmpty } from "lodash";

function Main() {
  const [spec, setSpec] = useState<OpenAPIObject | null>(null);
  const [endpoints, setEndpoints] = useState<Array<Endpoint>>([]);
  const [endpointsByHost, setEndpointsByHost] = useState<EndpointsByHost>([]);
  const [allHosts, setAllHosts] = useState<Set<string>>(new Set());
  const [disabledHosts, setDisabledHosts] = useState<Set<string>>(new Set());
  const initialStatus = isEmpty(requestStore.get())
    ? Status.INIT
    : Status.RECORDING;
  const [status, setStatus] = useState(initialStatus);

  const requestFinishedHandler = useCallback(
    (harRequest: chrome.devtools.network.Request) => {
      async function getCurrentTab() {
        try {
          harRequest.getContent((content) => {
            try {
              const contentStr = content || '';
              const wasInserted = requestStore.insert(harRequest, contentStr);
              if (!wasInserted) return;
              setSpecEndpoints();
              const host = safelyGetURLHost(harRequest.request.url);
              if (host && !allHosts.has(host)) {
                setAllHosts((prev) => new Set(prev).add(host));
              }
            } catch {
              return;
            }
          });
        } catch {
          return;
        }
      }

      getCurrentTab();
    },
    []
  );

  useEffect(() => {
    return () => {
      chrome.devtools.network.onRequestFinished.removeListener(
        requestFinishedHandler
      );
    };
  }, []);

  const setSpecEndpoints = useCallback(async () => {
    const nextEndpoints = requestStore.endpoints();
    setSpec(endpointsToOAI31(nextEndpoints, requestStore.options()).getSpec());
    setEndpoints(sortEndpoints(nextEndpoints));
  }, []);

  useEffect(() => {
    requestStore.setDisabledHosts(disabledHosts);
    setSpecEndpoints();
  }, [disabledHosts]);