refactor: remove unnecessary react imports

you don't need it from react 17

.eslintrc.js

@@ -16,7 +16,7 @@ module.exports = {
     'airbnb-base',
     'prettier',
     'plugin:@typescript-eslint/recommended',
-    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
     'plugin:react-hooks/recommended',
     'plugin:import/recommended',
     'plugin:import/typescript',

ts/components/AboutView.tsx

@@ -1,7 +1,7 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import styled from 'styled-components';
-import { switchThemeTo } from '../themes/switchTheme';
 import { SessionTheme } from '../themes/SessionTheme';
+import { switchThemeTo } from '../themes/switchTheme';
 
 const StyledContent = styled.div`
   background-color: var(--background-primary-color);

ts/components/CaptionEditor.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import * as GoogleChrome from '../util/GoogleChrome';
 
 import { AttachmentType } from '../types/Attachment';

ts/components/DebugLogView.tsx

@@ -1,7 +1,7 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import styled from 'styled-components';
-import { switchThemeTo } from '../themes/switchTheme';
 import { SessionTheme } from '../themes/SessionTheme';
+import { switchThemeTo } from '../themes/switchTheme';
 import { fetch } from '../util/logging';
 import { SessionButton, SessionButtonType } from './basic/SessionButton';
 import { SessionIconButton } from './icon';

ts/components/MainViewController.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { CSSProperties } from 'styled-components';
 
 export const MessageView = () => {

ts/components/MemberListItem.tsx

@@ -1,8 +1,7 @@
-import React from 'react';
 import styled from 'styled-components';
 
-import { Avatar, AvatarSize, CrownIcon } from './avatar/Avatar';
 import { useNicknameOrProfileNameOrShortenedPubkey } from '../hooks/useParamSelector';
+import { Avatar, AvatarSize, CrownIcon } from './avatar/Avatar';
 import { SessionRadio } from './basic/SessionRadio';
 
 const AvatarContainer = styled.div`

ts/components/NoticeBanner.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from 'styled-components';
 import { Flex } from './basic/Flex';
 import { SessionIconButton } from './icon';

ts/components/SessionInboxView.tsx

@@ -1,6 +1,6 @@
 import { fromPairs, map } from 'lodash';
 import moment from 'moment';
-import React from 'react';
+
 import { Provider } from 'react-redux';
 import useMount from 'react-use/lib/useMount';
 import useUpdate from 'react-use/lib/useUpdate';

ts/components/SessionMainPanel.tsx

@@ -1,11 +1,10 @@
-import React from 'react';
 import { useSelector } from 'react-redux';
 import { useAppIsFocused } from '../hooks/useAppFocused';
 import { getFocusedSettingsSection } from '../state/selectors/section';
 
 import { SmartSessionConversation } from '../state/smart/SessionConversation';
-import { SessionSettingsView } from './settings/SessionSettings';
 import { useHTMLDirection } from '../util/i18n';
+import { SessionSettingsView } from './settings/SessionSettings';
 
 const FilteredSettingsView = SessionSettingsView as any;
 

ts/components/SessionPasswordPrompt.tsx

@@ -1,7 +1,7 @@
 import autoBind from 'auto-bind';
 import classNames from 'classnames';
 import { isString } from 'lodash';
-import React, { useEffect } from 'react';
+import { PureComponent, useEffect } from 'react';
 import { toast } from 'react-toastify';
 import styled from 'styled-components';
 
@@ -45,7 +45,7 @@ function pushToastError(id: string, title: string, description?: string) {
   });
 }
 
