diff --git a/src/actions/actionAlign.tsx b/src/actions/actionAlign.tsx index 3c60703cd..eb51e80b9 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 4d01145df..375fabcc6 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 dd2ad42cd..1be1019c8 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 b197575b0..8744fac64 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 b48a0b6df..6d9cc5bab 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 41fc14f15..db8a8e273 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 3a80734ee..988e3402d 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 2e4a8a34b..5da546fea 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 2653eb70f..6b3cf7138 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 18d56dc4a..b63e75a15 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 4d64879a0..420a4712a 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 e3d28a255..48973ed9e 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 ba0f4c517..a116601ce 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 dce2ed340..53e145914 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 42d1fdf14..c47ff65e7 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 ceb86c194..e0bf36005 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 1c219b481..d64492fcf 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 44397ce9c..8a4bf261d 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 5e12154b4..6553c3245 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 2afa7201e..aa56c4a41 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 85198c353..f6ff278d3 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 4eb6b780c..5619e7764 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 fa2461e79..76d1bb87a 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 d7ae91407..22b627508 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 2b79ffc1e..3a65e3ca0 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 793c4c9d5..89cf2c13c 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 8b4f0ac57..adf308c27 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 5ecf656e7..b29029b93 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 a1fffc7f7..3a3a05ed9 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 a16ac3027..33e3e33fc 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 368e91407..20fa595b3 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 b62e7ecf4..e780b03ec 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 9065abbf8..91df9be06 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 3af668338..b39601eb5 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 0159e2331..0167716ff 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 30c0b1ed7..479748af6 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 792b2a10d..8d6f032cd 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 d770be168..dc54f2bdc 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 d3e40767c..7437a1d48 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 b6d1e8ca5..d0e22c6dc 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 a85a84ef6..b77c039f9 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 4887e10e3..70a115a50 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 ec640e68b..e2bcd1dbe 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 18dfe29e9..277b306ee 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 baf60f49d..fe4c77ce3 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";