Merge pull request #23940 from overleaf/td-react-18

Upgrade to React 18

GitOrigin-RevId: 9b81936e6eea2bccd97fe5c2c5841f0b946371b8

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

@@ -100,7 +100,7 @@ export default function useDetachLayout() {
   }, [setRole, setIsLinked])
 
   const handleEventForDetacherFromDetached = useCallback(
-    message => {
+    (message: any) => {
       switch (message.event) {
         case 'connected':
           broadcastEvent('up')
@@ -118,7 +118,7 @@ export default function useDetachLayout() {
   )
 
   const handleEventForDetachedFromDetacher = useCallback(
-    message => {
+    (message: any) => {
       switch (message.event) {
         case 'connected':
           broadcastEvent('up')
@@ -140,7 +140,7 @@ export default function useDetachLayout() {
   )
 
   const handleEventForDetachedFromDetached = useCallback(
-    message => {
+    (message: any) => {
       switch (message.event) {
         case 'closed':
           broadcastEvent('up')
@@ -151,7 +151,7 @@ export default function useDetachLayout() {
   )
 
   const handleEvent = useCallback(
-    message => {
+    (message: any) => {
       if (role === 'detacher') {
         if (message.role === 'detacher') {
           handleEventForDetacherFromDetacher()

services/web/frontend/js/shared/hooks/use-dropdown.ts

@@ -9,7 +9,7 @@ export default function useDropdown(defaultOpen = false) {
 
   // react-bootstrap v0.x passes `component` instead of `node` to the ref callback
   const handleRef = useCallback(
-    component => {
+    (component: any) => {
       if (component) {
         // eslint-disable-next-line react/no-find-dom-node
         ref.current = findDOMNode(component)
@@ -19,18 +19,18 @@ export default function useDropdown(defaultOpen = false) {
   )
 
   // prevent a click on the dropdown toggle propagating to the original handler
-  const handleClick = useCallback(event => {
+  const handleClick = useCallback((event: any) => {
     event.stopPropagation()
   }, [])
 
   // handle dropdown toggle
-  const handleToggle = useCallback(value => {
+  const handleToggle = useCallback((value: any) => {
     setOpen(Boolean(value))
   }, [])
 
   // close the dropdown on click outside the dropdown
   const handleDocumentClick = useCallback(
-    event => {
+    (event: any) => {
       if (ref.current && !ref.current.contains(event.target)) {
         setOpen(false)
       }

services/web/frontend/js/shared/hooks/use-location.ts

@@ -6,7 +6,7 @@ export const useLocation = () => {
   const isMounted = useIsMounted()
 
   const assign = useCallback(
-    url => {
+    (url: string) => {
       if (isMounted.current) {
         location.assign(url)
       }
@@ -15,7 +15,7 @@ export const useLocation = () => {
   )
 
   const replace = useCallback(
-    url => {
+    (url: string) => {
       if (isMounted.current) {
         location.replace(url)
       }

services/web/frontend/js/shared/hooks/user-channel/use-user-channel.ts

@@ -8,7 +8,7 @@ export const useUserChannel = (): BroadcastChannel | null => {
   }
 
   useEffect(() => {
-    return () => channelRef.current?.close()
+    return () => channelRef.current?.close?.()
   }, [])
 
   return channelRef.current