GET methods are working. WIP

app/[type]/[index]/page.tsx

@@ -1,13 +1,16 @@
+import { EditorMain } from "@/components/editor/main";
+import { API_COLLECTIONS } from "@/utils/datas/api_collections";
+
 export default async function RouteAPI({
   params: { index, type },
 }: {
   params: { index: string; type: string };
 }) {
+  const endpoint = API_COLLECTIONS.find((col) => col.key === type)?.endpoints[
+    parseInt(index)
+  ];
+
   return (
-    <div>
-      <p className="text-white">
-        Number is: {index}. Type is {type}
-      </p>
-    </div>
+    <>{endpoint ? <EditorMain endpoint={endpoint} /> : <div>Not found</div>}</>
   );
 }

components/editor/header.tsx

@@ -6,7 +6,7 @@ export const EditorHeader = () => {
     <header className="px-6 py-2.5 border border-slate-950 bg-slate-950 flex justify-between items-center">
       <Image src={HFLogo} alt="Hugging Face Logo" width={34} height={34} />
       <p className="text-gray-300 font-code text-sm font-semibold">
-        Hugging Face API
+        Hugging Face Client REST API
       </p>
       <div className="flex items-center justify-end gap-3">
         <div className="bg-teal-600 w-3 h-3 rounded-full" />

components/editor/index.tsx

@@ -1,17 +1,20 @@
 "use client";
 import { useState } from "react";
+import { useMount } from "react-use";
 
 import { EditorHeader } from "./header";
 import { EditorSidebar } from "./sidebar";
-import { EditorMain } from "./main";
-import { ApiRoute } from "@/utils/type";
-import { API_COLLECTIONS } from "@/utils/datas/api_collections";
+import { usePathname } from "next/navigation";
 
 export const Editor = ({ children }: any) => {
-  const [collections, setCollections] = useState<string[]>(["search"]);
-  const [endpoint, setEndpoint] = useState<ApiRoute | null>(
-    API_COLLECTIONS[0].endpoints[0]
-  );
+  const [collections, setCollections] = useState<string[]>([]);
+  const pathname = usePathname();
+
+  useMount(() => {
+    if (!pathname || pathname === "/") setCollections(["search"]);
+    const firstPath = pathname.split("/")[1];
+    if (firstPath) setCollections([firstPath]);
+  });
 
   return (
     <div className="bg-slate-950 w-full overflow-hidden shadow-xl h-[100vh]">
@@ -19,18 +22,8 @@ export const Editor = ({ children }: any) => {
       <main className="flex h-full">
         <EditorSidebar
           collections={collections}
-          endpoint={endpoint}
           onCollections={setCollections}
-          onEndpoint={setEndpoint}
         />
-        {/* {endpoint && (
-          <EditorMain
-            collections={collections}
-            endpoint={endpoint}
-            onCollections={setCollections}
-            onEndpoint={setEndpoint}
-          />
-        )} */}
         {children}
       </main>
     </div>

components/editor/main/endpoint.tsx

@@ -8,15 +8,23 @@ import { ApiRoute } from "@/utils/type";
 export const Endpoint = ({
   endpoint,
   children,
+  onChange,
 }: {
   endpoint: ApiRoute;
   children: React.ReactElement;
+  onChange: (value: string) => void;
 }) => {
   const path_formatted = useMemo(
     () => splitStringBracket(endpoint.path),
     [endpoint.path]
   );
 
+  const handleChange = (value: string, index: number) => {
+    const currentString = splitStringBracket(endpoint.path);
+    currentString[index] = value;
+    onChange(currentString.join(""));
+  };
+
   return (
     <div className="bg-slate-900 w-full">
       <div className="bg-slate-950/50 p-3 rounded-lg flex items-center justify-between">
@@ -34,6 +42,9 @@ export const Endpoint = ({
                     "text-slate-300": !isCustomizable,
                   })}
                   contentEditable={isCustomizable}
+                  onBlur={(e) => {
+                    handleChange(e.currentTarget.textContent as string, i);
+                  }}
                 >
                   {p}
                 </p>

components/editor/main/hooks/useRequest.ts

@@ -9,6 +9,7 @@ export const useRequest = (endpoint: string, params: any) => {
 
   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(
@@ -28,11 +29,13 @@ export const useRequest = (endpoint: string, params: any) => {
         params: url.searchParams,
       })
       .then((res: any) => {
-        console.log("res ", res);
         if (res.ok) {
           setData(res.data);
         }
       })
+      .catch((err) => {
+        setData(err.data);
+      })
       .finally(() => setLoading(false));
   };
 

components/editor/main/index.tsx

@@ -1,3 +1,4 @@
+"use client";
 import { useState } from "react";
 
 import { ApiRoute } from "@/utils/type";
@@ -9,17 +10,7 @@ import { Response } from "./response";
 import { useRequest } from "./hooks/useRequest";
 import { useMount, useUpdateEffect } from "react-use";
 
-export const EditorMain = ({
-  collections,
-  endpoint,
-  onCollections,
-  onEndpoint,
-}: {
-  collections: string[];
-  endpoint: ApiRoute;
-  onCollections: (collections: string[]) => void;
-  onEndpoint: (endpoint: ApiRoute) => void;
-}) => {
+export const EditorMain = ({ endpoint }: { endpoint: ApiRoute }) => {
   const [formattedEndpoint, setFormattedEndpoint] = useState<string>(
     endpoint.path
   );
@@ -42,18 +33,6 @@ export const EditorMain = ({
     }
   });
 
-  useUpdateEffect(() => {
-    if (endpoint?.path) {
-      setFormattedEndpoint(endpoint.path);
-    }
-  }, [endpoint.path]);
-
-  useUpdateEffect(() => {
-    if (endpoint?.parameters) {
-      setFormattedParameters(endpoint.parameters);
-    }
-  }, [endpoint.parameters]);
-
   return (
     <div className="flex-1 bg-slate-900/50 h-[calc(100%-56px)]">
       <div className="h-full grid grid-cols-2">
@@ -66,7 +45,7 @@ export const EditorMain = ({
             });
           }}
         >
-          <Endpoint endpoint={endpoint}>
+          <Endpoint endpoint={endpoint} onChange={setFormattedEndpoint}>
             <button
               className="bg-indigo-500 hover:bg-indigo-500/80 text-white px-3 py-1 rounded-lg text-sm"
               onClick={submit}

components/editor/main/request.tsx

@@ -1,3 +1,5 @@
+import { Toggle } from "@/components/input/toggle";
+import { TextInput } from "@/components/input/input";
 import { ApiRoute } from "@/utils/type";
 
 export const Request = ({
@@ -10,11 +12,11 @@ export const Request = ({
   onChange: (key: string, value: string | boolean) => void;
 }) => {
   return (
-    <div className="h-full bg-slate-900 p-4">
+    <div className="h-full bg-slate-900 p-5">
       {children}
       {parameters && (
-        <div className="mt-6 grid grid-cols-1 gap-4">
-          <p className="text-slate-400 uppercase text-xs font-semibold">
+        <div className="mt-6 grid grid-cols-2 gap-6">
+          <p className="text-slate-200 uppercase text-xs font-semibold col-span-2">
             Optional parameters
           </p>
           {parameters &&
@@ -23,24 +25,20 @@ export const Request = ({
                 key={key}
                 className="flex items-center justify-between gap-2"
               >
-                <p className="text-slate-300 text-sm">{key}</p>
                 {typeof value === "boolean" ? (
                   <div>
-                    <input
-                      type="checkbox"
+                    <Toggle
                       checked={value}
-                      onChange={(e) =>
-                        onChange(key, e.target.checked as boolean)
-                      }
+                      label={key}
+                      onChange={(e) => onChange(key, e)}
                     />
                   </div>
                 ) : (
-                  <input
+                  <TextInput
                     value={value as string}
-                    type="text"
-                    className="bg-slate-950/50 w-full rounded-md px-2 py-1 text-slate-100 outline-none placeholder:text-slate-600"
+                    label={key}
                     placeholder="value"
-                    onChange={(e) => onChange(key, e.target.value)}
+                    onChange={(e) => onChange(key, e)}
                   />
                 )}
               </div>

components/editor/main/response.tsx

@@ -1,10 +1,10 @@
 import Highlight from "react-highlight";
-import "node_modules/highlight.js/styles/atom-one-dark.css";
+import "node_modules/highlight.js/styles/night-owl.css";
 import { Loading } from "@/components/loading";
 export const Response = ({ res, loading }: { res: any; loading: boolean }) => {
   return (
     <div className="overflow-auto h-full relative">
-      <Highlight className="json text-sm !bg-slate-950/10 !h-full !p-3">
+      <Highlight className="json text-sm !bg-slate-950/10 !h-full !p-3 !font-code !whitespace-pre-wrap">
         {JSON.stringify(res ?? {}, null, 2)}
       </Highlight>
       {loading && (

components/editor/sidebar.tsx

@@ -6,18 +6,17 @@ import { API_COLLECTIONS } from "@/utils/datas/api_collections";
 import { Method } from "@/components/method";
 import { ApiRoute } from "@/utils/type";
 import Link from "next/link";
+import { usePathname, useRouter } from "next/navigation";
 
 export const EditorSidebar = ({
   collections,
-  endpoint,
   onCollections,
-  onEndpoint,
 }: {
   collections: string[];
-  endpoint: ApiRoute | null;
   onCollections: (collections: string[]) => void;
-  onEndpoint: (endpoint: ApiRoute) => void;
 }) => {
+  const pathname = usePathname();
+
   const handleSetActiveCollection = (key: string) => {
     if (collections.includes(key)) {
       onCollections(collections.filter((col) => col !== key));
@@ -64,11 +63,9 @@ export const EditorSidebar = ({
                       "text-slate-400 font-semibold text-xs flex items-center justify-start gap-2 rounded-md p-2.5 hover:bg-slate-600 hover:bg-opacity-10 cursor-pointer border-t border-b border-transparent select-none",
                       {
                         "bg-slate-600 bg-opacity-20 hover:!bg-opacity-20 !text-slate-200 border-b !border-b-slate-700/70 border-t !border-t-slate-800":
-                          endpoint?.path === end.path &&
-                          endpoint?.method === end.method,
+                          pathname.includes(`/${collection.key}/${e}`),
                       }
                     )}
-                    onClick={() => onEndpoint(end)}
                   >
                     <Method method={end.method} />
                     <p className="truncate">{end.path}</p>

components/input/input.tsx

@@ -0,0 +1,38 @@
+import React, { ChangeEvent } from "react";
+
+interface Props {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  label?: string;
+}
+
+export const TextInput: React.FC<Props> = ({
+  value,
+  onChange,
+  placeholder,
+  label,
+}) => {
+  const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const newValue = event.target.value;
+    // Only allow numbers or strings
+    if (/^[0-9a-zA-Z]*$/.test(newValue)) {
+      onChange(newValue);
+    }
+  };
+
+  return (
+    <div className="w-full relative grid grid-cols-1 gap-2.5">
+      <label className="text-slate-400 text-sm font-medium capitalize">
+        {label}:
+      </label>
+      <input
+        type="text"
+        value={value}
+        placeholder={placeholder}
+        onChange={handleInputChange}
+        className="transition-all duration-200 w-full h-full px-4 py-4 bg-slate-950/50 rounded-lg  outline-none text-slate-200 placeholder:text-slate-600 focus:ring-4 focus:ring-indigo-600 focus:ring-opacity-40 border border-slate-950/50 focus:border-indigo-500"
+      />
+    </div>
+  );
+};

components/input/toggle.tsx

@@ -0,0 +1,53 @@
+import classNames from "classnames";
+import { useState } from "react";
+import { useUpdateEffect } from "react-use";
+
+interface Props {
+  label: string;
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+}
+
+export const Toggle: React.FC<Props> = ({ label, onChange, checked }) => {
+  const [checkedState, setCheckedState] = useState(checked);
+
+  useUpdateEffect(() => onChange(checkedState), [checkedState]);
+
+  return (
+    <div className="w-full flex items-center justify-start gap-2.5">
+      <label className="text-slate-400 text-sm font-medium capitalize">
+        {label}:
+      </label>
+      <div
+        className={classNames(
+          "w-[52px] h-[24px] rounded-full p-[4px] relative cursor-pointer",
+          {
+            "bg-red-700": !checkedState,
+            "bg-blue-600": checkedState,
+          }
+        )}
+        onClick={() => setCheckedState(!checkedState)}
+      >
+        <div
+          className={classNames(
+            "rounded-full h-[16px] w-[16px] bg-slate-50 shadow-xl absolute top-[4px] transition-all duration-200",
+            {
+              "left-[4px]": checkedState,
+              "left-[31px]": !checkedState,
+            }
+          )}
+        />
+        <p
+          className={classNames(
+            "text-white text-xs uppercase font-bold transition-all duration-200",
+            {
+              "text-right": checkedState,
+            }
+          )}
+        >
+          {checkedState ? "on" : "off"}
+        </p>
+      </div>
+    </div>
+  );
+};

components/loading/index.tsx

@@ -12,7 +12,7 @@ export const Loading = ({ children }: { children: React.ReactElement }) => (
         cy="12"
         r="10"
         stroke="currentColor"
-        stroke-width="4"
+        strokeWidth="4"
       ></circle>
       <path
         className="opacity-75"

utils/axios.ts

@@ -1,7 +1,11 @@
 import redaxios from 'redaxios';
 
 const axios = redaxios.create({
-  baseURL: process.env.NEXT_PUBLIC_APP_APIURL
+  baseURL: process.env.NEXT_PUBLIC_APP_APIURL,
+  headers: {
+    'Content-Type': 'application/json',
+    Authorization: `Bearer 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`,
+  },
 });
 
 export default axios

utils/datas/api_collections.ts

@@ -2,7 +2,8 @@ import { ApiCollection } from "@/utils/type";
 
 export const API_COLLECTIONS: Array<ApiCollection> = [{
   key: 'search',
-  endpoints: [{
+  endpoints: [
+    {
     method: 'GET',
     path: '/api/models',
     parameters: {
@@ -35,51 +36,86 @@ export const API_COLLECTIONS: Array<ApiCollection> = [{
     }
   }, {
     method: 'GET',
-    path: '/api/datasets/{repo_id}'
-  }],
-}, {
-  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'
+    path: '/api/datasets/{repo_id}',
+    parameters: {
+      full: true,
+    }
   }, {
-    method: 'POST',
-    path: '/api/repos/move'
-  }],
-}, {
-  key: 'user',
-  endpoints: [{
     method: 'GET',
-    path: '/api/whoami-v2',
-  }],
-}, {
-  key: 'collection',
-  endpoints: [{
-    method: 'POST',
-    path: '/api/collections',
+    path: '/api/datasets/{repo_id}/parquet'
   }, {
     method: 'GET',
-    path: '/api/collections/{namespace}/{slug}-{id}'
-  }, {
-    method: 'PATCH',
-    path: '/api/collections/{namespace}/{slug}-{id}'
+    path: '/api/datasets/{repo_id}/parquet/{config}/{split}/{n}.parquet'
   }, {
-    method: 'DELETE',
-    path: '/api/collections/{namespace}/{slug}-{id}'
+    method: 'GET',
+    path: '/api/datasets-tags-by-type'
   }, {
-    method: 'POST',
-    path: '/api/collections/{namespace}/{slug}-{id}/item'
+    method: 'GET',
+    path: '/api/spaces',
+    parameters: {
+      search: "",
+      author: "",
+      filter: "",
+      sort: "",
+      direction: "",
+      limit: 5,
+      full: true,
+      config: true
+    }
   }, {
-    method: 'PATCH',
-    path: '/api/collections/{namespace}/{slug}-{id}/items/{item_id}'
+    method: 'GET',
+    path: '/api/spaces/{repo_id}'
   }, {
-    method: 'DELETE',
-    path: '/api/collections/{namespace}/{slug}-{id}/items/{item_id}'
+    method: 'GET',
+    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: 'user',
+  endpoints: [{
+    method: 'GET',
+    path: '/api/whoami-v2',
   }],
-}]
+},
+// {
+//   key: 'collection',
+//   endpoints: [{
+//     method: 'POST',
+//     path: '/api/collections',
+//   }, {
+//     method: 'GET',
+//     path: '/api/collections/{namespace}/{slug}-{id}'
+//   }, {
+//     method: 'PATCH',
+//     path: '/api/collections/{namespace}/{slug}-{id}'
+//   }, {
+//     method: 'DELETE',
+//     path: '/api/collections/{namespace}/{slug}-{id}'
+//   }, {
+//     method: 'POST',
+//     path: '/api/collections/{namespace}/{slug}-{id}/item'
+//   }, {
+//     method: 'PATCH',
+//     path: '/api/collections/{namespace}/{slug}-{id}/items/{item_id}'
+//   }, {
+//     method: 'DELETE',
+//     path: '/api/collections/{namespace}/{slug}-{id}/items/{item_id}'
+//   }],
+// }
+]