add post function

components/editor/main/endpoint.tsx

@@ -41,7 +41,9 @@ export const Endpoint = ({
                   onChange={(value) => handleChange(value, i)}
                 />
               ) : (
-                <p className="text-slate-300">{p}</p>
+                <p key={i} className="text-slate-300">
+                  {p}
+                </p>
               );
             })}
           </div>

components/editor/main/hooks/useRequest.ts

@@ -1,19 +1,19 @@
 import { useState } from "react"
 
 import axios from "@/utils/axios";
-import { ApiRoute } from "@/utils/type";
+import { Options } from "redaxios";
 
-export const useRequest = (endpoint: string, params: any) => {
+export const useRequest = (method: "post" | "put" | "patch" | "delete" | "get", endpoint: string, params: Options, body: Options | undefined) => {
   const [loading, setLoading] = useState<boolean>(false)
   const [data, setData] = useState<any>(null)
 
   const submit = async () => {
     setLoading(true);
-    console.log(endpoint)
+
     const url = new URL(endpoint, process.env.NEXT_PUBLIC_APP_APIURL);
     if (params) {
       const parameters = Object.entries(params).filter(
-        ([key, value]) =>
+        ([_, value]) =>
           value !== "" &&
           value !== null &&
           value !== undefined &&
@@ -24,19 +24,29 @@ export const useRequest = (endpoint: string, params: any) => {
       });
     }
 
-    axios
-      .get(url.pathname, {
-        params: url.searchParams,
-      })
-      .then((res: any) => {
-        if (res.ok) {
-          setData(res.data);
-        }
-      })
-      .catch((err) => {
-        setData(err.data);
-      })
-      .finally(() => setLoading(false));
+    console.log(
+      "Requesting",
+      method,
+      url.pathname,
+      url.searchParams.toString(),
+      body
+    )
+
+    const needBody = ["post", "put", "patch"].includes(method);
+
+    axios[method](url.pathname, needBody ? body : {
+      params: url.searchParams
+    })
+    .then((res: any) => {
+      if (res.ok) {
+        setData(res.data);
+      }
+    })
+    .catch((err) => {
+      setData(err.data);
+    })
+    .finally(() => setLoading(false));
+      
   };
 
   return {

components/editor/main/index.tsx

@@ -1,5 +1,7 @@
 "use client";
 import { useState } from "react";
+import { useMount } from "react-use";
+import { Options } from "redaxios";
 
 import { ApiRoute } from "@/utils/type";
 
@@ -7,7 +9,6 @@ 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>(
@@ -16,9 +17,18 @@ export const EditorMain = ({ endpoint }: { endpoint: ApiRoute }) => {
   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
+    formattedParameters,
+    formattedBody
   );
 
   useMount(() => {
@@ -37,12 +47,15 @@ export const EditorMain = ({ endpoint }: { endpoint: ApiRoute }) => {
       <div className="h-full grid grid-cols-1 xl:grid-cols-3">
         <Request
           parameters={formattedParameters}
-          onChange={(k: string, v: string | boolean) => {
+          body={endpoint?.body}
+          formattedBody={formattedBody}
+          onParamsChange={(k: string, v: string | boolean) => {
             setFormattedParameters({
               ...formattedParameters,
               [k]: v,
             });
           }}
+          onBodyChange={(b: Options) => setFormattedBody(b)}
         >
           <Endpoint endpoint={endpoint} onChange={setFormattedEndpoint}>
             <button

components/editor/main/request.tsx

@@ -1,21 +1,36 @@
 "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,
-  onChange,
+  onParamsChange,
 }: {
   parameters: any;
   children: React.ReactElement;
-  onChange: (key: string, value: string | boolean) => void;
+  body: Array<Body> | undefined;
+  formattedBody: Options | undefined;
+  onBodyChange: (o: Options) => void;
+  onParamsChange: (key: string, value: string | boolean) => void;
 }) => {
   const [headers, setHeaders] = usePersistentState("headers", {
     Authorization: "hf_api_key",
   });
 
+  const [bodyForm, setBodyForm] = useState<Options>({});
+
+  useUpdateEffect(() => onBodyChange(bodyForm), [bodyForm]);
+
   return (
     <div className="h-full bg-slate-900 px-4 xl:px-6 py-5">
       {children}
@@ -35,7 +50,7 @@ export const Request = ({
                     <Toggle
                       checked={value}
                       label={key}
-                      onChange={(e) => onChange(key, e)}
+                      onChange={(e) => onParamsChange(key, e)}
                     />
                   </div>
                 ) : (
@@ -43,7 +58,42 @@ export const Request = ({
                     value={value as string}
                     label={key}
                     placeholder="value"
-                    onChange={(e) => onChange(key, e)}
+                    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}
+                      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>

utils/datas/api_collections.ts

@@ -70,22 +70,46 @@ export const API_COLLECTIONS: Array<ApiCollection> = [{
     path: '/api/metrics'
   }],
 },
-// {
-//   key: 'repo',
-//   endpoints: [{
-//     method: 'POST',
-//     path: '/api/repos/create',
-//   }, {
-//     method: 'DELETE',
-//     path: '/api/repos/delete'
-//   }, {
-//     method: 'PUT',
-//     path: '/api/repos/{repo_type}/{repo_id}/settings'
-//   }, {
-//     method: 'POST',
-//     path: '/api/repos/move'
-//   }],
-// },
+{
+  key: 'repo',
+  endpoints: [{
+    method: 'POST',
+    path: '/api/repos/create',
+    body: [
+      {
+        label: "Type of repo (dataset or space; model by default)",
+        defaultValue: "model",
+        key: "type",
+        required: true,
+      },
+      {
+        label: "Name of repo",
+        key: "name",
+        required: true,
+      },
+      {
+        label: "Name of organization (optional)",
+        required: true,
+        key: "organization",
+      },
+      {
+        label: "Whether the repo is private",
+        required: true,
+        key: "private",
+        defaultValue: false,
+      },
+    ]
+  }, {
+    method: 'DELETE',
+    path: '/api/repos/delete'
+  }, {
+    method: 'PUT',
+    path: '/api/repos/{repo_type}/{repo_id}/settings'
+  }, {
+    method: 'POST',
+    path: '/api/repos/move'
+  }],
+},
 {
   key: 'user',
   endpoints: [{

utils/type.ts

@@ -6,5 +6,13 @@ export interface ApiCollection {
 export interface ApiRoute {
   method: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH'
   path: string,
-  parameters?: any
+  parameters?: any,
+  body?: Array<Body>
+}
+
+export interface Body {
+  key: string
+  label: string
+  required?: boolean
+  defaultValue?: any
 }