diff --git a/src-web/components/DefaultLayout.tsx b/src-web/components/DefaultLayout.tsx index 9a026425..e81341b6 100644 --- a/src-web/components/DefaultLayout.tsx +++ b/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 ( - - <> - {/* Must be inside all the providers, so they have access to them */} - - - - - - - - + <> + {/* Must be inside all the providers, so they have access to them */} + + + + + + + ); diff --git a/src-web/components/RequestEditorContext.tsx b/src-web/components/RequestEditorContext.tsx deleted file mode 100644 index d91bf746..00000000 --- a/src-web/components/RequestEditorContext.tsx +++ /dev/null @@ -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({} 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 {children}; -}; - -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); diff --git a/src-web/components/RequestPane.tsx b/src-web/components/RequestPane.tsx index 42cd96d1..c2edef74 100644 --- a/src-web/components/RequestPane.tsx +++ b/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); }); diff --git a/src-web/components/UrlParameterEditor.tsx b/src-web/components/UrlParameterEditor.tsx index 3e5eb885..941b145c 100644 --- a/src-web/components/UrlParameterEditor.tsx +++ b/src-web/components/UrlParameterEditor.tsx @@ -15,7 +15,7 @@ export function UrlParametersEditor({ pairs, forceUpdateKey, onChange }: Props) const pairEditor = useRef(null); useRequestEditorEvent( - 'focus_http_request_param_value', + 'request_params.focus_value', (name) => { const pairIndex = pairs.findIndex((p) => p.name === name); if (pairIndex >= 0) { diff --git a/src-web/hooks/useRequestEditor.tsx b/src-web/hooks/useRequestEditor.tsx index d9442c5c..7a0ad1c1 100644 --- a/src-web/hooks/useRequestEditor.tsx +++ b/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], );