Merge pull request #11122 from overleaf/ii-rollback-some-ts-hooks-to-js

[web] Revert detach hooks from TS to JS

GitOrigin-RevId: c108fe219d472f0c0b745dc8648fd15375f0e083

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<
+export default function useDetachAction(
-  A,
+  actionName,
-  S extends DetachRole,
+  actionFunction,
-  T extends DetachTargetRole<S>
+  senderRole,
->(
+  targetRole
-  actionName: string,
-  actionFunction: (...args: A[]) => void,
-  senderRole: S,
-  targetRole: T
 ) {
   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<A>) => {
+    message => {
       if (message.event !== eventName) {
         return
       }
@@ -54,5 +49,3 @@ function useDetachAction<
 
   return triggerFn
 }
-
-export default useDetachAction

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

services/web/frontend/js/shared/hooks/use-detach-state-watcher.ts

@@ -1,32 +0,0 @@
-import { useEffect } from 'react'
-import useDetachState, {
-  DetachRole,
-  DetachTargetRole,
-} from './use-detach-state'
-
-type UseDetachParams = Parameters<typeof useDetachState>
-
-function useDetachStateWatcher<
-  S extends DetachRole,
-  T extends DetachTargetRole<S>
->(
-  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

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 default function useDetachState(
-export type DetachTargetRole<T extends DetachRole> = T extends 'detacher'
+  key,
-  ? 'detached'
+  defaultValue,
-  : 'detacher'
+  senderRole,
-export type Message<DataArgs = unknown> = {
+  targetRole
-  event: `${'action' | 'state'}-${string}`
+) {
-  data: {
-    args: DataArgs[]
-    value: unknown
-  }
-}
-
-function useDetachState<S extends DetachRole, T extends DetachTargetRole<S>>(
-  key: string,
-  defaultValue: unknown,
-  senderRole: S,
-  targetRole: T
-): [unknown, React.Dispatch<unknown>] {
   const [value, setValue] = useState(defaultValue)
 
   const {
@@ -32,7 +20,7 @@ function useDetachState<S extends DetachRole, T extends DetachTargetRole<S>>(
     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<S extends DetachRole, T extends DetachTargetRole<S>>(
   ])
 
   const handleStateEvent = useCallback(
-    (message: Message) => {
+    message => {
       if (message.event !== eventName) {
         return
       }
@@ -72,5 +60,3 @@ function useDetachState<S extends DetachRole, T extends DetachTargetRole<S>>(
 
   return [value, setValue]
 }
-
-export default useDetachState