From 4b24ce9f4eeb2ad077a0d600bc0bca2910d043a8 Mon Sep 17 00:00:00 2001
From: gorgeousvlad <gorgeousvlad@gmail.com>
Date: Thu, 20 Jul 2023 10:56:35 +0200
Subject: [PATCH] fix: code review

---
 .../DeviceEmulation/DeviceEmulation.tsx       | 82 +++----------------
 .../DeviceEmulationMobile.scss}               |  4 +-
 .../DeviceEmulationMobile.tsx                 | 56 +++++++++++++
 .../components/DeviceEmulation/utils.ts       |  8 ++
 4 files changed, 79 insertions(+), 71 deletions(-)
 rename src/editor/components/DeviceEmulation/{DeviceEmulation.scss => DeviceEmulationMobile/DeviceEmulationMobile.scss} (86%)
 create mode 100644 src/editor/components/DeviceEmulation/DeviceEmulationMobile/DeviceEmulationMobile.tsx
 create mode 100644 src/editor/components/DeviceEmulation/utils.ts

diff --git a/src/editor/components/DeviceEmulation/DeviceEmulation.tsx b/src/editor/components/DeviceEmulation/DeviceEmulation.tsx
index 9297e0691..cb33253e1 100644
--- a/src/editor/components/DeviceEmulation/DeviceEmulation.tsx
+++ b/src/editor/components/DeviceEmulation/DeviceEmulation.tsx
@@ -1,79 +1,23 @@
-import React, {Fragment, PropsWithChildren, useContext, useEffect, useRef} from 'react';
+import React, {Fragment, PropsWithChildren} from 'react';
 
-import {block} from '../../../utils';
-import {EditorContext} from '../../context';
 import {ViewModeItem} from '../../types';
-import {DeviceIframe} from '../../widget';
 
-import './DeviceEmulation.scss';
-
-const b = block('device-emulation');
+import DeviceEmulationMobile from './DeviceEmulationMobile/DeviceEmulationMobile';
+import {isMobileDevice, mobileDevices} from './utils';
 
 export interface DeviceEmulationProps extends PropsWithChildren {
     mode: ViewModeItem;
 }
 
