Feat/add submit request functionality

package.json

@@ -16,6 +16,13 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
+    "@codemirror/basic-setup": "^0.20.0",
+    "@codemirror/commands": "^6.3.2",
+    "@codemirror/lang-javascript": "^6.2.1",
+    "@codemirror/lang-json": "^6.0.1",
+    "@codemirror/state": "^6.3.3",
+    "@codemirror/theme-one-dark": "^6.1.2",
+    "@codemirror/view": "^6.22.3",
     "@hookform/resolvers": "^3.3.2",
     "@lit/react": "^1.0.2",
     "@material/web": "^1.0.1",

src/app/App.tsx

@@ -4,7 +4,9 @@ import { RouterProvider } from 'react-router-dom';
 
 import router from '@/router/router';
 import localStorageKeys from '@/shared/constants/localStorageKeys';
+import AppContextProvider from '@/shared/Context/AppContext';
 import colorThemeSwitcher from '@/shared/helpers/colorThemeSwitcher';
+import EditorProvider from '@components/Editor/context/EditorProvider';
 import AuthProvider from '@shared/Context/AuthContext';
 import LanguageProvider from '@shared/Context/LanguageContext';
 
@@ -15,12 +17,17 @@ const App = () => {
       colorThemeSwitcher.setLight();
     }
   }, []);
+
   return (
-    <AuthProvider>
-      <LanguageProvider>
-        <RouterProvider router={router} />
-      </LanguageProvider>
-    </AuthProvider>
+    <EditorProvider>
+      <AppContextProvider>
+        <AuthProvider>
+          <LanguageProvider>
+            <RouterProvider router={router} />
+          </LanguageProvider>
+        </AuthProvider>
+      </AppContextProvider>
+    </EditorProvider>
   );
 };
 

src/components/Editor/Editor.tsx

@@ -1,26 +1,24 @@
 import { Dispatch, FC, SetStateAction } from 'react';
 
 import EditorField from '@components/Editor/ui/EditorField';
-import LineNumbers from '@components/Editor/ui/LineNumbers';
-import useEditorSize from '@components/RequestEditor/lib/hooks/useEditorSize';
 import cn from '@shared/lib/helpers/cn';
 import useScrollbar from '@shared/lib/hooks/useScrollbar';
 
 type EditorProps = {
   editorState: string;
   onChange: Dispatch<SetStateAction<string>> | ((value: string) => void);
   className?: string;
+  isJson: boolean;
+  isReadOnly: boolean;
 };
 
-const Editor: FC<EditorProps> = ({ onChange, editorState, className }) => {
-  const { editorRef, editorNumbersNum, editorNumRef } = useEditorSize();
+const Editor: FC<EditorProps> = ({ onChange, editorState, className, isJson, isReadOnly }) => {
   const rootRef = useScrollbar<HTMLElement>();
 
   return (
     <article ref={rootRef} className={cn('h-full w-full font-jetbrains_mono', className)}>
-      <div className="flex w-full gap-4 py-4 pr-4 sm:py-7">
-        <LineNumbers ref={editorNumRef} size={editorNumbersNum} />
-        <EditorField ref={editorRef} onChange={onChange} value={editorState} />
+      <div className="flex w-full gap-4 py-7 pr-4">
+        <EditorField onChange={onChange} value={editorState} isJson={isJson} isReadOnly={isReadOnly} />
       </div>
     </article>
   );

src/components/Editor/context/EditorProvider.tsx

@@ -0,0 +1,60 @@
+import { createContext, PropsWithChildren, useCallback, useMemo, useState } from 'react';
+
+type TEditorContext = {
+  readonly query: [number, () => void];
+  readonly headers: [number, () => void];
+  readonly variables: [number, () => void];
+  invalidateKeys: () => void;
+};
+
+export const EditorContext = createContext<TEditorContext>({} as TEditorContext);
+
+function generateRandomKey() {
+  return Math.random() * Math.random();
+}
+
+function EditorProvider({ children }: PropsWithChildren) {
+  const [queryKey, setQueryKey] = useState(() => generateRandomKey());
+  const [variablesKey, setVariablesKey] = useState(() => generateRandomKey());
+  const [headersKey, setHeadersKey] = useState(() => generateRandomKey());
+
+  const invalidateQueryKey = useCallback(() => {
+    setQueryKey(generateRandomKey());
+  }, []);
+
+  const invalidateVariablesKey = useCallback(() => {
+    setVariablesKey(generateRandomKey());
+  }, []);
+
+  const invalidateHeadersKey = useCallback(() => {
+    setHeadersKey(generateRandomKey());
+  }, []);
+
+  const invalidateKeys = useCallback(() => {
+    invalidateQueryKey();
+    invalidateVariablesKey();
+    invalidateHeadersKey();
+  }, [invalidateHeadersKey, invalidateQueryKey, invalidateVariablesKey]);
+
+  const value = useMemo<TEditorContext>(
+    () => ({
+      query: [queryKey, invalidateQueryKey] as const,
+      headers: [headersKey, invalidateHeadersKey] as const,
+      variables: [variablesKey, invalidateVariablesKey] as const,
+      invalidateKeys,
+    }),
+    [
+      headersKey,
+      invalidateHeadersKey,
+      invalidateKeys,
+      invalidateQueryKey,
+      invalidateVariablesKey,
+      queryKey,
+      variablesKey,
+    ],
+  );
+
+  return <EditorContext.Provider value={value}>{children}</EditorContext.Provider>;
+}
+
+export default EditorProvider;

src/components/Editor/lib/hooks/useEditor.ts

@@ -0,0 +1,15 @@
+import { useContext } from 'react';
+
+import { EditorContext } from '@components/Editor/context/EditorProvider';
+
+function useEditor() {
+	const context = useContext(EditorContext);
+
+	if (context === undefined) {
+		throw new Error('useEditor must be used within a EditorProvider');
+	}
+
+	return context;
+}
+
+export default useEditor;

src/components/Editor/lib/hooks/useEditorUrlState.ts

@@ -1,4 +1,4 @@
-import { useCallback, useEffect } from 'react';
+import { useEffect } from 'react';
 
 import useUrl from '@shared/lib/hooks/useUrl';
 import { UrlParams } from '@shared/lib/types/types';
@@ -19,12 +19,9 @@ function useEditorUrlState(urlParam: UrlParams, initialState = '') {
 		if (urlState === initialState) setUrl(urlParam, initialState);
 	}, [initialState, setUrl, urlParam, urlState]);
 
-	const handleChange = useCallback(
-		function handleChange(value: string) {
-			setUrl(urlParam, value);
-		},
-		[setUrl, urlParam],
-	);
+	const handleChange = (value: string) => {
+		setUrl(urlParam, value);
+	};
 
 	return [urlState, handleChange] as const;
 }

