hub-api-playground

Sleeping

App Files Files Community

Esteves Enzo commited on Oct 23, 2023

Commit

5be784e

•

1 Parent(s): 5916048

change structure, adding custom routes

Browse files

Files changed (11) hide show

app/[type]/[index]/page.tsx +13 -0
app/layout.tsx +2 -2
app/page.tsx +1 -5
components/editor/index.tsx +4 -3
components/editor/main/hooks/useRequest.ts +45 -0
components/editor/main/index.tsx +41 -27
components/editor/main/request.tsx +26 -11
components/editor/main/response.tsx +8 -2
components/editor/sidebar.tsx +4 -12
components/loading/index.tsx +25 -0
utils/datas/api_collections.ts +11 -2

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

	@@ -0,0 +1,13 @@

+export default async function RouteAPI({
+  params: { index, type },
+}: {
+  params: { index: string; type: string };
+}) {
+  return (
+    <div>
+      <p className="text-white">
+        Number is: {index}. Type is {type}
+      </p>
+    </div>
+  );
+}

app/layout.tsx CHANGED Viewed

@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { Fira_Code, Inter } from "next/font/google";
 import "@/assets/globals.css";
 const inter = Inter({
   subsets: ["latin"],
@@ -27,8 +28,7 @@ export default function RootLayout({
   return (
     <html lang="en" className={`${inter.variable} ${fira_code.variable}`}>
       <body>
-        <div id="background__noisy" />
-        {children}
       </body>
     </html>
   );

 import type { Metadata } from "next";
 import { Fira_Code, Inter } from "next/font/google";
 import "@/assets/globals.css";
+import { Editor } from "@/components/editor";
 const inter = Inter({
   subsets: ["latin"],
   return (
     <html lang="en" className={`${inter.variable} ${fira_code.variable}`}>
       <body>
+        <Editor>{children}</Editor>
       </body>
     </html>
   );

app/page.tsx CHANGED Viewed

@@ -2,9 +2,5 @@ import { Editor } from "@/components/editor";
 import Image from "next/image";
 export default function Home() {
-  return (
-    <section className="h-full">
-      <Editor />
-    </section>
-  );
 }

 import Image from "next/image";
 export default function Home() {
+  return <section className="h-full">lol</section>;
 }

components/editor/index.tsx CHANGED Viewed

@@ -7,7 +7,7 @@ import { EditorMain } from "./main";
 import { ApiRoute } from "@/utils/type";
 import { API_COLLECTIONS } from "@/utils/datas/api_collections";
-export const Editor = () => {
   const [collections, setCollections] = useState<string[]>(["search"]);
   const [endpoint, setEndpoint] = useState<ApiRoute | null>(
     API_COLLECTIONS[0].endpoints[0]
@@ -23,14 +23,15 @@ export const Editor = () => {
           onCollections={setCollections}
           onEndpoint={setEndpoint}
         />
-        {endpoint && (
           <EditorMain
             collections={collections}
             endpoint={endpoint}
             onCollections={setCollections}
             onEndpoint={setEndpoint}
           />
-        )}
       </main>
     </div>
   );

 import { ApiRoute } from "@/utils/type";
 import { API_COLLECTIONS } from "@/utils/datas/api_collections";
+export const Editor = ({ children }: any) => {
   const [collections, setCollections] = useState<string[]>(["search"]);
   const [endpoint, setEndpoint] = useState<ApiRoute | null>(
     API_COLLECTIONS[0].endpoints[0]
           onCollections={setCollections}
           onEndpoint={setEndpoint}
         />
+        {/* {endpoint && (
           <EditorMain
             collections={collections}
             endpoint={endpoint}
             onCollections={setCollections}
             onEndpoint={setEndpoint}
           />
+        )} */}
+        {children}
       </main>
     </div>
   );

components/editor/main/hooks/useRequest.ts ADDED Viewed

	@@ -0,0 +1,45 @@

+import { useState } from "react"
+import axios from "@/utils/axios";
+import { ApiRoute } from "@/utils/type";
+export const useRequest = (endpoint: string, params: any) => {
+  const [loading, setLoading] = useState<boolean>(false)
+  const [data, setData] = useState<any>(null)
+  const submit = async () => {
+    setLoading(true);
+    const url = new URL(endpoint, process.env.NEXT_PUBLIC_APP_APIURL);
+    if (params) {
+      const parameters = Object.entries(params).filter(
+        ([key, value]) =>
+          value !== "" &&
+          value !== null &&
+          value !== undefined &&
+          value !== false
+      );
+      parameters.forEach(([key, value]) => {
+        url.searchParams.append(key, value as string);
+      });
+    }
+    axios
+      .get(url.pathname, {
+        params: url.searchParams,
+      })
+      .then((res: any) => {
+        console.log("res ", res);
+        if (res.ok) {
+          setData(res.data);
+        }
+      })
+      .finally(() => setLoading(false));
+  };
+  return {
+    submit,
+    loading,
+    setLoading,
+    data
+  }
+}

components/editor/main/index.tsx CHANGED Viewed

@@ -6,6 +6,8 @@ import axios from "@/utils/axios";
 import { Endpoint } from "./endpoint";
 import { Request } from "./request";
 import { Response } from "./response";
 export const EditorMain = ({
   collections,
@@ -18,50 +20,62 @@ export const EditorMain = ({
   onCollections: (collections: string[]) => void;
   onEndpoint: (endpoint: ApiRoute) => void;
 }) => {
-  const [formattedEndpoint, setFormattedEndpoint] = useState<string | null>(
-    null
   );
-  const [response, setResponse] = useState<any | null>(null);
-  const handleRequest = async () => {
-    const url = new URL(endpoint.path, process.env.NEXT_PUBLIC_APP_APIURL);
     if (endpoint?.parameters) {
-      const parameters = Object.entries(endpoint.parameters).filter(
-        ([key, value]) => value !== "" && value !== null
-      );
-      parameters.forEach(([key, value]) => {
-        url.searchParams.append(key, value as string);
-      });
     }
-    console.log("url ", url);
-    axios
-      .get(url.pathname, {
-        params: url.searchParams,
-      })
-      .then((res: any) => {
-        console.log("res ", res);
-        if (res.ok) {
-          setResponse(res.data);
-        }
-      });
-  };
   return (
     <div className="flex-1 bg-slate-900/50 h-[calc(100%-56px)]">
       <div className="h-full grid grid-cols-2">
-        <Request endpoint={endpoint}>
           <Endpoint endpoint={endpoint}>
             <button
               className="bg-indigo-500 hover:bg-indigo-500/80 text-white px-3 py-1 rounded-lg text-sm"
-              onClick={handleRequest}
             >
               Send
             </button>
           </Endpoint>
         </Request>
-        <Response res={response} />
       </div>
     </div>
   );

 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 = ({
   collections,
   onCollections: (collections: string[]) => void;
   onEndpoint: (endpoint: ApiRoute) => void;
 }) => {
+  const [formattedEndpoint, setFormattedEndpoint] = useState<string>(
+    endpoint.path
   );
+  const [formattedParameters, setFormattedParameters] = useState(
+    endpoint?.parameters ? { ...endpoint.parameters } : undefined
+  );
+  const { loading, submit, data } = useRequest(
+    formattedEndpoint,
+    formattedParameters
+  );
+  useMount(() => {
+    if (
+      endpoint?.path &&
+      endpoint?.method === "GET" &&
+      !endpoint?.path?.includes("{") &&
+      !endpoint?.path?.includes("}")
+    ) {
+      submit();
+    }
+  });
+  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">
+        <Request
+          parameters={formattedParameters}
+          onChange={(k: string, v: string | boolean) => {
+            setFormattedParameters({
+              ...formattedParameters,
+              [k]: v,
+            });
+          }}
+        >
           <Endpoint endpoint={endpoint}>
             <button
               className="bg-indigo-500 hover:bg-indigo-500/80 text-white px-3 py-1 rounded-lg text-sm"
+              onClick={submit}
             >
               Send
             </button>
           </Endpoint>
         </Request>
+        <Response res={data} loading={loading} />
       </div>
     </div>
   );

components/editor/main/request.tsx CHANGED Viewed

@@ -1,33 +1,48 @@
 import { ApiRoute } from "@/utils/type";
 export const Request = ({
-  endpoint,
   children,
 }: {
-  endpoint: ApiRoute;
   children: React.ReactElement;
 }) => {
   return (
     <div className="h-full bg-slate-900 p-4">
       {children}
-      {endpoint?.parameters && (
         <div className="mt-6 grid grid-cols-1 gap-4">
           <p className="text-slate-400 uppercase text-xs font-semibold">
             Optional parameters
           </p>
-          {endpoint?.parameters &&
-            Object.entries(endpoint.parameters).map(([key, value]) => (
               <div
                 key={key}
                 className="flex items-center justify-between gap-2"
               >
                 <p className="text-slate-300 text-sm">{key}</p>
-                <input
-                  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"
-                  placeholder="value"
-                />
               </div>
             ))}
         </div>

 import { ApiRoute } from "@/utils/type";
 export const Request = ({
+  parameters,
   children,
+  onChange,
 }: {
+  parameters: any;
   children: React.ReactElement;
+  onChange: (key: string, value: string | boolean) => void;
 }) => {
   return (
     <div className="h-full bg-slate-900 p-4">
       {children}
+      {parameters && (
         <div className="mt-6 grid grid-cols-1 gap-4">
           <p className="text-slate-400 uppercase text-xs font-semibold">
             Optional parameters
           </p>
+          {parameters &&
+            Object.entries(parameters).map(([key, value]) => (
               <div
                 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"
+                      checked={value}
+                      onChange={(e) =>
+                        onChange(key, e.target.checked as boolean)
+                      }
+                    />
+                  </div>
+                ) : (
+                  <input
+                    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"
+                    placeholder="value"
+                    onChange={(e) => onChange(key, e.target.value)}
+                  />
+                )}
               </div>
             ))}
         </div>

components/editor/main/response.tsx CHANGED Viewed

@@ -1,11 +1,17 @@
 import Highlight from "react-highlight";
 import "node_modules/highlight.js/styles/atom-one-dark.css";
-export const Response = ({ res }: { res: any }) => {
   return (
-    <div className="overflow-auto h-full">
       <Highlight className="json text-sm !bg-slate-950/10 !h-full !p-3">
         {JSON.stringify(res ?? {}, null, 2)}
       </Highlight>
     </div>
   );
 };

 import Highlight from "react-highlight";
 import "node_modules/highlight.js/styles/atom-one-dark.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">
         {JSON.stringify(res ?? {}, null, 2)}
       </Highlight>
+      {loading && (
+        <Loading>
+          <p className="text-slate-400 text-lg mt-4">Processing...</p>
+        </Loading>
+      )}
     </div>
   );
 };

components/editor/sidebar.tsx CHANGED Viewed

@@ -5,6 +5,7 @@ import classNames from "classnames";
 import { API_COLLECTIONS } from "@/utils/datas/api_collections";
 import { Method } from "@/components/method";
 import { ApiRoute } from "@/utils/type";
 export const EditorSidebar = ({
   collections,
@@ -24,16 +25,6 @@ export const EditorSidebar = ({
       onCollections([...collections, key]);
     }
   };
-  // useUpdateEffect(() => {
-  //   if (collections) {
-  //     const first_endpoint = API_COLLECTIONS.find(
-  //       (col) => col.key === collections
-  //     )?.endpoints[0];
-  //     if (first_endpoint) onEndpoint(first_endpoint);
-  //   }
-  // }, [collections]);
   return (
     <ul className="min-w-[300px] max-w-sm w-full bg-slate-900 border-r border-slate-700/40 h-full overflow-auto">
       {API_COLLECTIONS.map((collection, c) => (
@@ -66,8 +57,9 @@ export const EditorSidebar = ({
             <div className="bg-slate-700/20 w-full p-3 border-b border-slate-700/70">
               <ul className="w-full">
                 {collection.endpoints.map((end, e) => (
-                  <li
                     key={e}
                     className={classNames(
                       "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",
                       {
@@ -80,7 +72,7 @@ export const EditorSidebar = ({
                   >
                     <Method method={end.method} />
                     <p className="truncate">{end.path}</p>
-                  </li>
                 ))}
               </ul>
             </div>

 import { API_COLLECTIONS } from "@/utils/datas/api_collections";
 import { Method } from "@/components/method";
 import { ApiRoute } from "@/utils/type";
+import Link from "next/link";
 export const EditorSidebar = ({
   collections,
       onCollections([...collections, key]);
     }
   };
   return (
     <ul className="min-w-[300px] max-w-sm w-full bg-slate-900 border-r border-slate-700/40 h-full overflow-auto">
       {API_COLLECTIONS.map((collection, c) => (
             <div className="bg-slate-700/20 w-full p-3 border-b border-slate-700/70">
               <ul className="w-full">
                 {collection.endpoints.map((end, e) => (
+                  <Link
                     key={e}
+                    href={`/${collection.key}/${e}`}
                     className={classNames(
                       "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",
                       {
                   >
                     <Method method={end.method} />
                     <p className="truncate">{end.path}</p>
+                  </Link>
                 ))}
               </ul>
             </div>

components/loading/index.tsx ADDED Viewed

	@@ -0,0 +1,25 @@

+export const Loading = ({ children }: { children: React.ReactElement }) => (
+  <div className="absolute left-0 top-0 w-full h-full flex items-center justify-center bg-slate-950 bg-opacity-50 flex-col backdrop-blur-sm">
+    <svg
+      className="animate-spin -ml-1 mr-3 h-8 w-8 text-white"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+    >
+      <circle
+        className="opacity-25"
+        cx="12"
+        cy="12"
+        r="10"
+        stroke="currentColor"
+        stroke-width="4"
+      ></circle>
+      <path
+        className="opacity-75"
+        fill="currentColor"
+        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+      ></path>
+    </svg>
+    {children}
+  </div>
+);

utils/datas/api_collections.ts CHANGED Viewed

@@ -11,7 +11,7 @@ export const API_COLLECTIONS: Array<ApiCollection> = [{
       filter: "",
       sort: "",
       direction: "",
-      limit: 10,
       full: true,
       config: true
     }
@@ -23,7 +23,16 @@ export const API_COLLECTIONS: Array<ApiCollection> = [{
     path: '/api/models-tags-by-type'
   }, {
     method: 'GET',
-    path: '/api/datasets'
   }, {
     method: 'GET',
     path: '/api/datasets/{repo_id}'

       filter: "",
       sort: "",
       direction: "",
+      limit: 5,
       full: true,
       config: true
     }
     path: '/api/models-tags-by-type'
   }, {
     method: 'GET',
+    path: '/api/datasets',
+    parameters: {
+      search: "",
+      author: "",
+      filter: "",
+      sort: "",
+      direction: "",
+      limit: 5,
+      full: true,
+    }
   }, {
     method: 'GET',
     path: '/api/datasets/{repo_id}'