From 329dff1adb69e85b241834905271b5bd7ae3bf15 Mon Sep 17 00:00:00 2001 From: William Grant Date: Mon, 12 Feb 2024 16:33:18 +1100 Subject: [PATCH 1/6] feat: upgrade react to v18 including eslint plugins to latest --- package.json | 14 +++++++------- yarn.lock | 51 ++++++++++++++++++++++++++++----------------------- 2 files changed, 35 insertions(+), 30 deletions(-) diff --git a/package.json b/package.json index 3d9b25ed6..0538254b8 100644 --- a/package.json +++ b/package.json @@ -22,8 +22,8 @@ "lodash": "^4.17.20", "ini": "^1.3.6", "ejs": "^3.1.7", - "react": "17.0.2", - "@types/react": "17.0.2", + "react": "18.2.0", + "@types/react": "18.2.55", "glob-parent": "^6.0.1", "got": "^11.8.5", "jpeg-js": "^0.4.4", @@ -109,9 +109,9 @@ "pify": "3.0.0", "protobufjs": "^7.2.4", "rc-slider": "^10.2.1", - "react": "^17.0.2", + "react": "^18.2.0", "react-contexify": "^6.0.0", - "react-dom": "^17.0.2", + "react-dom": "^18.2.0", "react-draggable": "^4.4.4", "react-h5-audio-player": "^3.2.0", "react-intersection-observer": "^9.7.0", @@ -158,8 +158,8 @@ "@types/mocha": "5.0.0", "@types/node-fetch": "^2.5.7", "@types/pify": "3.0.2", - "@types/react": "^17.0.2", - "@types/react-dom": "^17.0.2", + "@types/react": "^18.2.55", + "@types/react-dom": "^18.2.19", "@types/react-redux": "^7.1.24", "@types/react-virtualized": "9.18.12", "@types/redux-logger": "3.0.7", @@ -185,7 +185,7 @@ "eslint-plugin-import": "^2.27.5", "eslint-plugin-mocha": "^10.1.0", "eslint-plugin-more": "^1.0.5", - "eslint-plugin-react": "^7.33.0", + "eslint-plugin-react": "^7.33.2", "eslint-plugin-react-hooks": "^4.6.0", "events": "^3.3.0", "husky": "^8.0.0", diff --git a/yarn.lock b/yarn.lock index fe3253dd7..9488a79da 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1007,12 +1007,12 @@ resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf" integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w== -"@types/react-dom@^17.0.2": - version "17.0.20" - resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.20.tgz#e0c8901469d732b36d8473b40b679ad899da1b53" - integrity sha512-4pzIjSxDueZZ90F52mU3aPoogkHIoSIDG+oQ+wQK7Cy2B9S+MvOqY0uEA/qawKz381qrEDkvpwyt8Bm31I8sbA== +"@types/react-dom@^18.2.19": + version "18.2.19" + resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.2.19.tgz#b84b7c30c635a6c26c6a6dfbb599b2da9788be58" + integrity sha512-aZvQL6uUbIJpjZk4U8JZGbau9KDeAwMfmhyWorxgBkqDIEf6ROjRozcmPIicqsUwPUjbkDfHKgGee1Lq65APcA== dependencies: - "@types/react" "^17" + "@types/react" "*" "@types/react-mentions@^4.1.8": version "4.1.8" @@ -1039,7 +1039,7 @@ "@types/prop-types" "*" "@types/react" "*" -"@types/react@*", "@types/react@17.0.2", "@types/react@^17": +"@types/react@*", "@types/react@17.0.2": version "17.0.2" resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.2.tgz#3de24c4efef902dd9795a49c75f760cbe4f7a5a8" integrity sha512-Xt40xQsrkdvjn1EyWe1Bc0dJLcil/9x2vAuW7ya+PuQip4UYUaXyhzWmAbwRsdMgwOFHpfp7/FFZebDU6Y8VHA== @@ -1047,10 +1047,10 @@ "@types/prop-types" "*" csstype "^3.0.2" -"@types/react@^17.0.2": - version "17.0.65" - resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.65.tgz#95f6a2ab61145ffb69129d07982d047f9e0870cd" - integrity sha512-oxur785xZYHvnI7TRS61dXbkIhDPnGfsXKv0cNXR/0ml4SipRIFpSMzA7HMEfOywFwJ5AOnPrXYTEiTRUQeGlQ== +"@types/react@^18.2.55": + version "18.2.55" + resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.55.tgz#38141821b7084404b5013742bc4ae08e44da7a67" + integrity sha512-Y2Tz5P4yz23brwm2d7jNon39qoAtMMmalOQv6+fEFt1mT+FcM3D841wDpoUvFXhaYenuROCy3FZYqdTjM7qVyA== dependencies: "@types/prop-types" "*" "@types/scheduler" "*" @@ -3290,7 +3290,7 @@ eslint-plugin-react-hooks@^4.6.0: resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.0.tgz#4c3e697ad95b77e93f8646aaa1630c1ba607edd3" integrity sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g== -eslint-plugin-react@^7.33.0: +eslint-plugin-react@^7.33.2: version "7.33.2" resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.33.2.tgz#69ee09443ffc583927eafe86ffebb470ee737608" integrity sha512-73QQMKALArI8/7xGLNI/3LylrEYrlKZSb5C9+q3OtOewTnMQi5cT+aE9E41sLCmli3I9PGGmD1yiZydyo4FEPw== @@ -6134,14 +6134,13 @@ react-contexify@^6.0.0: dependencies: clsx "^1.2.1" -react-dom@^17.0.2: - version "17.0.2" - resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23" - integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA== +react-dom@^18.2.0: + version "18.2.0" + resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d" + integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g== dependencies: loose-envify "^1.1.0" - object-assign "^4.1.1" - scheduler "^0.20.2" + scheduler "^0.23.0" react-draggable@^4.4.4: version "4.4.5" @@ -6266,7 +6265,7 @@ react-virtualized@^9.22.4: prop-types "^15.7.2" react-lifecycles-compat "^3.0.4" -react@17.0.2, react@^17.0.2: +react@17.0.2: version "17.0.2" resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037" integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA== @@ -6274,6 +6273,13 @@ react@17.0.2, react@^17.0.2: loose-envify "^1.1.0" object-assign "^4.1.1" +react@^18.2.0: + version "18.2.0" + resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5" + integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ== + dependencies: + loose-envify "^1.1.0" + read-config-file@6.2.0: version "6.2.0" resolved "https://registry.yarnpkg.com/read-config-file/-/read-config-file-6.2.0.tgz#71536072330bcd62ba814f91458b12add9fc7ade" @@ -6688,13 +6694,12 @@ saxes@^6.0.0: dependencies: xmlchars "^2.2.0" -scheduler@^0.20.2: - version "0.20.2" - resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91" - integrity sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ== +scheduler@^0.23.0: + version "0.23.0" + resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.0.tgz#ba8041afc3d30eb206a487b6b384002e4e61fdfe" + integrity sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw== dependencies: loose-envify "^1.1.0" - object-assign "^4.1.1" schema-utils@^3.1.1, schema-utils@^3.2.0: version "3.3.0" From 1efc5d2bebef9b91d67ba4dae83bfe081a078fe8 Mon Sep 17 00:00:00 2001 From: William Grant Date: Mon, 12 Feb 2024 16:39:36 +1100 Subject: [PATCH 2/6] fix: use createRoot instead of ReactDom.render --- about_preload.js | 3 --- debug_log_preload.js | 3 --- password_preload.js | 3 --- preload.js | 3 --- ts/mains/about_start.tsx | 7 ++++--- ts/mains/debug_log_start.tsx | 5 ++++- ts/mains/main_renderer.tsx | 10 +++++++--- ts/mains/password_start.tsx | 7 ++++--- 8 files changed, 19 insertions(+), 22 deletions(-) diff --git a/about_preload.js b/about_preload.js index 27f48d231..93e2fe547 100644 --- a/about_preload.js +++ b/about_preload.js @@ -9,9 +9,6 @@ const config = url.parse(window.location.toString(), true).query; const { locale } = config; const localeMessages = ipcRenderer.sendSync('locale-data'); -window.React = require('react'); -window.ReactDOM = require('react-dom'); - window.theme = config.theme; window.i18n = i18n.setupi18n(locale, localeMessages); diff --git a/debug_log_preload.js b/debug_log_preload.js index d5af17afe..196749151 100644 --- a/debug_log_preload.js +++ b/debug_log_preload.js @@ -14,9 +14,6 @@ const localeMessages = ipcRenderer.sendSync('locale-data'); window._ = require('lodash'); -window.React = require('react'); -window.ReactDOM = require('react-dom'); - window.getVersion = () => config.version; window.theme = config.theme; window.i18n = i18n.setupi18n(locale, localeMessages); diff --git a/password_preload.js b/password_preload.js index ed8262bc3..7c6912dc3 100644 --- a/password_preload.js +++ b/password_preload.js @@ -9,9 +9,6 @@ const config = url.parse(window.location.toString(), true).query; const { locale } = config; const localeMessages = ipcRenderer.sendSync('locale-data'); -window.React = require('react'); -window.ReactDOM = require('react-dom'); - // If the app is locked we can't access the database to check the theme. window.theme = 'classic-dark'; window.primaryColor = 'green'; diff --git a/preload.js b/preload.js index 13712388d..226bfbe21 100644 --- a/preload.js +++ b/preload.js @@ -243,9 +243,6 @@ setInterval(() => { window.nodeSetImmediate(() => {}); }, 1000); -window.React = require('react'); -window.ReactDOM = require('react-dom'); - window.clipboard = clipboard; window.getSeedNodeList = () => diff --git a/ts/mains/about_start.tsx b/ts/mains/about_start.tsx index fec0529f5..31c2885ba 100644 --- a/ts/mains/about_start.tsx +++ b/ts/mains/about_start.tsx @@ -1,6 +1,7 @@ -// const $body = $(document.body); - import React from 'react'; +import { createRoot } from 'react-dom/client'; import { AboutView } from '../components/AboutView'; -window.ReactDOM.render(, document.getElementById('root')); +const container = document.getElementById('root'); +const root = createRoot(container!); +root.render(); diff --git a/ts/mains/debug_log_start.tsx b/ts/mains/debug_log_start.tsx index 26edbfc3b..8bec926a6 100644 --- a/ts/mains/debug_log_start.tsx +++ b/ts/mains/debug_log_start.tsx @@ -1,4 +1,7 @@ import React from 'react'; +import { createRoot } from 'react-dom/client'; import { DebugLogView } from '../components/DebugLogView'; -window.ReactDOM.render(, document.getElementById('root')); +const container = document.getElementById('root'); +const root = createRoot(container!); +root.render(); diff --git a/ts/mains/main_renderer.tsx b/ts/mains/main_renderer.tsx index cbb1fcd25..499d40b4b 100644 --- a/ts/mains/main_renderer.tsx +++ b/ts/mains/main_renderer.tsx @@ -1,6 +1,6 @@ import Backbone from 'backbone'; import _ from 'lodash'; -import ReactDOM from 'react-dom'; +import { createRoot } from 'react-dom/client'; import nativeEmojiData from '@emoji-mart/data'; import { ipcRenderer } from 'electron'; @@ -310,12 +310,16 @@ async function start() { void getConversationController() .loadPromise() ?.then(() => { - ReactDOM.render(, document.getElementById('root')); + const container = document.getElementById('root'); + const root = createRoot(container!); + root.render(); }); } function showRegistrationView() { - ReactDOM.render(, document.getElementById('root')); + const container = document.getElementById('root'); + const root = createRoot(container!); + root.render(); switchBodyToRtlIfNeeded(); } DisappearingMessages.initExpiringMessageListener(); diff --git a/ts/mains/password_start.tsx b/ts/mains/password_start.tsx index b6a65176d..4a05b53fa 100644 --- a/ts/mains/password_start.tsx +++ b/ts/mains/password_start.tsx @@ -1,6 +1,7 @@ -// const $body = $(document.body); - import React from 'react'; +import { createRoot } from 'react-dom/client'; import { SessionPasswordPrompt } from '../components/SessionPasswordPrompt'; -window.ReactDOM.render(, document.getElementById('root')); +const container = document.getElementById('root'); +const root = createRoot(container!); +root.render(); From a098638bc0a30cec0f6e3078e64ab84c1ce22cf7 Mon Sep 17 00:00:00 2001 From: William Grant Date: Tue, 13 Feb 2024 12:01:20 +1100 Subject: [PATCH 3/6] refactor: remove unnecessary react imports you don't need it from react 17 --- .eslintrc.js | 2 +- ts/components/AboutView.tsx | 4 +- ts/components/CaptionEditor.tsx | 1 - ts/components/DebugLogView.tsx | 4 +- ts/components/MainViewController.tsx | 1 - ts/components/MemberListItem.tsx | 3 +- ts/components/NoticeBanner.tsx | 1 - ts/components/SessionInboxView.tsx | 2 +- ts/components/SessionMainPanel.tsx | 3 +- ts/components/SessionPasswordPrompt.tsx | 4 +- ts/components/SessionScrollButton.tsx | 3 +- ts/components/SessionSearchInput.tsx | 2 +- ts/components/SessionToastContainer.tsx | 1 - ts/components/SessionWrapperModal.tsx | 2 +- ts/components/SplitViewContainer.tsx | 10 ++--- ts/components/avatar/Avatar.tsx | 6 +-- .../AvatarPlaceHolder/AvatarPlaceHolder.tsx | 4 +- .../AvatarPlaceHolder/ClosedGroupAvatar.tsx | 5 +-- ts/components/basic/MessageBodyHighlight.tsx | 1 - ts/components/basic/PillContainer.tsx | 1 - ts/components/basic/SessionButton.tsx | 2 +- ts/components/basic/SessionDropdown.tsx | 2 +- ts/components/basic/SessionDropdownItem.tsx | 1 - ts/components/basic/SessionHTMLRenderer.tsx | 4 +- ts/components/basic/SessionIdEditable.tsx | 2 +- ts/components/basic/SessionInput.tsx | 4 +- ts/components/basic/SessionRadio.tsx | 2 +- ts/components/basic/SessionRadioGroup.tsx | 2 +- ts/components/basic/SessionSpinner.tsx | 2 - ts/components/basic/SessionToast.tsx | 2 +- ts/components/basic/SessionToggle.tsx | 1 - ts/components/basic/Spinner.tsx | 1 - ts/components/basic/Text.tsx | 1 - ts/components/basic/YourSessionIDPill.tsx | 1 - ts/components/buttons/MenuButton.tsx | 1 - ts/components/buttons/PanelButton.tsx | 2 +- ts/components/buttons/PanelIconButton.tsx | 1 - ts/components/buttons/PanelRadioButton.tsx | 1 - ts/components/calling/CallButtons.tsx | 2 +- .../calling/CallInFullScreenContainer.tsx | 6 +-- .../calling/DraggableCallContainer.tsx | 14 +++---- .../calling/InConversationCallContainer.tsx | 12 +++--- ts/components/calling/IncomingCallDialog.tsx | 4 +- ts/components/conversation/AddMentions.tsx | 7 ++-- ts/components/conversation/AddNewLines.tsx | 1 - ts/components/conversation/ContactName.tsx | 5 +-- ts/components/conversation/Emojify.tsx | 2 - ts/components/conversation/ExpireTimer.tsx | 2 +- ts/components/conversation/H5AudioPlayer.tsx | 2 +- ts/components/conversation/Image.tsx | 2 +- ts/components/conversation/ImageGrid.tsx | 2 +- .../conversation/MessageRequestButtons.tsx | 1 - .../conversation/SessionConversation.tsx | 6 +-- .../conversation/SessionEmojiPanel.tsx | 13 +++--- .../conversation/SessionFileDropzone.tsx | 1 - .../conversation/SessionLastSeenIndicator.tsx | 2 +- .../conversation/SessionMessagesList.tsx | 4 +- .../SessionMessagesListContainer.tsx | 11 +++-- .../SessionQuotedMessageComposition.tsx | 5 +-- .../conversation/SessionRecording.tsx | 9 +++-- .../conversation/SessionStagedLinkPreview.tsx | 7 ++-- .../conversation/StagedAttachmentList.tsx | 2 - .../conversation/StagedGenericAttachment.tsx | 5 +-- .../conversation/StagedLinkPreview.tsx | 7 ++-- .../StagedPlaceholderAttachment.tsx | 2 +- .../conversation/SubtleNotification.tsx | 1 - .../conversation/TimerNotification.tsx | 2 - ts/components/conversation/Timestamp.tsx | 3 +- .../conversation/TypingAnimation.tsx | 1 - ts/components/conversation/TypingBubble.tsx | 1 - .../composition/CompositionBox.tsx | 19 ++++----- .../composition/CompositionButtons.tsx | 40 +++++++++---------- .../composition/EmojiQuickResult.tsx | 3 +- .../conversation/composition/UserMentions.tsx | 3 +- .../header/ConversationHeader.tsx | 2 - .../header/ConversationHeaderItems.tsx | 1 - .../ConversationHeaderSelectionOverlay.tsx | 1 - .../header/ConversationHeaderSubtitle.tsx | 1 - .../header/ConversationHeaderTitle.tsx | 2 +- .../media-gallery/AttachmentSection.tsx | 6 +-- .../media-gallery/DocumentListItem.tsx | 4 +- .../conversation/media-gallery/EmptyState.tsx | 5 ++- .../media-gallery/MediaGallery.tsx | 2 +- .../media-gallery/MediaGridItem.tsx | 8 ++-- .../message-content/ClickToTrustSender.tsx | 1 - .../message-content/MessageAttachment.tsx | 2 +- .../message-content/MessageAuthorText.tsx | 1 - .../message/message-content/MessageAvatar.tsx | 2 +- .../message/message-content/MessageBody.tsx | 2 +- .../message-content/MessageContent.tsx | 2 +- .../MessageContentWithStatus.tsx | 2 +- .../message-content/MessageContextMenu.tsx | 2 +- .../message-content/MessageLinkPreview.tsx | 2 +- .../message/message-content/MessageQuote.tsx | 2 +- .../message-content/MessageReactBar.tsx | 2 +- .../message-content/MessageReactions.tsx | 2 +- .../message/message-content/MessageStatus.tsx | 2 +- .../message/message-content/MessageText.tsx | 4 +- .../message/message-content/Quote.tsx | 2 +- .../message/message-content/quote/Quote.tsx | 4 +- .../message-content/quote/QuoteAuthor.tsx | 3 +- .../quote/QuoteIconContainer.tsx | 7 ++-- .../message-content/quote/QuoteImage.tsx | 3 +- .../message-content/quote/QuoteText.tsx | 4 +- .../DataExtractionNotification.tsx | 1 - .../message/message-item/DateBreak.tsx | 2 +- .../message-item/ExpirableReadableMessage.tsx | 2 +- .../message-item/GenericReadableMessage.tsx | 2 +- .../message/message-item/GroupInvitation.tsx | 2 +- .../message-item/GroupUpdateMessage.tsx | 2 - .../message-item/InteractionNotification.tsx | 2 - .../message/message-item/Message.tsx | 2 - .../message-item/MessageRequestResponse.tsx | 1 - .../message/message-item/ReadableMessage.tsx | 2 +- .../notification-bubble/CallNotification.tsx | 1 - .../NotificationBubble.tsx | 1 - .../message/reactions/Reaction.tsx | 2 +- .../message/reactions/ReactionPopup.tsx | 4 +- .../conversation/right-panel/RightPanel.tsx | 2 - .../overlay/OverlayRightPanelSettings.tsx | 2 +- .../right-panel/overlay/components/Header.tsx | 2 +- .../DisappearingModes.tsx | 1 - .../OverlayDisappearingMessages.tsx | 2 +- .../disappearing-messages/TimeOptions.tsx | 2 +- .../message-info/OverlayMessageInfo.tsx | 2 +- .../components/AttachmentCarousel.tsx | 2 +- .../components/AttachmentInfo.tsx | 1 - .../message-info/components/MessageFrom.tsx | 1 - .../message-info/components/MessageInfo.tsx | 1 - ts/components/dialog/BanOrUnbanUserDialog.tsx | 2 +- ts/components/dialog/DeleteAccountModal.tsx | 2 +- ts/components/dialog/EditProfileDialog.tsx | 2 +- .../dialog/EditProfilePictureModal.tsx | 2 +- ts/components/dialog/InviteContactsDialog.tsx | 1 - ts/components/dialog/ModalContainer.tsx | 19 +++++---- ts/components/dialog/ModeratorsAddDialog.tsx | 14 +++---- .../dialog/ModeratorsRemoveDialog.tsx | 8 ++-- .../dialog/OnionStatusPathDialog.tsx | 1 - ts/components/dialog/ReactClearAllModal.tsx | 4 +- ts/components/dialog/ReactListModal.tsx | 6 +-- ts/components/dialog/SessionConfirm.tsx | 2 +- .../dialog/SessionNicknameDialog.tsx | 6 +-- .../dialog/SessionPasswordDialog.tsx | 15 +++---- ts/components/dialog/SessionSeedModal.tsx | 2 +- .../dialog/UpdateGroupMembersDialog.tsx | 5 +-- .../dialog/UpdateGroupNameDialog.tsx | 19 ++++----- ts/components/dialog/UserDetailsDialog.tsx | 2 +- .../icon/DropDownAndToggleButton.tsx | 3 +- .../icon/MemberAvatarPlaceHolder.tsx | 2 - ts/components/icon/SessionIcon.tsx | 4 +- ts/components/icon/SessionIconButton.tsx | 10 ++--- .../icon/SessionNotificationCount.tsx | 1 - ts/components/leftpane/ActionsPanel.tsx | 2 +- ts/components/leftpane/ContactListItem.tsx | 1 - ts/components/leftpane/LeftPane.tsx | 2 - .../leftpane/LeftPaneMessageSection.tsx | 5 ++- .../leftpane/LeftPaneSectionHeader.tsx | 1 - .../leftpane/LeftPaneSettingSection.tsx | 1 - .../leftpane/MessageRequestsBanner.tsx | 3 +- .../ConversationListItem.tsx | 2 +- .../conversation-list-item/ConvoIdContext.tsx | 4 +- .../conversation-list-item/HeaderItem.tsx | 2 +- .../InteractionItem.tsx | 2 +- .../conversation-list-item/MessageItem.tsx | 2 +- .../conversation-list-item/UserItem.tsx | 1 - .../leftpane/overlay/OverlayClosedGroup.tsx | 2 +- .../leftpane/overlay/OverlayCommunity.tsx | 2 +- .../leftpane/overlay/OverlayHeader.tsx | 1 - .../leftpane/overlay/OverlayMessage.tsx | 2 +- .../overlay/OverlayMessageRequest.tsx | 2 - .../overlay/SessionJoinableDefaultRooms.tsx | 2 +- .../overlay/choose-action/ContactRow.tsx | 1 - .../choose-action/ContactsListWithBreaks.tsx | 2 +- .../choose-action/OverlayChooseAction.tsx | 2 +- ts/components/lightbox/Lightbox.tsx | 10 ++--- ts/components/lightbox/LightboxGallery.tsx | 2 +- .../menu/ConversationListItemContextMenu.tsx | 9 ++--- ts/components/menu/Menu.tsx | 2 - .../menu/MessageRequestBannerContextMenu.tsx | 1 - ts/components/registration/AccentText.tsx | 2 - .../registration/RegistrationStages.tsx | 14 +++---- .../registration/RegistrationUserDetails.tsx | 2 +- .../registration/SessionRegistrationView.tsx | 12 +++--- ts/components/registration/SignInTab.tsx | 2 +- ts/components/registration/SignUpTab.tsx | 6 +-- .../registration/TermsAndConditions.tsx | 1 - ts/components/search/MessageSearchResults.tsx | 11 +++-- ts/components/search/SearchResults.tsx | 5 +-- ts/components/settings/BlockedList.tsx | 4 +- .../SessionNotificationGroupSettings.tsx | 1 - .../settings/SessionSettingListItem.tsx | 3 +- ts/components/settings/SessionSettings.tsx | 19 ++++----- .../settings/SessionSettingsHeader.tsx | 1 - .../settings/SettingsThemeSwitcher.tsx | 1 - .../settings/ZoomingSessionSlider.tsx | 2 +- .../settings/section/CategoryAppearance.tsx | 4 +- .../section/CategoryConversations.tsx | 3 +- .../settings/section/CategoryHelp.tsx | 2 +- .../settings/section/CategoryPermissions.tsx | 1 - .../settings/section/CategoryPrivacy.tsx | 1 - ts/hooks/useFocusMount.ts | 2 - ts/hooks/useModulo.ts | 5 +-- ts/mains/about_start.tsx | 1 - ts/mains/debug_log_start.tsx | 1 - ts/mains/main_renderer.tsx | 1 - ts/mains/password_start.tsx | 1 - ts/session/utils/Toast.tsx | 1 - ts/themes/SessionTheme.tsx | 8 ++-- tsconfig.json | 2 +- 209 files changed, 318 insertions(+), 429 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 671387e71..a74dc92aa 100644 --- a/.eslintrc.js +++ b/.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', diff --git a/ts/components/AboutView.tsx b/ts/components/AboutView.tsx index abffacdd1..1b1297c73 100644 --- a/ts/components/AboutView.tsx +++ b/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); diff --git a/ts/components/CaptionEditor.tsx b/ts/components/CaptionEditor.tsx index 20e51b2ce..3ae89ddd1 100644 --- a/ts/components/CaptionEditor.tsx +++ b/ts/components/CaptionEditor.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import * as GoogleChrome from '../util/GoogleChrome'; import { AttachmentType } from '../types/Attachment'; diff --git a/ts/components/DebugLogView.tsx b/ts/components/DebugLogView.tsx index 3caa50b48..03d701891 100644 --- a/ts/components/DebugLogView.tsx +++ b/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'; diff --git a/ts/components/MainViewController.tsx b/ts/components/MainViewController.tsx index 8a81ce785..27a062a45 100644 --- a/ts/components/MainViewController.tsx +++ b/ts/components/MainViewController.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { CSSProperties } from 'styled-components'; export const MessageView = () => { diff --git a/ts/components/MemberListItem.tsx b/ts/components/MemberListItem.tsx index 261ffe3a4..3fd6d14ab 100644 --- a/ts/components/MemberListItem.tsx +++ b/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` diff --git a/ts/components/NoticeBanner.tsx b/ts/components/NoticeBanner.tsx index 255926d82..2bc240802 100644 --- a/ts/components/NoticeBanner.tsx +++ b/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'; diff --git a/ts/components/SessionInboxView.tsx b/ts/components/SessionInboxView.tsx index f2d8c7616..9ac1b9252 100644 --- a/ts/components/SessionInboxView.tsx +++ b/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'; diff --git a/ts/components/SessionMainPanel.tsx b/ts/components/SessionMainPanel.tsx index d5d383331..44cf87e91 100644 --- a/ts/components/SessionMainPanel.tsx +++ b/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; diff --git a/ts/components/SessionPasswordPrompt.tsx b/ts/components/SessionPasswordPrompt.tsx index 929db35c8..8e8fa356a 100644 --- a/ts/components/SessionPasswordPrompt.tsx +++ b/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 { +class SessionPasswordPromptInner extends PureComponent { private inputRef?: any; constructor(props: any) { diff --git a/ts/components/SessionScrollButton.tsx b/ts/components/SessionScrollButton.tsx index 5c7543da2..120f636a8 100644 --- a/ts/components/SessionScrollButton.tsx +++ b/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; diff --git a/ts/components/SessionSearchInput.tsx b/ts/components/SessionSearchInput.tsx index 389644d04..9c745a0a8 100644 --- a/ts/components/SessionSearchInput.tsx +++ b/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'; diff --git a/ts/components/SessionToastContainer.tsx b/ts/components/SessionToastContainer.tsx index 69f36cd42..f058377d5 100644 --- a/ts/components/SessionToastContainer.tsx +++ b/ts/components/SessionToastContainer.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { Slide, ToastContainer, ToastContainerProps } from 'react-toastify'; import styled from 'styled-components'; diff --git a/ts/components/SessionWrapperModal.tsx b/ts/components/SessionWrapperModal.tsx index c75a64c0d..6f015fa66 100644 --- a/ts/components/SessionWrapperModal.tsx +++ b/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'; diff --git a/ts/components/SplitViewContainer.tsx b/ts/components/SplitViewContainer.tsx index c1a001b8f..94485139d 100644 --- a/ts/components/SplitViewContainer.tsx +++ b/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; - bottom: React.ReactElement; + top: 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(null); - React.useEffect(() => { + useEffect(() => { if (topRef.current) { if (!topHeight) { setTopHeight(Math.max(MIN_HEIGHT_TOP, (topRef.current?.clientHeight || 0) / 2)); diff --git a/ts/components/avatar/Avatar.tsx b/ts/components/avatar/Avatar.tsx index 43134b21c..e8fe94bb8 100644 --- a/ts/components/avatar/Avatar.tsx +++ b/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 & { isClosedGroup: boolean; @@ -185,4 +185,4 @@ const AvatarInner = (props: Props) => { ); }; -export const Avatar = React.memo(AvatarInner, isEqual); +export const Avatar = memo(AvatarInner, isEqual); diff --git a/ts/components/avatar/AvatarPlaceHolder/AvatarPlaceHolder.tsx b/ts/components/avatar/AvatarPlaceHolder/AvatarPlaceHolder.tsx index eec91e5da..6c8059fca 100644 --- a/ts/components/avatar/AvatarPlaceHolder/AvatarPlaceHolder.tsx +++ b/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 = { diff --git a/ts/components/avatar/AvatarPlaceHolder/ClosedGroupAvatar.tsx b/ts/components/avatar/AvatarPlaceHolder/ClosedGroupAvatar.tsx index 0ad21d293..6e8fcb6b7 100644 --- a/ts/components/avatar/AvatarPlaceHolder/ClosedGroupAvatar.tsx +++ b/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 diff --git a/ts/components/basic/MessageBodyHighlight.tsx b/ts/components/basic/MessageBodyHighlight.tsx index fdd7bd5e9..b6cd15dcd 100644 --- a/ts/components/basic/MessageBodyHighlight.tsx +++ b/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'; diff --git a/ts/components/basic/PillContainer.tsx b/ts/components/basic/PillContainer.tsx index 3c9e37fcb..ab3a53a72 100644 --- a/ts/components/basic/PillContainer.tsx +++ b/ts/components/basic/PillContainer.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import styled from 'styled-components'; type PillContainerProps = { diff --git a/ts/components/basic/SessionButton.tsx b/ts/components/basic/SessionButton.tsx index 84e96136d..b113c64a2 100644 --- a/ts/components/basic/SessionButton.tsx +++ b/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 { diff --git a/ts/components/basic/SessionDropdown.tsx b/ts/components/basic/SessionDropdown.tsx index eb00a1f42..b13512e2b 100644 --- a/ts/components/basic/SessionDropdown.tsx +++ b/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'; diff --git a/ts/components/basic/SessionDropdownItem.tsx b/ts/components/basic/SessionDropdownItem.tsx index c6588da41..578ad40a1 100644 --- a/ts/components/basic/SessionDropdownItem.tsx +++ b/ts/components/basic/SessionDropdownItem.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import classNames from 'classnames'; import { SessionIcon, SessionIconType } from '../icon'; diff --git a/ts/components/basic/SessionHTMLRenderer.tsx b/ts/components/basic/SessionHTMLRenderer.tsx index 7e5280a0b..e674127d3 100644 --- a/ts/components/basic/SessionHTMLRenderer.tsx +++ b/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, diff --git a/ts/components/basic/SessionIdEditable.tsx b/ts/components/basic/SessionIdEditable.tsx index bbac3fb8e..0281c9694 100644 --- a/ts/components/basic/SessionIdEditable.tsx +++ b/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 = { diff --git a/ts/components/basic/SessionInput.tsx b/ts/components/basic/SessionInput.tsx index 0c33a22b0..09b84b0d4 100644 --- a/ts/components/basic/SessionInput.tsx +++ b/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; diff --git a/ts/components/basic/SessionRadio.tsx b/ts/components/basic/SessionRadio.tsx index aa5dc586a..272ffbfe1 100644 --- a/ts/components/basic/SessionRadio.tsx +++ b/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'; diff --git a/ts/components/basic/SessionRadioGroup.tsx b/ts/components/basic/SessionRadioGroup.tsx index b0867e3d7..aa4ee6ea2 100644 --- a/ts/components/basic/SessionRadioGroup.tsx +++ b/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'; diff --git a/ts/components/basic/SessionSpinner.tsx b/ts/components/basic/SessionSpinner.tsx index 4a5e27a98..3318addec 100644 --- a/ts/components/basic/SessionSpinner.tsx +++ b/ts/components/basic/SessionSpinner.tsx @@ -1,5 +1,3 @@ -import React from 'react'; - type Props = { loading: boolean; }; diff --git a/ts/components/basic/SessionToast.tsx b/ts/components/basic/SessionToast.tsx index cc87f8f8b..380331419 100644 --- a/ts/components/basic/SessionToast.tsx +++ b/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'; diff --git a/ts/components/basic/SessionToggle.tsx b/ts/components/basic/SessionToggle.tsx index bdbb9e857..8636c06f7 100644 --- a/ts/components/basic/SessionToggle.tsx +++ b/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'; diff --git a/ts/components/basic/Spinner.tsx b/ts/components/basic/Spinner.tsx index 02e7b79b1..915dfb182 100644 --- a/ts/components/basic/Spinner.tsx +++ b/ts/components/basic/Spinner.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import styled from 'styled-components'; type Props = { diff --git a/ts/components/basic/Text.tsx b/ts/components/basic/Text.tsx index fd6e7a879..527cd9632 100644 --- a/ts/components/basic/Text.tsx +++ b/ts/components/basic/Text.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import styled, { CSSProperties } from 'styled-components'; type TextProps = { diff --git a/ts/components/basic/YourSessionIDPill.tsx b/ts/components/basic/YourSessionIDPill.tsx index 54dd01adc..6ff6a325a 100644 --- a/ts/components/basic/YourSessionIDPill.tsx +++ b/ts/components/basic/YourSessionIDPill.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import styled from 'styled-components'; import { UserUtils } from '../../session/utils'; diff --git a/ts/components/buttons/MenuButton.tsx b/ts/components/buttons/MenuButton.tsx index 115748c29..3bd00f1d0 100644 --- a/ts/components/buttons/MenuButton.tsx +++ b/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'; diff --git a/ts/components/buttons/PanelButton.tsx b/ts/components/buttons/PanelButton.tsx index 868bf9bbd..1bf658eb8 100644 --- a/ts/components/buttons/PanelButton.tsx +++ b/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'; diff --git a/ts/components/buttons/PanelIconButton.tsx b/ts/components/buttons/PanelIconButton.tsx index 79d5f32d6..b7a065a71 100644 --- a/ts/components/buttons/PanelIconButton.tsx +++ b/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'; diff --git a/ts/components/buttons/PanelRadioButton.tsx b/ts/components/buttons/PanelRadioButton.tsx index 4db2594b9..26c477e0e 100644 --- a/ts/components/buttons/PanelRadioButton.tsx +++ b/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'; diff --git a/ts/components/calling/CallButtons.tsx b/ts/components/calling/CallButtons.tsx index 20aca8886..7411d8ded 100644 --- a/ts/components/calling/CallButtons.tsx +++ b/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'; diff --git a/ts/components/calling/CallInFullScreenContainer.tsx b/ts/components/calling/CallInFullScreenContainer.tsx index 952a88e34..f855fb4da 100644 --- a/ts/components/calling/CallInFullScreenContainer.tsx +++ b/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(null); - const videoRefLocal = React.useRef(null); + const videoRefRemote = useRef(null); + const videoRefLocal = useRef(null); function toggleFullScreenOFF() { dispatch(setFullScreenCall(false)); diff --git a/ts/components/calling/DraggableCallContainer.tsx b/ts/components/calling/DraggableCallContainer.tsx index d3a14e361..39ac345e5 100644 --- a/ts/components/calling/DraggableCallContainer.tsx +++ b/ts/components/calling/DraggableCallContainer.tsx @@ -1,16 +1,16 @@ -import React, { useEffect, useRef, useState } from 'react'; -import { useSelector } from 'react-redux'; +import { useEffect, useRef, useState } from 'react'; 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 { getSection } from '../../state/selectors/section'; +import { openConversationWithMessages } from '../../state/ducks/conversations'; 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; diff --git a/ts/components/calling/InConversationCallContainer.tsx b/ts/components/calling/InConversationCallContainer.tsx index dfedb85ae..737b69ee6 100644 --- a/ts/components/calling/InConversationCallContainer.tsx +++ b/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'; diff --git a/ts/components/calling/IncomingCallDialog.tsx b/ts/components/calling/IncomingCallDialog.tsx index ccaba5c46..4a4fd7b70 100644 --- a/ts/components/calling/IncomingCallDialog.tsx +++ b/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; diff --git a/ts/components/conversation/AddMentions.tsx b/ts/components/conversation/AddMentions.tsx index 024668326..40878f8df 100644 --- a/ts/components/conversation/AddMentions.tsx +++ b/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; diff --git a/ts/components/conversation/AddNewLines.tsx b/ts/components/conversation/AddNewLines.tsx index 303d87a74..171f9ef7c 100644 --- a/ts/components/conversation/AddNewLines.tsx +++ b/ts/components/conversation/AddNewLines.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { RenderTextCallbackType } from '../../types/Util'; type Props = { diff --git a/ts/components/conversation/ContactName.tsx b/ts/components/conversation/ContactName.tsx index ed01e7a78..de6101070 100644 --- a/ts/components/conversation/ContactName.tsx +++ b/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; diff --git a/ts/components/conversation/Emojify.tsx b/ts/components/conversation/Emojify.tsx index 0eb210536..948d335ae 100644 --- a/ts/components/conversation/Emojify.tsx +++ b/ts/components/conversation/Emojify.tsx @@ -1,5 +1,3 @@ -import React from 'react'; - import { SizeClassType } from '../../util/emoji'; import { RenderTextCallbackType } from '../../types/Util'; diff --git a/ts/components/conversation/ExpireTimer.tsx b/ts/components/conversation/ExpireTimer.tsx index 3aa801286..099748a6e 100644 --- a/ts/components/conversation/ExpireTimer.tsx +++ b/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'; diff --git a/ts/components/conversation/H5AudioPlayer.tsx b/ts/components/conversation/H5AudioPlayer.tsx index 2ace8bde9..4581426dd 100644 --- a/ts/components/conversation/H5AudioPlayer.tsx +++ b/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'; diff --git a/ts/components/conversation/Image.tsx b/ts/components/conversation/Image.tsx index dc051e219..7dd42eea1 100644 --- a/ts/components/conversation/Image.tsx +++ b/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'; diff --git a/ts/components/conversation/ImageGrid.tsx b/ts/components/conversation/ImageGrid.tsx index 6d47e9b44..ea26fe626 100644 --- a/ts/components/conversation/ImageGrid.tsx +++ b/ts/components/conversation/ImageGrid.tsx @@ -1,4 +1,4 @@ -import React, { useContext } from 'react'; +import { useContext } from 'react'; import styled from 'styled-components'; import { diff --git a/ts/components/conversation/MessageRequestButtons.tsx b/ts/components/conversation/MessageRequestButtons.tsx index e06748a04..f2b4a6f31 100644 --- a/ts/components/conversation/MessageRequestButtons.tsx +++ b/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'; diff --git a/ts/components/conversation/SessionConversation.tsx b/ts/components/conversation/SessionConversation.tsx index 708e5e481..b014ef0f1 100644 --- a/ts/components/conversation/SessionConversation.tsx +++ b/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 { +export class SessionConversation extends Component { private readonly messageContainerRef: React.RefObject; private dragCounter: number; private publicMembersRefreshTimeout?: NodeJS.Timeout; @@ -115,7 +115,7 @@ export class SessionConversation extends React.Component { this.state = { isDraggingFile: false, }; - this.messageContainerRef = React.createRef(); + this.messageContainerRef = createRef(); this.dragCounter = 0; this.updateMemberList = _.debounce(this.updateMemberListBouncy.bind(this), 10000); diff --git a/ts/components/conversation/SessionEmojiPanel.tsx b/ts/components/conversation/SessionEmojiPanel.tsx index 6da033ccc..0f85549f5 100644 --- a/ts/components/conversation/SessionEmojiPanel.tsx +++ b/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; diff --git a/ts/components/conversation/SessionFileDropzone.tsx b/ts/components/conversation/SessionFileDropzone.tsx index 9a6b87430..ded1e4193 100644 --- a/ts/components/conversation/SessionFileDropzone.tsx +++ b/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'; diff --git a/ts/components/conversation/SessionLastSeenIndicator.tsx b/ts/components/conversation/SessionLastSeenIndicator.tsx index 9b65f07cd..4df6f4e81 100644 --- a/ts/components/conversation/SessionLastSeenIndicator.tsx +++ b/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'; diff --git a/ts/components/conversation/SessionMessagesList.tsx b/ts/components/conversation/SessionMessagesList.tsx index 30a0a04bf..70e79eb75 100644 --- a/ts/components/conversation/SessionMessagesList.tsx +++ b/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) { diff --git a/ts/components/conversation/SessionMessagesListContainer.tsx b/ts/components/conversation/SessionMessagesListContainer.tsx index 042b84a41..7bfaff56b 100644 --- a/ts/components/conversation/SessionMessagesListContainer.tsx +++ b/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 { +class SessionMessagesListContainerInner extends Component { private timeoutResetQuotedScroll: NodeJS.Timeout | null = null; public constructor(props: Props) { diff --git a/ts/components/conversation/SessionQuotedMessageComposition.tsx b/ts/components/conversation/SessionQuotedMessageComposition.tsx index 6c54f5f78..dee9e7da6 100644 --- a/ts/components/conversation/SessionQuotedMessageComposition.tsx +++ b/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); diff --git a/ts/components/conversation/SessionRecording.tsx b/ts/components/conversation/SessionRecording.tsx index d2f30b417..599f046dd 100644 --- a/ts/components/conversation/SessionRecording.tsx +++ b/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` } `; -export class SessionRecording extends React.Component { +export class SessionRecording extends Component { private recorder?: any; private audioBlobMp3?: Blob; private audioElement?: HTMLAudioElement | null; diff --git a/ts/components/conversation/SessionStagedLinkPreview.tsx b/ts/components/conversation/SessionStagedLinkPreview.tsx index fc9c8739e..5c6a24dac 100644 --- a/ts/components/conversation/SessionStagedLinkPreview.tsx +++ b/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; diff --git a/ts/components/conversation/StagedAttachmentList.tsx b/ts/components/conversation/StagedAttachmentList.tsx index cf5d3218a..9c37d7f3e 100644 --- a/ts/components/conversation/StagedAttachmentList.tsx +++ b/ts/components/conversation/StagedAttachmentList.tsx @@ -1,5 +1,3 @@ -import React from 'react'; - import { useDispatch } from 'react-redux'; import styled from 'styled-components'; import { diff --git a/ts/components/conversation/StagedGenericAttachment.tsx b/ts/components/conversation/StagedGenericAttachment.tsx index 7ce239c49..8749d395f 100644 --- a/ts/components/conversation/StagedGenericAttachment.tsx +++ b/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 { +export class StagedGenericAttachment extends Component { public render() { const { attachment, onClose } = this.props; const { fileName, contentType } = attachment; diff --git a/ts/components/conversation/StagedLinkPreview.tsx b/ts/components/conversation/StagedLinkPreview.tsx index bec1a2db9..c7c9e0282 100644 --- a/ts/components/conversation/StagedLinkPreview.tsx +++ b/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; diff --git a/ts/components/conversation/StagedPlaceholderAttachment.tsx b/ts/components/conversation/StagedPlaceholderAttachment.tsx index 99b91ff06..6edf2fe21 100644 --- a/ts/components/conversation/StagedPlaceholderAttachment.tsx +++ b/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 { diff --git a/ts/components/conversation/SubtleNotification.tsx b/ts/components/conversation/SubtleNotification.tsx index 1a1730b9d..78260a6f8 100644 --- a/ts/components/conversation/SubtleNotification.tsx +++ b/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'; diff --git a/ts/components/conversation/TimerNotification.tsx b/ts/components/conversation/TimerNotification.tsx index 7e5150cd7..e14425ab3 100644 --- a/ts/components/conversation/TimerNotification.tsx +++ b/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'; diff --git a/ts/components/conversation/Timestamp.tsx b/ts/components/conversation/Timestamp.tsx index 92c88f606..6421773b2 100644 --- a/ts/components/conversation/Timestamp.tsx +++ b/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; diff --git a/ts/components/conversation/TypingAnimation.tsx b/ts/components/conversation/TypingAnimation.tsx index 61af18a01..ffa4ed980 100644 --- a/ts/components/conversation/TypingAnimation.tsx +++ b/ts/components/conversation/TypingAnimation.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import styled from 'styled-components'; const StyledTypingContainer = styled.div` diff --git a/ts/components/conversation/TypingBubble.tsx b/ts/components/conversation/TypingBubble.tsx index 0e2ed1fdf..813b516c5 100644 --- a/ts/components/conversation/TypingBubble.tsx +++ b/ts/components/conversation/TypingBubble.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import styled from 'styled-components'; import { ConversationTypeEnum } from '../../models/conversationAttributes'; diff --git a/ts/components/conversation/composition/CompositionBox.tsx b/ts/components/conversation/composition/CompositionBox.tsx index 466a9aeb0..e6da1fe9a 100644 --- a/ts/components/conversation/composition/CompositionBox.tsx +++ b/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 { - private readonly textarea: React.RefObject; - private readonly fileInput: React.RefObject; - private readonly emojiPanel: React.RefObject; +class CompositionBoxInner extends Component { + private readonly textarea: RefObject; + private readonly fileInput: RefObject; + private readonly emojiPanel: RefObject; private readonly emojiPanelButton: any; private linkPreviewAbortController?: AbortController; private container: HTMLDivElement | null; @@ -281,13 +282,13 @@ class CompositionBoxInner extends React.Component { super(props); this.state = getDefaultState(props.selectedConversationKey); - this.textarea = React.createRef(); - this.fileInput = React.createRef(); + this.textarea = createRef(); + this.fileInput = createRef(); this.container = null; // Emojis - this.emojiPanel = React.createRef(); - this.emojiPanelButton = React.createRef(); + this.emojiPanel = createRef(); + this.emojiPanelButton = createRef(); autoBind(this); this.toggleEmojiPanel = debounce(this.toggleEmojiPanel.bind(this), 100); } diff --git a/ts/components/conversation/composition/CompositionButtons.tsx b/ts/components/conversation/composition/CompositionButtons.tsx index f88cdde7a..1610a9db5 100644 --- a/ts/components/conversation/composition/CompositionButtons.tsx +++ b/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( - (props, ref) => { - return ( - - - - ); - } -); +export const ToggleEmojiButton = forwardRef((props, ref) => { + return ( + + + + ); +}); export const SendMessageButton = (props: { onClick: Noop }) => { return ( diff --git a/ts/components/conversation/composition/EmojiQuickResult.tsx b/ts/components/conversation/composition/EmojiQuickResult.tsx index 2d0526026..c5013d5f8 100644 --- a/ts/components/conversation/composition/EmojiQuickResult.tsx +++ b/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'; diff --git a/ts/components/conversation/composition/UserMentions.tsx b/ts/components/conversation/composition/UserMentions.tsx index e5c7aeef5..6db54809f 100644 --- a/ts/components/conversation/composition/UserMentions.tsx +++ b/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%' }; diff --git a/ts/components/conversation/header/ConversationHeader.tsx b/ts/components/conversation/header/ConversationHeader.tsx index 93c8406f7..4a40d520b 100644 --- a/ts/components/conversation/header/ConversationHeader.tsx +++ b/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'; diff --git a/ts/components/conversation/header/ConversationHeaderItems.tsx b/ts/components/conversation/header/ConversationHeaderItems.tsx index 69a049d87..d8dbb88ab 100644 --- a/ts/components/conversation/header/ConversationHeaderItems.tsx +++ b/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'; diff --git a/ts/components/conversation/header/ConversationHeaderSelectionOverlay.tsx b/ts/components/conversation/header/ConversationHeaderSelectionOverlay.tsx index 1ca14e0e5..b71ada5e5 100644 --- a/ts/components/conversation/header/ConversationHeaderSelectionOverlay.tsx +++ b/ts/components/conversation/header/ConversationHeaderSelectionOverlay.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { deleteMessagesById, diff --git a/ts/components/conversation/header/ConversationHeaderSubtitle.tsx b/ts/components/conversation/header/ConversationHeaderSubtitle.tsx index b12e13bd6..c086bde7e 100644 --- a/ts/components/conversation/header/ConversationHeaderSubtitle.tsx +++ b/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'; diff --git a/ts/components/conversation/header/ConversationHeaderTitle.tsx b/ts/components/conversation/header/ConversationHeaderTitle.tsx index d496b846a..2a371e2e9 100644 --- a/ts/components/conversation/header/ConversationHeaderTitle.tsx +++ b/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'; diff --git a/ts/components/conversation/media-gallery/AttachmentSection.tsx b/ts/components/conversation/media-gallery/AttachmentSection.tsx index 77b68a890..c40f2f2aa 100644 --- a/ts/components/conversation/media-gallery/AttachmentSection.tsx +++ b/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'; diff --git a/ts/components/conversation/media-gallery/DocumentListItem.tsx b/ts/components/conversation/media-gallery/DocumentListItem.tsx index 73ffd54aa..651d5b60e 100644 --- a/ts/components/conversation/media-gallery/DocumentListItem.tsx +++ b/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 diff --git a/ts/components/conversation/media-gallery/EmptyState.tsx b/ts/components/conversation/media-gallery/EmptyState.tsx index 17b9a7afa..5f49e28be 100644 --- a/ts/components/conversation/media-gallery/EmptyState.tsx +++ b/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 { +export class EmptyState extends Component { public render() { const { label } = this.props; diff --git a/ts/components/conversation/media-gallery/MediaGallery.tsx b/ts/components/conversation/media-gallery/MediaGallery.tsx index 9cd558233..571b8f977 100644 --- a/ts/components/conversation/media-gallery/MediaGallery.tsx +++ b/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'; diff --git a/ts/components/conversation/media-gallery/MediaGridItem.tsx b/ts/components/conversation/media-gallery/MediaGridItem.tsx index 1b4822afa..a71d21163 100644 --- a/ts/components/conversation/media-gallery/MediaGridItem.tsx +++ b/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 { LightBoxOptions } from '../SessionConversation'; +import { isImageTypeSupported, isVideoTypeSupported } from '../../../util/GoogleChrome'; import { MediaItemType } from '../../lightbox/LightboxGallery'; +import { LightBoxOptions } from '../SessionConversation'; type Props = { mediaItem: MediaItemType; diff --git a/ts/components/conversation/message/message-content/ClickToTrustSender.tsx b/ts/components/conversation/message/message-content/ClickToTrustSender.tsx index d54733a1a..ba976e938 100644 --- a/ts/components/conversation/message/message-content/ClickToTrustSender.tsx +++ b/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'; diff --git a/ts/components/conversation/message/message-content/MessageAttachment.tsx b/ts/components/conversation/message/message-content/MessageAttachment.tsx index 4864af173..71a9f581e 100644 --- a/ts/components/conversation/message/message-content/MessageAttachment.tsx +++ b/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'; diff --git a/ts/components/conversation/message/message-content/MessageAuthorText.tsx b/ts/components/conversation/message/message-content/MessageAuthorText.tsx index 1f9aecc68..575b0390d 100644 --- a/ts/components/conversation/message/message-content/MessageAuthorText.tsx +++ b/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 { diff --git a/ts/components/conversation/message/message-content/MessageAvatar.tsx b/ts/components/conversation/message/message-content/MessageAvatar.tsx index aa0dc5f17..8bc7682b2 100644 --- a/ts/components/conversation/message/message-content/MessageAvatar.tsx +++ b/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'; diff --git a/ts/components/conversation/message/message-content/MessageBody.tsx b/ts/components/conversation/message/message-content/MessageBody.tsx index 4bd3c2efd..18b49b4bb 100644 --- a/ts/components/conversation/message/message-content/MessageBody.tsx +++ b/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'; diff --git a/ts/components/conversation/message/message-content/MessageContent.tsx b/ts/components/conversation/message/message-content/MessageContent.tsx index 98b509a8a..c825d0d14 100644 --- a/ts/components/conversation/message/message-content/MessageContent.tsx +++ b/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'; diff --git a/ts/components/conversation/message/message-content/MessageContentWithStatus.tsx b/ts/components/conversation/message/message-content/MessageContentWithStatus.tsx index c9941095e..68bf5a224 100644 --- a/ts/components/conversation/message/message-content/MessageContentWithStatus.tsx +++ b/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'; diff --git a/ts/components/conversation/message/message-content/MessageContextMenu.tsx b/ts/components/conversation/message/message-content/MessageContextMenu.tsx index 3b7d8927b..996f379bb 100644 --- a/ts/components/conversation/message/message-content/MessageContextMenu.tsx +++ b/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'; diff --git a/ts/components/conversation/message/message-content/MessageLinkPreview.tsx b/ts/components/conversation/message/message-content/MessageLinkPreview.tsx index 2c55150e5..4d093084d 100644 --- a/ts/components/conversation/message/message-content/MessageLinkPreview.tsx +++ b/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 { diff --git a/ts/components/conversation/message/message-content/MessageQuote.tsx b/ts/components/conversation/message/message-content/MessageQuote.tsx index 9a57d7a64..5dc2d3285 100644 --- a/ts/components/conversation/message/message-content/MessageQuote.tsx +++ b/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'; diff --git a/ts/components/conversation/message/message-content/MessageReactBar.tsx b/ts/components/conversation/message/message-content/MessageReactBar.tsx index dbd5a2bd6..475ab85ec 100644 --- a/ts/components/conversation/message/message-content/MessageReactBar.tsx +++ b/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'; diff --git a/ts/components/conversation/message/message-content/MessageReactions.tsx b/ts/components/conversation/message/message-content/MessageReactions.tsx index 223c55188..22ea520ac 100644 --- a/ts/components/conversation/message/message-content/MessageReactions.tsx +++ b/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'; diff --git a/ts/components/conversation/message/message-content/MessageStatus.tsx b/ts/components/conversation/message/message-content/MessageStatus.tsx index 41b9386fb..9ab816aa6 100644 --- a/ts/components/conversation/message/message-content/MessageStatus.tsx +++ b/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'; diff --git a/ts/components/conversation/message/message-content/MessageText.tsx b/ts/components/conversation/message/message-content/MessageText.tsx index 15ef56bd1..2392a3dc9 100644 --- a/ts/components/conversation/message/message-content/MessageText.tsx +++ b/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; diff --git a/ts/components/conversation/message/message-content/Quote.tsx b/ts/components/conversation/message/message-content/Quote.tsx index e2a29d634..d187f8711 100644 --- a/ts/components/conversation/message/message-content/Quote.tsx +++ b/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'; diff --git a/ts/components/conversation/message/message-content/quote/Quote.tsx b/ts/components/conversation/message/message-content/quote/Quote.tsx index 342ee705c..43f07f78a 100644 --- a/ts/components/conversation/message/message-content/quote/Quote.tsx +++ b/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 diff --git a/ts/components/conversation/message/message-content/quote/QuoteAuthor.tsx b/ts/components/conversation/message/message-content/quote/QuoteAuthor.tsx index 3bb91ecd8..09c609afd 100644 --- a/ts/components/conversation/message/message-content/quote/QuoteAuthor.tsx +++ b/ts/components/conversation/message/message-content/quote/QuoteAuthor.tsx @@ -1,10 +1,9 @@ -import React from 'react'; import styled from 'styled-components'; import { useQuoteAuthorName } from '../../../../../hooks/useParamSelector'; import { PubKey } from '../../../../../session/types'; +import { useSelectedIsPublic } from '../../../../../state/selectors/selectedConversation'; import { ContactName } from '../../../ContactName'; import { QuoteProps } from './Quote'; -import { useSelectedIsPublic } from '../../../../../state/selectors/selectedConversation'; const StyledQuoteAuthor = styled.div<{ isIncoming: boolean }>` color: ${props => diff --git a/ts/components/conversation/message/message-content/quote/QuoteIconContainer.tsx b/ts/components/conversation/message/message-content/quote/QuoteIconContainer.tsx index e479a3562..0f1855b03 100644 --- a/ts/components/conversation/message/message-content/quote/QuoteIconContainer.tsx +++ b/ts/components/conversation/message/message-content/quote/QuoteIconContainer.tsx @@ -1,13 +1,12 @@ -import React from 'react'; import { isEmpty, noop } from 'lodash'; import styled from 'styled-components'; -import { QuotedAttachmentThumbnailType, QuoteProps } from './Quote'; -import { GoogleChrome } from '../../../../../util'; import { MIME } from '../../../../../types'; +import { GoogleChrome } from '../../../../../util'; +import { QuotedAttachmentThumbnailType, QuoteProps } from './Quote'; -import { QuoteImage } from './QuoteImage'; import { icons, SessionIconType } from '../../../../icon'; +import { QuoteImage } from './QuoteImage'; function getObjectUrl(thumbnail: QuotedAttachmentThumbnailType | undefined): string | undefined { if (thumbnail && thumbnail.objectUrl) { diff --git a/ts/components/conversation/message/message-content/quote/QuoteImage.tsx b/ts/components/conversation/message/message-content/quote/QuoteImage.tsx index 24b29ab54..e7910a95d 100644 --- a/ts/components/conversation/message/message-content/quote/QuoteImage.tsx +++ b/ts/components/conversation/message/message-content/quote/QuoteImage.tsx @@ -1,6 +1,5 @@ -import React from 'react'; -import styled from 'styled-components'; import { isEmpty } from 'lodash'; +import styled from 'styled-components'; import { useDisableDrag } from '../../../../../hooks/useDisableDrag'; import { useEncryptedFileFetch } from '../../../../../hooks/useEncryptedFileFetch'; diff --git a/ts/components/conversation/message/message-content/quote/QuoteText.tsx b/ts/components/conversation/message/message-content/quote/QuoteText.tsx index 9caa40004..08bd22304 100644 --- a/ts/components/conversation/message/message-content/quote/QuoteText.tsx +++ b/ts/components/conversation/message/message-content/quote/QuoteText.tsx @@ -1,11 +1,11 @@ import { isEmpty } from 'lodash'; -import React from 'react'; + import styled from 'styled-components'; +import { useSelectedIsGroup } from '../../../../../state/selectors/selectedConversation'; import { MIME } from '../../../../../types'; import { GoogleChrome } from '../../../../../util'; import { MessageBody } from '../MessageBody'; import { QuoteProps } from './Quote'; -import { useSelectedIsGroup } from '../../../../../state/selectors/selectedConversation'; const StyledQuoteText = styled.div<{ isIncoming: boolean }>` display: -webkit-box; diff --git a/ts/components/conversation/message/message-item/DataExtractionNotification.tsx b/ts/components/conversation/message/message-item/DataExtractionNotification.tsx index 9d93625fe..989a635c6 100644 --- a/ts/components/conversation/message/message-item/DataExtractionNotification.tsx +++ b/ts/components/conversation/message/message-item/DataExtractionNotification.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { PropsForDataExtractionNotification } from '../../../../models/messageType'; import { SignalService } from '../../../../protobuf'; import { ExpirableReadableMessage } from './ExpirableReadableMessage'; diff --git a/ts/components/conversation/message/message-item/DateBreak.tsx b/ts/components/conversation/message/message-item/DateBreak.tsx index 2b672fa6a..012488293 100644 --- a/ts/components/conversation/message/message-item/DateBreak.tsx +++ b/ts/components/conversation/message/message-item/DateBreak.tsx @@ -1,5 +1,5 @@ import moment from 'moment'; -import React from 'react'; + import styled from 'styled-components'; const DateBreakContainer = styled.div``; diff --git a/ts/components/conversation/message/message-item/ExpirableReadableMessage.tsx b/ts/components/conversation/message/message-item/ExpirableReadableMessage.tsx index d6e5c7c12..5a1ad14cc 100644 --- a/ts/components/conversation/message/message-item/ExpirableReadableMessage.tsx +++ b/ts/components/conversation/message/message-item/ExpirableReadableMessage.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useState } from 'react'; +import { useCallback, useState } from 'react'; import { useDispatch } from 'react-redux'; import { useInterval, useMount } from 'react-use'; import styled from 'styled-components'; diff --git a/ts/components/conversation/message/message-item/GenericReadableMessage.tsx b/ts/components/conversation/message/message-item/GenericReadableMessage.tsx index 2ec184836..550b2033e 100644 --- a/ts/components/conversation/message/message-item/GenericReadableMessage.tsx +++ b/ts/components/conversation/message/message-item/GenericReadableMessage.tsx @@ -1,6 +1,6 @@ import classNames from 'classnames'; import { isNil, isString, toNumber } from 'lodash'; -import React, { useCallback, useEffect, useState } from 'react'; +import { useCallback, useEffect, useState } from 'react'; import { contextMenu } from 'react-contexify'; import { useSelector } from 'react-redux'; import styled, { keyframes } from 'styled-components'; diff --git a/ts/components/conversation/message/message-item/GroupInvitation.tsx b/ts/components/conversation/message/message-item/GroupInvitation.tsx index 90926ec50..23638c67b 100644 --- a/ts/components/conversation/message/message-item/GroupInvitation.tsx +++ b/ts/components/conversation/message/message-item/GroupInvitation.tsx @@ -1,5 +1,5 @@ import classNames from 'classnames'; -import React from 'react'; + import styled from 'styled-components'; import { acceptOpenGroupInvitation } from '../../../../interactions/messageInteractions'; diff --git a/ts/components/conversation/message/message-item/GroupUpdateMessage.tsx b/ts/components/conversation/message/message-item/GroupUpdateMessage.tsx index c16f31d46..8e8df627f 100644 --- a/ts/components/conversation/message/message-item/GroupUpdateMessage.tsx +++ b/ts/components/conversation/message/message-item/GroupUpdateMessage.tsx @@ -1,5 +1,3 @@ -import React from 'react'; - import { useConversationsUsernameWithQuoteOrFullPubkey } from '../../../../hooks/useParamSelector'; import { arrayContainsUsOnly } from '../../../../models/message'; import { diff --git a/ts/components/conversation/message/message-item/InteractionNotification.tsx b/ts/components/conversation/message/message-item/InteractionNotification.tsx index be06bee1d..4d0a3ff40 100644 --- a/ts/components/conversation/message/message-item/InteractionNotification.tsx +++ b/ts/components/conversation/message/message-item/InteractionNotification.tsx @@ -1,5 +1,3 @@ -import React from 'react'; - import { isEmpty } from 'lodash'; import styled from 'styled-components'; import { useIsPrivate, useIsPublic } from '../../../../hooks/useParamSelector'; diff --git a/ts/components/conversation/message/message-item/Message.tsx b/ts/components/conversation/message/message-item/Message.tsx index 5d44a40ee..7261798d9 100644 --- a/ts/components/conversation/message/message-item/Message.tsx +++ b/ts/components/conversation/message/message-item/Message.tsx @@ -1,5 +1,3 @@ -import React from 'react'; - import { useSelector } from 'react-redux'; import { v4 as uuidv4 } from 'uuid'; import { StateType } from '../../../../state/reducer'; diff --git a/ts/components/conversation/message/message-item/MessageRequestResponse.tsx b/ts/components/conversation/message/message-item/MessageRequestResponse.tsx index 4e84b1d7b..b3aff6395 100644 --- a/ts/components/conversation/message/message-item/MessageRequestResponse.tsx +++ b/ts/components/conversation/message/message-item/MessageRequestResponse.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { useConversationUsername } from '../../../../hooks/useParamSelector'; import { PropsForMessageRequestResponse } from '../../../../models/messageType'; import { UserUtils } from '../../../../session/utils'; diff --git a/ts/components/conversation/message/message-item/ReadableMessage.tsx b/ts/components/conversation/message/message-item/ReadableMessage.tsx index 619563732..6f82ebfd6 100644 --- a/ts/components/conversation/message/message-item/ReadableMessage.tsx +++ b/ts/components/conversation/message/message-item/ReadableMessage.tsx @@ -1,5 +1,5 @@ import { debounce, noop } from 'lodash'; -import React, { +import { AriaRole, MouseEventHandler, useCallback, diff --git a/ts/components/conversation/message/message-item/notification-bubble/CallNotification.tsx b/ts/components/conversation/message/message-item/notification-bubble/CallNotification.tsx index ea983a896..2dbdef429 100644 --- a/ts/components/conversation/message/message-item/notification-bubble/CallNotification.tsx +++ b/ts/components/conversation/message/message-item/notification-bubble/CallNotification.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { PubKey } from '../../../../../session/types'; import { diff --git a/ts/components/conversation/message/message-item/notification-bubble/NotificationBubble.tsx b/ts/components/conversation/message/message-item/notification-bubble/NotificationBubble.tsx index 959f72d8c..7f1b7e6ef 100644 --- a/ts/components/conversation/message/message-item/notification-bubble/NotificationBubble.tsx +++ b/ts/components/conversation/message/message-item/notification-bubble/NotificationBubble.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import styled from 'styled-components'; import { SessionIcon, SessionIconType } from '../../../../icon'; diff --git a/ts/components/conversation/message/reactions/Reaction.tsx b/ts/components/conversation/message/reactions/Reaction.tsx index 416c86389..307962ff2 100644 --- a/ts/components/conversation/message/reactions/Reaction.tsx +++ b/ts/components/conversation/message/reactions/Reaction.tsx @@ -1,4 +1,4 @@ -import React, { ReactElement, useRef, useState } from 'react'; +import { ReactElement, useRef, useState } from 'react'; import { useMouse } from 'react-use'; import styled from 'styled-components'; import { useRightOverlayMode } from '../../../../hooks/useUI'; diff --git a/ts/components/conversation/message/reactions/ReactionPopup.tsx b/ts/components/conversation/message/reactions/ReactionPopup.tsx index cefd352cf..1523250e9 100644 --- a/ts/components/conversation/message/reactions/ReactionPopup.tsx +++ b/ts/components/conversation/message/reactions/ReactionPopup.tsx @@ -1,11 +1,11 @@ -import React, { ReactElement, useEffect, useState } from 'react'; +import { ReactElement, useEffect, useState } from 'react'; import { useSelector } from 'react-redux'; import styled from 'styled-components'; import { Data } from '../../../../data/data'; +import { findAndFormatContact } from '../../../../models/message'; import { PubKey } from '../../../../session/types/PubKey'; import { isDarkTheme } from '../../../../state/selectors/theme'; import { nativeEmojiData } from '../../../../util/emoji'; -import { findAndFormatContact } from '../../../../models/message'; export type TipPosition = 'center' | 'left' | 'right'; diff --git a/ts/components/conversation/right-panel/RightPanel.tsx b/ts/components/conversation/right-panel/RightPanel.tsx index 8ca45ab0c..e83324832 100644 --- a/ts/components/conversation/right-panel/RightPanel.tsx +++ b/ts/components/conversation/right-panel/RightPanel.tsx @@ -1,5 +1,3 @@ -import React from 'react'; - import styled from 'styled-components'; import { useRightOverlayMode } from '../../../hooks/useUI'; import { isRtlBody } from '../../../util/i18n'; diff --git a/ts/components/conversation/right-panel/overlay/OverlayRightPanelSettings.tsx b/ts/components/conversation/right-panel/overlay/OverlayRightPanelSettings.tsx index cab16bfee..beb8b85fa 100644 --- a/ts/components/conversation/right-panel/overlay/OverlayRightPanelSettings.tsx +++ b/ts/components/conversation/right-panel/overlay/OverlayRightPanelSettings.tsx @@ -1,5 +1,5 @@ import { compact, flatten, isEqual } from 'lodash'; -import React, { useEffect, useState } from 'react'; +import { useEffect, useState } from 'react'; import { useDispatch } from 'react-redux'; import useInterval from 'react-use/lib/useInterval'; diff --git a/ts/components/conversation/right-panel/overlay/components/Header.tsx b/ts/components/conversation/right-panel/overlay/components/Header.tsx index b2a84712f..0ba4ccadc 100644 --- a/ts/components/conversation/right-panel/overlay/components/Header.tsx +++ b/ts/components/conversation/right-panel/overlay/components/Header.tsx @@ -1,4 +1,4 @@ -import React, { ReactNode } from 'react'; +import { ReactNode } from 'react'; import { useDispatch } from 'react-redux'; import styled from 'styled-components'; import { closeRightPanel } from '../../../../../state/ducks/conversations'; diff --git a/ts/components/conversation/right-panel/overlay/disappearing-messages/DisappearingModes.tsx b/ts/components/conversation/right-panel/overlay/disappearing-messages/DisappearingModes.tsx index 083a8733a..e8a6a60a7 100644 --- a/ts/components/conversation/right-panel/overlay/disappearing-messages/DisappearingModes.tsx +++ b/ts/components/conversation/right-panel/overlay/disappearing-messages/DisappearingModes.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { DisappearingMessageConversationModeType } from '../../../../../session/disappearing_messages/types'; import { PanelButtonGroup, PanelLabel } from '../../../../buttons/PanelButton'; import { PanelRadioButton } from '../../../../buttons/PanelRadioButton'; diff --git a/ts/components/conversation/right-panel/overlay/disappearing-messages/OverlayDisappearingMessages.tsx b/ts/components/conversation/right-panel/overlay/disappearing-messages/OverlayDisappearingMessages.tsx index d68f7d544..3aebe1246 100644 --- a/ts/components/conversation/right-panel/overlay/disappearing-messages/OverlayDisappearingMessages.tsx +++ b/ts/components/conversation/right-panel/overlay/disappearing-messages/OverlayDisappearingMessages.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from 'react'; +import { useEffect, useState } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import styled from 'styled-components'; import { useTimerOptionsByMode } from '../../../../../hooks/useParamSelector'; diff --git a/ts/components/conversation/right-panel/overlay/disappearing-messages/TimeOptions.tsx b/ts/components/conversation/right-panel/overlay/disappearing-messages/TimeOptions.tsx index cb8273bbb..7de69115d 100644 --- a/ts/components/conversation/right-panel/overlay/disappearing-messages/TimeOptions.tsx +++ b/ts/components/conversation/right-panel/overlay/disappearing-messages/TimeOptions.tsx @@ -1,5 +1,5 @@ import { isEmpty } from 'lodash'; -import React from 'react'; + import { TimerOptionsArray } from '../../../../../session/disappearing_messages/timerOptions'; import { PanelButtonGroup, PanelLabel } from '../../../../buttons/PanelButton'; import { PanelRadioButton } from '../../../../buttons/PanelRadioButton'; diff --git a/ts/components/conversation/right-panel/overlay/message-info/OverlayMessageInfo.tsx b/ts/components/conversation/right-panel/overlay/message-info/OverlayMessageInfo.tsx index 496babbeb..bdaeabfae 100644 --- a/ts/components/conversation/right-panel/overlay/message-info/OverlayMessageInfo.tsx +++ b/ts/components/conversation/right-panel/overlay/message-info/OverlayMessageInfo.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useEffect, useState } from 'react'; +import { useCallback, useEffect, useState } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import styled from 'styled-components'; diff --git a/ts/components/conversation/right-panel/overlay/message-info/components/AttachmentCarousel.tsx b/ts/components/conversation/right-panel/overlay/message-info/components/AttachmentCarousel.tsx index 3470c3b5f..2a299cee6 100644 --- a/ts/components/conversation/right-panel/overlay/message-info/components/AttachmentCarousel.tsx +++ b/ts/components/conversation/right-panel/overlay/message-info/components/AttachmentCarousel.tsx @@ -1,5 +1,5 @@ import { isEmpty } from 'lodash'; -import React, { useCallback, useState } from 'react'; +import { useCallback, useState } from 'react'; import styled, { CSSProperties } from 'styled-components'; import { PropsForAttachment } from '../../../../../../state/ducks/conversations'; import { getAlt, getThumbnailUrl, isVideoAttachment } from '../../../../../../types/Attachment'; diff --git a/ts/components/conversation/right-panel/overlay/message-info/components/AttachmentInfo.tsx b/ts/components/conversation/right-panel/overlay/message-info/components/AttachmentInfo.tsx index 44344b5a6..0623ec3c3 100644 --- a/ts/components/conversation/right-panel/overlay/message-info/components/AttachmentInfo.tsx +++ b/ts/components/conversation/right-panel/overlay/message-info/components/AttachmentInfo.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import styled from 'styled-components'; import { LabelWithInfo } from '.'; import { PropsForAttachment } from '../../../../../../state/ducks/conversations'; diff --git a/ts/components/conversation/right-panel/overlay/message-info/components/MessageFrom.tsx b/ts/components/conversation/right-panel/overlay/message-info/components/MessageFrom.tsx index 61db093c5..a6ee65aba 100644 --- a/ts/components/conversation/right-panel/overlay/message-info/components/MessageFrom.tsx +++ b/ts/components/conversation/right-panel/overlay/message-info/components/MessageFrom.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import styled from 'styled-components'; import { MessageInfoLabel } from '.'; import { useConversationUsername } from '../../../../../../hooks/useParamSelector'; diff --git a/ts/components/conversation/right-panel/overlay/message-info/components/MessageInfo.tsx b/ts/components/conversation/right-panel/overlay/message-info/components/MessageInfo.tsx index 1875298f0..c25c6d4bb 100644 --- a/ts/components/conversation/right-panel/overlay/message-info/components/MessageInfo.tsx +++ b/ts/components/conversation/right-panel/overlay/message-info/components/MessageInfo.tsx @@ -3,7 +3,6 @@ import { ipcRenderer } from 'electron'; import { isEmpty } from 'lodash'; import moment from 'moment'; -import React from 'react'; import styled from 'styled-components'; import { MessageFrom } from '.'; import { diff --git a/ts/components/dialog/BanOrUnbanUserDialog.tsx b/ts/components/dialog/BanOrUnbanUserDialog.tsx index 41348238c..3342976e0 100644 --- a/ts/components/dialog/BanOrUnbanUserDialog.tsx +++ b/ts/components/dialog/BanOrUnbanUserDialog.tsx @@ -1,4 +1,4 @@ -import React, { useRef, useState } from 'react'; +import { useRef, useState } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { useFocusMount } from '../../hooks/useFocusMount'; diff --git a/ts/components/dialog/DeleteAccountModal.tsx b/ts/components/dialog/DeleteAccountModal.tsx index 9b886b97e..f318ff05e 100644 --- a/ts/components/dialog/DeleteAccountModal.tsx +++ b/ts/components/dialog/DeleteAccountModal.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useState } from 'react'; +import { useCallback, useState } from 'react'; import { useDispatch } from 'react-redux'; import { SnodeAPI } from '../../session/apis/snode_api/SNodeAPI'; import { ed25519Str } from '../../session/onions/onionPath'; diff --git a/ts/components/dialog/EditProfileDialog.tsx b/ts/components/dialog/EditProfileDialog.tsx index 9ce30b02e..099db6d81 100644 --- a/ts/components/dialog/EditProfileDialog.tsx +++ b/ts/components/dialog/EditProfileDialog.tsx @@ -1,6 +1,6 @@ import { useDispatch } from 'react-redux'; // eslint-disable-next-line import/no-named-default -import { ChangeEvent, MouseEvent, default as React, ReactElement, useState } from 'react'; +import { ChangeEvent, MouseEvent, ReactElement, useState } from 'react'; import { QRCode } from 'react-qr-svg'; import styled from 'styled-components'; import { Avatar, AvatarSize } from '../avatar/Avatar'; diff --git a/ts/components/dialog/EditProfilePictureModal.tsx b/ts/components/dialog/EditProfilePictureModal.tsx index 2554c420f..0f684e723 100644 --- a/ts/components/dialog/EditProfilePictureModal.tsx +++ b/ts/components/dialog/EditProfilePictureModal.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import { useState } from 'react'; import { useDispatch } from 'react-redux'; import styled from 'styled-components'; import { clearOurAvatar, uploadOurAvatar } from '../../interactions/conversationInteractions'; diff --git a/ts/components/dialog/InviteContactsDialog.tsx b/ts/components/dialog/InviteContactsDialog.tsx index 0d0bedbe7..bf28db50e 100644 --- a/ts/components/dialog/InviteContactsDialog.tsx +++ b/ts/components/dialog/InviteContactsDialog.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import useKey from 'react-use/lib/useKey'; import _ from 'lodash'; diff --git a/ts/components/dialog/ModalContainer.tsx b/ts/components/dialog/ModalContainer.tsx index df19273f9..7092ffd90 100644 --- a/ts/components/dialog/ModalContainer.tsx +++ b/ts/components/dialog/ModalContainer.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { useSelector } from 'react-redux'; import { getAddModeratorsModal, @@ -19,23 +18,23 @@ import { getUpdateGroupNameModal, getUserDetailsModal, } from '../../state/selectors/modal'; -import { InviteContactsDialog } from './InviteContactsDialog'; +import { BanOrUnBanUserDialog } from './BanOrUnbanUserDialog'; import { DeleteAccountModal } from './DeleteAccountModal'; import { EditProfileDialog } from './EditProfileDialog'; +import { EditProfilePictureModal } from './EditProfilePictureModal'; +import { InviteContactsDialog } from './InviteContactsDialog'; +import { AddModeratorsDialog } from './ModeratorsAddDialog'; +import { RemoveModeratorsDialog } from './ModeratorsRemoveDialog'; import { OnionPathModal } from './OnionStatusPathDialog'; -import { UserDetailsDialog } from './UserDetailsDialog'; +import { ReactClearAllModal } from './ReactClearAllModal'; +import { ReactListModal } from './ReactListModal'; import { SessionConfirm } from './SessionConfirm'; +import { SessionNicknameDialog } from './SessionNicknameDialog'; import { SessionPasswordDialog } from './SessionPasswordDialog'; import { SessionSeedModal } from './SessionSeedModal'; -import { AddModeratorsDialog } from './ModeratorsAddDialog'; -import { RemoveModeratorsDialog } from './ModeratorsRemoveDialog'; import { UpdateGroupMembersDialog } from './UpdateGroupMembersDialog'; import { UpdateGroupNameDialog } from './UpdateGroupNameDialog'; -import { SessionNicknameDialog } from './SessionNicknameDialog'; -import { BanOrUnBanUserDialog } from './BanOrUnbanUserDialog'; -import { ReactListModal } from './ReactListModal'; -import { ReactClearAllModal } from './ReactClearAllModal'; -import { EditProfilePictureModal } from './EditProfilePictureModal'; +import { UserDetailsDialog } from './UserDetailsDialog'; export const ModalContainer = () => { const confirmModalState = useSelector(getConfirmModal); diff --git a/ts/components/dialog/ModeratorsAddDialog.tsx b/ts/components/dialog/ModeratorsAddDialog.tsx index b8b3b3b35..02feea9b6 100644 --- a/ts/components/dialog/ModeratorsAddDialog.tsx +++ b/ts/components/dialog/ModeratorsAddDialog.tsx @@ -1,17 +1,17 @@ -import React, { useState } from 'react'; +import { useState } from 'react'; import { useDispatch, useSelector } from 'react-redux'; +import { sogsV3AddAdmin } from '../../session/apis/open_group_api/sogsv3/sogsV3AddRemoveMods'; +import { getConversationController } from '../../session/conversations'; import { PubKey } from '../../session/types'; import { ToastUtils } from '../../session/utils'; -import { Flex } from '../basic/Flex'; -import { getConversationController } from '../../session/conversations'; import { updateAddModeratorsModal } from '../../state/ducks/modalDialog'; +import { isDarkTheme } from '../../state/selectors/theme'; +import { SessionHeaderSearchInput } from '../SessionHeaderSearchInput'; +import { SessionWrapperModal } from '../SessionWrapperModal'; +import { Flex } from '../basic/Flex'; import { SessionButton, SessionButtonType } from '../basic/SessionButton'; import { SessionSpinner } from '../basic/SessionSpinner'; -import { SessionWrapperModal } from '../SessionWrapperModal'; -import { sogsV3AddAdmin } from '../../session/apis/open_group_api/sogsv3/sogsV3AddRemoveMods'; -import { SessionHeaderSearchInput } from '../SessionHeaderSearchInput'; -import { isDarkTheme } from '../../state/selectors/theme'; type Props = { conversationId: string; diff --git a/ts/components/dialog/ModeratorsRemoveDialog.tsx b/ts/components/dialog/ModeratorsRemoveDialog.tsx index 7436b0eda..0a0b3496f 100644 --- a/ts/components/dialog/ModeratorsRemoveDialog.tsx +++ b/ts/components/dialog/ModeratorsRemoveDialog.tsx @@ -1,5 +1,5 @@ -import React, { useState } from 'react'; import { compact } from 'lodash'; +import { useState } from 'react'; import { useDispatch } from 'react-redux'; import { getConversationController } from '../../session/conversations'; @@ -7,13 +7,13 @@ import { PubKey } from '../../session/types'; import { ToastUtils } from '../../session/utils'; import { Flex } from '../basic/Flex'; +import { useConversationPropsById } from '../../hooks/useParamSelector'; +import { sogsV3RemoveAdmins } from '../../session/apis/open_group_api/sogsv3/sogsV3AddRemoveMods'; import { updateRemoveModeratorsModal } from '../../state/ducks/modalDialog'; +import { MemberListItem } from '../MemberListItem'; import { SessionWrapperModal } from '../SessionWrapperModal'; import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton'; import { SessionSpinner } from '../basic/SessionSpinner'; -import { MemberListItem } from '../MemberListItem'; -import { useConversationPropsById } from '../../hooks/useParamSelector'; -import { sogsV3RemoveAdmins } from '../../session/apis/open_group_api/sogsv3/sogsV3AddRemoveMods'; type Props = { conversationId: string; diff --git a/ts/components/dialog/OnionStatusPathDialog.tsx b/ts/components/dialog/OnionStatusPathDialog.tsx index 3d5917922..cb206b64f 100644 --- a/ts/components/dialog/OnionStatusPathDialog.tsx +++ b/ts/components/dialog/OnionStatusPathDialog.tsx @@ -1,5 +1,4 @@ import { shell } from 'electron'; -import React from 'react'; import { useDispatch, useSelector } from 'react-redux'; import useHover from 'react-use/lib/useHover'; diff --git a/ts/components/dialog/ReactClearAllModal.tsx b/ts/components/dialog/ReactClearAllModal.tsx index fa3a07b6e..836eee83e 100644 --- a/ts/components/dialog/ReactClearAllModal.tsx +++ b/ts/components/dialog/ReactClearAllModal.tsx @@ -1,14 +1,14 @@ -import React, { ReactElement, useState } from 'react'; +import { ReactElement, useState } from 'react'; import { useDispatch } from 'react-redux'; import styled from 'styled-components'; import { useMessageReactsPropsById } from '../../hooks/useParamSelector'; import { clearSogsReactionByServerId } from '../../session/apis/open_group_api/sogsv3/sogsV3ClearReaction'; import { getConversationController } from '../../session/conversations'; import { updateReactClearAllModal } from '../../state/ducks/modalDialog'; +import { SessionWrapperModal } from '../SessionWrapperModal'; import { Flex } from '../basic/Flex'; import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton'; import { SessionSpinner } from '../basic/SessionSpinner'; -import { SessionWrapperModal } from '../SessionWrapperModal'; type Props = { reaction: string; diff --git a/ts/components/dialog/ReactListModal.tsx b/ts/components/dialog/ReactListModal.tsx index b6ac1c840..5606920d4 100644 --- a/ts/components/dialog/ReactListModal.tsx +++ b/ts/components/dialog/ReactListModal.tsx @@ -1,9 +1,10 @@ import { isEmpty, isEqual } from 'lodash'; -import React, { ReactElement, useEffect, useMemo, useState } from 'react'; +import { ReactElement, useEffect, useMemo, useState } from 'react'; import { useDispatch } from 'react-redux'; import styled from 'styled-components'; import { Data } from '../../data/data'; import { useMessageReactsPropsById } from '../../hooks/useParamSelector'; +import { findAndFormatContact } from '../../models/message'; import { isUsAnySogsFromCache } from '../../session/apis/open_group_api/sogsv3/knownBlindedkeys'; import { UserUtils } from '../../session/utils'; import { @@ -18,6 +19,7 @@ import { import { SortedReactionList } from '../../types/Reaction'; import { nativeEmojiData } from '../../util/emoji'; import { Reactions } from '../../util/reactions'; +import { SessionWrapperModal } from '../SessionWrapperModal'; import { Avatar, AvatarSize } from '../avatar/Avatar'; import { Flex } from '../basic/Flex'; import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton'; @@ -25,8 +27,6 @@ import { SessionHtmlRenderer } from '../basic/SessionHTMLRenderer'; import { ContactName } from '../conversation/ContactName'; import { MessageReactions } from '../conversation/message/message-content/MessageReactions'; import { SessionIconButton } from '../icon'; -import { SessionWrapperModal } from '../SessionWrapperModal'; -import { findAndFormatContact } from '../../models/message'; const StyledReactListContainer = styled(Flex)` width: 376px; diff --git a/ts/components/dialog/SessionConfirm.tsx b/ts/components/dialog/SessionConfirm.tsx index 932a8a66c..9215075b1 100644 --- a/ts/components/dialog/SessionConfirm.tsx +++ b/ts/components/dialog/SessionConfirm.tsx @@ -1,5 +1,5 @@ import { shell } from 'electron'; -import React, { Dispatch, useEffect, useState } from 'react'; +import { Dispatch, useEffect, useState } from 'react'; import { useDispatch } from 'react-redux'; import styled from 'styled-components'; import { useLastMessage } from '../../hooks/useParamSelector'; diff --git a/ts/components/dialog/SessionNicknameDialog.tsx b/ts/components/dialog/SessionNicknameDialog.tsx index 008d34185..5e1b0a263 100644 --- a/ts/components/dialog/SessionNicknameDialog.tsx +++ b/ts/components/dialog/SessionNicknameDialog.tsx @@ -1,13 +1,13 @@ -import React, { useState } from 'react'; import _ from 'lodash'; +import { useState } from 'react'; import { useDispatch } from 'react-redux'; import { getConversationController } from '../../session/conversations'; -import { SpacerLG } from '../basic/Text'; import { changeNickNameModal } from '../../state/ducks/modalDialog'; -import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton'; import { SessionWrapperModal } from '../SessionWrapperModal'; +import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton'; +import { SpacerLG } from '../basic/Text'; type Props = { conversationId: string; diff --git a/ts/components/dialog/SessionPasswordDialog.tsx b/ts/components/dialog/SessionPasswordDialog.tsx index 1eafcf538..655bf5116 100644 --- a/ts/components/dialog/SessionPasswordDialog.tsx +++ b/ts/components/dialog/SessionPasswordDialog.tsx @@ -1,16 +1,17 @@ /* eslint-disable @typescript-eslint/no-misused-promises */ -import React from 'react'; + import autoBind from 'auto-bind'; -import { ToastUtils } from '../../session/utils'; +import { Component } from 'react'; import { Data } from '../../data/data'; -import { SpacerSM } from '../basic/Text'; +import { ToastUtils } from '../../session/utils'; import { sessionPassword } from '../../state/ducks/modalDialog'; import { LocalizerKeys } from '../../types/LocalizerKeys'; -import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton'; -import { SessionWrapperModal } from '../SessionWrapperModal'; -import { matchesHash, validatePassword } from '../../util/passwordUtils'; import { assertUnreachable } from '../../types/sqlSharedTypes'; +import { matchesHash, validatePassword } from '../../util/passwordUtils'; +import { SessionWrapperModal } from '../SessionWrapperModal'; +import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton'; +import { SpacerSM } from '../basic/Text'; export type PasswordAction = 'set' | 'change' | 'remove' | 'enter'; @@ -26,7 +27,7 @@ interface State { currentPasswordRetypeEntered: string | null; } -export class SessionPasswordDialog extends React.Component { +export class SessionPasswordDialog extends Component { private passportInput: HTMLInputElement | null = null; constructor(props: any) { diff --git a/ts/components/dialog/SessionSeedModal.tsx b/ts/components/dialog/SessionSeedModal.tsx index ba6eba3a0..e52f0995a 100644 --- a/ts/components/dialog/SessionSeedModal.tsx +++ b/ts/components/dialog/SessionSeedModal.tsx @@ -1,4 +1,4 @@ -import React, { MouseEvent, useState } from 'react'; +import { MouseEvent, useState } from 'react'; import { QRCode } from 'react-qr-svg'; import { useDispatch } from 'react-redux'; import useMount from 'react-use/lib/useMount'; diff --git a/ts/components/dialog/UpdateGroupMembersDialog.tsx b/ts/components/dialog/UpdateGroupMembersDialog.tsx index 070a1c2b0..099eface0 100644 --- a/ts/components/dialog/UpdateGroupMembersDialog.tsx +++ b/ts/components/dialog/UpdateGroupMembersDialog.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import _ from 'lodash'; import { useDispatch } from 'react-redux'; import useKey from 'react-use/lib/useKey'; @@ -6,11 +5,11 @@ import styled from 'styled-components'; import { ToastUtils, UserUtils } from '../../session/utils'; -import { SpacerLG, Text } from '../basic/Text'; import { updateGroupMembersModal } from '../../state/ducks/modalDialog'; -import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton'; import { MemberListItem } from '../MemberListItem'; import { SessionWrapperModal } from '../SessionWrapperModal'; +import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton'; +import { SpacerLG, Text } from '../basic/Text'; import { useConversationPropsById, useWeAreAdmin } from '../../hooks/useParamSelector'; diff --git a/ts/components/dialog/UpdateGroupNameDialog.tsx b/ts/components/dialog/UpdateGroupNameDialog.tsx index 63b59276f..6dbe6a40a 100644 --- a/ts/components/dialog/UpdateGroupNameDialog.tsx +++ b/ts/components/dialog/UpdateGroupNameDialog.tsx @@ -1,18 +1,19 @@ /* eslint-disable @typescript-eslint/no-misused-promises */ -import React from 'react'; -import classNames from 'classnames'; + import autoBind from 'auto-bind'; +import classNames from 'classnames'; -import { Avatar, AvatarSize } from '../avatar/Avatar'; -import { SpacerMD } from '../basic/Text'; -import { updateGroupNameModal } from '../../state/ducks/modalDialog'; +import { Component } from 'react'; import { ConversationModel } from '../../models/conversation'; import { getConversationController } from '../../session/conversations'; -import { SessionWrapperModal } from '../SessionWrapperModal'; -import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton'; -import { initiateOpenGroupUpdate } from '../../session/group/open-group'; import { initiateClosedGroupUpdate } from '../../session/group/closed-group'; +import { initiateOpenGroupUpdate } from '../../session/group/open-group'; +import { updateGroupNameModal } from '../../state/ducks/modalDialog'; import { pickFileForAvatar } from '../../types/attachments/VisualAttachment'; +import { SessionWrapperModal } from '../SessionWrapperModal'; +import { Avatar, AvatarSize } from '../avatar/Avatar'; +import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton'; +import { SpacerMD } from '../basic/Text'; type Props = { conversationId: string; @@ -26,7 +27,7 @@ interface State { newAvatarObjecturl: string | null; } -export class UpdateGroupNameDialog extends React.Component { +export class UpdateGroupNameDialog extends Component { private readonly convo: ConversationModel; constructor(props: Props) { diff --git a/ts/components/dialog/UserDetailsDialog.tsx b/ts/components/dialog/UserDetailsDialog.tsx index 87be42e49..37fc5edf0 100644 --- a/ts/components/dialog/UserDetailsDialog.tsx +++ b/ts/components/dialog/UserDetailsDialog.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import { useState } from 'react'; import useCopyToClipboard from 'react-use/lib/useCopyToClipboard'; diff --git a/ts/components/icon/DropDownAndToggleButton.tsx b/ts/components/icon/DropDownAndToggleButton.tsx index fccb8a3db..a441b99fe 100644 --- a/ts/components/icon/DropDownAndToggleButton.tsx +++ b/ts/components/icon/DropDownAndToggleButton.tsx @@ -1,6 +1,5 @@ -import React from 'react'; -import styled from 'styled-components'; import { contextMenu } from 'react-contexify'; +import styled from 'styled-components'; type SProps = { onArrowClick: (e: React.MouseEvent) => void; diff --git a/ts/components/icon/MemberAvatarPlaceHolder.tsx b/ts/components/icon/MemberAvatarPlaceHolder.tsx index 1616ff814..c2a4bbffc 100644 --- a/ts/components/icon/MemberAvatarPlaceHolder.tsx +++ b/ts/components/icon/MemberAvatarPlaceHolder.tsx @@ -1,5 +1,3 @@ -import React from 'react'; - export const MemberAvatarPlaceHolder = () => { return ( diff --git a/ts/components/icon/SessionIcon.tsx b/ts/components/icon/SessionIcon.tsx index e190abf42..3da4a9e5c 100644 --- a/ts/components/icon/SessionIcon.tsx +++ b/ts/components/icon/SessionIcon.tsx @@ -1,6 +1,6 @@ -import React from 'react'; import styled, { css, keyframes } from 'styled-components'; +import { memo } from 'react'; import { icons, SessionIconSize, SessionIconType } from '.'; export type SessionIconProps = { @@ -118,7 +118,7 @@ const animation = (props: { return undefined; }; -const Svg = React.memo(styled.svg` +const Svg = memo(styled.svg` width: ${props => props.width}; transform: ${props => `rotate(${props.iconRotation}deg)`}; ${props => animation(props)}; diff --git a/ts/components/icon/SessionIconButton.tsx b/ts/components/icon/SessionIconButton.tsx index b572f6619..852771dd2 100644 --- a/ts/components/icon/SessionIconButton.tsx +++ b/ts/components/icon/SessionIconButton.tsx @@ -1,13 +1,13 @@ -import React, { KeyboardEvent } from 'react'; import classNames from 'classnames'; import _ from 'lodash'; +import { KeyboardEvent, MouseEvent, forwardRef, memo } from 'react'; import styled from 'styled-components'; import { SessionIcon, SessionIconProps } from '.'; import { SessionNotificationCount } from './SessionNotificationCount'; interface SProps extends SessionIconProps { - onClick?: (e?: React.MouseEvent) => void; + onClick?: (e?: MouseEvent) => void; notificationCount?: number; isSelected?: boolean; isHidden?: boolean; @@ -40,7 +40,7 @@ const StyledSessionIconButton = styled.div<{ color?: string; isSelected?: boolea `; // eslint-disable-next-line react/display-name -const SessionIconButtonInner = React.forwardRef((props, ref) => { +const SessionIconButtonInner = forwardRef((props, ref) => { const { iconType, iconSize, @@ -62,7 +62,7 @@ const SessionIconButtonInner = React.forwardRef((props, style, tabIndex, } = props; - const clickHandler = (e: React.MouseEvent) => { + const clickHandler = (e: MouseEvent) => { if (props.onClick) { e.stopPropagation(); props.onClick(e); @@ -107,4 +107,4 @@ const SessionIconButtonInner = React.forwardRef((props, ); }); -export const SessionIconButton = React.memo(SessionIconButtonInner, _.isEqual); +export const SessionIconButton = memo(SessionIconButtonInner, _.isEqual); diff --git a/ts/components/icon/SessionNotificationCount.tsx b/ts/components/icon/SessionNotificationCount.tsx index 26281b828..74da84418 100644 --- a/ts/components/icon/SessionNotificationCount.tsx +++ b/ts/components/icon/SessionNotificationCount.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import styled from 'styled-components'; type Props = { diff --git a/ts/components/leftpane/ActionsPanel.tsx b/ts/components/leftpane/ActionsPanel.tsx index 0ba1982bb..072c6adc2 100644 --- a/ts/components/leftpane/ActionsPanel.tsx +++ b/ts/components/leftpane/ActionsPanel.tsx @@ -1,5 +1,5 @@ import { ipcRenderer } from 'electron'; -import React, { useEffect, useState } from 'react'; +import { useEffect, useState } from 'react'; import { debounce, isEmpty, isString } from 'lodash'; import { useDispatch, useSelector } from 'react-redux'; diff --git a/ts/components/leftpane/ContactListItem.tsx b/ts/components/leftpane/ContactListItem.tsx index 818bfc4de..d92e82fc6 100644 --- a/ts/components/leftpane/ContactListItem.tsx +++ b/ts/components/leftpane/ContactListItem.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import classNames from 'classnames'; import { useConversationUsername, useIsMe, useIsPrivate } from '../../hooks/useParamSelector'; import { Avatar, AvatarSize } from '../avatar/Avatar'; diff --git a/ts/components/leftpane/LeftPane.tsx b/ts/components/leftpane/LeftPane.tsx index 62e9480f8..2629c79f8 100644 --- a/ts/components/leftpane/LeftPane.tsx +++ b/ts/components/leftpane/LeftPane.tsx @@ -1,5 +1,3 @@ -import React from 'react'; - import { useSelector } from 'react-redux'; import styled from 'styled-components'; import { SectionType } from '../../state/ducks/section'; diff --git a/ts/components/leftpane/LeftPaneMessageSection.tsx b/ts/components/leftpane/LeftPaneMessageSection.tsx index 0ed21cf58..f3d04411e 100644 --- a/ts/components/leftpane/LeftPaneMessageSection.tsx +++ b/ts/components/leftpane/LeftPaneMessageSection.tsx @@ -1,5 +1,6 @@ import autoBind from 'auto-bind'; -import React from 'react'; + +import { Component } from 'react'; import { useSelector } from 'react-redux'; import { AutoSizer, List, ListRowProps } from 'react-virtualized'; import styled from 'styled-components'; @@ -65,7 +66,7 @@ const ClosableOverlay = () => { } }; -export class LeftPaneMessageSection extends React.Component { +export class LeftPaneMessageSection extends Component { public constructor(props: Props) { super(props); autoBind(this); diff --git a/ts/components/leftpane/LeftPaneSectionHeader.tsx b/ts/components/leftpane/LeftPaneSectionHeader.tsx index 88a5f74fb..9c39ea224 100644 --- a/ts/components/leftpane/LeftPaneSectionHeader.tsx +++ b/ts/components/leftpane/LeftPaneSectionHeader.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { useDispatch, useSelector } from 'react-redux'; import styled from 'styled-components'; import { recoveryPhraseModal } from '../../state/ducks/modalDialog'; diff --git a/ts/components/leftpane/LeftPaneSettingSection.tsx b/ts/components/leftpane/LeftPaneSettingSection.tsx index b2dd84315..cfc814359 100644 --- a/ts/components/leftpane/LeftPaneSettingSection.tsx +++ b/ts/components/leftpane/LeftPaneSettingSection.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { useDispatch, useSelector } from 'react-redux'; import styled from 'styled-components'; diff --git a/ts/components/leftpane/MessageRequestsBanner.tsx b/ts/components/leftpane/MessageRequestsBanner.tsx index 8f06088d3..159340efc 100644 --- a/ts/components/leftpane/MessageRequestsBanner.tsx +++ b/ts/components/leftpane/MessageRequestsBanner.tsx @@ -1,13 +1,12 @@ -import React from 'react'; import { contextMenu } from 'react-contexify'; import { createPortal } from 'react-dom'; import { useSelector } from 'react-redux'; import styled from 'styled-components'; import { getUnreadConversationRequests } from '../../state/selectors/conversations'; +import { isSearching } from '../../state/selectors/search'; import { getHideMessageRequestBanner } from '../../state/selectors/userConfig'; import { SessionIcon, SessionIconSize, SessionIconType } from '../icon'; import { MessageRequestBannerContextMenu } from '../menu/MessageRequestBannerContextMenu'; -import { isSearching } from '../../state/selectors/search'; const StyledMessageRequestBanner = styled.div` height: 64px; diff --git a/ts/components/leftpane/conversation-list-item/ConversationListItem.tsx b/ts/components/leftpane/conversation-list-item/ConversationListItem.tsx index f032d36ca..f5d418a9b 100644 --- a/ts/components/leftpane/conversation-list-item/ConversationListItem.tsx +++ b/ts/components/leftpane/conversation-list-item/ConversationListItem.tsx @@ -1,6 +1,6 @@ import classNames from 'classnames'; import { isNil } from 'lodash'; -import React, { useCallback } from 'react'; +import { useCallback } from 'react'; import { contextMenu } from 'react-contexify'; import { createPortal } from 'react-dom'; import { useDispatch, useSelector } from 'react-redux'; diff --git a/ts/components/leftpane/conversation-list-item/ConvoIdContext.tsx b/ts/components/leftpane/conversation-list-item/ConvoIdContext.tsx index 685460f63..638fe8c3d 100644 --- a/ts/components/leftpane/conversation-list-item/ConvoIdContext.tsx +++ b/ts/components/leftpane/conversation-list-item/ConvoIdContext.tsx @@ -1,10 +1,10 @@ -import React, { useContext } from 'react'; +import { createContext, useContext } from 'react'; /** * This React context is used to share deeply in the tree of the ConversationListItem what is the ID we are currently rendering. * This is to avoid passing the prop to all the subtree component */ -const ContextConversationId = React.createContext(''); +const ContextConversationId = createContext(''); export const ContextConversationProvider = ContextConversationId.Provider; diff --git a/ts/components/leftpane/conversation-list-item/HeaderItem.tsx b/ts/components/leftpane/conversation-list-item/HeaderItem.tsx index 1f435bfb1..6588dc4b8 100644 --- a/ts/components/leftpane/conversation-list-item/HeaderItem.tsx +++ b/ts/components/leftpane/conversation-list-item/HeaderItem.tsx @@ -1,5 +1,5 @@ import classNames from 'classnames'; -import React from 'react'; + import { useSelector } from 'react-redux'; import styled from 'styled-components'; import { Data } from '../../../data/data'; diff --git a/ts/components/leftpane/conversation-list-item/InteractionItem.tsx b/ts/components/leftpane/conversation-list-item/InteractionItem.tsx index 0e7b0031f..3929995de 100644 --- a/ts/components/leftpane/conversation-list-item/InteractionItem.tsx +++ b/ts/components/leftpane/conversation-list-item/InteractionItem.tsx @@ -1,5 +1,5 @@ import { isEmpty } from 'lodash'; -import React, { useEffect, useState } from 'react'; +import { useEffect, useState } from 'react'; import styled from 'styled-components'; import { useIsPrivate, useIsPublic } from '../../../hooks/useParamSelector'; diff --git a/ts/components/leftpane/conversation-list-item/MessageItem.tsx b/ts/components/leftpane/conversation-list-item/MessageItem.tsx index e4fc216fb..035ca8802 100644 --- a/ts/components/leftpane/conversation-list-item/MessageItem.tsx +++ b/ts/components/leftpane/conversation-list-item/MessageItem.tsx @@ -1,6 +1,6 @@ import classNames from 'classnames'; import { isEmpty } from 'lodash'; -import React from 'react'; + import { useSelector } from 'react-redux'; import { useHasUnread, diff --git a/ts/components/leftpane/conversation-list-item/UserItem.tsx b/ts/components/leftpane/conversation-list-item/UserItem.tsx index 0526bcb2f..d365ebe34 100644 --- a/ts/components/leftpane/conversation-list-item/UserItem.tsx +++ b/ts/components/leftpane/conversation-list-item/UserItem.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { useSelector } from 'react-redux'; import { useConversationRealName, diff --git a/ts/components/leftpane/overlay/OverlayClosedGroup.tsx b/ts/components/leftpane/overlay/OverlayClosedGroup.tsx index f141f3809..5c88da760 100644 --- a/ts/components/leftpane/overlay/OverlayClosedGroup.tsx +++ b/ts/components/leftpane/overlay/OverlayClosedGroup.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import { useState } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import useKey from 'react-use/lib/useKey'; diff --git a/ts/components/leftpane/overlay/OverlayCommunity.tsx b/ts/components/leftpane/overlay/OverlayCommunity.tsx index e97210c09..6d8cf4d9d 100644 --- a/ts/components/leftpane/overlay/OverlayCommunity.tsx +++ b/ts/components/leftpane/overlay/OverlayCommunity.tsx @@ -1,5 +1,5 @@ /* eslint-disable @typescript-eslint/no-misused-promises */ -import React, { useState } from 'react'; +import { useState } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import useKey from 'react-use/lib/useKey'; diff --git a/ts/components/leftpane/overlay/OverlayHeader.tsx b/ts/components/leftpane/overlay/OverlayHeader.tsx index b2f150990..4616c0dab 100644 --- a/ts/components/leftpane/overlay/OverlayHeader.tsx +++ b/ts/components/leftpane/overlay/OverlayHeader.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { useDispatch } from 'react-redux'; import styled from 'styled-components'; import { setLeftOverlayMode } from '../../../state/ducks/section'; diff --git a/ts/components/leftpane/overlay/OverlayMessage.tsx b/ts/components/leftpane/overlay/OverlayMessage.tsx index 59f113574..ddaa78a06 100644 --- a/ts/components/leftpane/overlay/OverlayMessage.tsx +++ b/ts/components/leftpane/overlay/OverlayMessage.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import { useState } from 'react'; import useKey from 'react-use/lib/useKey'; import styled from 'styled-components'; diff --git a/ts/components/leftpane/overlay/OverlayMessageRequest.tsx b/ts/components/leftpane/overlay/OverlayMessageRequest.tsx index 65f5b520d..f86e164c7 100644 --- a/ts/components/leftpane/overlay/OverlayMessageRequest.tsx +++ b/ts/components/leftpane/overlay/OverlayMessageRequest.tsx @@ -1,5 +1,3 @@ -import React from 'react'; - import { useDispatch, useSelector } from 'react-redux'; import useKey from 'react-use/lib/useKey'; import styled from 'styled-components'; diff --git a/ts/components/leftpane/overlay/SessionJoinableDefaultRooms.tsx b/ts/components/leftpane/overlay/SessionJoinableDefaultRooms.tsx index 332521386..e7e6ca22b 100644 --- a/ts/components/leftpane/overlay/SessionJoinableDefaultRooms.tsx +++ b/ts/components/leftpane/overlay/SessionJoinableDefaultRooms.tsx @@ -1,4 +1,4 @@ -import React, { useEffect } from 'react'; +import { useEffect } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import styled from 'styled-components'; diff --git a/ts/components/leftpane/overlay/choose-action/ContactRow.tsx b/ts/components/leftpane/overlay/choose-action/ContactRow.tsx index be65ad673..3bf2e95cc 100644 --- a/ts/components/leftpane/overlay/choose-action/ContactRow.tsx +++ b/ts/components/leftpane/overlay/choose-action/ContactRow.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { useDispatch } from 'react-redux'; import styled, { CSSProperties } from 'styled-components'; import { useAvatarPath } from '../../../../hooks/useParamSelector'; diff --git a/ts/components/leftpane/overlay/choose-action/ContactsListWithBreaks.tsx b/ts/components/leftpane/overlay/choose-action/ContactsListWithBreaks.tsx index 1fd71411c..5ba34e5d9 100644 --- a/ts/components/leftpane/overlay/choose-action/ContactsListWithBreaks.tsx +++ b/ts/components/leftpane/overlay/choose-action/ContactsListWithBreaks.tsx @@ -1,5 +1,5 @@ import { isString } from 'lodash'; -import React from 'react'; + import { useSelector } from 'react-redux'; import { AutoSizer, Index, List, ListRowProps } from 'react-virtualized'; import styled from 'styled-components'; diff --git a/ts/components/leftpane/overlay/choose-action/OverlayChooseAction.tsx b/ts/components/leftpane/overlay/choose-action/OverlayChooseAction.tsx index 210e512a2..9d20c82cb 100644 --- a/ts/components/leftpane/overlay/choose-action/OverlayChooseAction.tsx +++ b/ts/components/leftpane/overlay/choose-action/OverlayChooseAction.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useEffect } from 'react'; +import { useCallback, useEffect } from 'react'; import { isEmpty, isString } from 'lodash'; import { useDispatch } from 'react-redux'; diff --git a/ts/components/lightbox/Lightbox.tsx b/ts/components/lightbox/Lightbox.tsx index 5b80915b4..4e2577d0b 100644 --- a/ts/components/lightbox/Lightbox.tsx +++ b/ts/components/lightbox/Lightbox.tsx @@ -1,17 +1,17 @@ -import React, { useRef } from 'react'; +import { useRef } from 'react'; -import useUnmount from 'react-use/lib/useUnmount'; -import { useDispatch } from 'react-redux'; import { isUndefined } from 'lodash'; +import { useDispatch } from 'react-redux'; +import useUnmount from 'react-use/lib/useUnmount'; import styled from 'styled-components'; import { useDisableDrag } from '../../hooks/useDisableDrag'; import { useEncryptedFileFetch } from '../../hooks/useEncryptedFileFetch'; import { showLightBox } from '../../state/ducks/conversations'; +import * as MIME from '../../types/MIME'; +import { assertUnreachable } from '../../types/sqlSharedTypes'; import { GoogleChrome } from '../../util'; import { Flex } from '../basic/Flex'; import { SessionIconButton, SessionIconSize, SessionIconType } from '../icon'; -import * as MIME from '../../types/MIME'; -import { assertUnreachable } from '../../types/sqlSharedTypes'; const colorSVG = (url: string, color: string) => { return { diff --git a/ts/components/lightbox/LightboxGallery.tsx b/ts/components/lightbox/LightboxGallery.tsx index 5ff18f6d5..f89e26106 100644 --- a/ts/components/lightbox/LightboxGallery.tsx +++ b/ts/components/lightbox/LightboxGallery.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useEffect, useState } from 'react'; +import { useCallback, useEffect, useState } from 'react'; import { useDispatch } from 'react-redux'; import useKey from 'react-use/lib/useKey'; diff --git a/ts/components/menu/ConversationListItemContextMenu.tsx b/ts/components/menu/ConversationListItemContextMenu.tsx index 9e3e0680b..51ce97ca6 100644 --- a/ts/components/menu/ConversationListItemContextMenu.tsx +++ b/ts/components/menu/ConversationListItemContextMenu.tsx @@ -1,12 +1,12 @@ -import React from 'react'; import { Item, Menu } from 'react-contexify'; import { useSelector } from 'react-redux'; import { useIsPinned, useIsPrivate, useIsPrivateAndFriend } from '../../hooks/useParamSelector'; import { getConversationController } from '../../session/conversations'; +import { isSearching } from '../../state/selectors/search'; import { getIsMessageSection } from '../../state/selectors/section'; -import { useConvoIdFromContext } from '../leftpane/conversation-list-item/ConvoIdContext'; import { SessionContextMenuContainer } from '../SessionContextMenuContainer'; +import { useConvoIdFromContext } from '../leftpane/conversation-list-item/ConvoIdContext'; import { AcceptMsgRequestMenuItem, BanMenuItem, @@ -17,16 +17,15 @@ import { DeclineAndBlockMsgRequestMenuItem, DeclineMsgRequestMenuItem, DeleteMessagesMenuItem, + DeletePrivateConversationMenuItem, InviteContactMenuItem, LeaveGroupOrCommunityMenuItem, MarkAllReadMenuItem, MarkConversationUnreadMenuItem, + NotificationForConvoMenuItem, ShowUserDetailsMenuItem, UnbanMenuItem, - DeletePrivateConversationMenuItem, - NotificationForConvoMenuItem, } from './Menu'; -import { isSearching } from '../../state/selectors/search'; export type PropsContextConversationItem = { triggerId: string; diff --git a/ts/components/menu/Menu.tsx b/ts/components/menu/Menu.tsx index 465012594..ad51778ac 100644 --- a/ts/components/menu/Menu.tsx +++ b/ts/components/menu/Menu.tsx @@ -1,5 +1,3 @@ -import React from 'react'; - import { Item, Submenu } from 'react-contexify'; import { useDispatch, useSelector } from 'react-redux'; import { diff --git a/ts/components/menu/MessageRequestBannerContextMenu.tsx b/ts/components/menu/MessageRequestBannerContextMenu.tsx index a8ef67639..da3d337ce 100644 --- a/ts/components/menu/MessageRequestBannerContextMenu.tsx +++ b/ts/components/menu/MessageRequestBannerContextMenu.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { Item, Menu } from 'react-contexify'; import { useDispatch } from 'react-redux'; diff --git a/ts/components/registration/AccentText.tsx b/ts/components/registration/AccentText.tsx index 6a099689d..8e7920e88 100644 --- a/ts/components/registration/AccentText.tsx +++ b/ts/components/registration/AccentText.tsx @@ -1,5 +1,3 @@ -import React from 'react'; - export const AccentText: React.FC = () => (
{window.i18n('beginYourSession')}
diff --git a/ts/components/registration/RegistrationStages.tsx b/ts/components/registration/RegistrationStages.tsx index fe3e196d6..2109ad15e 100644 --- a/ts/components/registration/RegistrationStages.tsx +++ b/ts/components/registration/RegistrationStages.tsx @@ -1,12 +1,12 @@ -import React, { createContext, useEffect, useState } from 'react'; -import { SignUpMode, SignUpTab } from './SignUpTab'; -import { SignInMode, SignInTab } from './SignInTab'; +import { createContext, useEffect, useMemo, useState } from 'react'; import { Data } from '../../data/data'; +import { SettingsKey } from '../../data/settings-key'; import { getSwarmPollingInstance } from '../../session/apis/snode_api'; import { getConversationController } from '../../session/conversations'; import { mnDecode } from '../../session/crypto/mnemonic'; import { PromiseUtils, StringUtils, ToastUtils } from '../../session/utils'; import { TaskTimedOutError } from '../../session/utils/Promise'; +import { fromHex } from '../../session/utils/String'; import { trigger } from '../../shims/events'; import { generateMnemonic, @@ -14,9 +14,9 @@ import { sessionGenerateKeyPair, signInByLinkingDevice, } from '../../util/accountManager'; -import { fromHex } from '../../session/utils/String'; -import { setSignInByLinking, setSignWithRecoveryPhrase, Storage } from '../../util/storage'; -import { SettingsKey } from '../../data/settings-key'; +import { Storage, setSignInByLinking, setSignWithRecoveryPhrase } from '../../util/storage'; +import { SignInMode, SignInTab } from './SignInTab'; +import { SignUpMode, SignUpTab } from './SignUpTab'; export async function resetRegistration() { await Data.removeAll(); @@ -212,7 +212,7 @@ export const RegistrationStages = () => { // eslint-disable-next-line react-hooks/exhaustive-deps }, []); - const memoizedValue = React.useMemo(() => { + const memoizedValue = useMemo(() => { return { registrationPhase, signInMode, diff --git a/ts/components/registration/RegistrationUserDetails.tsx b/ts/components/registration/RegistrationUserDetails.tsx index ab17a76e0..eb264a7ac 100644 --- a/ts/components/registration/RegistrationUserDetails.tsx +++ b/ts/components/registration/RegistrationUserDetails.tsx @@ -1,5 +1,5 @@ import classNames from 'classnames'; -import React from 'react'; + import { MAX_USERNAME_BYTES } from '../../session/constants'; import { SessionInput } from '../basic/SessionInput'; diff --git a/ts/components/registration/SessionRegistrationView.tsx b/ts/components/registration/SessionRegistrationView.tsx index 0e1e24b4b..d26ca4dda 100644 --- a/ts/components/registration/SessionRegistrationView.tsx +++ b/ts/components/registration/SessionRegistrationView.tsx @@ -1,15 +1,15 @@ -import React from 'react'; +import { useEffect } from 'react'; import { AccentText } from './AccentText'; -import { RegistrationStages } from './RegistrationStages'; -import { SessionIcon } from '../icon'; -import { SessionToastContainer } from '../SessionToastContainer'; import { SessionTheme } from '../../themes/SessionTheme'; -import { Flex } from '../basic/Flex'; import { setSignInByLinking } from '../../util/storage'; +import { SessionToastContainer } from '../SessionToastContainer'; +import { Flex } from '../basic/Flex'; +import { SessionIcon } from '../icon'; +import { RegistrationStages } from './RegistrationStages'; export const SessionRegistrationView = () => { - React.useEffect(() => { + useEffect(() => { void setSignInByLinking(false); }, []); return ( diff --git a/ts/components/registration/SignInTab.tsx b/ts/components/registration/SignInTab.tsx index 088d4bc36..ea9f573ac 100644 --- a/ts/components/registration/SignInTab.tsx +++ b/ts/components/registration/SignInTab.tsx @@ -1,4 +1,4 @@ -import React, { useContext, useState } from 'react'; +import { useContext, useState } from 'react'; import { ToastUtils } from '../../session/utils'; import { sanitizeSessionUsername } from '../../session/utils/String'; import { Flex } from '../basic/Flex'; diff --git a/ts/components/registration/SignUpTab.tsx b/ts/components/registration/SignUpTab.tsx index a54d0a01c..5a12dc9a7 100644 --- a/ts/components/registration/SignUpTab.tsx +++ b/ts/components/registration/SignUpTab.tsx @@ -1,13 +1,13 @@ -import React, { useContext, useEffect, useState } from 'react'; +import { useContext, useEffect, useState } from 'react'; +import { Noop } from '../../types/Util'; import { Flex } from '../basic/Flex'; import { SessionButton } from '../basic/SessionButton'; import { SessionIdEditable } from '../basic/SessionIdEditable'; import { SessionIconButton } from '../icon'; import { RegistrationContext, RegistrationPhase, signUp } from './RegistrationStages'; import { RegistrationUserDetails } from './RegistrationUserDetails'; -import { sanitizeDisplayNameOrToast, SignInMode } from './SignInTab'; +import { SignInMode, sanitizeDisplayNameOrToast } from './SignInTab'; import { TermsAndConditions } from './TermsAndConditions'; -import { Noop } from '../../types/Util'; export enum SignUpMode { Default, diff --git a/ts/components/registration/TermsAndConditions.tsx b/ts/components/registration/TermsAndConditions.tsx index 740355b77..8d56fa88a 100644 --- a/ts/components/registration/TermsAndConditions.tsx +++ b/ts/components/registration/TermsAndConditions.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { SessionHtmlRenderer } from '../basic/SessionHTMLRenderer'; export const TermsAndConditions = () => { diff --git a/ts/components/search/MessageSearchResults.tsx b/ts/components/search/MessageSearchResults.tsx index 13ac83098..72631cd52 100644 --- a/ts/components/search/MessageSearchResults.tsx +++ b/ts/components/search/MessageSearchResults.tsx @@ -1,15 +1,14 @@ -import React from 'react'; import styled, { CSSProperties } from 'styled-components'; +import { useConversationUsername, useIsPrivate } from '../../hooks/useParamSelector'; +import { MessageAttributes } from '../../models/messageType'; +import { UserUtils } from '../../session/utils'; import { getOurPubKeyStrFromCache } from '../../session/utils/User'; import { openConversationToSpecificMessage } from '../../state/ducks/conversations'; -import { ContactName } from '../conversation/ContactName'; import { Avatar, AvatarSize } from '../avatar/Avatar'; -import { Timestamp } from '../conversation/Timestamp'; import { MessageBodyHighlight } from '../basic/MessageBodyHighlight'; -import { MessageAttributes } from '../../models/messageType'; -import { useConversationUsername, useIsPrivate } from '../../hooks/useParamSelector'; -import { UserUtils } from '../../session/utils'; +import { ContactName } from '../conversation/ContactName'; +import { Timestamp } from '../conversation/Timestamp'; export type MessageResultProps = MessageAttributes & { snippet: string }; diff --git a/ts/components/search/SearchResults.tsx b/ts/components/search/SearchResults.tsx index b33d185f4..ba571f77d 100644 --- a/ts/components/search/SearchResults.tsx +++ b/ts/components/search/SearchResults.tsx @@ -1,8 +1,7 @@ -import React from 'react'; -import styled, { CSSProperties } from 'styled-components'; +import { isString } from 'lodash'; import { useSelector } from 'react-redux'; import { AutoSizer, List } from 'react-virtualized'; -import { isString } from 'lodash'; +import styled, { CSSProperties } from 'styled-components'; import { ConversationListItem } from '../leftpane/conversation-list-item/ConversationListItem'; import { MessageSearchResult } from './MessageSearchResults'; diff --git a/ts/components/settings/BlockedList.tsx b/ts/components/settings/BlockedList.tsx index 10b622b53..d23b6ab37 100644 --- a/ts/components/settings/BlockedList.tsx +++ b/ts/components/settings/BlockedList.tsx @@ -1,14 +1,14 @@ -import React, { useState } from 'react'; +import { useState } from 'react'; import useUpdate from 'react-use/lib/useUpdate'; import styled from 'styled-components'; import { useSet } from '../../hooks/useSet'; import { ToastUtils } from '../../session/utils'; import { BlockedNumberController } from '../../util'; +import { MemberListItem } from '../MemberListItem'; import { SessionButton, SessionButtonColor } from '../basic/SessionButton'; import { SpacerLG } from '../basic/Text'; import { SessionIconButton } from '../icon'; -import { MemberListItem } from '../MemberListItem'; import { SettingsTitleAndDescription } from './SessionSettingListItem'; const BlockedEntriesContainer = styled.div` diff --git a/ts/components/settings/SessionNotificationGroupSettings.tsx b/ts/components/settings/SessionNotificationGroupSettings.tsx index 1fd73d430..3c63e4723 100644 --- a/ts/components/settings/SessionNotificationGroupSettings.tsx +++ b/ts/components/settings/SessionNotificationGroupSettings.tsx @@ -1,5 +1,4 @@ /* eslint-disable @typescript-eslint/no-misused-promises */ -import React from 'react'; import useUpdate from 'react-use/lib/useUpdate'; import styled from 'styled-components'; diff --git a/ts/components/settings/SessionSettingListItem.tsx b/ts/components/settings/SessionSettingListItem.tsx index 20311ff22..5db31b0a5 100644 --- a/ts/components/settings/SessionSettingListItem.tsx +++ b/ts/components/settings/SessionSettingListItem.tsx @@ -1,6 +1,6 @@ -import React from 'react'; import styled from 'styled-components'; +import { Noop } from '../../types/Util'; import { SessionButton, SessionButtonColor, @@ -10,7 +10,6 @@ import { import { SessionToggle } from '../basic/SessionToggle'; import { SessionConfirmDialogProps } from '../dialog/SessionConfirm'; import { SessionIconButton } from '../icon'; -import { Noop } from '../../types/Util'; type ButtonSettingsProps = { title?: string; diff --git a/ts/components/settings/SessionSettings.tsx b/ts/components/settings/SessionSettings.tsx index b9226112f..dbd3607ef 100644 --- a/ts/components/settings/SessionSettings.tsx +++ b/ts/components/settings/SessionSettings.tsx @@ -1,23 +1,24 @@ import { shell } from 'electron'; -import React from 'react'; + import autoBind from 'auto-bind'; import styled from 'styled-components'; +import { Component, createRef } from 'react'; import { SettingsHeader } from './SessionSettingsHeader'; import { SessionIconButton } from '../icon'; import { SessionNotificationGroupSettings } from './SessionNotificationGroupSettings'; -import { CategoryConversations } from './section/CategoryConversations'; -import { SettingsCategoryPrivacy } from './section/CategoryPrivacy'; -import { SettingsCategoryAppearance } from './section/CategoryAppearance'; import { Data } from '../../data/data'; -import { SettingsCategoryPermissions } from './section/CategoryPermissions'; -import { SettingsCategoryHelp } from './section/CategoryHelp'; import { sessionPassword } from '../../state/ducks/modalDialog'; -import { PasswordAction } from '../dialog/SessionPasswordDialog'; import { SectionType, showLeftPaneSection } from '../../state/ducks/section'; +import { PasswordAction } from '../dialog/SessionPasswordDialog'; +import { SettingsCategoryAppearance } from './section/CategoryAppearance'; +import { CategoryConversations } from './section/CategoryConversations'; +import { SettingsCategoryHelp } from './section/CategoryHelp'; +import { SettingsCategoryPermissions } from './section/CategoryPermissions'; +import { SettingsCategoryPrivacy } from './section/CategoryPrivacy'; export function displayPasswordModal( passwordAction: PasswordAction, @@ -159,7 +160,7 @@ const StyledSettingsList = styled.div` flex-direction: column; `; -export class SessionSettingsView extends React.Component { +export class SessionSettingsView extends Component { public settingsViewRef: React.RefObject; public constructor(props: any) { @@ -170,7 +171,7 @@ export class SessionSettingsView extends React.Component, isEditable?: boolean) { diff --git a/ts/hooks/useModulo.ts b/ts/hooks/useModulo.ts index f681c317e..7f57fb844 100644 --- a/ts/hooks/useModulo.ts +++ b/ts/hooks/useModulo.ts @@ -1,9 +1,8 @@ -import React from 'react'; - +import { useState } from 'react'; import useInterval from 'react-use/lib/useInterval'; export function useModulo(loopBackAt: number, delay: number) { - const [count, setCount] = React.useState(0); + const [count, setCount] = useState(0); useInterval(() => { if (count >= loopBackAt) { diff --git a/ts/mains/about_start.tsx b/ts/mains/about_start.tsx index 31c2885ba..2370c8bc0 100644 --- a/ts/mains/about_start.tsx +++ b/ts/mains/about_start.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { createRoot } from 'react-dom/client'; import { AboutView } from '../components/AboutView'; diff --git a/ts/mains/debug_log_start.tsx b/ts/mains/debug_log_start.tsx index 8bec926a6..235a9b36a 100644 --- a/ts/mains/debug_log_start.tsx +++ b/ts/mains/debug_log_start.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { createRoot } from 'react-dom/client'; import { DebugLogView } from '../components/DebugLogView'; diff --git a/ts/mains/main_renderer.tsx b/ts/mains/main_renderer.tsx index 499d40b4b..6adfb5a56 100644 --- a/ts/mains/main_renderer.tsx +++ b/ts/mains/main_renderer.tsx @@ -5,7 +5,6 @@ import { createRoot } from 'react-dom/client'; import nativeEmojiData from '@emoji-mart/data'; import { ipcRenderer } from 'electron'; // eslint-disable-next-line import/no-named-default -import { default as React } from 'react'; import { isMacOS } from '../OS'; import { SessionInboxView } from '../components/SessionInboxView'; diff --git a/ts/mains/password_start.tsx b/ts/mains/password_start.tsx index 4a05b53fa..55ac6c155 100644 --- a/ts/mains/password_start.tsx +++ b/ts/mains/password_start.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { createRoot } from 'react-dom/client'; import { SessionPasswordPrompt } from '../components/SessionPasswordPrompt'; diff --git a/ts/session/utils/Toast.tsx b/ts/session/utils/Toast.tsx index 1087345ed..fb0f034b4 100644 --- a/ts/session/utils/Toast.tsx +++ b/ts/session/utils/Toast.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { toast } from 'react-toastify'; import { SessionToast, SessionToastType } from '../../components/basic/SessionToast'; import { SessionIconType } from '../../components/icon'; diff --git a/ts/themes/SessionTheme.tsx b/ts/themes/SessionTheme.tsx index 3337df271..0b07ee3a7 100644 --- a/ts/themes/SessionTheme.tsx +++ b/ts/themes/SessionTheme.tsx @@ -1,10 +1,10 @@ import { ipcRenderer } from 'electron'; -import React from 'react'; + import { createGlobalStyle } from 'styled-components'; -import { switchThemeTo } from './switchTheme'; -import { classicDark } from './classicDark'; import { getOppositeTheme, isThemeMismatched } from '../util/theme'; -import { declareCSSVariables, THEME_GLOBALS } from './globals'; +import { classicDark } from './classicDark'; +import { THEME_GLOBALS, declareCSSVariables } from './globals'; +import { switchThemeTo } from './switchTheme'; // Defaults to Classic Dark theme const SessionGlobalStyles = createGlobalStyle` diff --git a/tsconfig.json b/tsconfig.json index a47a46a27..5d7b415cd 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -7,7 +7,7 @@ "dom", // Required to access `window` "es2021" ], - "jsx": "react", // Specify JSX code generation: 'preserve', 'react-native', or 'react'. + "jsx": "react-jsx", // Specify JSX code generation: 'preserve', 'react-native', or 'react-jsx'. // "noEmitHelpers": false, "rootDir": "./", // Specify the root directory of input files. Use to control the output directory structure with --outDir "removeComments": true, // Do not emit comments to output. From 0873ed323f8fa14a1c2b093122a25b97949f3bde Mon Sep 17 00:00:00 2001 From: William Grant Date: Tue, 13 Feb 2024 12:06:03 +1100 Subject: [PATCH 4/6] fix: pass yarn ready fixed some weird import errors --- ts/components/conversation/SessionEmojiPanel.tsx | 2 +- ts/components/conversation/SessionStagedLinkPreview.tsx | 3 +-- ts/components/conversation/composition/EmojiQuickResult.tsx | 3 +-- 3 files changed, 3 insertions(+), 5 deletions(-) diff --git a/ts/components/conversation/SessionEmojiPanel.tsx b/ts/components/conversation/SessionEmojiPanel.tsx index 0f85549f5..1f6fc3463 100644 --- a/ts/components/conversation/SessionEmojiPanel.tsx +++ b/ts/components/conversation/SessionEmojiPanel.tsx @@ -12,7 +12,7 @@ import { PrimaryColorStateType, THEMES, ThemeStateType, -} from '../../themes/constants/colors.js'; +} from '../../themes/constants/colors'; import { FixedBaseEmoji } from '../../types/Reaction'; import { i18nEmojiData } from '../../util/emoji'; import { hexColorToRGB } from '../../util/hexColorToRGB'; diff --git a/ts/components/conversation/SessionStagedLinkPreview.tsx b/ts/components/conversation/SessionStagedLinkPreview.tsx index 5c6a24dac..79170b09e 100644 --- a/ts/components/conversation/SessionStagedLinkPreview.tsx +++ b/ts/components/conversation/SessionStagedLinkPreview.tsx @@ -1,6 +1,5 @@ -// eslint-disable-next-line import/no-named-default import { AbortSignal } from 'abort-controller'; -import { default as insecureNodeFetch } from 'node-fetch'; +import insecureNodeFetch from 'node-fetch'; import { StagedLinkPreviewData } from './composition/CompositionBox'; import { arrayBufferFromFile } from '../../types/Attachment'; diff --git a/ts/components/conversation/composition/EmojiQuickResult.tsx b/ts/components/conversation/composition/EmojiQuickResult.tsx index c5013d5f8..d6ce2380a 100644 --- a/ts/components/conversation/composition/EmojiQuickResult.tsx +++ b/ts/components/conversation/composition/EmojiQuickResult.tsx @@ -1,8 +1,7 @@ import { SearchIndex } from 'emoji-mart'; import { SuggestionDataItem } from 'react-mentions'; import styled from 'styled-components'; -// eslint-disable-next-line import/extensions -import { searchSync } from '../../../util/emoji.js'; +import { searchSync } from '../../../util/emoji'; const EmojiQuickResult = styled.span` display: flex; From 5d3ce688646a4ddfa722e019bbd79c32920fc50f Mon Sep 17 00:00:00 2001 From: William Grant Date: Tue, 13 Feb 2024 15:08:04 +1100 Subject: [PATCH 5/6] feat: add framer-motion tested out styled components compatbility with the MessageHighlighter component --- package.json | 1 + ts/components/basic/SessionToggle.tsx | 3 +- .../message-content/MessageHighlighter.tsx | 52 +++++++++---------- yarn.lock | 33 +++++------- 4 files changed, 42 insertions(+), 47 deletions(-) diff --git a/package.json b/package.json index 0538254b8..d24eaef6f 100644 --- a/package.json +++ b/package.json @@ -92,6 +92,7 @@ "emoji-mart": "^5.5.2", "filesize": "3.6.1", "firstline": "1.2.1", + "framer-motion": "^11.0.3", "fs-extra": "9.0.0", "glob": "7.1.2", "image-type": "^4.1.0", diff --git a/ts/components/basic/SessionToggle.tsx b/ts/components/basic/SessionToggle.tsx index 8636c06f7..65dc05abc 100644 --- a/ts/components/basic/SessionToggle.tsx +++ b/ts/components/basic/SessionToggle.tsx @@ -1,3 +1,4 @@ +import { MouseEvent } from 'react'; import { useDispatch } from 'react-redux'; import styled from 'styled-components'; import { updateConfirmModal } from '../../state/ducks/modalDialog'; @@ -51,7 +52,7 @@ type Props = { export const SessionToggle = (props: Props) => { const dispatch = useDispatch(); - const clickHandler = (event: React.MouseEvent) => { + const clickHandler = (event: MouseEvent) => { const stateManager = (e: any) => { e.stopPropagation(); props.onClick(); diff --git a/ts/components/conversation/message/message-content/MessageHighlighter.tsx b/ts/components/conversation/message/message-content/MessageHighlighter.tsx index d468cacac..5925b687a 100644 --- a/ts/components/conversation/message/message-content/MessageHighlighter.tsx +++ b/ts/components/conversation/message/message-content/MessageHighlighter.tsx @@ -1,29 +1,29 @@ -import styled, { css, keyframes } from 'styled-components'; +import { motion } from 'framer-motion'; +import { MouseEvent, ReactNode } from 'react'; +import styled from 'styled-components'; -const opacityAnimation = keyframes` - 0% { - opacity: 1; - } - 25% { - opacity: 0.2; - } - 50% { - opacity: 1; - } - 75% { - opacity: 0.2; - } - 100% { - opacity: 1; - } -`; +const StyledMessageHighlighter = styled(motion.div)``; -export const MessageHighlighter = styled.div<{ +export function MessageHighlighter(props: { + children: ReactNode; highlight: boolean; -}>` - ${props => - props.highlight && - css` - animation: ${opacityAnimation} 1s linear; - `} -`; + role?: string; + className?: string; + onClick?: (event: MouseEvent) => void; +}) { + const { className, children, highlight, role, onClick } = props; + + return ( + + {children} + + ); +} diff --git a/yarn.lock b/yarn.lock index 9488a79da..7997598c5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -383,7 +383,7 @@ resolved "https://registry.yarnpkg.com/@emoji-mart/react/-/react-1.1.1.tgz#ddad52f93a25baf31c5383c3e7e4c6e05554312a" integrity sha512-NMlFNeWgv1//uPsvLxvGQoIerPuVdXwK/EUek8OOkJ6wVOWPUizRBJU0hDqWZCOROVpfBgCemaC3m6jDOXi03g== -"@emotion/is-prop-valid@^0.8.8": +"@emotion/is-prop-valid@^0.8.2", "@emotion/is-prop-valid@^0.8.8": version "0.8.8" resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a" integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA== @@ -1039,15 +1039,7 @@ "@types/prop-types" "*" "@types/react" "*" -"@types/react@*", "@types/react@17.0.2": - version "17.0.2" - resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.2.tgz#3de24c4efef902dd9795a49c75f760cbe4f7a5a8" - integrity sha512-Xt40xQsrkdvjn1EyWe1Bc0dJLcil/9x2vAuW7ya+PuQip4UYUaXyhzWmAbwRsdMgwOFHpfp7/FFZebDU6Y8VHA== - dependencies: - "@types/prop-types" "*" - csstype "^3.0.2" - -"@types/react@^18.2.55": +"@types/react@*", "@types/react@18.2.55", "@types/react@^18.2.55": version "18.2.55" resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.55.tgz#38141821b7084404b5013742bc4ae08e44da7a67" integrity sha512-Y2Tz5P4yz23brwm2d7jNon39qoAtMMmalOQv6+fEFt1mT+FcM3D841wDpoUvFXhaYenuROCy3FZYqdTjM7qVyA== @@ -3693,6 +3685,15 @@ form-data@^4.0.0: combined-stream "^1.0.8" mime-types "^2.1.12" +framer-motion@^11.0.3: + version "11.0.3" + resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-11.0.3.tgz#b2a87e7ae166a9e27da33da9cfb50a0db5f94fa7" + integrity sha512-6x2poQpIWBdbZwLd73w6cKZ1I9IEPIU94C6/Swp1Zt3LJ+sB5bPe1E2wC6EH5hSISXNkMJ4afH7AdwS7MrtkWw== + dependencies: + tslib "^2.4.0" + optionalDependencies: + "@emotion/is-prop-valid" "^0.8.2" + fs-extra@9.0.0: version "9.0.0" resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-9.0.0.tgz#b6afc31036e247b2466dc99c29ae797d5d4580a3" @@ -6265,15 +6266,7 @@ react-virtualized@^9.22.4: prop-types "^15.7.2" react-lifecycles-compat "^3.0.4" -react@17.0.2: - version "17.0.2" - resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037" - integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA== - dependencies: - loose-envify "^1.1.0" - object-assign "^4.1.1" - -react@^18.2.0: +react@18.2.0, react@^18.2.0: version "18.2.0" resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5" integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ== @@ -7380,7 +7373,7 @@ tsconfig-paths@^3.14.2: minimist "^1.2.6" strip-bom "^3.0.0" -tslib@^2.1.0: +tslib@^2.1.0, tslib@^2.4.0: version "2.6.2" resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae" integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q== From b81d5a3d7a415e0220e50b1af1bbde58713a91db Mon Sep 17 00:00:00 2001 From: William Grant Date: Tue, 13 Feb 2024 15:18:27 +1100 Subject: [PATCH 6/6] refactor: clean up remaining global React import calls import specific types from react package --- ts/components/basic/PillContainer.tsx | 3 ++- ts/components/basic/SessionInput.tsx | 4 ++-- ts/components/basic/Text.tsx | 5 ++-- ts/components/calling/CallButtons.tsx | 8 +++---- ts/components/conversation/ContactName.tsx | 2 +- .../conversation/SessionConversation.tsx | 4 ++-- .../SessionMessagesListContainer.tsx | 4 ++-- .../message-content/MessageContent.tsx | 11 +++++++-- .../MessageContentWithStatus.tsx | 6 ++--- .../message/message-content/MessageQuote.tsx | 3 ++- .../message/message-content/Quote.tsx | 4 ++-- .../message/message-content/quote/Quote.tsx | 2 +- .../message-item/GenericReadableMessage.tsx | 4 ++-- .../message/message-item/ReadableMessage.tsx | 6 +++-- ts/components/dialog/BanOrUnbanUserDialog.tsx | 4 ++-- .../icon/DropDownAndToggleButton.tsx | 9 +++---- .../leftpane/MessageRequestsBanner.tsx | 3 ++- .../ConversationListItem.tsx | 4 ++-- .../conversation-list-item/HeaderItem.tsx | 6 ++--- ts/components/lightbox/Lightbox.tsx | 24 +++++++++---------- ts/components/registration/AccentText.tsx | 4 +++- .../settings/SessionSettingListItem.tsx | 9 +++---- ts/components/settings/SessionSettings.tsx | 4 ++-- ts/hooks/useFocusMount.ts | 3 ++- 24 files changed, 75 insertions(+), 61 deletions(-) diff --git a/ts/components/basic/PillContainer.tsx b/ts/components/basic/PillContainer.tsx index ab3a53a72..4509351fe 100644 --- a/ts/components/basic/PillContainer.tsx +++ b/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; diff --git a/ts/components/basic/SessionInput.tsx b/ts/components/basic/SessionInput.tsx index 09b84b0d4..4cf524251 100644 --- a/ts/components/basic/SessionInput.tsx +++ b/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) => { + const updateInputValue = (e: ChangeEvent) => { e.preventDefault(); const val = e.target.value; setInputValue(val); diff --git a/ts/components/basic/Text.tsx b/ts/components/basic/Text.tsx index 527cd9632..f53d54195 100644 --- a/ts/components/basic/Text.tsx +++ b/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 {props.text}; }; -export const TextWithChildren = ( - props: Omit & { children: React.ReactNode } -) => { +export const TextWithChildren = (props: Omit & { children: ReactNode }) => { return {props.children}; }; diff --git a/ts/components/calling/CallButtons.tsx b/ts/components/calling/CallButtons.tsx index 7411d8ded..93532bd6e 100644 --- a/ts/components/calling/CallButtons.tsx +++ b/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, - e: React.MouseEvent + e: MouseEvent ) => { if (currentConnectedCameras.length === 0) { ToastUtils.pushNoCameraFound(); @@ -113,7 +113,7 @@ const AudioInputMenu = ({ const showAudioInputMenu = ( currentConnectedAudioInputs: Array, - e: React.MouseEvent + e: MouseEvent ) => { if (currentConnectedAudioInputs.length === 0) { ToastUtils.pushNoAudioInputFound(); @@ -182,7 +182,7 @@ const AudioOutputMenu = ({ const showAudioOutputMenu = ( currentConnectedAudioOutputs: Array, - e: React.MouseEvent + e: MouseEvent ) => { if (currentConnectedAudioOutputs.length === 0) { ToastUtils.pushNoAudioOutputFound(); diff --git a/ts/components/conversation/ContactName.tsx b/ts/components/conversation/ContactName.tsx index de6101070..687b7f4a7 100644 --- a/ts/components/conversation/ContactName.tsx +++ b/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 ( diff --git a/ts/components/conversation/SessionConversation.tsx b/ts/components/conversation/SessionConversation.tsx index b014ef0f1..da7fc9f60 100644 --- a/ts/components/conversation/SessionConversation.tsx +++ b/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 { - private readonly messageContainerRef: React.RefObject; + private readonly messageContainerRef: RefObject; private dragCounter: number; private publicMembersRefreshTimeout?: NodeJS.Timeout; private readonly updateMemberList: () => any; diff --git a/ts/components/conversation/SessionMessagesListContainer.tsx b/ts/components/conversation/SessionMessagesListContainer.tsx index 7bfaff56b..e722dc208 100644 --- a/ts/components/conversation/SessionMessagesListContainer.tsx +++ b/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; + messageContainerRef: RefObject; }; export const messageContainerDomID = 'messages-container'; diff --git a/ts/components/conversation/message/message-content/MessageContent.tsx b/ts/components/conversation/message/message-content/MessageContent.tsx index c825d0d14..7d6949868 100644 --- a/ts/components/conversation/message/message-content/MessageContent.tsx +++ b/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) { +function onClickOnMessageInnerContainer(event: MouseEvent) { const selection = window.getSelection(); // Text is being selected if (selection && selection.type === 'Range') { diff --git a/ts/components/conversation/message/message-content/MessageContentWithStatus.tsx b/ts/components/conversation/message/message-content/MessageContentWithStatus.tsx index 68bf5a224..ea364de2f 100644 --- a/ts/components/conversation/message/message-content/MessageContentWithStatus.tsx +++ b/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) => { + (event: MouseEvent) => { 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) => { + const onDoubleClickReplyToMessage = (e: MouseEvent) => { const currentSelection = window.getSelection(); const currentSelectionString = currentSelection?.toString() || undefined; diff --git a/ts/components/conversation/message/message-content/MessageQuote.tsx b/ts/components/conversation/message/message-content/MessageQuote.tsx index 5dc2d3285..7d128854c 100644 --- a/ts/components/conversation/message/message-content/MessageQuote.tsx +++ b/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) => { + const onQuoteClick = async (event: MouseEvent) => { event.preventDefault(); event.stopPropagation(); diff --git a/ts/components/conversation/message/message-content/Quote.tsx b/ts/components/conversation/message/message-content/Quote.tsx index d187f8711..0075ce10e 100644 --- a/ts/components/conversation/message/message-content/Quote.tsx +++ b/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) => void; + onClick?: (e: MouseEvent) => void; }; export interface QuotedAttachmentType { diff --git a/ts/components/conversation/message/message-content/quote/Quote.tsx b/ts/components/conversation/message/message-content/quote/Quote.tsx index 43f07f78a..5181e2e1d 100644 --- a/ts/components/conversation/message/message-content/quote/Quote.tsx +++ b/ts/components/conversation/message/message-content/quote/Quote.tsx @@ -51,7 +51,7 @@ export type QuoteProps = { text?: string; attachment?: QuotedAttachmentType; - onClick?: (e: React.MouseEvent) => void; + onClick?: (e: MouseEvent) => void; }; export interface QuotedAttachmentThumbnailType { diff --git a/ts/components/conversation/message/message-item/GenericReadableMessage.tsx b/ts/components/conversation/message/message-item/GenericReadableMessage.tsx index 550b2033e..1f712b518 100644 --- a/ts/components/conversation/message/message-item/GenericReadableMessage.tsx +++ b/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) => { + (e: MouseEvent) => { // 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. diff --git a/ts/components/conversation/message/message-item/ReadableMessage.tsx b/ts/components/conversation/message/message-item/ReadableMessage.tsx index 6f82ebfd6..a7f3c0084 100644 --- a/ts/components/conversation/message/message-item/ReadableMessage.tsx +++ b/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; role?: AriaRole; dataTestId: string; - onContextMenu?: (e: React.MouseEvent) => void; + onContextMenu?: (e: MouseEvent) => void; isControlMessage?: boolean; }; diff --git a/ts/components/dialog/BanOrUnbanUserDialog.tsx b/ts/components/dialog/BanOrUnbanUserDialog.tsx index 3342976e0..00babe4e9 100644 --- a/ts/components/dialog/BanOrUnbanUserDialog.tsx +++ b/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) => { + const onPubkeyBoxChanges = (e: ChangeEvent) => { setInputBoxValue(e.target.value?.trim() || ''); }; diff --git a/ts/components/icon/DropDownAndToggleButton.tsx b/ts/components/icon/DropDownAndToggleButton.tsx index a441b99fe..d53d0ae3a 100644 --- a/ts/components/icon/DropDownAndToggleButton.tsx +++ b/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) => void; - onMainButtonClick: (e: React.MouseEvent) => void; + onArrowClick: (e: MouseEvent) => void; + onMainButtonClick: (e: MouseEvent) => 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) => { + const arrowClickHandler = (e: MouseEvent) => { e.stopPropagation(); onArrowClick(e); }; - const mainButtonClickHandler = (e: React.MouseEvent) => { + const mainButtonClickHandler = (e: MouseEvent) => { e.stopPropagation(); contextMenu.hideAll(); onMainButtonClick(e); diff --git a/ts/components/leftpane/MessageRequestsBanner.tsx b/ts/components/leftpane/MessageRequestsBanner.tsx index 159340efc..b3ce9b880 100644 --- a/ts/components/leftpane/MessageRequestsBanner.tsx +++ b/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) => { + const openRequests = (e: MouseEvent) => { if (e.button === 0) { handleOnClick(); } diff --git a/ts/components/leftpane/conversation-list-item/ConversationListItem.tsx b/ts/components/leftpane/conversation-list-item/ConversationListItem.tsx index f5d418a9b..241b4b137 100644 --- a/ts/components/leftpane/conversation-list-item/ConversationListItem.tsx +++ b/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) => { + (e: MouseEvent) => { // mousedown is invoked sooner than onClick, but for both right and left click if (e.button === 0) { void openConversationWithMessages({ conversationKey: conversationId, messageId: null }); diff --git a/ts/components/leftpane/conversation-list-item/HeaderItem.tsx b/ts/components/leftpane/conversation-list-item/HeaderItem.tsx index 6588dc4b8..a34617f5a 100644 --- a/ts/components/leftpane/conversation-list-item/HeaderItem.tsx +++ b/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, - conversationId: string -) { +async function openConvoToLastMention(e: MouseEvent, conversationId: string) { e.stopPropagation(); e.preventDefault(); diff --git a/ts/components/lightbox/Lightbox.tsx b/ts/components/lightbox/Lightbox.tsx index 4e2577d0b..f7ab461b3 100644 --- a/ts/components/lightbox/Lightbox.tsx +++ b/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) => void; + onClick?: (event: MouseEvent) => void; url: string; }) => (
; + renderedRef: MutableRefObject; 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) => { + const onContainerClick = (event: MouseEvent) => { if (renderedRef && event.target === renderedRef.current) { return; } diff --git a/ts/components/registration/AccentText.tsx b/ts/components/registration/AccentText.tsx index 8e7920e88..97dc8b6ed 100644 --- a/ts/components/registration/AccentText.tsx +++ b/ts/components/registration/AccentText.tsx @@ -1,4 +1,6 @@ -export const AccentText: React.FC = () => ( +import { FC } from 'react'; + +export const AccentText: FC = () => (
{window.i18n('beginYourSession')}
diff --git a/ts/components/settings/SessionSettingListItem.tsx b/ts/components/settings/SessionSettingListItem.tsx index 5db31b0a5..9c89fafff 100644 --- a/ts/components/settings/SessionSettingListItem.tsx +++ b/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 { diff --git a/ts/components/settings/SessionSettings.tsx b/ts/components/settings/SessionSettings.tsx index dbd3607ef..e71235639 100644 --- a/ts/components/settings/SessionSettings.tsx +++ b/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 { - public settingsViewRef: React.RefObject; + public settingsViewRef: RefObject; public constructor(props: any) { super(props); diff --git a/ts/hooks/useFocusMount.ts b/ts/hooks/useFocusMount.ts index 1e05210be..6a5418fce 100644 --- a/ts/hooks/useFocusMount.ts +++ b/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, isEditable?: boolean) { +export function useFocusMount(ref: RefObject, isEditable?: boolean) { useMount(() => { if (isEditable) { ref?.current?.focus();