src/components/Editor/lib/submitRequest.ts

@@ -0,0 +1,32 @@
+/* eslint-disable no-console */
+import isValidJson from '@/shared/lib/helpers/isJsonValid';
+
+async function sumbitRequest(query: string, variables: string, headers: string) {
+	const DEFAULT_HEADERS = '{"Content-Type": "application/json"}';
+	const isHeadersEmpty = typeof headers !== 'string' || headers.trim().length === 0;
+	const headersToParse = isHeadersEmpty ? DEFAULT_HEADERS : headers;
+
+	if (!isHeadersEmpty && isValidJson(headersToParse)) {
+		const msg = 'Invalid headers';
+		return msg; // TODO maybe show toaster instead
+	}
+
+	try {
+		const response = await fetch('https://swapi-graphql.netlify.app/.netlify/functions/index', {
+			method: 'POST',
+			headers: JSON.parse(headersToParse),
+			body: JSON.stringify({
+				query,
+				variables,
+			}),
+		});
+
+		const data = await response.json();
+		return data;
+	} catch (error) {
+		console.error('Error:', error);
+		throw error;
+	}
+}
+
+export default sumbitRequest;

src/components/Editor/ui/EditorField.tsx

@@ -1,31 +1,61 @@
-/* eslint-disable react/no-danger */
-import { Dispatch, forwardRef, SetStateAction, SyntheticEvent } from 'react';
+/* eslint-disable react-hooks/exhaustive-deps */
+import { Dispatch, SetStateAction, useEffect, useRef, useState } from 'react';
+
+import { defaultKeymap } from '@codemirror/commands';
+import { javascript } from '@codemirror/lang-javascript';
+import { json } from '@codemirror/lang-json';
+import { EditorState } from '@codemirror/state';
+import { oneDark } from '@codemirror/theme-one-dark';
+import { EditorView, gutter, keymap, lineNumbers } from '@codemirror/view';
+
+import { useAppContext } from '@/shared/Context/hooks';
 
 type EditorFieldProps = {
   value: string;
   onChange: Dispatch<SetStateAction<string>> | ((value: string) => void);
+  isJson: boolean;
+  isReadOnly: boolean;
 };
 
