refactor: clean up remaining global React import calls

import specific types from react package

ts/components/basic/PillContainer.tsx

@@ -1,7 +1,8 @@
+import { ReactNode } from 'react';
 import styled from 'styled-components';
 
 type PillContainerProps = {
-  children: React.ReactNode;
+  children: ReactNode;
   margin?: string;
   padding?: string;
   onClick?: () => void;

ts/components/basic/SessionInput.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { ChangeEvent, useState } from 'react';
 
 import classNames from 'classnames';
 import { Noop } from '../../types/Util';
@@ -78,7 +78,7 @@ export const SessionInput = (props: Props) => {
 
   const correctType = forceShow ? 'text' : type;
 
-  const updateInputValue = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const updateInputValue = (e: ChangeEvent<HTMLInputElement>) => {
     e.preventDefault();
     const val = e.target.value;
     setInputValue(val);

ts/components/basic/Text.tsx

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import styled, { CSSProperties } from 'styled-components';
 
 type TextProps = {
@@ -25,9 +26,7 @@ export const Text = (props: TextProps) => {
   return <StyledDefaultText {...props}>{props.text}</StyledDefaultText>;
 };
 
-export const TextWithChildren = (
-  props: Omit<TextProps, 'text'> & { children: React.ReactNode }
-) => {
+export const TextWithChildren = (props: Omit<TextProps, 'text'> & { children: ReactNode }) => {
   return <StyledDefaultText {...props}>{props.children}</StyledDefaultText>;
 };
 

ts/components/calling/CallButtons.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { MouseEvent, useEffect, useState } from 'react';
 import { contextMenu, Item, Menu } from 'react-contexify';
 import { useDispatch, useSelector } from 'react-redux';
 import styled from 'styled-components';
@@ -40,7 +40,7 @@ const VideoInputMenu = ({
 
 const showVideoInputMenu = (
   currentConnectedCameras: Array<InputItem>,
-  e: React.MouseEvent<HTMLDivElement>
+  e: MouseEvent<HTMLDivElement>
 ) => {
   if (currentConnectedCameras.length === 0) {
     ToastUtils.pushNoCameraFound();
@@ -113,7 +113,7 @@ const AudioInputMenu = ({
 
 const showAudioInputMenu = (
   currentConnectedAudioInputs: Array<any>,
-  e: React.MouseEvent<HTMLDivElement>
+  e: MouseEvent<HTMLDivElement>
 ) => {
   if (currentConnectedAudioInputs.length === 0) {
     ToastUtils.pushNoAudioInputFound();
@@ -182,7 +182,7 @@ const AudioOutputMenu = ({
 
 const showAudioOutputMenu = (
   currentConnectedAudioOutputs: Array<any>,
-  e: React.MouseEvent<HTMLDivElement>
+  e: MouseEvent<HTMLDivElement>
 ) => {
   if (currentConnectedAudioOutputs.length === 0) {
     ToastUtils.pushNoAudioOutputFound();

ts/components/conversation/ContactName.tsx

@@ -28,7 +28,7 @@ export const ContactName = (props: Props) => {
     ? {
         fontWeight: 'bold',
       }
-    : {}) as React.CSSProperties;
+    : {}) as CSSProperties;
   const textProfile = profileName || name || convoName || window.i18n('anonymous');
 
   return (

ts/components/conversation/SessionConversation.tsx

@@ -4,7 +4,7 @@ import autoBind from 'auto-bind';
 import { blobToArrayBuffer } from 'blob-util';
 import loadImage from 'blueimp-load-image';
 import classNames from 'classnames';
-import { Component, createRef } from 'react';
+import { Component, RefObject, createRef } from 'react';
 import styled from 'styled-components';
 import {
   CompositionBox,
@@ -104,7 +104,7 @@ const ConvoLoadingSpinner = () => {
 };
 
 export class SessionConversation extends Component<Props, State> {
-  private readonly messageContainerRef: React.RefObject<HTMLDivElement>;
+  private readonly messageContainerRef: RefObject<HTMLDivElement>;
   private dragCounter: number;
   private publicMembersRefreshTimeout?: NodeJS.Timeout;
   private readonly updateMemberList: () => any;

ts/components/conversation/SessionMessagesListContainer.tsx

@@ -3,7 +3,7 @@ import { contextMenu } from 'react-contexify';
 import { connect } from 'react-redux';
 
 import autoBind from 'auto-bind';
-import { Component, createContext } from 'react';
+import { Component, RefObject, createContext } from 'react';
 import styled from 'styled-components';
 import {
   ReduxConversationType,
@@ -26,7 +26,7 @@ import { SessionMessagesList } from './SessionMessagesList';
 import { TypingBubble } from './TypingBubble';
 
 export type SessionMessageListProps = {
-  messageContainerRef: React.RefObject<HTMLDivElement>;
+  messageContainerRef: RefObject<HTMLDivElement>;
 };
 export const messageContainerDomID = 'messages-container';
 

ts/components/conversation/message/message-content/MessageContent.tsx

@@ -1,7 +1,14 @@
 import classNames from 'classnames';
 import { isEmpty } from 'lodash';
 import moment from 'moment';
-import { createContext, useCallback, useContext, useLayoutEffect, useState } from 'react';
+import {
+  MouseEvent,
+  createContext,
+  useCallback,
+  useContext,
+  useLayoutEffect,
+  useState,
+} from 'react';
 import { InView } from 'react-intersection-observer';
 import { useSelector } from 'react-redux';
 import styled from 'styled-components';
@@ -39,7 +46,7 @@ type Props = {
 
 // TODO not too sure what is this doing? It is not preventDefault()
 // or stopPropagation() so I think this is never cancelling a click event?
-function onClickOnMessageInnerContainer(event: React.MouseEvent<HTMLDivElement>) {
+function onClickOnMessageInnerContainer(event: MouseEvent<HTMLDivElement>) {
   const selection = window.getSelection();
   // Text is being selected
   if (selection && selection.type === 'Range') {

ts/components/conversation/message/message-content/MessageContentWithStatus.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { useCallback, useState } from 'react';
+import { MouseEvent, useCallback, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import styled from 'styled-components';
 import { replyToMessage } from '../../../../interactions/conversationInteractions';
@@ -62,7 +62,7 @@ export const MessageContentWithStatuses = (props: Props) => {
   const multiSelectMode = useSelector(isMessageSelectionMode);
 
   const onClickOnMessageOuterContainer = useCallback(
-    (event: React.MouseEvent<HTMLDivElement>) => {
+    (event: MouseEvent<HTMLDivElement>) => {
       if (multiSelectMode && props?.messageId) {
         event.preventDefault();
         event.stopPropagation();
@@ -72,7 +72,7 @@ export const MessageContentWithStatuses = (props: Props) => {
     [dispatch, props?.messageId, multiSelectMode]
   );
 
-  const onDoubleClickReplyToMessage = (e: React.MouseEvent<HTMLDivElement>) => {
+  const onDoubleClickReplyToMessage = (e: MouseEvent<HTMLDivElement>) => {
     const currentSelection = window.getSelection();
     const currentSelectionString = currentSelection?.toString() || undefined;
 

ts/components/conversation/message/message-content/MessageQuote.tsx

@@ -1,5 +1,6 @@
 import { isEmpty, toNumber } from 'lodash';
 
+import { MouseEvent } from 'react';
 import { useSelector } from 'react-redux';
 import { Data } from '../../../../data/data';
 import { MessageRenderingProps } from '../../../../models/messageType';
@@ -34,7 +35,7 @@ export const MessageQuote = (props: Props) => {
     quote.referencedMessageNotFound || !quote?.author || !quote.id || !quote.convoId
   );
 
-  const onQuoteClick = async (event: React.MouseEvent<HTMLDivElement>) => {
+  const onQuoteClick = async (event: MouseEvent<HTMLDivElement>) => {
     event.preventDefault();
     event.stopPropagation();
 

ts/components/conversation/message/message-content/Quote.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import { noop } from 'lodash';
-import { useState } from 'react';
+import { MouseEvent, useState } from 'react';
 
 import * as MIME from '../../../../types/MIME';
 import * as GoogleChrome from '../../../../util/GoogleChrome';
@@ -27,7 +27,7 @@ export type QuotePropsWithoutListener = {
 };
 
 export type QuotePropsWithListener = QuotePropsWithoutListener & {
-  onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+  onClick?: (e: MouseEvent<HTMLDivElement>) => void;
 };
 
 export interface QuotedAttachmentType {

ts/components/conversation/message/message-content/quote/Quote.tsx

@@ -51,7 +51,7 @@ export type QuoteProps = {
   text?: string;
   attachment?: QuotedAttachmentType;
 
-  onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+  onClick?: (e: MouseEvent<HTMLDivElement>) => void;
 };
 
 export interface QuotedAttachmentThumbnailType {

ts/components/conversation/message/message-item/GenericReadableMessage.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import { isNil, isString, toNumber } from 'lodash';
-import { useCallback, useEffect, useState } from 'react';
+import { MouseEvent, useCallback, useEffect, useState } from 'react';
 import { contextMenu } from 'react-contexify';
 import { useSelector } from 'react-redux';
 import styled, { keyframes } from 'styled-components';
@@ -85,7 +85,7 @@ export const GenericReadableMessage = (props: Props) => {
   }, [isRightClicked]);
 
   const handleContextMenu = useCallback(
-    (e: React.MouseEvent<HTMLElement>) => {
+    (e: MouseEvent<HTMLElement>) => {
       // this is quite dirty but considering that we want the context menu of the message to show on click on the attachment
       // and the context menu save attachment item to save the right attachment I did not find a better way for now.
 

ts/components/conversation/message/message-item/ReadableMessage.tsx

@@ -1,7 +1,9 @@
 import { debounce, noop } from 'lodash';
 import {
   AriaRole,
+  MouseEvent,
   MouseEventHandler,
+  ReactNode,
   useCallback,
   useContext,
   useLayoutEffect,
@@ -31,7 +33,7 @@ import { useSelectedConversationKey } from '../../../../state/selectors/selected
 import { ScrollToLoadedMessageContext } from '../../SessionMessagesListContainer';
 
 export type ReadableMessageProps = {
-  children: React.ReactNode;
+  children: ReactNode;
   messageId: string;
   className?: string;
   receivedAt: number | undefined;
@@ -40,7 +42,7 @@ export type ReadableMessageProps = {
   onDoubleClickCapture?: MouseEventHandler<HTMLElement>;
   role?: AriaRole;
   dataTestId: string;
-  onContextMenu?: (e: React.MouseEvent<HTMLElement>) => void;
+  onContextMenu?: (e: MouseEvent<HTMLElement>) => void;
   isControlMessage?: boolean;
 };
 

ts/components/dialog/BanOrUnbanUserDialog.tsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react';
+import { ChangeEvent, useRef, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { useFocusMount } from '../../hooks/useFocusMount';
@@ -108,7 +108,7 @@ export const BanOrUnBanUserDialog = (props: {
   const chatName = convo.getNicknameOrRealUsernameOrPlaceholder();
   const title = `${isBan ? window.i18n('banUser') : window.i18n('unbanUser')}: ${chatName}`;
 
-  const onPubkeyBoxChanges = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const onPubkeyBoxChanges = (e: ChangeEvent<HTMLInputElement>) => {
     setInputBoxValue(e.target.value?.trim() || '');
   };
 

ts/components/icon/DropDownAndToggleButton.tsx

@@ -1,9 +1,10 @@
+import { MouseEvent } from 'react';
 import { contextMenu } from 'react-contexify';
 import styled from 'styled-components';
 
 type SProps = {
-  onArrowClick: (e: React.MouseEvent<HTMLDivElement>) => void;
-  onMainButtonClick: (e: React.MouseEvent<HTMLDivElement>) => void;
+  onArrowClick: (e: MouseEvent<HTMLDivElement>) => void;
+  onMainButtonClick: (e: MouseEvent<HTMLDivElement>) => void;
   isMuted?: boolean;
   isFullScreen?: boolean;
   iconType: 'microphone' | 'camera' | 'volume';
@@ -85,12 +86,12 @@ const MicrophoneIcon = (
 
 export const DropDownAndToggleButton = (props: SProps) => {
   const { iconType, isFullScreen = false, onArrowClick, onMainButtonClick, isMuted } = props;
-  const arrowClickHandler = (e: React.MouseEvent<HTMLDivElement>) => {
+  const arrowClickHandler = (e: MouseEvent<HTMLDivElement>) => {
     e.stopPropagation();
     onArrowClick(e);
   };
 
-  const mainButtonClickHandler = (e: React.MouseEvent<HTMLDivElement>) => {
+  const mainButtonClickHandler = (e: MouseEvent<HTMLDivElement>) => {
     e.stopPropagation();
     contextMenu.hideAll();
     onMainButtonClick(e);

ts/components/leftpane/MessageRequestsBanner.tsx

@@ -1,3 +1,4 @@
+import { MouseEvent } from 'react';
 import { contextMenu } from 'react-contexify';
 import { createPortal } from 'react-dom';
 import { useSelector } from 'react-redux';
@@ -103,7 +104,7 @@ export const MessageRequestsBanner = (props: { handleOnClick: () => any }) => {
     });
   };
 
-  const openRequests = (e: React.MouseEvent<HTMLDivElement>) => {
+  const openRequests = (e: MouseEvent<HTMLDivElement>) => {
     if (e.button === 0) {
       handleOnClick();
     }

ts/components/leftpane/conversation-list-item/ConversationListItem.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import { isNil } from 'lodash';
-import { useCallback } from 'react';
+import { MouseEvent, useCallback } from 'react';
 import { contextMenu } from 'react-contexify';
 import { createPortal } from 'react-dom';
 import { useDispatch, useSelector } from 'react-redux';
@@ -85,7 +85,7 @@ const ConversationListItemInner = (props: Props) => {
   const triggerId = `${key}-ctxmenu`;
 
   const openConvo = useCallback(
-    (e: React.MouseEvent<HTMLDivElement>) => {
+    (e: MouseEvent<HTMLDivElement>) => {
       // mousedown is invoked sooner than onClick, but for both right and left click
       if (e.button === 0) {
         void openConversationWithMessages({ conversationKey: conversationId, messageId: null });

ts/components/leftpane/conversation-list-item/HeaderItem.tsx

@@ -1,5 +1,6 @@
 import classNames from 'classnames';
 
+import { MouseEvent } from 'react';
 import { useSelector } from 'react-redux';
 import styled from 'styled-components';
 import { Data } from '../../../data/data';
@@ -114,10 +115,7 @@ const MentionAtSymbol = styled.span`
 /**
  * When clicking on the `@` symbol of a conversation, we open the conversation to the first unread message tagging us (with the @pubkey syntax)
  */
-async function openConvoToLastMention(
-  e: React.MouseEvent<HTMLSpanElement>,
-  conversationId: string
-) {
+async function openConvoToLastMention(e: MouseEvent<HTMLSpanElement>, conversationId: string) {
   e.stopPropagation();
   e.preventDefault();
 

ts/components/lightbox/Lightbox.tsx

@@ -1,4 +1,4 @@
-import { useRef } from 'react';
+import { CSSProperties, MouseEvent, MutableRefObject, useRef } from 'react';
 
 import { isUndefined } from 'lodash';
 import { useDispatch } from 'react-redux';
@@ -46,7 +46,7 @@ const styles = {
     top: 0,
     bottom: 0,
     backgroundColor: 'var(--lightbox-background-color)',
-  } as React.CSSProperties,
+  } as CSSProperties,
   mainContainer: {
     display: 'flex',
     flexDirection: 'row',
@@ -58,13 +58,13 @@ const styles = {
     minHeight: 0,
     overflow: 'hidden',
     minWidth: 0,
-  } as React.CSSProperties,
+  } as CSSProperties,
   objectContainer: {
     position: 'relative',
     flexGrow: 1,
     display: 'inline-flex',
     justifyContent: 'center',
-  } as React.CSSProperties,
+  } as CSSProperties,
   objectParentContainer: {
     flexGrow: 1,
     textAlign: 'center' as const,
@@ -76,7 +76,7 @@ const styles = {
     maxWidth: '80vw',
     maxHeight: '80vh',
     objectFit: 'contain',
-  } as React.CSSProperties,
+  } as CSSProperties,
   caption: {
     position: 'absolute',
     bottom: 0,
@@ -88,7 +88,7 @@ const styles = {
     paddingLeft: '3em',
     paddingRight: '3em',
     backgroundColor: 'var(--lightbox-caption-background-color)',
-  } as React.CSSProperties,
+  } as CSSProperties,
   controlsOffsetPlaceholder: {
     width: CONTROLS_WIDTH,
     marginRight: CONTROLS_SPACING,
@@ -101,7 +101,7 @@ const styles = {
     flexDirection: 'column',
     marginLeft: CONTROLS_SPACING,
     justifyContent: 'space-between',
-  } as React.CSSProperties,
+  } as CSSProperties,
   navigationContainer: {
     flexShrink: 0,
     display: 'flex',
@@ -109,7 +109,7 @@ const styles = {
     justifyContent: 'center',
     padding: 10,
     height: '50px', // force it so the buttons stick to the bottom
-  } as React.CSSProperties,
+  } as CSSProperties,
   saveButton: {
     marginTop: 10,
   },
@@ -134,7 +134,7 @@ const StyledIconButton = styled.div`
 
 interface IconButtonProps {
   onClick?: () => void;
-  style?: React.CSSProperties;
+  style?: CSSProperties;
   type: 'save' | 'close' | 'previous' | 'next';
 }
 
@@ -186,7 +186,7 @@ const Icon = ({
   onClick,
   url,
 }: {
-  onClick?: (event: React.MouseEvent<HTMLImageElement | HTMLDivElement>) => void;
+  onClick?: (event: MouseEvent<HTMLImageElement | HTMLDivElement>) => void;
   url: string;
 }) => (
   <div
@@ -208,7 +208,7 @@ export const LightboxObject = ({
 }: {
   objectURL: string;
   contentType: MIME.MIMEType;
-  renderedRef: React.MutableRefObject<any>;
+  renderedRef: MutableRefObject<any>;
   onObjectClick: (event: any) => any;
 }) => {
   const { urlToLoad } = useEncryptedFileFetch(objectURL, contentType, false);
@@ -280,7 +280,7 @@ export const Lightbox = (props: Props) => {
     dispatch(showLightBox(undefined));
   };
 
-  const onContainerClick = (event: React.MouseEvent<HTMLDivElement>) => {
+  const onContainerClick = (event: MouseEvent<HTMLDivElement>) => {
     if (renderedRef && event.target === renderedRef.current) {
       return;
     }

ts/components/registration/AccentText.tsx

@@ -1,4 +1,6 @@
-export const AccentText: React.FC = () => (
+import { FC } from 'react';
+
+export const AccentText: FC = () => (
   <div className="session-content-accent-text">
     <div className="session-content-accent-text title">{window.i18n('beginYourSession')}</div>
   </div>

ts/components/settings/SessionSettingListItem.tsx

@@ -1,5 +1,6 @@
 import styled from 'styled-components';
 
+import { ReactNode } from 'react';
 import { Noop } from '../../types/Util';
 import {
   SessionButton,
@@ -75,7 +76,7 @@ const StyledSettingItemClickable = styled(StyledSettingItemInline)`
 export const SettingsTitleAndDescription = (props: {
   title?: string;
   description?: string;
-  childrenDescription?: React.ReactNode;
+  childrenDescription?: ReactNode;
 }) => {
   const { description, childrenDescription, title } = props;
   return (
@@ -95,8 +96,8 @@ export const SessionSettingsItemWrapper = (props: {
   inline: boolean;
   title?: string;
   description?: string;
-  children?: React.ReactNode;
-  childrenDescription?: React.ReactNode;
+  children?: ReactNode;
+  childrenDescription?: ReactNode;
 }) => {
   const { inline, children, description, title, childrenDescription } = props;
   const ComponentToRender = inline ? StyledSettingItemInline : StyledSettingItem;
@@ -128,7 +129,7 @@ export const SessionToggleWithDescription = (props: {
   active: boolean;
   onClickToggle: () => void;
   confirmationDialogParams?: SessionConfirmDialogProps;
-  childrenDescription?: React.ReactNode; // if set, those elements will be appended next to description field (only used for typing message settings as of now)
+  childrenDescription?: ReactNode; // if set, those elements will be appended next to description field (only used for typing message settings as of now)
   dataTestId?: string;
 }) => {
   const {

ts/components/settings/SessionSettings.tsx

@@ -3,7 +3,7 @@ import { shell } from 'electron';
 import autoBind from 'auto-bind';
 import styled from 'styled-components';
 
-import { Component, createRef } from 'react';
+import { Component, RefObject, createRef } from 'react';
 import { SettingsHeader } from './SessionSettingsHeader';
 
 import { SessionIconButton } from '../icon';
@@ -161,7 +161,7 @@ const StyledSettingsList = styled.div`
 `;
 
 export class SessionSettingsView extends Component<SettingsViewProps, State> {
-  public settingsViewRef: React.RefObject<HTMLDivElement>;
+  public settingsViewRef: RefObject<HTMLDivElement>;
 
   public constructor(props: any) {
     super(props);

ts/hooks/useFocusMount.ts

@@ -1,6 +1,7 @@
+import { RefObject } from 'react';
 import useMount from 'react-use/lib/useMount';
 
-export function useFocusMount(ref: React.RefObject<any>, isEditable?: boolean) {
+export function useFocusMount(ref: RefObject<any>, isEditable?: boolean) {
   useMount(() => {
     if (isEditable) {
       ref?.current?.focus();