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,7 +11,6 @@ export function DefaultLayout() {
   return (
     <DialogProvider>
       <ToastProvider>
-        <RequestEditorProvider>
         <>
           {/* Must be inside all the providers, so they have access to them */}
           <Toasts />
@@ -30,7 +28,6 @@ export function DefaultLayout() {
           <Outlet />
         </motion.div>
         <GlobalHooks />
-        </RequestEditorProvider>
       </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;
+  'request_params.focus_value': string;
-  focus_http_request_params_tab: undefined;
+  '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],
   );