Refactor: convert initializeApp to func component and use JSX transform in the codebase (#4056)

src/actions/actionAlign.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { alignElements, Alignment } from "../align";
 import {
   AlignBottomIcon,

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";

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";

src/actions/actionDistribute.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import {
   DistributeHorizontallyIcon,
   DistributeVerticallyIcon,

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";

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";

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";

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";

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";

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";

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";

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";

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";

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 <ButtonSelect />

src/components/ButtonSelect.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import clsx from "clsx";
 
 export const ButtonSelect = <T extends Object>({

src/components/CollabButton.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import clsx from "clsx";
 import { ToolButton } from "./ToolButton";
 import { t } from "../i18n";

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";

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";

src/components/HelpIcon.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { questionCircle } from "../components/icons";
 
 type HelpIconProps = {

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";

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<Props, State> {
-  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) ||
+      languages.find((lang) => lang.code === props.langCode) || defaultLang;
-      defaultLang;
+    updateLang();
-    await setLanguage(currentLang);
+    setLoading(false);
-    this.setState({
+  }, [props.langCode]);
-      isLoading: false,
-    });
-  }
 
-  public render() {
+  return loading ? <LoadingMessage /> : props.children;
-    return this.state.isLoading ? <LoadingMessage /> : this.props.children;
+};
-  }
-}

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";

src/components/LoadingMessage.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { t } from "../i18n";
 
 export const LoadingMessage = () => {

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";
 

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,

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";

src/excalidraw-app/index.tsx

@@ -1,11 +1,5 @@
 import LanguageDetector from "i18next-browser-languagedetector";
-import React, {
+import { useCallback, useContext, useEffect, useRef, useState } from "react";
-  useCallback,
-  useContext,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
 import { trackEvent } from "../analytics";
 import { getDefaultAppState } from "../appState";
 import { ErrorDialog } from "../components/ErrorDialog";

src/index.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import ReactDOM from "react-dom";
 import ExcalidrawApp from "./excalidraw-app";
 

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

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";

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";

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";

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";

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";

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";

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";

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";

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";

src/tests/multiPointCreate.test.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import ReactDOM from "react-dom";
 import {
   render,

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";

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";

src/tests/scroll.test.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import {
   mockBoundingClientRect,
   render,

src/tests/selection.test.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import ReactDOM from "react-dom";
 import {
   render,

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";

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";