simplified concept

desktop-app/src/renderer/components/Previewer/Device/Toolbar.tsx

@@ -7,32 +7,28 @@ import { Device } from 'common/deviceList';
 import WebPage from 'main/screenshot/webpage';
 
 import screenshotSfx from 'renderer/assets/sfx/screenshot.mp3';
-import { selectRotate, setRotate } from 'renderer/store/features/renderer';
-import { useDispatch, useSelector } from 'react-redux';
 
 interface Props {
   webview: Electron.WebviewTag | null;
-  deviceID: string;
   device: Device;
   setScreenshotInProgress: (value: boolean) => void;
   openDevTools: () => void;
+  onRotate: (state: boolean) => void;
 }
 
 const Toolbar = ({
   webview,
-  deviceID,
   device,
   setScreenshotInProgress,
   openDevTools,
-  
+  onRotate,
 }: Props) => {
   const [eventMirroringOff, setEventMirroringOff] = useState<boolean>(false);
   const [playScreenshotDone] = useSound(screenshotSfx, { volume: 0.5 });
   const [screenshotLoading, setScreenshotLoading] = useState<boolean>(false);
   const [fullScreenshotLoading, setFullScreenshotLoading] =
     useState<boolean>(false);
-  const rotatedDevices = useSelector(selectRotate);
-  const dispatch = useDispatch();
+  const [rotated, setRotated] = useState<boolean>(false);
 
   const toggleEventMirroring = async () => {
     if (webview == null) {
@@ -118,21 +114,8 @@ const Toolbar = ({
   };
 
   const rotate = async () => {
-    try {
-      if (rotatedDevices[deviceID]) {
-        const obj = {...rotatedDevices};
-      
-        obj[deviceID] = {
-          inSingle: !(obj[deviceID].inSingle),
-          rotate: !(obj[deviceID].rotate)
-        };
-
-        dispatch(setRotate({...obj}));
-      }
-    } catch (error) {
-      // eslint-disable-next-line no-console
-      console.error('Error while rotate single screen', error);
-    }
+    setRotated(!rotated);
+    onRotate(!rotated);
   };
 
   return (
@@ -171,17 +154,11 @@ const Toolbar = ({
       <Button onClick={openDevTools} title="Open Devtools">
         <Icon icon="ic:round-code" />
       </Button>
-      <Button 
-        onClick={rotate}
-        isActive={rotatedDevices[deviceID]?.inSingle}
-        title="Rotate This Device"
-      >
+      <Button onClick={rotate} isActive={rotated} title="Rotate This Device">
         <Icon
           icon={
-            rotatedDevices[deviceID]?.inSingle
-              ? 'mdi:phone-rotate-portrait'
-              : 'mdi:phone-rotate-landscape'
-            }
+            rotated ? 'mdi:phone-rotate-portrait' : 'mdi:phone-rotate-landscape'
+          }
         />
       </Button>
     </div>

desktop-app/src/renderer/components/Previewer/Device/index.tsx

@@ -41,7 +41,6 @@ import Toolbar from './Toolbar';
 import { appendHistory } from './utils';
 
 interface Props {
-  id: string;
   device: IDevice;
   isPrimary: boolean;
 }
@@ -51,28 +50,31 @@ interface ErrorState {
   description: string;
 }
 
-const Device = ({ isPrimary, device, id }: Props) => {
-  const rotatedDevices = useSelector(selectRotate);
-  let { height, width } = device;
-  if (rotatedDevices[id]?.rotate) {
-    const temp = width;
-    width = height;
-    height = temp;
-  }
-  const address = useSelector(selectAddress);
+const Device = ({ isPrimary, device }: Props) => {
+  const [singleRotated, setSingleRotated] = useState<boolean>(false);
   const [loading, setLoading] = useState<boolean>(false);
   const [error, setError] = useState<ErrorState | null>(null);
   const [screenshotInProgress, setScreenshotInProgess] =
     useState<boolean>(false);
-  const dispatch = useDispatch();
+  const address = useSelector(selectAddress);
   const zoomfactor = useSelector(selectZoomFactor);
   const isInspecting = useSelector(selectIsInspecting);
+  const rotateDevices = useSelector(selectRotate);
   const isDevtoolsOpen = useSelector(selectIsDevtoolsOpen);
   const devtoolsOpenForWebviewId = useSelector(selectDevtoolsWebviewId);
+  const dispatch = useDispatch();
 
   const dockPosition = useSelector(selectDockPosition);
   const ref = useRef<Electron.WebviewTag>(null);
 
+  let { height, width } = device;
+
+  if (rotateDevices || singleRotated) {
+    const temp = width;
+    width = height;
+    height = temp;
+  }
+
   const registerNavigationHandlers = useCallback(() => {
     webViewPubSub.subscribe(NAVIGATION_EVENTS.RELOAD, () => {
       if (ref.current) {
@@ -184,6 +186,8 @@ const Device = ({ isPrimary, device, id }: Props) => {
     ]
   );
 
+  const onRotateHandler = (state: boolean) => setSingleRotated(state);
+
   useEffect(() => {
     if (!ref.current) {
       return;
@@ -383,11 +387,11 @@ const Device = ({ isPrimary, device, id }: Props) => {
         {loading ? <Spinner spinnerHeight={24} /> : null}
       </div>
       <Toolbar
-        deviceID={id}
         webview={ref.current}
         device={device}
         setScreenshotInProgress={setScreenshotInProgess}
         openDevTools={openDevTools}
+        onRotate={onRotateHandler}
       />
       <div
         style={{ height: scaledHeight, width: scaledWidth }}

desktop-app/src/renderer/components/Previewer/index.tsx

@@ -1,4 +1,4 @@
-import { useDispatch, useSelector } from 'react-redux';
+import { useSelector } from 'react-redux';
 import cx from 'classnames';
 import { selectActiveSuite } from 'renderer/store/features/device-manager';
 import { DOCK_POSITION, PREVIEW_LAYOUTS } from 'common/constants';
@@ -6,11 +6,10 @@ import {
   selectDockPosition,
   selectIsDevtoolsOpen,
 } from 'renderer/store/features/devtools';
-import { selectLayout, setRotate } from 'renderer/store/features/renderer';
+import { selectLayout } from 'renderer/store/features/renderer';
 import { getDevicesMap } from 'common/deviceList';
 import Device from './Device';
 import DevtoolsResizer from './DevtoolsResizer';
-import { useEffect } from 'react';
 
 const Previewer = () => {
   const activeSuite = useSelector(selectActiveSuite);
@@ -18,11 +17,6 @@ const Previewer = () => {
   const dockPosition = useSelector(selectDockPosition);
   const isDevtoolsOpen = useSelector(selectIsDevtoolsOpen);
   const layout = useSelector(selectLayout);
-  const dispatch = useDispatch();
-
-  useEffect(() => {
-    dispatch(setRotate(devices.reduce((acc, device) => ({ ...acc, [device.name]: { inSingle: false, rotate: false } }), {})));
-  }, []);
 
   return (
     <div className="h-full">
@@ -37,16 +31,9 @@ const Previewer = () => {
             'flex-wrap': layout === PREVIEW_LAYOUTS.FLEX,
           })}
         >
-          {devices.map((device, idx) => {
-            return (
-              <Device
-                id={device.name}
-                key={device.name}
-                device={device}
-                isPrimary={idx === 0}
-              />
-            );
-          })}
+          {devices.map((device, idx) => (
+            <Device key={device.id} device={device} isPrimary={idx === 0} />
+          ))}
         </div>
         {isDevtoolsOpen && dockPosition !== DOCK_POSITION.UNDOCKED ? (
           <DevtoolsResizer />

desktop-app/src/renderer/components/ToolBar/index.tsx

@@ -12,13 +12,11 @@ import Button from '../Button';
 import AddressBar from './AddressBar';
 import ColorSchemeToggle from './ColorSchemeToggle';
 import { PreviewSuiteSelector } from './PreviewSuiteSelector';
-import { useState } from 'react';
 
 const Divider = () => <div className="h-6 w-px bg-gray-300 dark:bg-gray-700" />;
 
 const ToolBar = () => {
-  const rotatedDevices = useSelector(selectRotate);
-  const [ allDevicesRotated, setAllDevicesRotated ] = useState<boolean>(false);
+  const rotateDevices = useSelector(selectRotate);
   const isInspecting = useSelector(selectIsInspecting);
   const dispatch = useDispatch();
 
@@ -27,27 +25,13 @@ const ToolBar = () => {
       <NavigationControls />
       <AddressBar />
       <Button
-        onClick={async () => {
-          const obj = {...rotatedDevices};
-          
-          for (const deviceID of Object.keys(obj)) {
-            if (!(obj[deviceID].inSingle)) {
-              obj[deviceID] = {
-                ...obj[deviceID],
-                rotate: allDevicesRotated
-              };
-            }
-          }
-
-          dispatch(setRotate({...obj}));
-          setAllDevicesRotated(!allDevicesRotated);
-        }}
-        isActive={allDevicesRotated}
+        onClick={() => dispatch(setRotate(!rotateDevices))}
+        isActive={rotateDevices}
         title="Rotate Devices"
       >
         <Icon
           icon={
-            allDevicesRotated
+            rotateDevices
               ? 'mdi:phone-rotate-portrait'
               : 'mdi:phone-rotate-landscape'
           }

desktop-app/src/renderer/store/features/renderer/index.ts

@@ -3,12 +3,10 @@ import type { PayloadAction } from '@reduxjs/toolkit';
 import { PreviewLayout } from 'common/constants';
 import type { RootState } from '../..';
 
-type IRotatedDevices = { [key: string]: { inSingle: boolean, rotate: boolean } };
-
 export interface RendererState {
   address: string;
   zoomFactor: number;
-  rotatedDevices: IRotatedDevices;
+  rotate: boolean;
   isInspecting: boolean | undefined;
   layout: PreviewLayout;
 }
@@ -29,7 +27,7 @@ const urlFromQueryParam = () => {
 const initialState: RendererState = {
   address: urlFromQueryParam() ?? window.electron.store.get('homepage'),
   zoomFactor: zoomSteps[window.electron.store.get('renderer.zoomStepIndex')],
-  rotatedDevices: {},
+  rotate: false,
   isInspecting: undefined,
   layout: window.electron.store.get('ui.previewLayout'),
 };
@@ -59,8 +57,8 @@ export const rendererSlice = createSlice({
         window.electron.store.set('renderer.zoomStepIndex', newIndex);
       }
     },
-    setRotate: (state, action: PayloadAction<IRotatedDevices>) => {
-      state.rotatedDevices = action.payload;
+    setRotate: (state, action: PayloadAction<boolean>) => {
+      state.rotate = action.payload;
     },
     setIsInspecting: (state, action: PayloadAction<boolean>) => {
       state.isInspecting = action.payload;
@@ -84,7 +82,7 @@ export const {
 
 export const selectZoomFactor = (state: RootState) => state.renderer.zoomFactor;
 export const selectAddress = (state: RootState) => state.renderer.address;
-export const selectRotate = (state: RootState) => state.renderer.rotatedDevices;
+export const selectRotate = (state: RootState) => state.renderer.rotate;
 export const selectIsInspecting = (state: RootState) =>
   state.renderer.isInspecting;
 export const selectLayout = (state: RootState) => state.renderer.layout;