rework endpoint behaviour

components/editor/main/endpoint.tsx

@@ -1,5 +1,4 @@
 import { useMemo } from "react";
-import classNames from "classnames";
 
 import { Method } from "@/components/method";
 import { splitStringBracket } from "@/utils";
@@ -7,42 +6,43 @@ import { ApiRoute } from "@/utils/type";
 import { Parameter } from "./parameter";
 
 export const Endpoint = ({
-  endpoint,
+  method,
+  path,
+  initialPath,
   children,
   onChange,
 }: {
-  endpoint: ApiRoute;
+  method: ApiRoute["method"];
+  path: string;
+  initialPath: ApiRoute["path"];
   children: React.ReactElement;
   onChange: (value: string) => void;
 }) => {
   const path_formatted = useMemo(
-    () => splitStringBracket(endpoint.path),
-    [endpoint.path]
+    () => splitStringBracket(initialPath),
+    [initialPath]
   );
 
-  const handleChange = (value: string, index: number) => {
-    const currentString = splitStringBracket(endpoint.path);
-    currentString[index] = value;
-    onChange(currentString.join(""));
+  const handleChange = (value: string, key: string) => {
+    onChange(path.replace(key, value));
   };
 
   return (
     <div className="bg-slate-900 w-full">
       <div className="bg-slate-950/50 p-3 rounded-lg flex items-center justify-between">
         <div className="text-white text-sm flex items-center justify-start gap-2 w-full">
-          <Method method={endpoint.method} />
+          <Method method={method} />
           <div className="flex items-center justify-start gap-1">
             {path_formatted.map((p, i) => {
-              const isCustomizable = p.startsWith("{") && p.endsWith("}");
-              return isCustomizable ? (
+              return p.editable ? (
                 <Parameter
                   key={i}
-                  value={p}
-                  onChange={(value) => handleChange(value, i)}
+                  value={p.content}
+                  onChange={(value) => handleChange(value, p.key)}
                 />
               ) : (
                 <p key={i} className="text-slate-300">
-                  {p}
+                  {p.content}
                 </p>
               );
             })}

components/editor/main/hooks/useRequest.ts

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

components/editor/main/index.tsx

@@ -57,7 +57,12 @@ export const EditorMain = ({ endpoint }: { endpoint: ApiRoute }) => {
           }}
           onBodyChange={(b: Options) => setFormattedBody(b)}
         >
-          <Endpoint endpoint={endpoint} onChange={setFormattedEndpoint}>
+          <Endpoint
+            path={formattedEndpoint}
+            initialPath={endpoint.path}
+            method={endpoint.method}
+            onChange={setFormattedEndpoint}
+          >
             <button
               className="bg-indigo-500 hover:bg-indigo-500/80 text-white px-3 py-1 rounded-lg text-sm"
               onClick={submit}

utils/datas/api_collections.ts

@@ -105,13 +105,36 @@ export const API_COLLECTIONS: Array<ApiCollection> = [{
     ]
   }, {
     method: 'DELETE',
-    path: '/api/repos/delete'
-  }, {
-    method: 'PUT',
-    path: '/api/repos/{repo_type}/{repo_id}/settings'
+    path: '/api/repos/delete',
+    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",
+    }]
   }, {
     method: 'POST',
-    path: '/api/repos/move'
+    path: '/api/repos/move',
+    body: [{
+      label: "From which repo",
+      key: "fromRepo",
+      required: true,
+    },
+    {
+      label: "To which repo",
+      key: "toRepo",
+      required: true,
+    }]
   }],
 },
 {

utils/index.ts

@@ -1,5 +1,16 @@
-export const splitStringBracket = (str: string): string[] => {
+export const splitStringBracket = (str: string): any[] => {
   // Split string by bracket but keep the bracket
   const result = str.split(/(\{.*?\})/g)
-  return result.filter((item) => item !== '')
+  return result.map((item) => {
+    if (item.startsWith('{') && item.endsWith('}')) {
+      return {
+        editable: true,
+        content: item.slice(1, -1),
+        key: item,
+      }
+    } return {
+      editable: false,
+      content: item
+    }
+  })
 }