Merge pull request #4041 from overleaf/ae-use-ref-with-autofocus

Rename hooks files and move to shared folder

GitOrigin-RevId: 9659247b5e767197c3e11acc9a3922ecaab49162

services/web/frontend/js/features/chat/context/chat-context.js

@@ -13,7 +13,7 @@ import { useApplicationContext } from '../../../shared/context/application-conte
 import { useEditorContext } from '../../../shared/context/editor-context'
 import { getJSON, postJSON } from '../../../infrastructure/fetch-json'
 import { appendMessage, prependMessages } from '../utils/message-list-appender'
-import useBrowserWindow from '../../../infrastructure/browser-window-hook'
+import useBrowserWindow from '../../../shared/hooks/use-browser-window'
 import { useLayoutContext } from '../../../shared/context/layout-context'
 
 const PAGE_SIZE = 50

services/web/frontend/js/features/file-tree/components/file-tree-folder.js

@@ -12,7 +12,7 @@ import { useDroppable } from '../contexts/file-tree-draggable'
 
 import FileTreeItemInner from './file-tree-item/file-tree-item-inner'
 import FileTreeFolderList from './file-tree-folder-list'
-import usePersistedState from '../../../infrastructure/persisted-state-hook'
+import usePersistedState from '../../../shared/hooks/use-persisted-state'
 
 function FileTreeFolder({ name, id, folders, docs, files }) {
   const { t } = useTranslation()

services/web/frontend/js/features/file-tree/components/file-tree-item/file-tree-item-name.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react'
 import PropTypes from 'prop-types'
 
-import { useRefWithAutoFocus } from '../../../../infrastructure/auto-focus'
+import { useRefWithAutoFocus } from '../../../../shared/hooks/use-ref-with-auto-focus'
 
 import { useFileTreeActionable } from '../../contexts/file-tree-actionable'
 

services/web/frontend/js/features/file-tree/components/modals/file-tree-modal-create-folder.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 
 import { Button, Modal } from 'react-bootstrap'
 import { useTranslation } from 'react-i18next'
-import { useRefWithAutoFocus } from '../../../../infrastructure/auto-focus'
+import { useRefWithAutoFocus } from '../../../../shared/hooks/use-ref-with-auto-focus'
 
 import AccessibleModal from '../../../../shared/components/accessible-modal'
 

services/web/frontend/js/features/file-tree/contexts/file-tree-selectable.js

@@ -13,7 +13,7 @@ import classNames from 'classnames'
 import { findInTree } from '../util/find-in-tree'
 import { useFileTreeMutable } from './file-tree-mutable'
 import { useFileTreeMainContext } from './file-tree-main'
-import usePersistedState from '../../../infrastructure/persisted-state-hook'
+import usePersistedState from '../../../shared/hooks/use-persisted-state'
 
 const FileTreeSelectableContext = createContext()
 

services/web/frontend/js/features/preview/components/preview-logs-pane.js

@@ -7,7 +7,7 @@ import PreviewValidationIssue from './preview-validation-issue'
 import PreviewDownloadFileList from './preview-download-file-list'
 import PreviewError from './preview-error'
 import Icon from '../../../shared/components/icon'
-import usePersistedState from '../../../infrastructure/persisted-state-hook'
+import usePersistedState from '../../../shared/hooks/use-persisted-state'
 
 function PreviewLogsPane({
   logEntries = { all: [], errors: [], warnings: [], typesetting: [] },

services/web/frontend/js/shared/context/editor-context.js

@@ -2,7 +2,7 @@ import React, { createContext, useCallback, useContext } from 'react'
 import PropTypes from 'prop-types'
 import useScopeValue from './util/scope-value-hook'
 import { useApplicationContext } from './application-context'
-import useBrowserWindow from '../../infrastructure/browser-window-hook'
+import useBrowserWindow from '../hooks/use-browser-window'
 
 export const EditorContext = createContext()
 

services/web/frontend/js/infrastructure/persisted-state-hook.js → services/web/frontend/js/shared/hooks/use-persisted-state.js

@@ -1,5 +1,5 @@
 import { useState, useCallback } from 'react'
-import localStorage from './local-storage'
+import localStorage from '../../infrastructure/local-storage'
 
 function usePersistedState(key, defaultValue) {
   const [value, setValue] = useState(() => {

services/web/frontend/js/infrastructure/auto-focus.js → services/web/frontend/js/shared/hooks/use-ref-with-auto-focus.js

@@ -1,12 +1,14 @@
-import { createRef, useEffect } from 'react'
+import { useRef, useEffect } from 'react'
 
 export function useRefWithAutoFocus() {
-  const autoFocusedRef = createRef()
+  const autoFocusedRef = useRef()
 
   useEffect(() => {
     if (autoFocusedRef.current) {
       window.requestAnimationFrame(() => {
-        if (autoFocusedRef.current) autoFocusedRef.current.focus()
+        if (autoFocusedRef.current) {
+          autoFocusedRef.current.focus()
+        }
       })
     }
   }, [autoFocusedRef])