-type MobileDevice = ViewModeItem.Mobile | ViewModeItem.Tablet;
-
-const mobileDevices = [ViewModeItem.Tablet, ViewModeItem.Mobile] as const;
-const isMobileDevice = (mode: ViewModeItem): mode is MobileDevice =>
-    mobileDevices.includes(mode as MobileDevice);
-
-interface DeviceEmulationMobileProps extends PropsWithChildren {
-    device: MobileDevice;
-    active: boolean;
-}
-
-const DeviceEmulationMobile = ({device, active}: DeviceEmulationMobileProps) => {
-    const {deviceEmulationSettings, ...initialData} = useContext(EditorContext);
-    const containerRef = useRef<HTMLDivElement | null>(null);
-    const deviceIframeRef = useRef<DeviceIframe | null>(null);
-
-    useEffect(() => {
-        let iframe: DeviceIframe;
-
-        if (containerRef?.current) {
-            iframe = new DeviceIframe(containerRef?.current, {
-                initialData,
-                className: b('frame', {device}),
-                settings: deviceEmulationSettings,
-            });
-            deviceIframeRef.current = iframe;
-        }
-
-        return () => {
-            iframe?.destroy();
-        };
-        // render iframe only once, then update it's data with postMessage
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [device]);
-
-    useEffect(() => {
-        if (deviceIframeRef.current) {
-            deviceIframeRef.current.onActivenessUpdate(active);
-        }
-    }, [active]);
-
-    useEffect(() => {
-        if (deviceIframeRef.current && initialData) {
-            deviceIframeRef.current.onDataUpdate(initialData);
-        }
-    }, [initialData]);
-
-    return <div className={b({active, device})} ref={containerRef} />;
-};
-
-const DeviceEmulation = ({children, mode}: DeviceEmulationProps) => {
-    return (
-        <Fragment>
-            {!isMobileDevice(mode) && children}
-            {mobileDevices.map((device) => (
-                <DeviceEmulationMobile key={device} device={device} active={mode === device}>
-                    {children}
-                </DeviceEmulationMobile>
-            ))}
-        </Fragment>
-    );
-};
+const DeviceEmulation = ({children, mode}: DeviceEmulationProps) => (
+    <Fragment>
+        {!isMobileDevice(mode) && children}
+        {mobileDevices.map((device) => (
+            <DeviceEmulationMobile key={device} device={device} active={mode === device}>
+                {children}
+            </DeviceEmulationMobile>
+        ))}
+    </Fragment>
+);
 
 export default DeviceEmulation;
diff --git a/src/editor/components/DeviceEmulation/DeviceEmulation.scss b/src/editor/components/DeviceEmulation/DeviceEmulationMobile/DeviceEmulationMobile.scss
similarity index 86%
rename from src/editor/components/DeviceEmulation/DeviceEmulation.scss
rename to src/editor/components/DeviceEmulation/DeviceEmulationMobile/DeviceEmulationMobile.scss
index d38d1a779..dca0fdb2b 100644
--- a/src/editor/components/DeviceEmulation/DeviceEmulation.scss
+++ b/src/editor/components/DeviceEmulation/DeviceEmulationMobile/DeviceEmulationMobile.scss
@@ -1,6 +1,6 @@
-@import '../../../../styles/variables.scss';
+@import '../../../../../styles/variables.scss';
 
-$block: '.#{$ns}device-emulation';
+$block: '.#{$ns}device-emulation-mobile';
 
 #{$block} {
     position: absolute;
diff --git a/src/editor/components/DeviceEmulation/DeviceEmulationMobile/DeviceEmulationMobile.tsx b/src/editor/components/DeviceEmulation/DeviceEmulationMobile/DeviceEmulationMobile.tsx
new file mode 100644
index 000000000..0ec341080
--- /dev/null
+++ b/src/editor/components/DeviceEmulation/DeviceEmulationMobile/DeviceEmulationMobile.tsx
@@ -0,0 +1,56 @@
+import React, {PropsWithChildren, useContext, useEffect, useRef} from 'react';
+
+import {block} from '../../../../utils';
+import {EditorContext} from '../../../context';
+import {DeviceIframe} from '../../../widget';
+import {MobileDevice} from '../utils';
+
+import './DeviceEmulationMobile.scss';
+
+const b = block('device-emulation-mobile');
+
+interface DeviceEmulationMobileProps extends PropsWithChildren {
+    device: MobileDevice;
+    active: boolean;
+}
+
+const DeviceEmulationMobile = ({device, active}: DeviceEmulationMobileProps) => {
+    const {deviceEmulationSettings, ...initialData} = useContext(EditorContext);
+    const containerRef = useRef<HTMLDivElement | null>(null);
+    const deviceIframeRef = useRef<DeviceIframe | null>(null);
+
+    useEffect(() => {
+        let iframe: DeviceIframe;
+
+        if (containerRef?.current) {
+            iframe = new DeviceIframe(containerRef?.current, {
+                initialData,
+                className: b('frame', {device}),
+                settings: deviceEmulationSettings,
+            });
+            deviceIframeRef.current = iframe;
+        }
+
+        return () => {
+            iframe?.destroy();
+        };
+        // render iframe only once, then update it's data with postMessage
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [device]);
+
+    useEffect(() => {
+        if (deviceIframeRef.current) {
+            deviceIframeRef.current.onActivenessUpdate(active);
+        }
+    }, [active]);
+
+    useEffect(() => {
+        if (deviceIframeRef.current && initialData) {
+            deviceIframeRef.current.onDataUpdate(initialData);
+        }
+    }, [initialData]);
+
+    return <div className={b({active, device})} ref={containerRef} />;
+};
+
+export default DeviceEmulationMobile;
diff --git a/src/editor/components/DeviceEmulation/utils.ts b/src/editor/components/DeviceEmulation/utils.ts
new file mode 100644
index 000000000..cd556cf3b
--- /dev/null
+++ b/src/editor/components/DeviceEmulation/utils.ts
@@ -0,0 +1,8 @@
+import {ViewModeItem} from '../../types';
+
+export type MobileDevice = ViewModeItem.Mobile | ViewModeItem.Tablet;
+
+export const mobileDevices = [ViewModeItem.Tablet, ViewModeItem.Mobile] as const;
+
+export const isMobileDevice = (mode: ViewModeItem): mode is MobileDevice =>
+    [ViewModeItem.Tablet, ViewModeItem.Mobile].includes(mode as MobileDevice);