enhance GraphQL editor functionality

Update browser support, improve type definitions, and

Author: shu-vro

.browserslistrc

@@ -1 +1 @@
-since 2010
+since 2016

components/Config/QuerySlide/GraphQlEditor.tsx

@@ -3,32 +3,96 @@ import AceCodeEditor from "components/Editors/AceCodeEditor";
 import MonacoCodeEditor from "components/Editors/MonacoCodeEditor";
 import useDeviceType from "hooks/useDeviceType";
 import { useState } from "react";
+import styles from "@styles/GraphqlEditor.module.scss";
 
 export default function GraphQlEditor() {
     const param = useParams();
-    const [value, setValue] = useState(``);
+    const [queryValue, setQueryValue] = useState(``);
+    const [variablesValue, setVariablesValue] = useState(``);
     const isMobile = useDeviceType();
+    const [tab, setTab] = useState("query");
 
     return (
         <>
             <h2>GraphQl Query</h2>
-            {isMobile === "mobile" ? (
+            <div className={styles["tab-container"]}>
+                <input
+                    type="radio"
+                    name="select-query"
+                    id="gql-query"
+                    title="query"
+                    defaultChecked
+                    onClick={() => {
+                        setTab("query");
+                    }}
+                />
+                <input
+                    type="radio"
+                    name="select-query"
+                    id="gql-variables"
+                    title="variables"
+                    onClick={() => {
+                        setTab("variables");
+                    }}
+                />
+                <label htmlFor="gql-query">
+                    Query
+                    {tab === "query" && <div className={styles.underline} />}
+                </label>
+                <label htmlFor="gql-variables">
+                    Variables
+                    {tab === "variables" && (
+                        <div className={styles.underline} />
+                    )}
+                </label>
+            </div>
+            {tab === "query" ? (
+                isMobile === "mobile" ? (
+                    <AceCodeEditor
+                        value={queryValue}
+                        mode="puppet"
+                        onChange={value => {
+                            setQueryValue(value);
+                            param.setObject(prev => ({
+                                query: value,
+                                variables: prev?.variables || "",
+                            }));
+                        }}
+                    />
+                ) : (
+                    <MonacoCodeEditor
+                        language="graphql"
+                        onChange={value => {
+                            setQueryValue(value);
+                            param.setObject(prev => ({
+                                query: value,
+                                variables: prev?.variables || "",
+                            }));
+                        }}
+                        value={queryValue}
+                    />
+                )
+            ) : isMobile === "mobile" ? (
                 <AceCodeEditor
-                    value={value}
-                    mode="puppet"
+                    value={variablesValue}
                     onChange={value => {
-                        setValue(value);
-                        param.setObject(prev => ({ query: value }));
+                        setVariablesValue(value);
+                        param.setObject(prev => ({
+                            variables: value,
+                            query: prev?.query || "",
+                        }));
                     }}
                 />
             ) : (
                 <MonacoCodeEditor
-                    language="graphql"
                     onChange={value => {
-                        setValue(value);
-                        param.setObject(prev => ({ query: value }));
+                        setVariablesValue(value);
+                        param.setObject(prev => ({
+                            variables: value,
+                            query: prev?.query || "",
+                        }));
                     }}
-                    value={value}
+                    value={variablesValue}
                 />
             )}
         </>

components/Config/QuerySlide/InputPlace.tsx

@@ -87,6 +87,7 @@ export default function InputPlace({
             />
             <button
                 type="button"
+                title="Delete"
                 onClick={() => {
                     removeField(keyName);
                     setTimeout(() => {

components/Config/UrlInput.tsx

@@ -101,9 +101,9 @@ export default function UrlInput() {
             let { data: res } = await axios.get("/api/headerParser", {
                 cancelToken: cancelControllerSource.current.token,
                 params: {
-                    params: paramsObjectCopy,
-                    headers: headersObjectCopy,
-                    body: postBodyObjectCopy,
+                    params: JSON.stringify(paramsObjectCopy),
+                    headers: JSON.stringify(headersObjectCopy),
+                    body: JSON.stringify(postBodyObjectCopy),
                     url: baseURL_with_env_vars,
                     method: entries.method,
                 },
@@ -174,6 +174,7 @@ export default function UrlInput() {
             data-place="bottom"
             data-tip={tooltipText}>
             <select
+                title="Select a method"
                 name="method"
                 value={urlData.object.method}
                 onChange={() => true}>

next.config.js

@@ -3,13 +3,12 @@ const nextConfig = {
     reactStrictMode: false,
 };
 
-const withPWA = require("next-pwa");
+const withPWA = require("@ducanh2912/next-pwa").default({
+    dest: "public",
+    disable: process.env.NODE_ENV === "development",
+});
 
 module.exports = withPWA({
-    pwa: {
-        dest: "public",
-        disable: process.env.NODE_ENV === "development",
-    },
     autoPrefixer: {},
     nextConfig,
 });