Spaces:
Sleeping
Sleeping
File size: 3,840 Bytes
76ea2b9 03ce1cf 6294700 76ea2b9 03ce1cf 5916048 5be784e 03ce1cf 5916048 03ce1cf 5916048 5be784e 5916048 03ce1cf 5916048 76ea2b9 a22946c 76ea2b9 03ce1cf 5916048 56f2b76 5916048 5be784e 76ea2b9 6294700 5916048 5be784e 5916048 5be784e 6294700 5be784e 6294700 03ce1cf 5be784e 6294700 5be784e 6294700 5be784e 03ce1cf 570e2d9 03ce1cf 570e2d9 03ce1cf 5be784e 5916048 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 |
"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 { Body } from "@/utils/type";
import { useUpdateEffect } from "react-use";
export const Request = ({
parameters,
body,
formattedBody,
onBodyChange,
children,
onParamsChange,
}: {
parameters: any;
children: React.ReactElement;
body: Array<Body> | undefined;
formattedBody: Options | undefined;
onBodyChange: (o: Options) => void;
onParamsChange: (key: string, value: string | boolean) => void;
}) => {
const [headers, setHeaders] = usePersistentState("headers", {
Authorization: "",
});
const [bodyForm, setBodyForm] = useState<Options>({});
useUpdateEffect(() => onBodyChange(bodyForm), [bodyForm]);
return (
<div className="h-full bg-slate-900 px-4 xl:px-6 py-5 overflow-auto">
{children}
{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}
onChange={(e) => onParamsChange(key, e)}
/>
</div>
) : (
<TextInput
value={value as string}
label={key}
placeholder="value"
onChange={(e) => onParamsChange(key, e)}
/>
)}
</div>
))}
</div>
)}
{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>
{body?.length &&
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}
// subLabel={b.label}
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}
subLabel={b.label}
placeholder="value"
onChange={(e) => setBodyForm({ ...bodyForm, [b.key]: e })}
/>
)}
</div>
))}
</div>
)}
<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>
</div>
);
};
|