components/editor/main/index.tsx

"use client";
import { useState } from "react";
import { useMount } from "react-use";
import { Options } from "redaxios";

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

import { Endpoint } from "./endpoint";
import { Request } from "./request";
import { Response } from "./response";
import { useRequest } from "./hooks/useRequest";

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

  const { loading, submit, data } = useRequest(
    endpoint.method.toLocaleLowerCase() as
      | "post"
      | "put"
      | "patch"
      | "delete"
      | "get",
    formattedEndpoint,
    formattedParameters,
    formattedBody
  );

  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-1 xl:grid-cols-3">
        <Request
          parameters={formattedParameters}
          body={endpoint?.body}
          formattedBody={formattedBody}
          onParamsChange={(k: string, v: string | boolean) => {
            setFormattedParameters({
              ...formattedParameters,
              [k]: v,
            });
          }}
          onBodyChange={(b: Options) => setFormattedBody(b)}
        >
          <Endpoint
            path={formattedEndpoint}
            initialPath={endpoint.path}
            method={endpoint.method}
            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>
  );
};