File size: 1,697 Bytes
6294700
5916048
 
 
 
 
 
 
5be784e
 
5916048
6294700
5be784e
 
5916048
5be784e
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
5916048
 
 
 
5be784e
 
 
 
 
 
 
 
 
6294700
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
"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>
  );
};