Spaces:
Sleeping
Sleeping
File size: 2,192 Bytes
6294700 5916048 03ce1cf 5916048 5be784e 5916048 6294700 5be784e 5916048 5be784e 03ce1cf 5be784e 03ce1cf 5be784e 03ce1cf 5be784e 5916048 d2a6779 5be784e 03ce1cf 5be784e 03ce1cf 5be784e 1ce932e 5916048 5be784e 5916048 5be784e 5916048 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 |
"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>
);
};
|