components/editor/main/index.tsx

"use client";
import { useState } from "react";

import { ApiRoute } from "@/utils/type";

import { Endpoint } from "./endpoint";
import { Request } from "./request";
import { Response } from "./response";
import { useRequest } from "./hooks/useRequest";
import { useMount, useUpdateEffect } from "react-use";

export const EditorMain = ({ endpoint }: { endpoint: ApiRoute }) => {
  const [formattedEndpoint, setFormattedEndpoint] = useState<string>(
    endpoint.path
  );
  const [formattedParameters, setFormattedParameters] = useState(
    endpoint?.parameters ? { ...endpoint.parameters } : undefined
  );
  const { loading, submit, data } = useRequest(
    formattedEndpoint,
    formattedParameters
  );

  useMount(() => {
    if (
      endpoint?.path &&
      endpoint?.method === "GET" &&
      !endpoint?.path?.includes("{") &&
      !endpoint?.path?.includes("}")
    ) {
      submit();
    }
  });

  return (
    <div className="flex-1 bg-slate-900/50 h-[calc(100%-56px)]">
      <div className="h-full grid grid-cols-2">
        <Request
          parameters={formattedParameters}
          onChange={(k: string, v: string | boolean) => {
            setFormattedParameters({
              ...formattedParameters,
              [k]: v,
            });
          }}
        >
          <Endpoint endpoint={endpoint} onChange={setFormattedEndpoint}>
            <button
              className="bg-indigo-500 hover:bg-indigo-500/80 text-white px-3 py-1 rounded-lg text-sm"
              onClick={submit}
            >
              Send
            </button>
          </Endpoint>
        </Request>
        <Response res={data} loading={loading} />
      </div>
    </div>
  );
};