From 06ace7f18a94653dee7a3a3453c6bbd23aa5c88a Mon Sep 17 00:00:00 2001 From: ilkin-overleaf <100852799+ilkin-overleaf@users.noreply.github.com> Date: Mon, 9 Jan 2023 17:35:20 +0200 Subject: [PATCH] Merge pull request #11122 from overleaf/ii-rollback-some-ts-hooks-to-js [web] Revert detach hooks from TS to JS GitOrigin-RevId: c108fe219d472f0c0b745dc8648fd15375f0e083 --- ...-detach-action.ts => use-detach-action.js} | 23 +++++-------- .../shared/hooks/use-detach-state-watcher.js | 19 +++++++++++ .../shared/hooks/use-detach-state-watcher.ts | 32 ------------------- ...se-detach-state.ts => use-detach-state.js} | 30 +++++------------ 4 files changed, 35 insertions(+), 69 deletions(-) rename services/web/frontend/js/shared/hooks/{use-detach-action.ts => use-detach-action.js} (73%) create mode 100644 services/web/frontend/js/shared/hooks/use-detach-state-watcher.js delete mode 100644 services/web/frontend/js/shared/hooks/use-detach-state-watcher.ts rename services/web/frontend/js/shared/hooks/{use-detach-state.ts => use-detach-state.js} (68%) diff --git a/services/web/frontend/js/shared/hooks/use-detach-action.ts b/services/web/frontend/js/shared/hooks/use-detach-action.js similarity index 73% rename from services/web/frontend/js/shared/hooks/use-detach-action.ts rename to services/web/frontend/js/shared/hooks/use-detach-action.js index 32cedad82f..e9376d85ab 100644 --- a/services/web/frontend/js/shared/hooks/use-detach-action.ts +++ b/services/web/frontend/js/shared/hooks/use-detach-action.js @@ -1,27 +1,22 @@ import { useCallback, useEffect } from 'react' import { useDetachContext } from '../context/detach-context' import getMeta from '../../utils/meta' -import { DetachRole, DetachTargetRole, Message } from './use-detach-state' const debugPdfDetach = getMeta('ol-debugPdfDetach') -function useDetachAction< - A, - S extends DetachRole, - T extends DetachTargetRole ->( - actionName: string, - actionFunction: (...args: A[]) => void, - senderRole: S, - targetRole: T +export default function useDetachAction( + actionName, + actionFunction, + senderRole, + targetRole ) { const { role, broadcastEvent, addEventHandler, deleteEventHandler } = useDetachContext() - const eventName: Message['event'] = `action-${actionName}` + const eventName = `action-${actionName}` const triggerFn = useCallback( - (...args: A[]) => { + (...args) => { if (role === senderRole) { broadcastEvent(eventName, { args }) } else { @@ -32,7 +27,7 @@ function useDetachAction< ) const handleActionEvent = useCallback( - (message: Message) => { + message => { if (message.event !== eventName) { return } @@ -54,5 +49,3 @@ function useDetachAction< return triggerFn } - -export default useDetachAction diff --git a/services/web/frontend/js/shared/hooks/use-detach-state-watcher.js b/services/web/frontend/js/shared/hooks/use-detach-state-watcher.js new file mode 100644 index 0000000000..9a1965ddde --- /dev/null +++ b/services/web/frontend/js/shared/hooks/use-detach-state-watcher.js @@ -0,0 +1,19 @@ +import { useEffect } from 'react' +import useDetachState from './use-detach-state' + +function useDetachStateWatcher(key, stateValue, senderRole, targetRole) { + const [value, setValue] = useDetachState( + key, + stateValue, + senderRole, + targetRole + ) + + useEffect(() => { + setValue(stateValue) + }, [setValue, stateValue]) + + return [value, setValue] +} + +export default useDetachStateWatcher diff --git a/services/web/frontend/js/shared/hooks/use-detach-state-watcher.ts b/services/web/frontend/js/shared/hooks/use-detach-state-watcher.ts deleted file mode 100644 index 4b05aec6f8..0000000000 --- a/services/web/frontend/js/shared/hooks/use-detach-state-watcher.ts +++ /dev/null @@ -1,32 +0,0 @@ -import { useEffect } from 'react' -import useDetachState, { - DetachRole, - DetachTargetRole, -} from './use-detach-state' - -type UseDetachParams = Parameters - -function useDetachStateWatcher< - S extends DetachRole, - T extends DetachTargetRole ->( - key: UseDetachParams[0], - stateValue: UseDetachParams[1], - senderRole: S, - targetRole: T -) { - const [value, setValue] = useDetachState( - key, - stateValue, - senderRole, - targetRole - ) - - useEffect(() => { - setValue(stateValue) - }, [setValue, stateValue]) - - return [value, setValue] -} - -export default useDetachStateWatcher diff --git a/services/web/frontend/js/shared/hooks/use-detach-state.ts b/services/web/frontend/js/shared/hooks/use-detach-state.js similarity index 68% rename from services/web/frontend/js/shared/hooks/use-detach-state.ts rename to services/web/frontend/js/shared/hooks/use-detach-state.js index 61c0bd66b8..6b9cbf7f00 100644 --- a/services/web/frontend/js/shared/hooks/use-detach-state.ts +++ b/services/web/frontend/js/shared/hooks/use-detach-state.js @@ -4,24 +4,12 @@ import getMeta from '../../utils/meta' const debugPdfDetach = getMeta('ol-debugPdfDetach') -export type DetachRole = 'detacher' | 'detached' -export type DetachTargetRole = T extends 'detacher' - ? 'detached' - : 'detacher' -export type Message = { - event: `${'action' | 'state'}-${string}` - data: { - args: DataArgs[] - value: unknown - } -} - -function useDetachState>( - key: string, - defaultValue: unknown, - senderRole: S, - targetRole: T -): [unknown, React.Dispatch] { +export default function useDetachState( + key, + defaultValue, + senderRole, + targetRole +) { const [value, setValue] = useState(defaultValue) const { @@ -32,7 +20,7 @@ function useDetachState>( deleteEventHandler, } = useDetachContext() - const eventName: Message['event'] = `state-${key}` + const eventName = `state-${key}` // lastDetachedConnectedAt is added as a dependency in order to re-broadcast // all states when a new detached tab connects @@ -50,7 +38,7 @@ function useDetachState>( ]) const handleStateEvent = useCallback( - (message: Message) => { + message => { if (message.event !== eventName) { return } @@ -72,5 +60,3 @@ function useDetachState>( return [value, setValue] } - -export default useDetachState