-class SessionPasswordPromptInner extends React.PureComponent<unknown, State> {
+class SessionPasswordPromptInner extends PureComponent<unknown, State> {
   private inputRef?: any;
 
   constructor(props: any) {

ts/components/SessionScrollButton.tsx

@@ -1,10 +1,9 @@
-import React from 'react';
 import { useSelector } from 'react-redux';
 import styled from 'styled-components';
 import { getShowScrollButton } from '../state/selectors/conversations';
 
-import { SessionIconButton } from './icon';
 import { Noop } from '../types/Util';
+import { SessionIconButton } from './icon';
 
 const SessionScrollButtonDiv = styled.div`
   position: fixed;

ts/components/SessionSearchInput.tsx

@@ -1,5 +1,5 @@
 import { debounce } from 'lodash';
-import React, { Dispatch, useState } from 'react';
+import { Dispatch, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import styled from 'styled-components';
 import { clearSearch, search, updateSearchTerm } from '../state/ducks/search';

ts/components/SessionToastContainer.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Slide, ToastContainer, ToastContainerProps } from 'react-toastify';
 import styled from 'styled-components';
 

ts/components/SessionWrapperModal.tsx

@@ -1,5 +1,5 @@
-import React, { useRef } from 'react';
 import classNames from 'classnames';
+import { useRef } from 'react';
 import useKey from 'react-use/lib/useKey';
 
 import { SessionIconButton } from './icon';

ts/components/SplitViewContainer.tsx

@@ -1,9 +1,9 @@
-import React, { useEffect, useRef, useState } from 'react';
+import { ReactElement, ReactNode, useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
 
 type SplitViewProps = {
-  top: React.ReactElement;
+  top: ReactElement;
-  bottom: React.ReactElement;
+  bottom: ReactElement;
   disableTop: boolean;
 };
 
@@ -44,12 +44,12 @@ const TopSplitViewPanel = ({
   topHeight,
   setTopHeight,
 }: {
-  children: React.ReactNode;
+  children: ReactNode;
   topHeight: number | undefined;
   setTopHeight: (value: number) => void;
 }) => {
   const topRef = useRef<HTMLDivElement>(null);
-  React.useEffect(() => {
+  useEffect(() => {
     if (topRef.current) {
       if (!topHeight) {
         setTopHeight(Math.max(MIN_HEIGHT_TOP, (topRef.current?.clientHeight || 0) / 2));

ts/components/avatar/Avatar.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import { isEqual } from 'lodash';
-import React, { useState } from 'react';
+import { memo, useState } from 'react';
 import { useSelector } from 'react-redux';
 import styled from 'styled-components';
 
@@ -66,7 +66,7 @@ export const CrownIcon = () => {
   );
 };
 
-const NoImage = React.memo(
+const NoImage = memo(
   (
     props: Pick<Props, 'forcedName' | 'size' | 'pubkey' | 'onAvatarClick'> & {
       isClosedGroup: boolean;
@@ -185,4 +185,4 @@ const AvatarInner = (props: Props) => {
   );
 };
 
-export const Avatar = React.memo(AvatarInner, isEqual);
+export const Avatar = memo(AvatarInner, isEqual);

ts/components/avatar/AvatarPlaceHolder/AvatarPlaceHolder.tsx

@@ -1,7 +1,7 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
+import { allowOnlyOneAtATime } from '../../../session/utils/Promise';
 import { COLORS } from '../../../themes/constants/colors';
 import { getInitials } from '../../../util/getInitials';
-import { allowOnlyOneAtATime } from '../../../session/utils/Promise';
 import { MemberAvatarPlaceHolder } from '../../icon/MemberAvatarPlaceHolder';
 
 type Props = {

ts/components/avatar/AvatarPlaceHolder/ClosedGroupAvatar.tsx

@@ -1,10 +1,9 @@
-import React from 'react';
 import { isEmpty } from 'lodash';
 
-import { assertUnreachable } from '../../../types/sqlSharedTypes';
-import { Avatar, AvatarSize } from '../Avatar';
 import { useIsClosedGroup, useSortedGroupMembers } from '../../../hooks/useParamSelector';
 import { UserUtils } from '../../../session/utils';
+import { assertUnreachable } from '../../../types/sqlSharedTypes';
+import { Avatar, AvatarSize } from '../Avatar';
 
 function getClosedGroupAvatarsSize(size: AvatarSize): AvatarSize {
   // Always use the size directly under the one requested

ts/components/basic/MessageBodyHighlight.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from 'styled-components';
 import { RenderTextCallbackType } from '../../types/Util';
 import { SizeClassType } from '../../util/emoji';

ts/components/basic/PillContainer.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from 'styled-components';
 
 type PillContainerProps = {

ts/components/basic/SessionButton.tsx

@@ -1,5 +1,5 @@
-import React, { ReactNode } from 'react';
 import classNames from 'classnames';
+import { ReactNode } from 'react';
 import styled from 'styled-components';
 
 export enum SessionButtonType {

ts/components/basic/SessionDropdown.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { SessionIcon, SessionIconType } from '../icon';
 
 import { SessionDropdownItem, SessionDropDownItemType } from './SessionDropdownItem';

ts/components/basic/SessionDropdownItem.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import classNames from 'classnames';
 import { SessionIcon, SessionIconType } from '../icon';
 

ts/components/basic/SessionHTMLRenderer.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import DOMPurify from 'dompurify';
+import { createElement } from 'react';
 
 type ReceivedProps = {
   html: string;
@@ -14,7 +14,7 @@ export const SessionHtmlRenderer = ({ tag = 'div', key, html, className }: Recei
     FORBID_ATTR: ['script'],
   });
 
-  return React.createElement(tag, {
+  return createElement(tag, {
     key,
     className,
 

ts/components/basic/SessionIdEditable.tsx

@@ -1,5 +1,5 @@
-import React, { ChangeEvent, KeyboardEvent, useRef } from 'react';
 import classNames from 'classnames';
+import { ChangeEvent, KeyboardEvent, useRef } from 'react';
 import { useFocusMount } from '../../hooks/useFocusMount';
 
 type Props = {

ts/components/basic/SessionInput.tsx

@@ -1,9 +1,9 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 
 import classNames from 'classnames';
-import { SessionIconButton } from '../icon';
 import { Noop } from '../../types/Util';
 import { useHTMLDirection } from '../../util/i18n';
+import { SessionIconButton } from '../icon';
 
 type Props = {
   label?: string;

ts/components/basic/SessionRadio.tsx

@@ -1,4 +1,4 @@
-import React, { ChangeEvent } from 'react';
+import { ChangeEvent } from 'react';
 import styled, { CSSProperties } from 'styled-components';
 import { Flex } from './Flex';
 

ts/components/basic/SessionRadioGroup.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import useMount from 'react-use/lib/useMount';
 import styled, { CSSProperties } from 'styled-components';
 

ts/components/basic/SessionSpinner.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 type Props = {
   loading: boolean;
 };

ts/components/basic/SessionToast.tsx

@@ -1,5 +1,5 @@
 import { noop } from 'lodash';
-import React from 'react';
+
 import styled from 'styled-components';
 
 import { Flex } from './Flex';

ts/components/basic/SessionToggle.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { useDispatch } from 'react-redux';
 import styled from 'styled-components';
 import { updateConfirmModal } from '../../state/ducks/modalDialog';

ts/components/basic/Spinner.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from 'styled-components';
 
 type Props = {

ts/components/basic/Text.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled, { CSSProperties } from 'styled-components';
 
 type TextProps = {

ts/components/basic/YourSessionIDPill.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from 'styled-components';
 import { UserUtils } from '../../session/utils';
 

ts/components/buttons/MenuButton.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import styled from 'styled-components';
 import { resetLeftOverlayMode, setLeftOverlayMode } from '../../state/ducks/section';

ts/components/buttons/PanelButton.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 import styled, { CSSProperties } from 'styled-components';
 import { Flex } from '../basic/Flex';
 

ts/components/buttons/PanelIconButton.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from 'styled-components';
 import { SessionIcon, SessionIconType } from '../icon';
 import { PanelButton, PanelButtonProps, PanelButtonText, StyledContent } from './PanelButton';

ts/components/buttons/PanelRadioButton.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from 'styled-components';
 import { SessionRadio } from '../basic/SessionRadio';
 import { PanelButton, PanelButtonProps, PanelButtonText, StyledContent } from './PanelButton';

ts/components/calling/CallButtons.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { contextMenu, Item, Menu } from 'react-contexify';
 import { useDispatch, useSelector } from 'react-redux';
 import styled from 'styled-components';

ts/components/calling/CallInFullScreenContainer.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
 import useKey from 'react-use/lib/useKey';
@@ -52,8 +52,8 @@ export const CallInFullScreenContainer = () => {
     localStreamVideoIsMuted,
   } = useVideoCallEventsListener('CallInFullScreenContainer', true);
 
-  const videoRefRemote = React.useRef<HTMLVideoElement>(null);
+  const videoRefRemote = useRef<HTMLVideoElement>(null);
-  const videoRefLocal = React.useRef<HTMLVideoElement>(null);
+  const videoRefLocal = useRef<HTMLVideoElement>(null);
 
   function toggleFullScreenOFF() {
     dispatch(setFullScreenCall(false));

ts/components/calling/DraggableCallContainer.tsx

@@ -1,16 +1,16 @@
-import React, { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
-import { useSelector } from 'react-redux';
 import Draggable, { DraggableData, DraggableEvent } from 'react-draggable';
+import { useSelector } from 'react-redux';
 
 import styled from 'styled-components';
-import { getHasOngoingCall, getHasOngoingCallWith } from '../../state/selectors/call';
-import { openConversationWithMessages } from '../../state/ducks/conversations';
-import { Avatar, AvatarSize } from '../avatar/Avatar';
 import { useVideoCallEventsListener } from '../../hooks/useVideoEventListener';
-import { VideoLoadingSpinner } from './InConversationCallContainer';
+import { openConversationWithMessages } from '../../state/ducks/conversations';
-import { getSection } from '../../state/selectors/section';
 import { SectionType } from '../../state/ducks/section';
+import { getHasOngoingCall, getHasOngoingCallWith } from '../../state/selectors/call';
+import { getSection } from '../../state/selectors/section';
 import { useSelectedConversationKey } from '../../state/selectors/selectedConversation';
+import { Avatar, AvatarSize } from '../avatar/Avatar';
+import { VideoLoadingSpinner } from './InConversationCallContainer';
 
 export const DraggableCallWindow = styled.div`
   position: absolute;

ts/components/calling/InConversationCallContainer.tsx

@@ -1,9 +1,9 @@
+import { useRef, useState } from 'react';
 import { useSelector } from 'react-redux';
-import React, { useRef, useState } from 'react';
 
-import styled from 'styled-components';
-import useInterval from 'react-use/lib/useInterval';
 import moment from 'moment';
+import useInterval from 'react-use/lib/useInterval';
+import styled from 'styled-components';
 import { CallManager, UserUtils } from '../../session/utils';
 import {
   getCallIsInFullScreen,
@@ -13,13 +13,13 @@ import {
   getHasOngoingCallWithFocusedConvo,
   getHasOngoingCallWithPubkey,
 } from '../../state/selectors/call';
-import { StyledVideoElement } from './DraggableCallContainer';
 import { Avatar, AvatarSize } from '../avatar/Avatar';
+import { StyledVideoElement } from './DraggableCallContainer';
 
-import { useVideoCallEventsListener } from '../../hooks/useVideoEventListener';
 import { useModuloWithTripleDots } from '../../hooks/useModuloWithTripleDots';
-import { CallWindowControls } from './CallButtons';
+import { useVideoCallEventsListener } from '../../hooks/useVideoEventListener';
 import { DEVICE_DISABLED_DEVICE_ID } from '../../session/utils/calling/CallManager';
+import { CallWindowControls } from './CallButtons';
 
 import { SessionSpinner } from '../basic/SessionSpinner';
 

ts/components/calling/IncomingCallDialog.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { useSelector } from 'react-redux';
 
 import styled from 'styled-components';
@@ -7,9 +7,9 @@ import { ed25519Str } from '../../session/onions/onionPath';
 import { CallManager } from '../../session/utils';
 import { callTimeoutMs } from '../../session/utils/calling/CallManager';
 import { getHasIncomingCall, getHasIncomingCallFrom } from '../../state/selectors/call';
+import { SessionWrapperModal } from '../SessionWrapperModal';
 import { Avatar, AvatarSize } from '../avatar/Avatar';
 import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton';
-import { SessionWrapperModal } from '../SessionWrapperModal';
 
 export const CallWindow = styled.div`
   position: absolute;

ts/components/conversation/AddMentions.tsx

@@ -1,9 +1,8 @@
-import React from 'react';
 import styled from 'styled-components';
-import { RenderTextCallbackType } from '../../types/Util';
-import { PubKey } from '../../session/types';
-import { getConversationController } from '../../session/conversations';
 import { isUsAnySogsFromCache } from '../../session/apis/open_group_api/sogsv3/knownBlindedkeys';
+import { getConversationController } from '../../session/conversations';
+import { PubKey } from '../../session/types';
+import { RenderTextCallbackType } from '../../types/Util';
 
 interface MentionProps {
   key: string;

ts/components/conversation/AddNewLines.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { RenderTextCallbackType } from '../../types/Util';
 
 type Props = {

ts/components/conversation/ContactName.tsx

@@ -1,12 +1,11 @@
-import React from 'react';
 import classNames from 'classnames';
 import { CSSProperties } from 'styled-components';
 
-import { Emojify } from './Emojify';
 import {
-  useNicknameOrProfileNameOrShortenedPubkey,
   useIsPrivate,
+  useNicknameOrProfileNameOrShortenedPubkey,
 } from '../../hooks/useParamSelector';
+import { Emojify } from './Emojify';
 
 type Props = {
   pubkey: string;

ts/components/conversation/Emojify.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { SizeClassType } from '../../util/emoji';
 
 import { RenderTextCallbackType } from '../../types/Util';

ts/components/conversation/ExpireTimer.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import { useCallback, useState } from 'react';
 
 import useInterval from 'react-use/lib/useInterval';
 import styled, { CSSProperties } from 'styled-components';

ts/components/conversation/H5AudioPlayer.tsx

@@ -1,5 +1,5 @@
 // Audio Player
-import React, { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import H5AudioPlayer, { RHAP_UI } from 'react-h5-audio-player';
 import { useDispatch, useSelector } from 'react-redux';
 import styled from 'styled-components';

ts/components/conversation/Image.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React, { useCallback } from 'react';
+import { useCallback } from 'react';
 import styled from 'styled-components';
 
 import { isNumber } from 'lodash';

ts/components/conversation/ImageGrid.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import { useContext } from 'react';
 import styled from 'styled-components';
 
 import {

ts/components/conversation/MessageRequestButtons.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { useSelector } from 'react-redux';
 import styled from 'styled-components';
 import { useIsIncomingRequest } from '../../hooks/useParamSelector';

ts/components/conversation/SessionConversation.tsx

@@ -1,10 +1,10 @@
 import _ from 'lodash';
-import React from 'react';
 
 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 styled from 'styled-components';
 import {
   CompositionBox,
@@ -103,7 +103,7 @@ const ConvoLoadingSpinner = () => {
   );
 };
 
-export class SessionConversation extends React.Component<Props, State> {
+export class SessionConversation extends Component<Props, State> {
   private readonly messageContainerRef: React.RefObject<HTMLDivElement>;
   private dragCounter: number;
   private publicMembersRefreshTimeout?: NodeJS.Timeout;
@@ -115,7 +115,7 @@ export class SessionConversation extends React.Component<Props, State> {
     this.state = {
       isDraggingFile: false,
     };
-    this.messageContainerRef = React.createRef();
+    this.messageContainerRef = createRef();
     this.dragCounter = 0;
     this.updateMemberList = _.debounce(this.updateMemberListBouncy.bind(this), 10000);
 

ts/components/conversation/SessionEmojiPanel.tsx

@@ -1,9 +1,10 @@
-import React, { forwardRef } from 'react';
+import Picker from '@emoji-mart/react';
 import classNames from 'classnames';
-import styled from 'styled-components';
+import { forwardRef } from 'react';
 import { useSelector } from 'react-redux';
-import Picker from '@emoji-mart/react';
+import styled from 'styled-components';
 
+import { getPrimaryColor } from '../../state/selectors/primaryColor';
 import { getTheme, isDarkTheme } from '../../state/selectors/theme';
 import {
   COLORS,
@@ -11,12 +12,10 @@ import {
   PrimaryColorStateType,
   THEMES,
   ThemeStateType,
-  // eslint-disable-next-line import/extensions
 } from '../../themes/constants/colors.js';
-import { hexColorToRGB } from '../../util/hexColorToRGB';
-import { getPrimaryColor } from '../../state/selectors/primaryColor';
-import { i18nEmojiData } from '../../util/emoji';
 import { FixedBaseEmoji } from '../../types/Reaction';
+import { i18nEmojiData } from '../../util/emoji';
+import { hexColorToRGB } from '../../util/hexColorToRGB';
 
 export const StyledEmojiPanel = styled.div<{
   isModal: boolean;

ts/components/conversation/SessionFileDropzone.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from 'styled-components';
 import { Flex } from '../basic/Flex';
 import { SessionIcon } from '../icon';

ts/components/conversation/SessionLastSeenIndicator.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useLayoutEffect } from 'react';
+import { useContext, useLayoutEffect } from 'react';
 import { useSelector } from 'react-redux';
 import styled from 'styled-components';
 import { getQuotedMessageToAnimate } from '../../state/selectors/conversations';

ts/components/conversation/SessionMessagesList.tsx

@@ -1,4 +1,4 @@
-import React, { useLayoutEffect, useState } from 'react';
+import { useLayoutEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 
 import useKey from 'react-use/lib/useKey';
@@ -26,9 +26,9 @@ import { Message } from './message/message-item/Message';
 import { MessageRequestResponse } from './message/message-item/MessageRequestResponse';
 import { CallNotification } from './message/message-item/notification-bubble/CallNotification';
 
-import { DataExtractionNotification } from './message/message-item/DataExtractionNotification';
 import { SessionLastSeenIndicator } from './SessionLastSeenIndicator';
 import { TimerNotification } from './TimerNotification';
+import { DataExtractionNotification } from './message/message-item/DataExtractionNotification';
 import { InteractionNotification } from './message/message-item/InteractionNotification';
 
 function isNotTextboxEvent(e: KeyboardEvent) {

ts/components/conversation/SessionMessagesListContainer.tsx

@@ -1,17 +1,16 @@
-import React from 'react';
-
 import { contextMenu } from 'react-contexify';
 
 import { connect } from 'react-redux';
 
 import autoBind from 'auto-bind';
+import { Component, createContext } from 'react';
 import styled from 'styled-components';
 import {
-  quotedMessageToAnimate,
   ReduxConversationType,
+  SortedMessageModelProps,
+  quotedMessageToAnimate,
   resetOldBottomMessageId,
   resetOldTopMessageId,
-  SortedMessageModelProps,
 } from '../../state/ducks/conversations';
 import { SessionScrollButton } from '../SessionScrollButton';
 
@@ -38,7 +37,7 @@ export type ScrollToLoadedReasons =
   | 'load-more-top'
   | 'load-more-bottom';
 
-export const ScrollToLoadedMessageContext = React.createContext(
+export const ScrollToLoadedMessageContext = createContext(
   (_loadedMessageIdToScrollTo: string, _reason: ScrollToLoadedReasons) => {}
 );
 
@@ -77,7 +76,7 @@ const StyledTypingBubble = styled(TypingBubble)`
   margin: var(--margins-xs) var(--margins-lg) 0;
 `;
 
-class SessionMessagesListContainerInner extends React.Component<Props> {
+class SessionMessagesListContainerInner extends Component<Props> {
   private timeoutResetQuotedScroll: NodeJS.Timeout | null = null;
 
   public constructor(props: Props) {

ts/components/conversation/SessionQuotedMessageComposition.tsx

@@ -1,7 +1,6 @@
-import React from 'react';
-import styled from 'styled-components';
 import { useDispatch, useSelector } from 'react-redux';
 import useKey from 'react-use/lib/useKey';
+import styled from 'styled-components';
 import { SessionIcon, SessionIconButton } from '../icon';
 
 import { quoteMessage } from '../../state/ducks/conversations';
@@ -11,9 +10,9 @@ import { AUDIO_MP3 } from '../../types/MIME';
 import { Flex } from '../basic/Flex';
 import { Image } from './Image';
 
+import { findAndFormatContact } from '../../models/message';
 import { getAbsoluteAttachmentPath } from '../../types/MessageAttachment';
 import { GoogleChrome } from '../../util';
-import { findAndFormatContact } from '../../models/message';
 
 const QuotedMessageComposition = styled(Flex)`
   border-top: 1px solid var(--border-color);

ts/components/conversation/SessionRecording.tsx

@@ -1,15 +1,16 @@
 /* eslint-disable @typescript-eslint/no-misused-promises */
-import React from 'react';
+
 import classNames from 'classnames';
 import moment from 'moment';
 
 import autoBind from 'auto-bind';
 import MicRecorder from 'mic-recorder-to-mp3';
+import { Component } from 'react';
 import styled from 'styled-components';
-import { SessionIconButton } from '../icon';
 import { Constants } from '../../session';
-import { ToastUtils } from '../../session/utils';
 import { MAX_ATTACHMENT_FILESIZE_BYTES } from '../../session/constants';
+import { ToastUtils } from '../../session/utils';
+import { SessionIconButton } from '../icon';
 
 interface Props {
   onExitVoiceNoteView: () => void;
@@ -49,7 +50,7 @@ const StyledFlexWrapper = styled.div<StyledFlexWrapperProps>`
   }
 `;
 
-export class SessionRecording extends React.Component<Props, State> {
+export class SessionRecording extends Component<Props, State> {
   private recorder?: any;
   private audioBlobMp3?: Blob;
   private audioElement?: HTMLAudioElement | null;

ts/components/conversation/SessionStagedLinkPreview.tsx

@@ -1,15 +1,14 @@
-import React from 'react';
 // eslint-disable-next-line import/no-named-default
-import { default as insecureNodeFetch } from 'node-fetch';
 import { AbortSignal } from 'abort-controller';
+import { default as insecureNodeFetch } from 'node-fetch';
 import { StagedLinkPreviewData } from './composition/CompositionBox';
 
 import { arrayBufferFromFile } from '../../types/Attachment';
+import { getImageDimensions } from '../../types/attachments/VisualAttachment';
 import { AttachmentUtil, LinkPreviewUtil } from '../../util';
 import { fetchLinkPreviewImage } from '../../util/linkPreviewFetch';
-import { StagedLinkPreview } from './StagedLinkPreview';
-import { getImageDimensions } from '../../types/attachments/VisualAttachment';
 import { LinkPreviews } from '../../util/linkPreviews';
+import { StagedLinkPreview } from './StagedLinkPreview';
 
 export interface StagedLinkPreviewProps extends StagedLinkPreviewData {
   onClose: (url: string) => void;

ts/components/conversation/StagedAttachmentList.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { useDispatch } from 'react-redux';
 import styled from 'styled-components';
 import {

ts/components/conversation/StagedGenericAttachment.tsx

@@ -1,5 +1,4 @@
-import React from 'react';
+import { Component } from 'react';
-
 import { AttachmentType, getExtensionForDisplay } from '../../types/Attachment';
 
 interface Props {
@@ -7,7 +6,7 @@ interface Props {
   onClose: (attachment: AttachmentType) => void;
 }
 
-export class StagedGenericAttachment extends React.Component<Props> {
+export class StagedGenericAttachment extends Component<Props> {
   public render() {
     const { attachment, onClose } = this.props;
     const { fileName, contentType } = attachment;

ts/components/conversation/StagedLinkPreview.tsx

@@ -1,14 +1,13 @@
-import React from 'react';
 import styled from 'styled-components';
 
 import { Image } from './Image';
 
-import { SessionSpinner } from '../basic/SessionSpinner';
-import { StagedLinkPreviewImage } from './composition/CompositionBox';
-import { isImage } from '../../types/MIME';
 import { fromArrayBufferToBase64 } from '../../session/utils/String';
+import { isImage } from '../../types/MIME';
 import { Flex } from '../basic/Flex';
+import { SessionSpinner } from '../basic/SessionSpinner';
 import { SessionIconButton } from '../icon';
+import { StagedLinkPreviewImage } from './composition/CompositionBox';
 
 type Props = {
   isLoaded: boolean;

ts/components/conversation/StagedPlaceholderAttachment.tsx

@@ -1,4 +1,4 @@
-import React, { MouseEvent } from 'react';
+import { MouseEvent } from 'react';
 import styled from 'styled-components';
 
 interface Props {

ts/components/conversation/SubtleNotification.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { useSelector } from 'react-redux';
 import styled from 'styled-components';
 import { useIsIncomingRequest } from '../../hooks/useParamSelector';

ts/components/conversation/TimerNotification.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { useDispatch } from 'react-redux';
 import styled from 'styled-components';
 import { PropsForExpirationTimer } from '../../state/ducks/conversations';

ts/components/conversation/Timestamp.tsx

@@ -1,9 +1,8 @@
-import React from 'react';
 import moment from 'moment';
 
 import useInterval from 'react-use/lib/useInterval';
-import styled from 'styled-components';
 import useUpdate from 'react-use/lib/useUpdate';
+import styled from 'styled-components';
 
 type Props = {
   timestamp?: number;

ts/components/conversation/TypingAnimation.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from 'styled-components';
 
 const StyledTypingContainer = styled.div`

ts/components/conversation/TypingBubble.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from 'styled-components';
 
 import { ConversationTypeEnum } from '../../models/conversationAttributes';

ts/components/conversation/composition/CompositionBox.tsx

@@ -1,5 +1,5 @@
 import _, { debounce, isEmpty } from 'lodash';
-import React from 'react';
+
 import { connect } from 'react-redux';
 import styled from 'styled-components';
 
@@ -7,6 +7,7 @@ import { AbortController } from 'abort-controller';
 import { Mention, MentionsInput, SuggestionDataItem } from 'react-mentions';
 
 import autoBind from 'auto-bind';
+import { Component, RefObject, createRef } from 'react';
 import * as MIME from '../../../types/MIME';
 
 import { SessionEmojiPanel, StyledEmojiPanel } from '../SessionEmojiPanel';
@@ -268,10 +269,10 @@ const StyledSendMessageInput = styled.div<{ dir?: HTMLDirection }>`
   }
 `;
 
-class CompositionBoxInner extends React.Component<Props, State> {
+class CompositionBoxInner extends Component<Props, State> {
-  private readonly textarea: React.RefObject<any>;
+  private readonly textarea: RefObject<any>;
-  private readonly fileInput: React.RefObject<HTMLInputElement>;
+  private readonly fileInput: RefObject<HTMLInputElement>;
-  private readonly emojiPanel: React.RefObject<HTMLDivElement>;
+  private readonly emojiPanel: RefObject<HTMLDivElement>;
   private readonly emojiPanelButton: any;
   private linkPreviewAbortController?: AbortController;
   private container: HTMLDivElement | null;
@@ -281,13 +282,13 @@ class CompositionBoxInner extends React.Component<Props, State> {
     super(props);
     this.state = getDefaultState(props.selectedConversationKey);
 
-    this.textarea = React.createRef();
+    this.textarea = createRef();
-    this.fileInput = React.createRef();
+    this.fileInput = createRef();
 
     this.container = null;
     // Emojis
-    this.emojiPanel = React.createRef();
+    this.emojiPanel = createRef();
-    this.emojiPanelButton = React.createRef();
+    this.emojiPanelButton = createRef();
     autoBind(this);
     this.toggleEmojiPanel = debounce(this.toggleEmojiPanel.bind(this), 100);
   }

ts/components/conversation/composition/CompositionButtons.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
+import { forwardRef } from 'react';
 import styled from 'styled-components';
-import { SessionIconButton } from '../../icon';
 import { Noop } from '../../../types/Util';
+import { SessionIconButton } from '../../icon';
 
 const StyledChatButtonContainer = styled.div`
   .session-icon-button {
@@ -50,25 +50,23 @@ export const StartRecordingButton = (props: { onClick: Noop }) => {
 };
 
 // eslint-disable-next-line react/display-name
-export const ToggleEmojiButton = React.forwardRef<HTMLDivElement, { onClick: Noop }>(
+export const ToggleEmojiButton = forwardRef<HTMLDivElement, { onClick: Noop }>((props, ref) => {
-  (props, ref) => {
+  return (
-    return (
+    <StyledChatButtonContainer>
-      <StyledChatButtonContainer>
+      <SessionIconButton
-        <SessionIconButton
+        iconType="emoji"
-          iconType="emoji"
+        ref={ref}
-          ref={ref}
+        backgroundColor={'var(--chat-buttons-background-color)'}
-          backgroundColor={'var(--chat-buttons-background-color)'}
+        iconColor={'var(--chat-buttons-icon-color)'}
-          iconColor={'var(--chat-buttons-icon-color)'}
+        iconSize={'huge2'}
-          iconSize={'huge2'}
+        borderRadius="300px"
-          borderRadius="300px"
+        iconPadding="6px"
-          iconPadding="6px"
+        onClick={props.onClick}
-          onClick={props.onClick}
+        dataTestId="emoji-button"
-          dataTestId="emoji-button"
+      />
-        />
+    </StyledChatButtonContainer>
-      </StyledChatButtonContainer>
+  );
-    );
+});
-  }
-);
 
 export const SendMessageButton = (props: { onClick: Noop }) => {
   return (

ts/components/conversation/composition/EmojiQuickResult.tsx

@@ -1,7 +1,6 @@
-import React from 'react';
+import { SearchIndex } from 'emoji-mart';
 import { SuggestionDataItem } from 'react-mentions';
 import styled from 'styled-components';
-import { SearchIndex } from 'emoji-mart';
 // eslint-disable-next-line import/extensions
 import { searchSync } from '../../../util/emoji.js';
 

ts/components/conversation/composition/UserMentions.tsx

@@ -1,7 +1,6 @@
-import React from 'react';
 import { SuggestionDataItem } from 'react-mentions';
-import { MemberListItem } from '../../MemberListItem';
 import { HTMLDirection } from '../../../util/i18n';
+import { MemberListItem } from '../../MemberListItem';
 
 const listRTLStyle = { position: 'absolute', bottom: '0px', right: '100%' };
 

ts/components/conversation/header/ConversationHeader.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { useDispatch, useSelector } from 'react-redux';
 import { isMessageSelectionMode } from '../../../state/selectors/conversations';
 

ts/components/conversation/header/ConversationHeaderItems.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { useSelector } from 'react-redux';
 import { callRecipient } from '../../../interactions/conversationInteractions';
 import { getHasIncomingCall, getHasOngoingCall } from '../../../state/selectors/call';

ts/components/conversation/header/ConversationHeaderSelectionOverlay.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import {
   deleteMessagesById,

ts/components/conversation/header/ConversationHeaderSubtitle.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled, { CSSProperties } from 'styled-components';
 import { Flex } from '../../basic/Flex';
 import { SessionIconButton } from '../../icon';

ts/components/conversation/header/ConversationHeaderTitle.tsx

@@ -1,5 +1,5 @@
 import { isEmpty } from 'lodash';
-import React, { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { useDisappearingMessageSettingText } from '../../../hooks/useParamSelector';
 import { useIsRightPanelShowing } from '../../../hooks/useUI';

ts/components/conversation/media-gallery/AttachmentSection.tsx

@@ -1,9 +1,7 @@
-import React from 'react';
-
-import { DocumentListItem } from './DocumentListItem';
-import { MediaGridItem } from './MediaGridItem';
 import { missingCaseError } from '../../../util/missingCaseError';
 import { MediaItemType } from '../../lightbox/LightboxGallery';
+import { DocumentListItem } from './DocumentListItem';
+import { MediaGridItem } from './MediaGridItem';
 
 type Props = {
   type: 'media' | 'documents';

ts/components/conversation/media-gallery/DocumentListItem.tsx

@@ -1,12 +1,12 @@
 import classNames from 'classnames';
-import React, { useCallback } from 'react';
+import { useCallback } from 'react';
 
 import moment from 'moment';
 
 import formatFileSize from 'filesize';
+import { useSelectedConversationKey } from '../../../state/selectors/selectedConversation';
 import { saveAttachmentToDisk } from '../../../util/attachmentsUtil';
 import { MediaItemType } from '../../lightbox/LightboxGallery';
-import { useSelectedConversationKey } from '../../../state/selectors/selectedConversation';
 
 type Props = {
   // Required

ts/components/conversation/media-gallery/EmptyState.tsx

@@ -1,13 +1,14 @@
 /**
  * @prettier
  */
-import React from 'react';
+
+import { Component } from 'react';
 
 interface Props {
   label: string;
 }
 
-export class EmptyState extends React.Component<Props> {
+export class EmptyState extends Component<Props> {
   public render() {
     const { label } = this.props;
 

ts/components/conversation/media-gallery/MediaGallery.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React, { useCallback, useState } from 'react';
+import { useCallback, useState } from 'react';
 
 import { MediaItemType } from '../../lightbox/LightboxGallery';
 import { AttachmentSection } from './AttachmentSection';

ts/components/conversation/media-gallery/MediaGridItem.tsx

@@ -1,12 +1,12 @@
-import React, { useState } from 'react';
 import classNames from 'classnames';
+import { useState } from 'react';
 
-import { isImageTypeSupported, isVideoTypeSupported } from '../../../util/GoogleChrome';
+import { useDisableDrag } from '../../../hooks/useDisableDrag';
 import { useEncryptedFileFetch } from '../../../hooks/useEncryptedFileFetch';
 import { showLightBox } from '../../../state/ducks/conversations';
-import { useDisableDrag } from '../../../hooks/useDisableDrag';
+import { isImageTypeSupported, isVideoTypeSupported } from '../../../util/GoogleChrome';
-import { LightBoxOptions } from '../SessionConversation';
 import { MediaItemType } from '../../lightbox/LightboxGallery';
+import { LightBoxOptions } from '../SessionConversation';
 
 type Props = {
   mediaItem: MediaItemType;

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from 'styled-components';
 import { Data } from '../../../../data/data';
 import { getConversationController } from '../../../../session/conversations';

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

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import { clone } from 'lodash';
-import React, { useCallback } from 'react';
+import { useCallback } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import styled from 'styled-components';
 import { Data } from '../../../../data/data';

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from 'styled-components';
 import { PubKey } from '../../../../session/types';
 import {

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

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import { useCallback } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import styled from 'styled-components';
 import { OpenGroupData } from '../../../../data/opengroups';

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

@@ -1,5 +1,5 @@
 import LinkifyIt from 'linkify-it';
-import React from 'react';
+
 import { useDispatch } from 'react-redux';
 import styled from 'styled-components';
 

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

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import { isEmpty } from 'lodash';
 import moment from 'moment';
-import React, { createContext, useCallback, useContext, useLayoutEffect, useState } from 'react';
+import { createContext, useCallback, useContext, useLayoutEffect, useState } from 'react';
 import { InView } from 'react-intersection-observer';
 import { useSelector } from 'react-redux';
 import styled from 'styled-components';

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

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React, { useCallback, useState } from 'react';
+import { useCallback, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import styled from 'styled-components';
 import { replyToMessage } from '../../../../interactions/conversationInteractions';

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

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-misused-promises */
-import React, { Dispatch, useCallback, useEffect, useRef, useState } from 'react';
+import { Dispatch, useCallback, useEffect, useRef, useState } from 'react';
 
 import { isNumber } from 'lodash';
 import { Item, ItemParams, Menu, useContextMenu } from 'react-contexify';

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

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React from 'react';
+
 import { useDispatch } from 'react-redux';
 import { MessageRenderingProps } from '../../../../models/messageType';
 import {

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

@@ -1,5 +1,5 @@
 import { isEmpty, toNumber } from 'lodash';
-import React from 'react';
+
 import { useSelector } from 'react-redux';
 import { Data } from '../../../../data/data';
 import { MessageRenderingProps } from '../../../../models/messageType';

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

@@ -1,4 +1,4 @@
-import React, { ReactElement } from 'react';
+import { ReactElement } from 'react';
 import styled from 'styled-components';
 
 import { isEmpty } from 'lodash';

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

@@ -1,5 +1,5 @@
 import { isEmpty, isEqual } from 'lodash';
-import React, { ReactElement, useEffect, useState } from 'react';
+import { ReactElement, useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { useMessageReactsPropsById } from '../../../../hooks/useParamSelector';
 import { MessageRenderingProps } from '../../../../models/messageType';

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

@@ -1,5 +1,5 @@
 import { ipcRenderer } from 'electron';
-import React, { useCallback } from 'react';
+import { useCallback } from 'react';
 import { useSelector } from 'react-redux';
 import styled from 'styled-components';
 import { useMessageExpirationPropsById } from '../../../../hooks/useParamSelector';

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

@@ -1,15 +1,15 @@
 import classNames from 'classnames';
-import React from 'react';
+
 import { useSelector } from 'react-redux';
 import { isOpenOrClosedGroup } from '../../../../models/conversationAttributes';
 import { MessageRenderingProps } from '../../../../models/messageType';
+import { StateType } from '../../../../state/reducer';
 import {
   getMessageTextProps,
   isMessageSelectionMode,
 } from '../../../../state/selectors/conversations';
 import { SessionIcon } from '../../../icon';
 import { MessageBody } from './MessageBody';
-import { StateType } from '../../../../state/reducer';
 
 type Props = {
   messageId: string;

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

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
-import React, { useState } from 'react';
 import { noop } from 'lodash';
+import { useState } from 'react';
 
 import * as MIME from '../../../../types/MIME';
 import * as GoogleChrome from '../../../../util/GoogleChrome';

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

@@ -1,12 +1,12 @@
-import React, { MouseEvent, useState } from 'react';
+import { MouseEvent, useState } from 'react';
 
 import { isEmpty } from 'lodash';
 import styled from 'styled-components';
 import { useIsMessageSelectionMode } from '../../../../../state/selectors/selectedConversation';
+import * as MIME from '../../../../../types/MIME';
 import { QuoteAuthor } from './QuoteAuthor';
 import { QuoteIconContainer } from './QuoteIconContainer';
 import { QuoteText } from './QuoteText';
-import * as MIME from '../../../../../types/MIME';
 
 const StyledQuoteContainer = styled.div`
   min-width: 300px; // if the quoted content is small it doesn't look very good so we set a minimum