Spaces:
Sleeping
Sleeping
| "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> | |
| ); | |
| }; | |