Clean up

src-web/components/DefaultLayout.tsx

@@ -4,7 +4,6 @@ import { Outlet } from 'react-router-dom';
 import { useOsInfo } from '../hooks/useOsInfo';
 import { DialogProvider, Dialogs } from './DialogContext';
 import { GlobalHooks } from './GlobalHooks';
-import { RequestEditorProvider } from './RequestEditorContext';
 import { ToastProvider, Toasts } from './ToastContext';
 
 export function DefaultLayout() {
@@ -12,25 +11,23 @@ export function DefaultLayout() {
   return (
     <DialogProvider>
       <ToastProvider>
-        <RequestEditorProvider>
-          <>
-            {/* Must be inside all the providers, so they have access to them */}
-            <Toasts />
-            <Dialogs />
-          </>
-          <motion.div
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            transition={{ duration: 0.1, delay: 0.1 }}
-            className={classNames(
-              'w-full h-full',
-              osInfo?.osType === 'linux' && 'border border-border-subtle',
-            )}
-          >
-            <Outlet />
-          </motion.div>
-          <GlobalHooks />
-        </RequestEditorProvider>
+        <>
+          {/* Must be inside all the providers, so they have access to them */}
+          <Toasts />
+          <Dialogs />
+        </>
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ duration: 0.1, delay: 0.1 }}
+          className={classNames(
+            'w-full h-full',
+            osInfo?.osType === 'linux' && 'border border-border-subtle',
+          )}
+        >
+          <Outlet />
+        </motion.div>
+        <GlobalHooks />
       </ToastProvider>
     </DialogProvider>
   );

src-web/components/RequestEditorContext.tsx

@@ -1,58 +0,0 @@
-import EventEmitter from 'eventemitter3';
-import type { DependencyList } from 'react';
-import React, { createContext, useCallback, useContext, useEffect } from 'react';
-
-interface State {
-  focusParamValue: (name: string) => void;
-  focusParamsTab: () => void;
-}
-
-export const RequestEditorContext = createContext<State>({} as State);
-
-const emitter = new EventEmitter();
-
-export const RequestEditorProvider = ({ children }: { children: React.ReactNode }) => {
-  const focusParamsTab = useCallback(() => {
-    emitter.emit('focus_http_request_params_tab');
-  }, []);
-
-  const focusParamValue = useCallback(
-    (name: string) => {
-      focusParamsTab();
-      setTimeout(() => {
-        emitter.emit('focus_http_request_param_value', name);
-      }, 50);
-    },
-    [focusParamsTab],
-  );
-
-  const state: State = {
-    focusParamValue,
-    focusParamsTab,
-  };
-
-  return <RequestEditorContext.Provider value={state}>{children}</RequestEditorContext.Provider>;
-};
-
-export function useOnFocusParamValue(cb: (name: string) => void, deps: DependencyList) {
-  useEffect(() => {
-    emitter.on('focus_http_request_param_value', cb);
-    return () => {
-      emitter.off('focus_http_request_param_value', cb);
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, deps);
-}
-
-export function useOnFocusParamsTab(cb: () => void) {
-  useEffect(() => {
-    emitter.on('focus_http_request_params_tab', cb);
-    return () => {
-      emitter.off('focus_http_request_params_tab', cb);
-    };
-    // Only add callback once, to prevent the need for the caller to useCallback
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-}
-
-export const useRequestEditor = () => useContext(RequestEditorContext);

src-web/components/RequestPane.tsx

@@ -298,7 +298,7 @@ export const RequestPane = memo(function RequestPane({
   const { updateKey } = useRequestUpdateKey(activeRequestId ?? null);
   const importCurl = useImportCurl();
 
-  useRequestEditorEvent('focus_http_request_params_tab', () => {
+  useRequestEditorEvent('request_pane.focus_tab', () => {
     setActiveTab(TAB_PARAMS);
   });
 

src-web/components/UrlParameterEditor.tsx

@@ -15,7 +15,7 @@ export function UrlParametersEditor({ pairs, forceUpdateKey, onChange }: Props)
   const pairEditor = useRef<PairEditorRef>(null);
 
   useRequestEditorEvent(
-    'focus_http_request_param_value',
+    'request_params.focus_value',
     (name) => {
       const pairIndex = pairs.findIndex((p) => p.name === name);
       if (pairIndex >= 0) {

src-web/hooks/useRequestEditor.tsx

@@ -3,8 +3,8 @@ import type { DependencyList } from 'react';
 import { useCallback, useEffect } from 'react';
 
 type EventDataMap = {
-  focus_http_request_param_value: string;
-  focus_http_request_params_tab: undefined;
+  'request_params.focus_value': string;
+  'request_pane.focus_tab': undefined;
 };
 
 export function useRequestEditorEvent<
@@ -22,13 +22,13 @@ export function useRequestEditorEvent<
 
 export function useRequestEditor() {
   const focusParamsTab = useCallback(() => {
-    emitter.emit('focus_http_request_params_tab', undefined);
+    emitter.emit('request_pane.focus_tab', undefined);
   }, []);
 
   const focusParamValue = useCallback(
     (name: string) => {
       focusParamsTab();
-      setTimeout(() => emitter.emit('focus_http_request_param_value', name), 50);
+      setTimeout(() => emitter.emit('request_params.focus_value', name), 50);
     },
     [focusParamsTab],
   );