diff --git a/web/account/traditional-login-form.react.js b/web/account/traditional-login-form.react.js --- a/web/account/traditional-login-form.react.js +++ b/web/account/traditional-login-form.react.js @@ -37,7 +37,7 @@ const getSignedIdentityKeysBlob = useGetSignedIdentityKeysBlob(); - const usernameInputRef = React.useRef(); + const usernameInputRef = React.useRef(); React.useEffect(() => { usernameInputRef.current?.focus(); }, []); diff --git a/web/avatars/edit-thread-avatar-menu.react.js b/web/avatars/edit-thread-avatar-menu.react.js --- a/web/avatars/edit-thread-avatar-menu.react.js +++ b/web/avatars/edit-thread-avatar-menu.react.js @@ -57,7 +57,7 @@ [removeThreadAvatar], ); - const imageInputRef = React.useRef(); + const imageInputRef = React.useRef(); const onImageMenuItemClicked = React.useCallback( () => imageInputRef.current?.click(), [], diff --git a/web/avatars/edit-user-avatar-menu.react.js b/web/avatars/edit-user-avatar-menu.react.js --- a/web/avatars/edit-user-avatar-menu.react.js +++ b/web/avatars/edit-user-avatar-menu.react.js @@ -61,7 +61,7 @@ [openEmojiSelectionModal], ); - const imageInputRef = React.useRef(); + const imageInputRef = React.useRef(); const onImageMenuItemClicked = React.useCallback( () => imageInputRef.current?.click(), [], diff --git a/web/chat/chat-input-text-area.react.js b/web/chat/chat-input-text-area.react.js --- a/web/chat/chat-input-text-area.react.js +++ b/web/chat/chat-input-text-area.react.js @@ -27,7 +27,7 @@ onChangePosition, maxHeight = defaultMaxTextAreaHeight, } = props; - const textareaRef = React.useRef(null); + const textareaRef = React.useRef(null); const focusAndUpdateText = React.useCallback(() => { if (!focus) { diff --git a/web/chat/chat-message-list-container.react.js b/web/chat/chat-message-list-container.react.js --- a/web/chat/chat-message-list-container.react.js +++ b/web/chat/chat-message-list-container.react.js @@ -75,7 +75,7 @@ [css.activeContainer]: isActive, }); - const containerRef = React.useRef(); + const containerRef = React.useRef(); const onPaste = React.useCallback( (e: ClipboardEvent) => { diff --git a/web/chat/chat-thread-list.react.js b/web/chat/chat-thread-list.react.js --- a/web/chat/chat-thread-list.react.js +++ b/web/chat/chat-thread-list.react.js @@ -59,6 +59,11 @@ return
{item}
; }; +type VariableSizeListRef = { + +resetAfterIndex: (index: number, shouldForceUpdate?: boolean) => void, + ... +}; + function ChatThreadList(): React.Node { const threadListContext = React.useContext(ThreadListContext); invariant( @@ -108,7 +113,7 @@ ? 'Create new chat' : 'Create new channel'; - const threadListContainerRef = React.useRef(); + const threadListContainerRef = React.useRef(); const threads = React.useMemo( () => diff --git a/web/chat/edit-text-message.react.js b/web/chat/edit-text-message.react.js --- a/web/chat/edit-text-message.react.js +++ b/web/chat/edit-text-message.react.js @@ -37,7 +37,7 @@ useEditModalContext(); const editMessage = useEditMessage(); - const myRef = React.useRef(null); + const myRef = React.useRef(null); const editedMessageDraft = editState?.editedMessageDraft ?? ''; const threadColor = threadInfo.color; diff --git a/web/chat/message-tooltip.react.js b/web/chat/message-tooltip.react.js --- a/web/chat/message-tooltip.react.js +++ b/web/chat/message-tooltip.react.js @@ -63,9 +63,10 @@ // - emojiKeyboardRenderedNode, which will get set in that useEffect and will // trigger the rerendering of this component with the correct height/width - const [emojiKeyboardNode, setEmojiKeyboardNode] = React.useState(null); + const [emojiKeyboardNode, setEmojiKeyboardNode] = + React.useState(null); const [emojiKeyboardRenderedNode, setEmojiKeyboardRenderedNode] = - React.useState(null); + React.useState(null); React.useEffect(() => { if (emojiKeyboardNode) { diff --git a/web/components/menu.react.js b/web/components/menu.react.js --- a/web/components/menu.react.js +++ b/web/components/menu.react.js @@ -21,7 +21,7 @@ }; function Menu(props: MenuProps): React.Node { - const buttonRef = React.useRef(); + const buttonRef = React.useRef(); const { renderMenu, setMenuPosition, diff --git a/web/media/encrypted-multimedia.react.js b/web/media/encrypted-multimedia.react.js --- a/web/media/encrypted-multimedia.react.js +++ b/web/media/encrypted-multimedia.react.js @@ -29,6 +29,8 @@ +invisibleLoad?: boolean, }; +type Source = { +uri: string } | { +error: string }; + function EncryptedMultimedia(props: Props): React.Node { const { blobURI, @@ -39,8 +41,8 @@ invisibleLoad, } = props; - const [source, setSource] = React.useState(null); - const videoRef = React.useRef(null); + const [source, setSource] = React.useState(null); + const videoRef = React.useRef(null); React.useEffect(() => { let isMounted = true, diff --git a/web/media/loadable-video.react.js b/web/media/loadable-video.react.js --- a/web/media/loadable-video.react.js +++ b/web/media/loadable-video.react.js @@ -36,7 +36,7 @@ const { thumbnailURI, thumbnailBlobURI, thumbnailEncryptionKey } = thumbnailSource; - const [thumbnailImage, setThumbnailImage] = React.useState(null); + const [thumbnailImage, setThumbnailImage] = React.useState(null); React.useEffect(() => { let isMounted = true, diff --git a/web/media/media-utils.js b/web/media/media-utils.js --- a/web/media/media-utils.js +++ b/web/media/media-utils.js @@ -240,7 +240,7 @@ } function usePlaceholder(thumbHash: ?string, encryptionKey: ?string): ?string { - const [placeholder, setPlaceholder] = React.useState(null); + const [placeholder, setPlaceholder] = React.useState(null); React.useEffect(() => { if (!thumbHash) { diff --git a/web/modals/chat/message-results-modal.react.js b/web/modals/chat/message-results-modal.react.js --- a/web/modals/chat/message-results-modal.react.js +++ b/web/modals/chat/message-results-modal.react.js @@ -14,6 +14,7 @@ isInvalidPinSourceForThread, modifyItemForResultScreen, } from 'lib/shared/message-utils.js'; +import type { RawMessageInfo } from 'lib/types/message-types.js'; import type { MinimallyEncodedThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js'; import { type ThreadInfo } from 'lib/types/thread-types.js'; import { useDispatchActionPromise } from 'lib/utils/action-utils.js'; @@ -37,7 +38,9 @@ const { threadInfo, modalName } = props; const { id: threadID } = threadInfo; const { popModal } = useModalContext(); - const [rawMessageResults, setRawMessageResults] = React.useState([]); + const [rawMessageResults, setRawMessageResults] = React.useState< + $ReadOnlyArray, + >([]); const callFetchPinnedMessages = useFetchPinnedMessages(); const dispatchActionPromise = useDispatchActionPromise(); diff --git a/web/modals/search/message-search-modal.react.js b/web/modals/search/message-search-modal.react.js --- a/web/modals/search/message-search-modal.react.js +++ b/web/modals/search/message-search-modal.react.js @@ -57,7 +57,7 @@ const { clearTooltip } = useTooltipContext(); - const messageContainer = React.useRef(null); + const messageContainer = React.useRef(null); const possiblyLoadMoreMessages = React.useCallback(() => { if (!messageContainer.current) { diff --git a/web/modals/threads/gallery/thread-settings-media-gallery.react.js b/web/modals/threads/gallery/thread-settings-media-gallery.react.js --- a/web/modals/threads/gallery/thread-settings-media-gallery.react.js +++ b/web/modals/threads/gallery/thread-settings-media-gallery.react.js @@ -37,7 +37,7 @@ const modalName = 'Media'; const callFetchThreadMedia = useFetchThreadMedia(); - const [mediaInfos, setMediaInfos] = React.useState([]); + const [mediaInfos, setMediaInfos] = React.useState<$ReadOnlyArray>([]); const [tab, setTab] = React.useState(activeTab); React.useEffect(() => { diff --git a/web/modals/threads/members/members-list.react.js b/web/modals/threads/members/members-list.react.js --- a/web/modals/threads/members/members-list.react.js +++ b/web/modals/threads/members/members-list.react.js @@ -28,7 +28,7 @@ function ThreadMembersList(props: Props): React.Node { const { threadMembers, threadInfo } = props; - const [openMenu, setOpenMenu] = React.useState(null); + const [openMenu, setOpenMenu] = React.useState(null); const hasMembers = threadMembers.length > 0; const threadMembersWithENSNames = useENSNames(threadMembers); diff --git a/web/modals/threads/settings/thread-settings-general-tab.react.js b/web/modals/threads/settings/thread-settings-general-tab.react.js --- a/web/modals/threads/settings/thread-settings-general-tab.react.js +++ b/web/modals/threads/settings/thread-settings-general-tab.react.js @@ -48,7 +48,7 @@ const dispatchActionPromise = useDispatchActionPromise(); const callChangeThreadSettings = useChangeThreadSettings(); - const nameInputRef = React.useRef(); + const nameInputRef = React.useRef(); React.useEffect(() => { nameInputRef.current?.focus(); diff --git a/web/modals/threads/thread-picker-modal.react.js b/web/modals/threads/thread-picker-modal.react.js --- a/web/modals/threads/thread-picker-modal.react.js +++ b/web/modals/threads/thread-picker-modal.react.js @@ -66,7 +66,7 @@ new Set(), ); - const searchRef = React.useRef(); + const searchRef = React.useRef(); React.useEffect(() => { searchRef.current?.focus(); diff --git a/web/push-notif/badge-handler.react.js b/web/push-notif/badge-handler.react.js --- a/web/push-notif/badge-handler.react.js +++ b/web/push-notif/badge-handler.react.js @@ -4,6 +4,7 @@ import { connectionSelector } from 'lib/selectors/keyserver-selectors.js'; import { unreadCount } from 'lib/selectors/thread-selectors.js'; +import type { ConnectionInfo } from 'lib/types/socket-types.js'; import { ashoatKeyserverID } from 'lib/utils/validation-utils.js'; import electron from '../electron.js'; @@ -12,7 +13,7 @@ function useBadgeHandler() { const connection = useSelector(connectionSelector(ashoatKeyserverID)); - const prevConnection = React.useRef(); + const prevConnection = React.useRef(); const boundUnreadCount = useSelector(unreadCount); const prevUnreadCount = React.useRef(boundUnreadCount); diff --git a/web/redux/focus-handler.react.js b/web/redux/focus-handler.react.js --- a/web/redux/focus-handler.react.js +++ b/web/redux/focus-handler.react.js @@ -45,7 +45,7 @@ ); const prevFocusedRef = React.useRef(curWindowActive); - const timerRef = React.useRef(); + const timerRef = React.useRef(); React.useEffect(() => { const prevFocused = prevFocusedRef.current; if (focused && !prevFocused) { diff --git a/web/redux/policy-acknowledgment-handler.js b/web/redux/policy-acknowledgment-handler.js --- a/web/redux/policy-acknowledgment-handler.js +++ b/web/redux/policy-acknowledgment-handler.js @@ -12,7 +12,7 @@ const termsAndPrivacyState = useSelector( state => state.userPolicies?.[policyTypes.tosAndPrivacyPolicy], ); - const [policyModalKey, setPolicyModalKey] = React.useState(null); + const [policyModalKey, setPolicyModalKey] = React.useState(null); const { pushModal, popModal, modals } = useModalContext(); const policyModalVisible = React.useMemo( diff --git a/web/settings/tunnelbroker-test.react.js b/web/settings/tunnelbroker-test.react.js --- a/web/settings/tunnelbroker-test.react.js +++ b/web/settings/tunnelbroker-test.react.js @@ -21,8 +21,8 @@ const [message, setMessage] = React.useState(''); const [loading, setLoading] = React.useState(false); const [errorMessage, setErrorMessage] = React.useState(''); - const recipientInput = React.useRef(null); - const messageInput = React.useRef(null); + const recipientInput = React.useRef(null); + const messageInput = React.useRef(null); const onSubmit = React.useCallback( async (event: SyntheticEvent) => { diff --git a/web/utils/tooltip-action-utils.js b/web/utils/tooltip-action-utils.js --- a/web/utils/tooltip-action-utils.js +++ b/web/utils/tooltip-action-utils.js @@ -35,6 +35,7 @@ import { getComposedMessageID } from '../chat/chat-constants.js'; import { useEditModalContext } from '../chat/edit-message-provider.js'; import MessageTooltip from '../chat/message-tooltip.react.js'; +import type { PositionInfo } from '../chat/position-types.js'; import ReactionTooltip from '../chat/reaction-tooltip.react.js'; import { useTooltipContext } from '../chat/tooltip-provider.js'; import CommIcon from '../CommIcon.react.js'; @@ -61,10 +62,11 @@ availablePositions, }: UseTooltipArgs): UseTooltipResult { const [onMouseLeave, setOnMouseLeave] = React.useState mixed>(null); - const [tooltipSourcePosition, setTooltipSourcePosition] = React.useState(); + const [tooltipSourcePosition, setTooltipSourcePosition] = + React.useState(); const { renderTooltip } = useTooltipContext(); - const updateTooltip = React.useRef(); + const updateTooltip = React.useRef mixed>(); const onMouseEnter = React.useCallback( (event: SyntheticEvent) => {