diff --git a/src/actions/actionAlign.tsx b/src/actions/actionAlign.tsx index 3c60703c..eb51e80b 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 4d01145d..375fabcc 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 dd2ad42c..1be1019c 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 b197575b..8744fac6 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 b48a0b6d..6d9cc5ba 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 41fc14f1..db8a8e27 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 3a80734e..988e3402 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 2e4a8a34..5da546fe 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 2653eb70..6b3cf713 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 18d56dc4..b63e75a1 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 4d64879a..420a4712 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 e3d28a25..48973ed9 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 ba0f4c51..a116601c 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 dce2ed34..53e14591 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 42d1fdf1..c47ff65e 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 ceb86c19..e0bf3600 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 1c219b48..d64492fc 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 44397ce9..8a4bf261 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 5e12154b..6553c324 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 2afa7201..aa56c4a4 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 85198c35..f6ff278d 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 4eb6b780..5619e776 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 fa2461e7..76d1bb87 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 d7ae9140..22b62750 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 2b79ffc1..3a65e3ca 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 793c4c9d..89cf2c13 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 8b4f0ac5..adf308c2 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 5ecf656e..b29029b9 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 a1fffc7f..3a3a05ed 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 a16ac302..33e3e33f 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 368e9140..20fa595b 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 b62e7ecf..e780b03e 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 9065abbf..91df9be0 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 3af66833..b39601eb 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 0159e233..0167716f 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 30c0b1ed..479748af 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 792b2a10..8d6f032c 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 d770be16..dc54f2bd 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 d3e40767..7437a1d4 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 b6d1e8ca..d0e22c6d 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 a85a84ef..b77c039f 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 4887e10e..70a115a5 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 ec640e68..e2bcd1db 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 18dfe29e..277b306e 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 baf60f49..fe4c77ce 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";