diff --git a/src/actions/actionAlign.tsx b/src/actions/actionAlign.tsx index 3c60703cd3..eb51e80b98 100644 --- a/src/actions/actionAlign.tsx +++ b/src/actions/actionAlign.tsx @@ -1,4 +1,3 @@ -import React from "react"; import { alignElements, Alignment } from "../align"; import { AlignBottomIcon, diff --git a/src/actions/actionCanvas.tsx b/src/actions/actionCanvas.tsx index 4d01145df0..375fabcc6f 100644 --- a/src/actions/actionCanvas.tsx +++ b/src/actions/actionCanvas.tsx @@ -1,4 +1,3 @@ -import React from "react"; import { getDefaultAppState } from "../appState"; import { ColorPicker } from "../components/ColorPicker"; import { trash, zoomIn, zoomOut } from "../components/icons"; diff --git a/src/actions/actionDeleteSelected.tsx b/src/actions/actionDeleteSelected.tsx index dd2ad42cd3..1be1019c8e 100644 --- a/src/actions/actionDeleteSelected.tsx +++ b/src/actions/actionDeleteSelected.tsx @@ -1,7 +1,6 @@ import { isSomeElementSelected } from "../scene"; import { KEYS } from "../keys"; import { ToolButton } from "../components/ToolButton"; -import React from "react"; import { trash } from "../components/icons"; import { t } from "../i18n"; import { register } from "./register"; diff --git a/src/actions/actionDistribute.tsx b/src/actions/actionDistribute.tsx index b197575b01..8744fac642 100644 --- a/src/actions/actionDistribute.tsx +++ b/src/actions/actionDistribute.tsx @@ -1,4 +1,3 @@ -import React from "react"; import { DistributeHorizontallyIcon, DistributeVerticallyIcon, diff --git a/src/actions/actionDuplicateSelection.tsx b/src/actions/actionDuplicateSelection.tsx index b48a0b6df2..6d9cc5babc 100644 --- a/src/actions/actionDuplicateSelection.tsx +++ b/src/actions/actionDuplicateSelection.tsx @@ -1,4 +1,3 @@ -import React from "react"; import { KEYS } from "../keys"; import { register } from "./register"; import { ExcalidrawElement } from "../element/types"; diff --git a/src/actions/actionExport.tsx b/src/actions/actionExport.tsx index 41fc14f15a..db8a8e2732 100644 --- a/src/actions/actionExport.tsx +++ b/src/actions/actionExport.tsx @@ -1,4 +1,3 @@ -import React from "react"; import { trackEvent } from "../analytics"; import { load, questionCircle, saveAs } from "../components/icons"; import { ProjectName } from "../components/ProjectName"; diff --git a/src/actions/actionFinalize.tsx b/src/actions/actionFinalize.tsx index 3a80734eef..988e3402d1 100644 --- a/src/actions/actionFinalize.tsx +++ b/src/actions/actionFinalize.tsx @@ -1,7 +1,6 @@ import { KEYS } from "../keys"; import { isInvisiblySmallElement } from "../element"; import { resetCursor } from "../utils"; -import React from "react"; import { ToolButton } from "../components/ToolButton"; import { done } from "../components/icons"; import { t } from "../i18n"; diff --git a/src/actions/actionGroup.tsx b/src/actions/actionGroup.tsx index 2e4a8a34b1..5da546fea9 100644 --- a/src/actions/actionGroup.tsx +++ b/src/actions/actionGroup.tsx @@ -1,4 +1,3 @@ -import React from "react"; import { CODES, KEYS } from "../keys"; import { t } from "../i18n"; import { getShortcutKey } from "../utils"; diff --git a/src/actions/actionHistory.tsx b/src/actions/actionHistory.tsx index 2653eb70f6..6b3cf7138b 100644 --- a/src/actions/actionHistory.tsx +++ b/src/actions/actionHistory.tsx @@ -1,5 +1,4 @@ import { Action, ActionResult } from "./types"; -import React from "react"; import { undo, redo } from "../components/icons"; import { ToolButton } from "../components/ToolButton"; import { t } from "../i18n"; diff --git a/src/actions/actionMenu.tsx b/src/actions/actionMenu.tsx index 18d56dc4a1..b63e75a15e 100644 --- a/src/actions/actionMenu.tsx +++ b/src/actions/actionMenu.tsx @@ -1,4 +1,3 @@ -import React from "react"; import { menu, palette } from "../components/icons"; import { ToolButton } from "../components/ToolButton"; import { t } from "../i18n"; diff --git a/src/actions/actionNavigate.tsx b/src/actions/actionNavigate.tsx index 4d64879a07..420a4712a6 100644 --- a/src/actions/actionNavigate.tsx +++ b/src/actions/actionNavigate.tsx @@ -1,4 +1,3 @@ -import React from "react"; import { getClientColors, getClientInitials } from "../clients"; import { Avatar } from "../components/Avatar"; import { centerScrollOn } from "../scene/scroll"; diff --git a/src/actions/actionProperties.tsx b/src/actions/actionProperties.tsx index e3d28a2550..48973ed9e2 100644 --- a/src/actions/actionProperties.tsx +++ b/src/actions/actionProperties.tsx @@ -1,4 +1,3 @@ -import React from "react"; import { AppState } from "../../src/types"; import { ButtonIconSelect } from "../components/ButtonIconSelect"; import { ColorPicker } from "../components/ColorPicker"; diff --git a/src/components/ActiveFile.tsx b/src/components/ActiveFile.tsx index ba0f4c517f..a116601ce6 100644 --- a/src/components/ActiveFile.tsx +++ b/src/components/ActiveFile.tsx @@ -1,4 +1,3 @@ -import React from "react"; import Stack from "../components/Stack"; import { ToolButton } from "../components/ToolButton"; import { save, file } from "../components/icons"; diff --git a/src/components/ButtonIconSelect.tsx b/src/components/ButtonIconSelect.tsx index dce2ed340f..53e1459141 100644 --- a/src/components/ButtonIconSelect.tsx +++ b/src/components/ButtonIconSelect.tsx @@ -1,4 +1,3 @@ -import React from "react"; import clsx from "clsx"; // TODO: It might be "clever" to add option.icon to the existing component diff --git a/src/components/ButtonSelect.tsx b/src/components/ButtonSelect.tsx index 42d1fdf147..c47ff65e7e 100644 --- a/src/components/ButtonSelect.tsx +++ b/src/components/ButtonSelect.tsx @@ -1,4 +1,3 @@ -import React from "react"; import clsx from "clsx"; export const ButtonSelect = ({ diff --git a/src/components/CollabButton.tsx b/src/components/CollabButton.tsx index ceb86c1949..e0bf360053 100644 --- a/src/components/CollabButton.tsx +++ b/src/components/CollabButton.tsx @@ -1,4 +1,3 @@ -import React from "react"; import clsx from "clsx"; import { ToolButton } from "./ToolButton"; import { t } from "../i18n"; diff --git a/src/components/ContextMenu.tsx b/src/components/ContextMenu.tsx index 1c219b481a..d64492fcfc 100644 --- a/src/components/ContextMenu.tsx +++ b/src/components/ContextMenu.tsx @@ -1,4 +1,3 @@ -import React from "react"; import { render, unmountComponentAtNode } from "react-dom"; import clsx from "clsx"; import { Popover } from "./Popover"; diff --git a/src/components/DarkModeToggle.tsx b/src/components/DarkModeToggle.tsx index 44397ce9cb..8a4bf261d7 100644 --- a/src/components/DarkModeToggle.tsx +++ b/src/components/DarkModeToggle.tsx @@ -1,6 +1,5 @@ import "./ToolIcon.scss"; -import React from "react"; import { t } from "../i18n"; import { ToolButton } from "./ToolButton"; import { THEME } from "../constants"; diff --git a/src/components/HelpIcon.tsx b/src/components/HelpIcon.tsx index 5e12154b42..6553c32454 100644 --- a/src/components/HelpIcon.tsx +++ b/src/components/HelpIcon.tsx @@ -1,4 +1,3 @@ -import React from "react"; import { questionCircle } from "../components/icons"; type HelpIconProps = { diff --git a/src/components/HintViewer.tsx b/src/components/HintViewer.tsx index 2afa7201eb..aa56c4a418 100644 --- a/src/components/HintViewer.tsx +++ b/src/components/HintViewer.tsx @@ -1,4 +1,3 @@ -import React from "react"; import { t } from "../i18n"; import { NonDeletedExcalidrawElement } from "../element/types"; import { getSelectedElements } from "../scene"; diff --git a/src/components/InitializeApp.tsx b/src/components/InitializeApp.tsx index 85198c3536..f6ff278d38 100644 --- a/src/components/InitializeApp.tsx +++ b/src/components/InitializeApp.tsx @@ -1,30 +1,25 @@ -import React from "react"; +import React, { useEffect, useState } from "react"; import { LoadingMessage } from "./LoadingMessage"; import { defaultLang, Language, languages, setLanguage } from "../i18n"; interface Props { langCode: Language["code"]; + children: React.ReactElement; } -interface State { - isLoading: boolean; -} -export class InitializeApp extends React.Component { - public state: { isLoading: boolean } = { - isLoading: true, - }; - async componentDidMount() { +export const InitializeApp = (props: Props) => { + const [loading, setLoading] = useState(true); + + useEffect(() => { + const updateLang = async () => { + await setLanguage(currentLang); + }; const currentLang = - languages.find((lang) => lang.code === this.props.langCode) || - defaultLang; - await setLanguage(currentLang); - this.setState({ - isLoading: false, - }); - } + languages.find((lang) => lang.code === props.langCode) || defaultLang; + updateLang(); + setLoading(false); + }, [props.langCode]); - public render() { - return this.state.isLoading ? : this.props.children; - } -} + return loading ? : props.children; +}; diff --git a/src/components/LibraryUnit.tsx b/src/components/LibraryUnit.tsx index 4eb6b780c8..5619e77649 100644 --- a/src/components/LibraryUnit.tsx +++ b/src/components/LibraryUnit.tsx @@ -1,6 +1,6 @@ import clsx from "clsx"; import oc from "open-color"; -import React, { useEffect, useRef, useState } from "react"; +import { useEffect, useRef, useState } from "react"; import { close } from "../components/icons"; import { MIME_TYPES } from "../constants"; import { t } from "../i18n"; diff --git a/src/components/LoadingMessage.tsx b/src/components/LoadingMessage.tsx index fa2461e794..76d1bb87a3 100644 --- a/src/components/LoadingMessage.tsx +++ b/src/components/LoadingMessage.tsx @@ -1,4 +1,3 @@ -import React from "react"; import { t } from "../i18n"; export const LoadingMessage = () => { diff --git a/src/components/Toast.tsx b/src/components/Toast.tsx index d7ae914072..22b6275087 100644 --- a/src/components/Toast.tsx +++ b/src/components/Toast.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useEffect, useRef } from "react"; +import { useCallback, useEffect, useRef } from "react"; import { TOAST_TIMEOUT } from "../constants"; import "./Toast.scss"; diff --git a/src/excalidraw-app/CustomStats.tsx b/src/excalidraw-app/CustomStats.tsx index 2b79ffc1ed..3a65e3ca0b 100644 --- a/src/excalidraw-app/CustomStats.tsx +++ b/src/excalidraw-app/CustomStats.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from "react"; +import { useEffect, useState } from "react"; import { debounce, getVersion, nFormatter } from "../utils"; import { getElementsStorageSize, diff --git a/src/excalidraw-app/collab/CollabWrapper.tsx b/src/excalidraw-app/collab/CollabWrapper.tsx index 793c4c9d5f..89cf2c13c7 100644 --- a/src/excalidraw-app/collab/CollabWrapper.tsx +++ b/src/excalidraw-app/collab/CollabWrapper.tsx @@ -1,5 +1,5 @@ import throttle from "lodash.throttle"; -import React, { PureComponent } from "react"; +import { PureComponent } from "react"; import { ExcalidrawImperativeAPI } from "../../types"; import { ErrorDialog } from "../../components/ErrorDialog"; import { APP_NAME, ENV, EVENT } from "../../constants"; diff --git a/src/excalidraw-app/index.tsx b/src/excalidraw-app/index.tsx index 8b4f0ac579..adf308c274 100644 --- a/src/excalidraw-app/index.tsx +++ b/src/excalidraw-app/index.tsx @@ -1,11 +1,5 @@ import LanguageDetector from "i18next-browser-languagedetector"; -import React, { - useCallback, - useContext, - useEffect, - useRef, - useState, -} from "react"; +import { useCallback, useContext, useEffect, useRef, useState } from "react"; import { trackEvent } from "../analytics"; import { getDefaultAppState } from "../appState"; import { ErrorDialog } from "../components/ErrorDialog"; diff --git a/src/index.tsx b/src/index.tsx index 5ecf656e75..b29029b935 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,4 +1,3 @@ -import React from "react"; import ReactDOM from "react-dom"; import ExcalidrawApp from "./excalidraw-app"; diff --git a/src/shapes.tsx b/src/shapes.tsx index a1fffc7f7f..3a3a05ed94 100644 --- a/src/shapes.tsx +++ b/src/shapes.tsx @@ -1,4 +1,3 @@ -import React from "react"; import { KEYS } from "./keys"; // We inline font-awesome icons in order to save on js size rather than including the font awesome react library diff --git a/src/tests/align.test.tsx b/src/tests/align.test.tsx index a16ac30279..33e3e33fce 100644 --- a/src/tests/align.test.tsx +++ b/src/tests/align.test.tsx @@ -1,4 +1,3 @@ -import React from "react"; import ReactDOM from "react-dom"; import { render } from "./test-utils"; import ExcalidrawApp from "../excalidraw-app"; diff --git a/src/tests/appState.test.tsx b/src/tests/appState.test.tsx index 368e914070..20fa595b3d 100644 --- a/src/tests/appState.test.tsx +++ b/src/tests/appState.test.tsx @@ -1,4 +1,3 @@ -import React from "react"; import { render, waitFor } from "./test-utils"; import ExcalidrawApp from "../excalidraw-app"; import { API } from "./helpers/api"; diff --git a/src/tests/binding.test.tsx b/src/tests/binding.test.tsx index b62e7ecf42..e780b03ecc 100644 --- a/src/tests/binding.test.tsx +++ b/src/tests/binding.test.tsx @@ -1,4 +1,3 @@ -import React from "react"; import { fireEvent, render } from "./test-utils"; import ExcalidrawApp from "../excalidraw-app"; import { UI, Pointer, Keyboard } from "./helpers/ui"; diff --git a/src/tests/collab.test.tsx b/src/tests/collab.test.tsx index 9065abbf85..91df9be067 100644 --- a/src/tests/collab.test.tsx +++ b/src/tests/collab.test.tsx @@ -1,4 +1,3 @@ -import React from "react"; import { render, updateSceneData, waitFor } from "./test-utils"; import ExcalidrawApp from "../excalidraw-app"; import { API } from "./helpers/api"; diff --git a/src/tests/dragCreate.test.tsx b/src/tests/dragCreate.test.tsx index 3af6683382..b39601eb52 100644 --- a/src/tests/dragCreate.test.tsx +++ b/src/tests/dragCreate.test.tsx @@ -1,4 +1,3 @@ -import React from "react"; import ReactDOM from "react-dom"; import ExcalidrawApp from "../excalidraw-app"; import * as Renderer from "../renderer/renderScene"; diff --git a/src/tests/export.test.tsx b/src/tests/export.test.tsx index 0159e23311..0167716ff6 100644 --- a/src/tests/export.test.tsx +++ b/src/tests/export.test.tsx @@ -1,4 +1,3 @@ -import React from "react"; import { render, waitFor } from "./test-utils"; import ExcalidrawApp from "../excalidraw-app"; import { API } from "./helpers/api"; diff --git a/src/tests/flip.test.tsx b/src/tests/flip.test.tsx index 30c0b1ed74..479748af67 100644 --- a/src/tests/flip.test.tsx +++ b/src/tests/flip.test.tsx @@ -1,4 +1,3 @@ -import React from "react"; import ReactDOM from "react-dom"; import { render } from "./test-utils"; import App from "../components/App"; diff --git a/src/tests/history.test.tsx b/src/tests/history.test.tsx index 792b2a10d5..8d6f032cd9 100644 --- a/src/tests/history.test.tsx +++ b/src/tests/history.test.tsx @@ -1,4 +1,3 @@ -import React from "react"; import { assertSelectedElements, render } from "./test-utils"; import ExcalidrawApp from "../excalidraw-app"; import { Keyboard, Pointer, UI } from "./helpers/ui"; diff --git a/src/tests/library.test.tsx b/src/tests/library.test.tsx index d770be168d..dc54f2bdca 100644 --- a/src/tests/library.test.tsx +++ b/src/tests/library.test.tsx @@ -1,4 +1,3 @@ -import React from "react"; import { render, waitFor } from "./test-utils"; import ExcalidrawApp from "../excalidraw-app"; import { API } from "./helpers/api"; diff --git a/src/tests/multiPointCreate.test.tsx b/src/tests/multiPointCreate.test.tsx index d3e40767c8..7437a1d486 100644 --- a/src/tests/multiPointCreate.test.tsx +++ b/src/tests/multiPointCreate.test.tsx @@ -1,4 +1,3 @@ -import React from "react"; import ReactDOM from "react-dom"; import { render, diff --git a/src/tests/packages/excalidraw.test.tsx b/src/tests/packages/excalidraw.test.tsx index b6d1e8ca5c..d0e22c6dc7 100644 --- a/src/tests/packages/excalidraw.test.tsx +++ b/src/tests/packages/excalidraw.test.tsx @@ -1,4 +1,3 @@ -import React from "react"; import { fireEvent, GlobalTestState, render } from "../test-utils"; import Excalidraw from "../../packages/excalidraw/index"; import { queryByText, queryByTestId } from "@testing-library/react"; diff --git a/src/tests/resize.test.tsx b/src/tests/resize.test.tsx index a85a84ef6d..b77c039f95 100644 --- a/src/tests/resize.test.tsx +++ b/src/tests/resize.test.tsx @@ -1,4 +1,3 @@ -import React from "react"; import ReactDOM from "react-dom"; import { render } from "./test-utils"; import App from "../components/App"; diff --git a/src/tests/scroll.test.tsx b/src/tests/scroll.test.tsx index 4887e10e34..70a115a507 100644 --- a/src/tests/scroll.test.tsx +++ b/src/tests/scroll.test.tsx @@ -1,4 +1,3 @@ -import React from "react"; import { mockBoundingClientRect, render, diff --git a/src/tests/selection.test.tsx b/src/tests/selection.test.tsx index ec640e68b2..e2bcd1dbef 100644 --- a/src/tests/selection.test.tsx +++ b/src/tests/selection.test.tsx @@ -1,4 +1,3 @@ -import React from "react"; import ReactDOM from "react-dom"; import { render, diff --git a/src/tests/viewMode.test.tsx b/src/tests/viewMode.test.tsx index 18dfe29e92..277b306eee 100644 --- a/src/tests/viewMode.test.tsx +++ b/src/tests/viewMode.test.tsx @@ -1,4 +1,3 @@ -import React from "react"; import { render, GlobalTestState } from "./test-utils"; import ExcalidrawApp from "../excalidraw-app"; import { KEYS } from "../keys"; diff --git a/src/tests/zindex.test.tsx b/src/tests/zindex.test.tsx index baf60f49d6..fe4c77ce37 100644 --- a/src/tests/zindex.test.tsx +++ b/src/tests/zindex.test.tsx @@ -1,4 +1,3 @@ -import React from "react"; import ReactDOM from "react-dom"; import { render } from "./test-utils"; import ExcalidrawApp from "../excalidraw-app";