refacto snippet function

components/editor/main/request.tsx

@@ -41,8 +41,10 @@ export const Request = ({
 
   return (
     <div className="h-full bg-slate-900 pb-5 overflow-auto">
-      {children}
-      <Tabs active={tab} setActive={setTab} endpoint={endpoint} />
+      <div className="top-0 sticky w-full backdrop-blur">
+        {children}
+        <Tabs active={tab} setActive={setTab} endpoint={endpoint} />
+      </div>
       <div className="px-4 xl:px-6">
         {tab === "parameters" && parameters && (
           <div className="mt-6 grid grid-cols-2 gap-6 w-full">

components/editor/main/snippet/curl.tsx

@@ -1 +1,98 @@
-export const Curl = {};
+import { ApiRoute } from "@/utils/type";
+import classNames from "classnames";
+import { useState } from "react";
+import Highlight from "react-highlight";
+import { BiCodeCurly, BiSolidCopy } from "react-icons/bi";
+import { Options } from "redaxios";
+
+export const CurlSnippet = ({
+  endpoint,
+  headers,
+  parameters,
+  body,
+  onCopyToClipboard,
+}: {
+  endpoint: ApiRoute;
+  parameters?: Record<string, any>;
+  headers?: Record<string, any>;
+  body?: Options | undefined;
+  onCopyToClipboard: (e: string) => void;
+}) => {
+  const [isCopied, setIsCopied] = useState<boolean>(false);
+
+  const generateCurlRequestFromEndpoint = () => {
+    const { method, path } = endpoint;
+    const fullpath = `${process.env.NEXT_PUBLIC_APP_APIURL}${path}`;
+
+    const removeEmptyValues = (data: Record<string, any>) => {
+      const formattedData = { ...data };
+      Object.entries(formattedData).forEach(([key, value]) => {
+        if (!value) {
+          delete formattedData[key];
+        }
+      });
+      return formattedData;
+    };
+
+    const Dict: Record<string, any> = {
+      GET: () => {
+        const filteredEmptyParameters = removeEmptyValues(parameters ?? {});
+
+        return `curl -X ${method} "${fullpath}?${new URLSearchParams(
+          filteredEmptyParameters
+        ).toString()}" \\
+  -H ${JSON.stringify(headers)}
+`;
+      },
+      DELETE: () => {
+        return `curl -X ${method} "${fullpath}" \\
+  -H ${JSON.stringify(headers)} \\
+  -d ${JSON.stringify(body)}
+`;
+      },
+      DEFAULT: () => {
+        return `curl -X ${method} "${fullpath}" \\
+  -H ${JSON.stringify(headers)}
+  -d ${JSON.stringify(body)}
+`;
+      },
+    };
+
+    return Dict[method] ? Dict[method]() : Dict["DEFAULT"]();
+  };
+
+  const handleCopy = () => {
+    onCopyToClipboard(generateCurlRequestFromEndpoint());
+    setIsCopied(true);
+    setTimeout(() => {
+      setIsCopied(false);
+    }, 1000);
+  };
+
+  return (
+    <div className="bg-slate-950/50 rounded-xl overflow-hidden">
+      <header className="bg-slate-950 flex items-center justify-start px-5 py-4 uppercase gap-2 text-slate-300">
+        <BiCodeCurly className="text-xl" />
+        <p className="text-xs font-semibold">Curl</p>
+      </header>
+      <main className="px-6 py-6">
+        <Highlight className="curl text-xs font-code !bg-transparent !p-0 !whitespace-pre-wrap break-all !leading-relaxed">
+          {generateCurlRequestFromEndpoint()}
+        </Highlight>
+        <div className="flex justify-end relative" onClick={handleCopy}>
+          <BiSolidCopy className="text-slate-500 cursor-pointer hover:text-slate-300 transition-all duration-75" />
+          <div
+            className={classNames(
+              "bg-indigo-500/60 text-slate-100 text-xs font-semibold absolute bottom-0 right-0 z-10 rounded-lg px-2 py-1 pointer-events-none -translate-y-full transition-all duration-200",
+              {
+                "opacity-0": !isCopied,
+              }
+            )}
+          >
+            Copied!
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+};

components/editor/main/snippet/index.tsx

@@ -1,31 +1,11 @@
-import { useState } from "react";
 import { useCopyToClipboard } from "react-use";
-import classNames from "classnames";
-import Highlight from "react-highlight";
 import { Options } from "redaxios";
-import {
-  BiSolidCopy,
-  BiLogoJavascript,
-  BiLogoPython,
-  BiCodeCurly,
-} from "react-icons/bi";
 
 import { ApiRoute } from "@/utils/type";
 
-const LANGUAGES = [
-  {
-    value: "curl",
-    icon: <BiCodeCurly className=" text-xl text-slate-300" />,
-  },
-  {
-    value: "javascript",
-    icon: <BiLogoJavascript className=" text-xl text-yellow-500" />,
-  },
-  {
-    value: "python",
-    icon: <BiLogoPython className=" text-xl text-blue-500" />,
-  },
-];
+import { PythonSnippet } from "./python";
+import { JavascriptSnippet } from "./javascript";
+import { CurlSnippet } from "./curl";
 
 export const Snippet = ({
   endpoint,
@@ -39,127 +19,32 @@ export const Snippet = ({
   body?: Options | undefined;
 }) => {
   const [_, copyToClipboard] = useCopyToClipboard();
-  const [isCopied, setIsCopied] = useState<boolean>(false);
 
-  const generateRequestFromEndpoint = (language: string) => {
-    const { method, path } = endpoint;
-
-    const needBody = ["post", "put", "patch", "delete"].includes(
-      method.toLocaleLowerCase()
-    );
-    const fullpath = `${process.env.NEXT_PUBLIC_APP_APIURL}${path}`;
-
-    if (language === "curl") {
-      if (needBody && body) {
-        return (
-          `curl -X ${method.toLocaleUpperCase()} ${fullpath}` +
-          "\n" +
-          `  -H 'Content-Type: application/json'` +
-          "\n" +
-          `  -H 'Authorization: ${headers?.Authorization}'` +
-          "\n" +
-          `  -d '${JSON.stringify(body, null, 2)}'`
-        );
-      }
-
-      if (parameters) {
-        return (
-          `curl -X ${method.toLocaleUpperCase()} ${fullpath}?` +
-          Object.entries(parameters)
-            .map(([key, value]) => `${key}=${value}`)
-            .join("&")
-        );
-      }
-
-      return `curl -X ${method.toLocaleUpperCase()} ${fullpath}`;
-    }
-
-    if (language === "javascript") {
-      if (needBody && body) {
-        return `const response = await fetch("${fullpath}", {
-  method: "${method.toLocaleUpperCase()}",
-  headers: {
-    "Content-Type": "application/json",
-    "Authorization": "${headers?.Authorization}",
-  },
-  body: JSON.stringify(${JSON.stringify(body, null, 2)}),
-});`;
-      }
-      if (parameters) {
-        return `const response = await fetch("${fullpath}?${Object.entries(
-          parameters
-        )
-          .map(([key, value]) => `${key}=${value}`)
-          .join("&")}", {
-  method: "${method.toLocaleUpperCase()}",
-});`;
-      }
-    }
-
-    if (language === "python") {
-      if (needBody && body) {
-        return `import requests
-  response = requests.${method.toLocaleLowerCase()}(
-  "${fullpath}",
-  headers={
-    Authorization: "${headers?.Authorization}",
-  },
-  json=${JSON.stringify(body, null, 2)})`;
-      }
-      if (parameters) {
-        return `import requests
-  response = requests.${method.toLocaleLowerCase()}("${fullpath}", params={
-    ${Object.entries(parameters)
-      .map(([key, value]) => `${key}: ${value}`)
-      .join(",\n    ")}
-  })`;
-      }
-    }
-
-    return "";
-  };
-
-  const handleCopyToClipboard = (language: string) => {
-    copyToClipboard(generateRequestFromEndpoint(language));
-    setIsCopied(true);
-    setTimeout(() => {
-      setIsCopied(false);
-    }, 2000);
-  };
+  const handleCopyToClipboard = (snippet: string) => copyToClipboard(snippet);
 
   return (
     <div className="mt-8 grid grid-cols-1 gap-4 w-full">
-      {LANGUAGES.map((lang, key) => (
-        <div key={key} className="bg-slate-950/50 rounded-xl overflow-hidden">
-          <header className="bg-slate-950 flex items-center justify-start px-5 py-4 uppercase gap-2">
-            {lang.icon}
-            <p className="text-slate-300 text-xs font-semibold">{lang.value}</p>
-          </header>
-          <main className="px-6 py-6">
-            <Highlight
-              className={`${lang.value} text-xs font-code !bg-transparent !p-0 !whitespace-pre-wrap break-all !leading-relaxed`}
-            >
-              {generateRequestFromEndpoint(lang.value)}
-            </Highlight>
-            <div
-              className="flex justify-end relative"
-              onClick={() => handleCopyToClipboard(lang.value)}
-            >
-              <BiSolidCopy className="text-slate-500 cursor-pointer hover:text-slate-300 transition-all duration-75" />
-              <div
-                className={classNames(
-                  "bg-indigo-500/60 text-slate-100 text-xs font-semibold absolute bottom-0 right-0 z-10 rounded-lg px-2 py-1 pointer-events-none -translate-y-full transition-all duration-200",
-                  {
-                    "opacity-0": !isCopied,
-                  }
-                )}
-              >
-                Copied!
-              </div>
-            </div>
-          </main>
-        </div>
-      ))}
+      <CurlSnippet
+        endpoint={endpoint}
+        headers={headers}
+        body={body}
+        parameters={parameters}
+        onCopyToClipboard={handleCopyToClipboard}
+      />
+      <JavascriptSnippet
+        endpoint={endpoint}
+        headers={headers}
+        body={body}
+        parameters={parameters}
+        onCopyToClipboard={handleCopyToClipboard}
+      />
+      <PythonSnippet
+        endpoint={endpoint}
+        headers={headers}
+        body={body}
+        parameters={parameters}
+        onCopyToClipboard={handleCopyToClipboard}
+      />
     </div>
   );
 };

components/editor/main/snippet/javascript.tsx

@@ -0,0 +1,108 @@
+import { ApiRoute } from "@/utils/type";
+import classNames from "classnames";
+import { useState } from "react";
+import Highlight from "react-highlight";
+import { BiLogoJavascript, BiSolidCopy } from "react-icons/bi";
+import { Options } from "redaxios";
+
+export const JavascriptSnippet = ({
+  endpoint,
+  headers,
+  parameters,
+  body,
+  onCopyToClipboard,
+}: {
+  endpoint: ApiRoute;
+  parameters?: Record<string, any>;
+  headers?: Record<string, any>;
+  body?: Options | undefined;
+  onCopyToClipboard: (e: string) => void;
+}) => {
+  const [isCopied, setIsCopied] = useState<boolean>(false);
+
+  const generateJavascriptRequestFromEndpoint = () => {
+    const { method, path } = endpoint;
+    const fullpath = `${process.env.NEXT_PUBLIC_APP_APIURL}${path}`;
+
+    const removeEmptyValues = (data: Record<string, any>) => {
+      const formattedData = { ...data };
+      Object.entries(formattedData).forEach(([key, value]) => {
+        if (!value) {
+          delete formattedData[key];
+        }
+      });
+      return formattedData;
+    };
+
+    const Dict: Record<string, any> = {
+      GET: () => {
+        const filteredEmptyParameters = removeEmptyValues(parameters ?? {});
+
+        return `const response = await fetch(
+  "${fullpath}?${new URLSearchParams(filteredEmptyParameters).toString()}",
+  {
+    method: "${method}",
+    headers: ${JSON.stringify(headers)}
+  }
+)`;
+      },
+      DELETE: () => {
+        return `const response = await fetch(
+  "${fullpath}",
+  {
+    method: "${method}",
+    headers: ${JSON.stringify(headers)},
+    body: ${JSON.stringify(body)}
+  }
+)`;
+      },
+      DEFAULT: () => {
+        return `const response = await fetch(
+  "${fullpath}",
+  {
+    method: "${method}",
+    headers: ${JSON.stringify(headers)},
+    body: ${JSON.stringify(body)}
+  }
+)`;
+      },
+    };
+
+    return Dict[method] ? Dict[method]() : Dict["DEFAULT"]();
+  };
+
+  const handleCopy = () => {
+    onCopyToClipboard(generateJavascriptRequestFromEndpoint());
+    setIsCopied(true);
+    setTimeout(() => {
+      setIsCopied(false);
+    }, 1000);
+  };
+
+  return (
+    <div className="bg-slate-950/50 rounded-xl overflow-hidden">
+      <header className="bg-slate-950 flex items-center justify-start px-5 py-4 uppercase gap-2 text-yellow-500">
+        <BiLogoJavascript className="text-xl" />
+        <p className="text-xs font-semibold">Javascript</p>
+      </header>
+      <main className="px-6 py-6">
+        <Highlight className="javascript text-xs font-code !bg-transparent !p-0 !whitespace-pre-wrap break-all !leading-relaxed">
+          {generateJavascriptRequestFromEndpoint()}
+        </Highlight>
+        <div className="flex justify-end relative" onClick={handleCopy}>
+          <BiSolidCopy className="text-slate-500 cursor-pointer hover:text-slate-300 transition-all duration-75" />
+          <div
+            className={classNames(
+              "bg-indigo-500/60 text-slate-100 text-xs font-semibold absolute bottom-0 right-0 z-10 rounded-lg px-2 py-1 pointer-events-none -translate-y-full transition-all duration-200",
+              {
+                "opacity-0": !isCopied,
+              }
+            )}
+          >
+            Copied!
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+};

components/editor/main/snippet/python.tsx

@@ -0,0 +1,108 @@
+import { ApiRoute } from "@/utils/type";
+import classNames from "classnames";
+import { useState } from "react";
+import Highlight from "react-highlight";
+import { BiLogoPython, BiSolidCopy } from "react-icons/bi";
+import { Options } from "redaxios";
+
+export const PythonSnippet = ({
+  endpoint,
+  headers,
+  parameters,
+  body,
+  onCopyToClipboard,
+}: {
+  endpoint: ApiRoute;
+  parameters?: Record<string, any>;
+  headers?: Record<string, any>;
+  body?: Options | undefined;
+  onCopyToClipboard: (e: string) => void;
+}) => {
+  const [isCopied, setIsCopied] = useState<boolean>(false);
+
+  const generatePythonRequestFromEndpoint = () => {
+    const { method, path } = endpoint;
+    const fullpath = `${process.env.NEXT_PUBLIC_APP_APIURL}${path}`;
+
+    const removeEmptyValues = (data: Record<string, any>) => {
+      const formattedData = { ...data };
+      Object.entries(formattedData).forEach(([key, value]) => {
+        if (!value) {
+          delete formattedData[key];
+        }
+        if (typeof value === "boolean") {
+          formattedData[key] = value ? "True" : "False";
+        }
+      });
+      return formattedData;
+    };
+
+    const Dict: Record<string, any> = {
+      GET: () => {
+        const filteredEmptyParameters = removeEmptyValues(parameters ?? {});
+
+        return `import requests
+response = requests.get(
+  "${fullpath}",
+  params=${JSON.stringify(filteredEmptyParameters)},
+  headers=${JSON.stringify(headers)}
+)`;
+      },
+      DELETE: () => {
+        const formattedBody = removeEmptyValues(body ?? {});
+        return `import requests
+response = requests.delete(
+  "${fullpath}",
+  data=${JSON.stringify(formattedBody)},
+  headers=${JSON.stringify(headers)}
+)`;
+      },
+      DEFAULT: () => {
+        const formattedBody = removeEmptyValues(body ?? {});
+        return `import requests
+response = requests.${method.toLocaleLowerCase()}(
+  "${fullpath}",
+  json=${JSON.stringify(formattedBody)},
+  headers=${JSON.stringify(headers)}
+)`;
+      },
+    };
+
+    return Dict[method] ? Dict[method]() : Dict["DEFAULT"]();
+  };
+
+  const handleCopy = () => {
+    onCopyToClipboard(generatePythonRequestFromEndpoint());
+    setIsCopied(true);
+    setTimeout(() => {
+      setIsCopied(false);
+    }, 1000);
+  };
+
+  return (
+    <div className="bg-slate-950/50 rounded-xl overflow-hidden">
+      <header className="bg-slate-950 flex items-center justify-start px-5 py-4 uppercase gap-2 text-blue-500">
+        <BiLogoPython className="text-xl" />
+        <p className="text-xs font-semibold">Python</p>
+      </header>
+      <main className="px-6 py-6">
+        <Highlight className="python text-xs font-code !bg-transparent !p-0 !whitespace-pre-wrap break-all !leading-relaxed">
+          {generatePythonRequestFromEndpoint()}
+        </Highlight>
+        <div className="flex justify-end relative" onClick={handleCopy}>
+          <BiSolidCopy className="text-slate-500 cursor-pointer hover:text-slate-300 transition-all duration-75" />
+          <div
+            className={classNames(
+              "bg-indigo-500/60 text-slate-100 text-xs font-semibold absolute bottom-0 right-0 z-10 rounded-lg px-2 py-1 pointer-events-none -translate-y-full transition-all duration-200",
+              {
+                "opacity-0": !isCopied,
+              }
+            )}
+          >
+            Copied!
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+};