From 722e5ca845b1c64219201d0c7a0b4e301acdf5d2 Mon Sep 17 00:00:00 2001
From: Lipis <lipiridis@gmail.com>
Date: Mon, 29 Mar 2021 17:09:20 +0300
Subject: [PATCH] refactor: Use arrow function where possible (#3315)

---
 src/actions/actionCanvas.tsx       |  2 +-
 src/actions/actionExport.tsx       |  2 +-
 src/components/Actions.tsx         |  2 +-
 src/components/ButtonIconCycle.tsx |  5 ++---
 src/components/CollabButton.tsx    |  2 +-
 src/components/Dialog.tsx          |  2 +-
 src/components/ExportDialog.tsx    |  2 +-
 src/components/LayerUI.tsx         |  2 +-
 src/components/LibraryUnit.tsx     |  2 +-
 src/components/Stats.tsx           |  2 +-
 src/excalidraw-app/index.tsx       | 10 ++++++----
 src/is-mobile.tsx                  |  5 +----
 src/renderer/renderElement.ts      |  6 +++---
 src/tests/resize.test.tsx          |  6 +++---
 14 files changed, 24 insertions(+), 26 deletions(-)

diff --git a/src/actions/actionCanvas.tsx b/src/actions/actionCanvas.tsx
index 9f23ef04..47b090b8 100644
--- a/src/actions/actionCanvas.tsx
+++ b/src/actions/actionCanvas.tsx
@@ -8,7 +8,7 @@ import { getCommonBounds, getNonDeletedElements } from "../element";
 import { newElementWith } from "../element/mutateElement";
 import { ExcalidrawElement } from "../element/types";
 import { t } from "../i18n";
-import useIsMobile from "../is-mobile";
+import { useIsMobile } from "../is-mobile";
 import { CODES, KEYS } from "../keys";
 import { getNormalizedZoom, getSelectedElements } from "../scene";
 import { centerScrollOn } from "../scene/scroll";
diff --git a/src/actions/actionExport.tsx b/src/actions/actionExport.tsx
index 7d5f2287..04f3a2aa 100644
--- a/src/actions/actionExport.tsx
+++ b/src/actions/actionExport.tsx
@@ -8,7 +8,7 @@ import { Tooltip } from "../components/Tooltip";
 import { DarkModeToggle, Appearence } from "../components/DarkModeToggle";
 import { loadFromJSON, saveAsJSON } from "../data";
 import { t } from "../i18n";
-import useIsMobile from "../is-mobile";
+import { useIsMobile } from "../is-mobile";
 import { KEYS } from "../keys";
 import { register } from "./register";
 import { supported } from "browser-fs-access";
diff --git a/src/components/Actions.tsx b/src/components/Actions.tsx
index 03ecd51a..3aac0133 100644
--- a/src/components/Actions.tsx
+++ b/src/components/Actions.tsx
@@ -3,7 +3,7 @@ import { ActionManager } from "../actions/manager";
 import { getNonDeletedElements } from "../element";
 import { ExcalidrawElement } from "../element/types";
 import { t } from "../i18n";
-import useIsMobile from "../is-mobile";
+import { useIsMobile } from "../is-mobile";
 import {
   canChangeSharpness,
   canHaveArrowheads,
diff --git a/src/components/ButtonIconCycle.tsx b/src/components/ButtonIconCycle.tsx
index 1159a1f4..98a6aa8a 100644
--- a/src/components/ButtonIconCycle.tsx
+++ b/src/components/ButtonIconCycle.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import clsx from "clsx";
 
 export const ButtonIconCycle = <T extends any>({
@@ -14,11 +13,11 @@ export const ButtonIconCycle = <T extends any>({
 }) => {
   const current = options.find((op) => op.value === value);
 
-  function cycle() {
+  const cycle = () => {
     const index = options.indexOf(current!);
     const next = (index + 1) % options.length;
     onChange(options[next].value);
-  }
+  };
 
   return (
     <label key={group} className={clsx({ active: current!.value !== null })}>
diff --git a/src/components/CollabButton.tsx b/src/components/CollabButton.tsx
index f1412f72..8b6feae0 100644
--- a/src/components/CollabButton.tsx
+++ b/src/components/CollabButton.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import clsx from "clsx";
 import { ToolButton } from "./ToolButton";
 import { t } from "../i18n";
-import useIsMobile from "../is-mobile";
+import { useIsMobile } from "../is-mobile";
 import { users } from "./icons";
 
 import "./CollabButton.scss";
diff --git a/src/components/Dialog.tsx b/src/components/Dialog.tsx
index 507dc177..f10a287d 100644
--- a/src/components/Dialog.tsx
+++ b/src/components/Dialog.tsx
@@ -2,7 +2,7 @@ import clsx from "clsx";
 import React, { useEffect } from "react";
 import { useCallbackRefState } from "../hooks/useCallbackRefState";
 import { t } from "../i18n";
-import useIsMobile from "../is-mobile";
+import { useIsMobile } from "../is-mobile";
 import { KEYS } from "../keys";
 import "./Dialog.scss";
 import { back, close } from "./icons";
diff --git a/src/components/ExportDialog.tsx b/src/components/ExportDialog.tsx
index bad31a91..1a225a05 100644
--- a/src/components/ExportDialog.tsx
+++ b/src/components/ExportDialog.tsx
@@ -6,7 +6,7 @@ import { canvasToBlob } from "../data/blob";
 import { NonDeletedExcalidrawElement } from "../element/types";
 import { CanvasError } from "../errors";
 import { t } from "../i18n";
-import useIsMobile from "../is-mobile";
+import { useIsMobile } from "../is-mobile";
 import { getSelectedElements, isSomeElementSelected } from "../scene";
 import { exportToCanvas, getExportSize } from "../scene/export";
 import { AppState } from "../types";
diff --git a/src/components/LayerUI.tsx b/src/components/LayerUI.tsx
index 32b8fac5..c51057e4 100644
--- a/src/components/LayerUI.tsx
+++ b/src/components/LayerUI.tsx
@@ -14,7 +14,7 @@ import { Library } from "../data/library";
 import { isTextElement, showSelectedShapeActions } from "../element";
 import { NonDeletedExcalidrawElement } from "../element/types";
 import { Language, t } from "../i18n";
-import useIsMobile from "../is-mobile";
+import { useIsMobile } from "../is-mobile";
 import { calculateScrollCenter, getSelectedElements } from "../scene";
 import { ExportType } from "../scene/types";
 import { AppState, ExcalidrawProps, LibraryItem, LibraryItems } from "../types";
diff --git a/src/components/LibraryUnit.tsx b/src/components/LibraryUnit.tsx
index c4dd280a..2698def0 100644
--- a/src/components/LibraryUnit.tsx
+++ b/src/components/LibraryUnit.tsx
@@ -4,7 +4,7 @@ import React, { useEffect, useRef, useState } from "react";
 import { close } from "../components/icons";
 import { MIME_TYPES } from "../constants";
 import { t } from "../i18n";
-import useIsMobile from "../is-mobile";
+import { useIsMobile } from "../is-mobile";
 import { exportToSvg } from "../scene/export";
 import { LibraryItem } from "../types";
 import "./LibraryUnit.scss";
diff --git a/src/components/Stats.tsx b/src/components/Stats.tsx
index 9fbf3bbe..494ab3df 100644
--- a/src/components/Stats.tsx
+++ b/src/components/Stats.tsx
@@ -8,7 +8,7 @@ import {
   getTotalStorageSize,
 } from "../excalidraw-app/data/localStorage";
 import { t } from "../i18n";
-import useIsMobile from "../is-mobile";
+import { useIsMobile } from "../is-mobile";
 import { getTargetElements } from "../scene";
 import { AppState } from "../types";
 import { debounce, getVersion, nFormatter } from "../utils";
diff --git a/src/excalidraw-app/index.tsx b/src/excalidraw-app/index.tsx
index 31fbeb81..b311bd50 100644
--- a/src/excalidraw-app/index.tsx
+++ b/src/excalidraw-app/index.tsx
@@ -161,7 +161,7 @@ const initializeScene = async (opts: {
   return null;
 };
 
-function ExcalidrawWrapper() {
+const ExcalidrawWrapper = () => {
   // dimensions
   // ---------------------------------------------------------------------------
 
@@ -347,9 +347,9 @@ function ExcalidrawWrapper() {
       )}
     </>
   );
-}
+};
 
-export default function ExcalidrawApp() {
+const ExcalidrawApp = () => {
   return (
     <TopErrorBoundary>
       <CollabContextConsumer>
@@ -357,4 +357,6 @@ export default function ExcalidrawApp() {
       </CollabContextConsumer>
     </TopErrorBoundary>
   );
-}
+};
+
+export default ExcalidrawApp;
diff --git a/src/is-mobile.tsx b/src/is-mobile.tsx
index 466fcd0d..a64942f5 100644
--- a/src/is-mobile.tsx
+++ b/src/is-mobile.tsx
@@ -34,7 +34,4 @@ export const IsMobileProvider = ({
 };
 
 export const isMobile = () => getIsMobileMatcher().matches;
-
-export default function useIsMobile() {
-  return useContext(context);
-}
+export const useIsMobile = () => useContext(context);
diff --git a/src/renderer/renderElement.ts b/src/renderer/renderElement.ts
index 89048ba1..9485a033 100644
--- a/src/renderer/renderElement.ts
+++ b/src/renderer/renderElement.ts
@@ -349,12 +349,12 @@ const generateElementShape = (
         if (element.type === "arrow") {
           const { startArrowhead = null, endArrowhead = "arrow" } = element;
 
-          function getArrowheadShapes(
+          const getArrowheadShapes = (
             element: ExcalidrawLinearElement,
             shape: Drawable[],
             position: "start" | "end",
             arrowhead: Arrowhead,
-          ) {
+          ) => {
             const arrowheadPoints = getArrowheadPoints(
               element,
               shape,
@@ -392,7 +392,7 @@ const generateElementShape = (
               generator.line(x3, y3, x2, y2, options),
               generator.line(x4, y4, x2, y2, options),
             ];
-          }
+          };
 
           if (startArrowhead !== null) {
             const shapes = getArrowheadShapes(
diff --git a/src/tests/resize.test.tsx b/src/tests/resize.test.tsx
index 70c79fe6..f730fcd8 100644
--- a/src/tests/resize.test.tsx
+++ b/src/tests/resize.test.tsx
@@ -122,12 +122,12 @@ describe("resize rectangle ellipses and diamond elements", () => {
   );
 });
 
-function resize(
+const resize = (
   element: ExcalidrawElement,
   handleDir: TransformHandleDirection,
   mouseMove: [number, number],
   keyboardModifiers: KeyboardModifiers = {},
-) {
+) => {
   mouse.select(element);
   const handle = getTransformHandles(element, h.state.zoom, "mouse")[
     handleDir
@@ -140,4 +140,4 @@ function resize(
     mouse.move(mouseMove[0], mouseMove[1]);
     mouse.up();
   });
-}
+};