Merge pull request #4 from KAMAL-02/feat/Real-time-query-change

feat/Realtime-query-update

Author: Hamdan-Khan

src/components/Input Components/QueryProp.tsx

@@ -1,44 +1,43 @@
 import useStore from "../../store/store";
 import DynamicFields from "./DynamicFields";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 
 const QueryProp = ({ tab }: { tab: number }) => {
   const setQuery = useStore((state) => state.setQuery);
 
   const [queryInput, setQueryInput] = useState([{ key: "", value: "" }]);
 
-  // converts queryInput object into query state i.e URL format string (?pages=10&offset=20)
-  const addQueries = () => {
-    const queries =
-      "?" +
-      queryInput
-        .filter((q) => q.key !== "" && q.value !== "")
-        .map(
-          (q) => `${encodeURIComponent(q.key)}=${encodeURIComponent(q.value)}`
-        )
-        .join("&");
-    setQuery(queries);
-  };
+  useEffect(() => {
+    const queries = queryInput
+      .filter((q) => q.key !== "" || q.value !== "") // Include if either is non-empty
+      .map(
+        (q) =>
+          `${encodeURIComponent(q.key)}=${encodeURIComponent(
+            q.value
+          )}`.replace(/=$/, "") // Remove "=" if the value is empty
+      )
+      .join("&");
+
+    const queryString = queries ? `?${queries}` : "";
+    setQuery(queryString);
+  }, [queryInput, setQuery]);
+
+
   const clearQueries = () => {
     setQuery("");
     setQueryInput([{ key: "", value: "" }]);
   };
+
   return (
     <div className={`${tab == 1 ? "block" : "hidden"}`}>
       {queryInput[0].key !== "" && queryInput[0].value !== "" && (
-        <>
-          <button
-            className="bg-green-500 mt-2 ml-4 px-5 py-1 font-semibold text-white rounded-md"
-            onClick={addQueries}
-          >
-            Add Queries
-          </button>
-          <button
-            className="bg-red-500 mt-2 ml-4 px-5 py-1 font-semibold text-white rounded-md"
-            onClick={clearQueries}
-          >
-            Clear Queries
-          </button>
+       <>
+        <button
+          className="bg-red-500 mt-2 ml-4 px-5 py-1 font-semibold text-white rounded-md"
+          onClick={clearQueries}
+        >
+          Clear Queries
+        </button>
         </>
       )}
       <DynamicFields inputs={queryInput} setInputs={setQueryInput} />

src/components/RequestSection.tsx

@@ -32,7 +32,7 @@ const RequestSection = () => {
       const api = axios.create({
         baseURL: url,
         headers,
-      });
+      }); 
       if (method === "GET") {
         res = await api.get("");
       } else if (method === "POST") {