Spaces:
Build error
Build error
File size: 4,843 Bytes
76ea2b9 03ce1cf 6294700 76ea2b9 ff1a29c 03ce1cf ff1a29c 5916048 5be784e 03ce1cf ff1a29c 03ce1cf ff1a29c 5916048 03ce1cf 5916048 ff1a29c 5916048 03ce1cf ff1a29c 03ce1cf 5916048 ff1a29c 76ea2b9 a22946c 76ea2b9 03ce1cf 5916048 ff1a29c 5916048 ff1a29c 6294700 ff1a29c 03ce1cf 5be784e ff1a29c 03ce1cf ff1a29c 03ce1cf ff1a29c 76ea2b9 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 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 |
"use client";
import { useState } from "react";
import { Options } from "redaxios";
import { Toggle } from "@/components/input/toggle";
import { TextInput } from "@/components/input/input";
import { usePersistentState } from "@/utils/usePersistentState";
import { ApiRoute, Body } from "@/utils/type";
import { useUpdateEffect } from "react-use";
import { Snippet } from "./snippet";
import { Tabs } from "./tabs";
export const Request = ({
parameters,
formattedBody,
formattedEndpoint,
onBodyChange,
endpoint,
children,
onParamsChange,
}: {
parameters: Record<string, any>;
children: React.ReactElement;
formattedBody: Options | undefined;
endpoint: ApiRoute;
formattedEndpoint: string;
onBodyChange: (o: Options) => void;
onParamsChange: (key: string, value: string | boolean) => void;
}) => {
const [tab, setTab] = useState<"headers" | "parameters" | "body" | "snippet">(
endpoint?.parameters ? "parameters" : endpoint?.body ? "body" : "headers"
);
const [headers, setHeaders] = usePersistentState("headers", {
Authorization: "",
});
const [bodyForm, setBodyForm] = useState<Options>({});
useUpdateEffect(() => onBodyChange(bodyForm), [bodyForm]);
return (
<div className="h-full bg-slate-900 pb-5 overflow-auto">
{children}
<Tabs active={tab} setActive={setTab} endpoint={endpoint} />
<div className="px-4 xl:px-6">
{tab === "parameters" && parameters && (
<div className="mt-6 grid grid-cols-2 gap-6 w-full">
<p className="text-slate-200 uppercase text-xs font-semibold col-span-2">
Optional parameters
</p>
{parameters &&
Object.entries(parameters).map(([key, value]) => (
<div
key={key}
className="flex items-center justify-between gap-2"
>
{typeof value === "boolean" ? (
<div>
<Toggle
checked={value}
label={key}
tooltip={endpoint?.tooltips?.[key]}
onChange={(e) => onParamsChange(key, e)}
/>
</div>
) : (
<TextInput
value={value as string}
label={key}
tooltip={endpoint?.tooltips?.[key]}
placeholder="value"
onChange={(e) => onParamsChange(key, e)}
/>
)}
</div>
))}
</div>
)}
{tab === "body" && endpoint?.body?.length && (
<div className="mt-6 grid grid-cols-2 gap-6 w-full">
<p className="text-slate-200 uppercase text-xs font-semibold col-span-2">
Body
</p>
{endpoint?.body?.length &&
endpoint?.body.map((b, key) => (
<div
key={key}
className="flex items-center justify-between gap-2"
>
{typeof b.defaultValue === "boolean" ? (
<div>
<Toggle
checked={b.defaultValue}
label={b.key}
onChange={(e) =>
setBodyForm({ ...bodyForm, [b.key]: e })
}
/>
</div>
) : (
<TextInput
value={
(formattedBody?.[
b.key as keyof typeof formattedBody
] as string) ?? (b.defaultValue as string)
}
label={b.key}
placeholder="value"
onChange={(e) => setBodyForm({ ...bodyForm, [b.key]: e })}
/>
)}
</div>
))}
</div>
)}
{tab === "headers" && (
<div className="mt-8 grid grid-cols-1 gap-6 w-full">
<p className="text-slate-200 uppercase text-xs font-semibold">
Headers
</p>
<TextInput
value={headers?.Authorization}
label="Authorization"
placeholder="Authorization"
onlyAlphaNumeric={false}
onChange={(Authorization) =>
setHeaders({ ...headers, Authorization })
}
/>
</div>
)}
{tab === "snippet" && (
<Snippet
endpoint={{ ...endpoint, path: formattedEndpoint }}
parameters={parameters}
body={formattedBody}
/>
)}
</div>
</div>
);
};
|