-const EditorField = forwardRef<HTMLDivElement, EditorFieldProps>(({ onChange, value = '' }, ref) => {
-  function handleInput(e: SyntheticEvent) {
-    onChange?.((e.target as HTMLElement).innerHTML);
-  }
+const EditorField = ({ onChange, value = '', isJson, isReadOnly }: EditorFieldProps) => {
+  const editor = useRef<HTMLPreElement>(null);
+  const [code, setCode] = useState(value);
+  const { prettifyEditors } = useAppContext();
 
-  return (
-    <div
-      data-testid="editor-field"
-      ref={ref}
-      tabIndex={0}
-      aria-label="The text editor"
-      role="textbox"
-      contentEditable
-      onInput={handleInput}
-      className="h-fit w-full whitespace-pre-wrap outline-none"
-      dangerouslySetInnerHTML={{ __html: value }}
-    />
-  );
-});
+  useEffect(() => {
+    const codemirrorLanguage = isJson ? json() : javascript();
+    const onUpdate = EditorView.updateListener.of((v) => {
+      const newValue = v.state.doc.toString();
+      setCode(newValue);
+      onChange(newValue);
+      prettifyEditors(false);
+    });
+    const extensions = [
+      keymap.of(defaultKeymap),
+      codemirrorLanguage,
+      oneDark,
+      EditorView.lineWrapping,
+      onUpdate,
+      EditorState.readOnly.of(isReadOnly),
+    ];
+    if (!isReadOnly) {
+      extensions.push(lineNumbers());
+      extensions.push(gutter({}));
+    }
+    const startState = EditorState.create({
+      doc: code,
+      extensions,
+    });
+    const view = new EditorView({
+      state: startState,
+      parent: editor.current ?? undefined,
+    });
+    return () => {
+      view.destroy();
+    };
+  }, []);
 
-EditorField.displayName = 'EditorField';
+  return <pre data-testid="editor-field" ref={editor} />;
+};
 
 export default EditorField;

src/components/EditorTools/ui/HeadersEditor.tsx

@@ -1,11 +1,38 @@
+import { useEffect } from 'react';
+
+import { useAppContext } from '@/shared/Context/hooks';
+import isValidJson from '@/shared/lib/helpers/isJsonValid';
+import jsonFormatter from '@/shared/lib/helpers/jsonFormatter';
 import Editor from '@components/Editor/Editor';
+import useEditor from '@components/Editor/lib/hooks/useEditor';
 import useEditorUrlState from '@components/Editor/lib/hooks/useEditorUrlState';
 import urlParams from '@shared/constants/urlParams';
 
 const HeadersEditor = () => {
   const [editorState, setEditorState] = useEditorUrlState(urlParams.HEADERS);
+  const { prettify } = useAppContext();
+  const {
+    headers: [headersKey, invalidateKey],
+  } = useEditor();
+
+  useEffect(() => {
+    if (prettify && isValidJson(editorState)) {
+      setEditorState(jsonFormatter(editorState));
+      invalidateKey();
+    }
+  }, [editorState, invalidateKey, prettify, setEditorState]);
 
-  return <Editor key="headers" editorState={editorState} onChange={setEditorState} />;
+  return (
+    <Editor
+      key={headersKey}
+      editorState={editorState}
+      onChange={(val: string) => {
+        if (!prettify) setEditorState(val);
+      }}
+      isJson
+      isReadOnly={false}
+    />
+  );
 };
 
 export default HeadersEditor;

src/components/EditorTools/ui/VariablesEditor.tsx

@@ -1,11 +1,38 @@
+import { useEffect } from 'react';
+
+import { useAppContext } from '@/shared/Context/hooks';
+import isValidJson from '@/shared/lib/helpers/isJsonValid';
+import jsonFormatter from '@/shared/lib/helpers/jsonFormatter';
 import Editor from '@components/Editor/Editor';
+import useEditor from '@components/Editor/lib/hooks/useEditor';
 import useEditorUrlState from '@components/Editor/lib/hooks/useEditorUrlState';
 import urlParams from '@shared/constants/urlParams';
 
 const VariablesEditor = () => {
   const [editorState, setEditorState] = useEditorUrlState(urlParams.VARIABLES);
+  const { prettify } = useAppContext();
+  const {
+    variables: [variablesKey, invalidateKey],
+  } = useEditor();
+
+  useEffect(() => {
+    if (prettify && isValidJson(editorState)) {
+      setEditorState(jsonFormatter(editorState));
+      invalidateKey();
+    }
+  }, [editorState, invalidateKey, prettify, setEditorState]);
 
-  return <Editor key="variables" editorState={editorState} onChange={setEditorState} />;
+  return (
+    <Editor
+      key={variablesKey}
+      editorState={editorState}
+      onChange={(val: string) => {
+        if (!prettify) setEditorState(val);
+      }}
+      isJson
+      isReadOnly={false}
+    />
+  );
 };
 
 export default VariablesEditor;

src/components/Header/Header.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 
-import useLanguage from '@/shared/Context/hooks';
+import { useLanguage } from '@/shared/Context/hooks';
 import Icon from '@/shared/ui/Icon';
 import IconButton from '@/shared/ui/IconButton';
 import DocsComp from '@components/DocsComp/DocsComp';

src/components/Nav/ui/NavigationDrawer.tsx

@@ -5,7 +5,7 @@ import Details from '@components/ViewList/ui/Details';
 import ViewItem from '@components/ViewList/ui/ViewItem';
 import ViewList from '@components/ViewList/ViewList';
 import ROUTES from '@shared/constants/routes';
-import useLanguage from '@shared/Context/hooks';
+import { useLanguage } from '@shared/Context/hooks';
 import Icon from '@shared/ui/Icon';
 
 const NavigationDrawer = () => {