remove .remote from Interrmediate step

app/components/StepsOfStepper/ChooseAppOrScreenOverlay/ChooseAppOrScreenOverlay.tsx

@@ -1,4 +1,4 @@
-import { remote } from 'electron';
+import { ipcRenderer } from 'electron';
 import React, { useCallback, useEffect, useState } from 'react';
 import { H3, Card, Dialog, Button } from '@blueprintjs/core';
 import { Row, Col } from 'react-flexbox-grid';
@@ -6,12 +6,8 @@ import { createStyles, makeStyles } from '@material-ui/core/styles';
 import { useTranslation } from 'react-i18next';
 import CloseOverlayButton from '../../CloseOverlayButton';
 import PreviewGridList from './PreviewGridList';
-import DesktopCapturerSources from '../../../features/DesktopCapturerSourcesService';
 import isWithReactRevealAnimations from '../../../utils/isWithReactRevealAnimations';
-
+import { IpcEvents } from '../../../main/IpcEvents.enum';
-const desktopCapturerSourcesService = remote.getGlobal(
-  'desktopCapturerSourcesService'
-) as DesktopCapturerSources;
 
 const Zoom = require('react-reveal/Zoom');
 const Fade = require('react-reveal/Fade');
@@ -62,37 +58,22 @@ export default function ChooseAppOrScreenOverlay(
   } = props;
   const classes = useStyles();
 
-  const [
+  const [screenViewSharingIds, setScreenViewSharingIds] = useState<string[]>(
-    screenViewSharingObjectsMap,
+    []
-    setScreenViewSharingObjectsMap,
+  );
-  ] = useState<Map<string, ViewSharingObject>>(new Map());
 
-  const [
+  const [appWindowsViewSharingIds, setAppWindowsViewSharingIds] = useState<
-    appsWindowsViewSharingObjectsMap,
+    string[]
-    setAppsWindowsViewSharingObjectsMap,
+  >([]);
-  ] = useState<Map<string, ViewSharingObject>>(new Map());
 
-  const handleRefreshSources = useCallback(() => {
+  const handleRefreshSources = useCallback(async () => {
+    const ids = await ipcRenderer.invoke(IpcEvents.GetDesktopSharingSourceIds, {
+      isEntireScreenToShareChosen,
+    });
     if (isEntireScreenToShareChosen) {
-      const sourcesToShare = desktopCapturerSourcesService.getScreenSources();
+      setScreenViewSharingIds(ids);
-      const screenViewMap = new Map<string, ViewSharingObject>();
-      sourcesToShare.forEach((source) => {
-        screenViewMap.set(source.id, {
-          thumbnailUrl: source.thumbnail.toDataURL(),
-          name: source.name,
-        });
-      });
-      setScreenViewSharingObjectsMap(screenViewMap);
     } else {
-      const sourcesToShare = desktopCapturerSourcesService.getAppWindowSources();
+      setAppWindowsViewSharingIds(ids);
-      const appViewMap = new Map<string, ViewSharingObject>();
-      sourcesToShare.forEach((source) => {
-        appViewMap.set(source.id, {
-          thumbnailUrl: source.thumbnail.toDataURL(),
-          name: source.name,
-        });
-      });
-      setAppsWindowsViewSharingObjectsMap(appViewMap);
     }
   }, [isEntireScreenToShareChosen]);
 
@@ -208,10 +189,10 @@ export default function ChooseAppOrScreenOverlay(
             <Row>
               <div className={classes.sharePreviewsContainer}>
                 <PreviewGridList
-                  viewSharingObjectsMap={
+                  viewSharingIds={
                     isEntireScreenToShareChosen
-                      ? screenViewSharingObjectsMap
+                      ? screenViewSharingIds
-                      : appsWindowsViewSharingObjectsMap
+                      : appWindowsViewSharingIds
                   }
                   isEntireScreen={isEntireScreenToShareChosen}
                   handleNextEntireScreen={() => {

app/components/StepsOfStepper/ChooseAppOrScreenOverlay/PreviewGridList.tsx

@@ -1,5 +1,5 @@
+import React from 'react';
 import { remote } from 'electron';
-import React, { useEffect, useState } from 'react';
 import { Row, Col } from 'react-flexbox-grid';
 import SharingSessionService from '../../../features/SharingSessionService';
 import SharingSourcePreviewCard from '../../SharingSourcePreviewCard';
@@ -8,10 +8,8 @@ const sharingSessionService = remote.getGlobal(
   'sharingSessionService'
 ) as SharingSessionService;
 
-const EMPTY_VIEW_SHARING_OBJECTS_MAP = new Map<string, ViewSharingObject>();
-
 class PreviewGridListProps {
-  viewSharingObjectsMap = EMPTY_VIEW_SHARING_OBJECTS_MAP;
+  viewSharingIds: string[] = [];
 
   isEntireScreen = true;
 
@@ -22,26 +20,11 @@ class PreviewGridListProps {
 
 export default function PreviewGridList(props: PreviewGridListProps) {
   const {
-    viewSharingObjectsMap,
+    viewSharingIds,
     isEntireScreen,
     handleNextEntireScreen,
     handleNextApplicationWindow,
   } = props;
-  const [showPreviewNamesMap, setShowPreviewNamesMap] = useState(
-    new Map<string, boolean>()
-  );
-
-  useEffect(() => {
-    const map = new Map<string, boolean>();
-    if (viewSharingObjectsMap === EMPTY_VIEW_SHARING_OBJECTS_MAP) {
-      setShowPreviewNamesMap(map);
-      return;
-    }
-    [...viewSharingObjectsMap.keys()].forEach((id: string) => {
-      map.set(id, false);
-    });
-    setShowPreviewNamesMap(map);
-  }, [viewSharingObjectsMap]);
 
   return (
     <Row
@@ -51,7 +34,7 @@ export default function PreviewGridList(props: PreviewGridListProps) {
         height: '90%',
       }}
     >
-      {[...showPreviewNamesMap.keys()].map((id) => {
+      {viewSharingIds.map((id) => {
         return (
           <Col xs={12} md={6} key={id}>
             <SharingSourcePreviewCard

app/components/StepsOfStepper/IntermediateStep.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { ipcRenderer } from 'electron';
 import { Button, Text } from '@blueprintjs/core';
 import { useTranslation } from 'react-i18next';
@@ -18,6 +18,7 @@ interface IntermediateStepProps {
   handleNextApplicationWindow: () => void;
   resetPendingConnectionDevice: () => void;
   resetUserAllowedConnection: () => void;
+  connectedDevice: Device | null;
 }
 
 function getStepContent(
@@ -25,7 +26,7 @@ function getStepContent(
   stepIndex: number,
   handleNextEntireScreen: () => void,
   handleNextApplicationWindow: () => void,
-  device: Device
+  connectedDevice: Device | null
 ) {
   switch (stepIndex) {
     case 0:
@@ -47,7 +48,7 @@ function getStepContent(
         </>
       );
     case 2:
-      return <ConfirmStep device={device} />;
+      return <ConfirmStep device={connectedDevice} />;
     default:
       return 'Unknown stepIndex';
   }
@@ -59,7 +60,6 @@ function isConfirmStep(activeStep: number, steps: string[]) {
 
 export default function IntermediateStep(props: IntermediateStepProps) {
   const { t } = useTranslation();
-  const [pendingConnectionDevice, setPendingConnectionDevice] = useState();
 
   const {
     activeStep,
@@ -70,19 +70,9 @@ export default function IntermediateStep(props: IntermediateStepProps) {
     handleNextApplicationWindow,
     resetPendingConnectionDevice,
     resetUserAllowedConnection,
+    connectedDevice,
   } = props;
 
-  useEffect(() => {
-    // eslint-disable-next-line promise/always-return
-    ipcRenderer
-      .invoke(IpcEvents.GetPendingConnectionDevice)
-      // eslint-disable-next-line promise/always-return
-      .then((device) => {
-        setPendingConnectionDevice(device);
-      })
-      .catch((e) => console.error(e));
-  }, []);
-
   return (
     <Col
       xs={12}
@@ -95,15 +85,13 @@ export default function IntermediateStep(props: IntermediateStepProps) {
         width: '100%',
       }}
     >
-      {pendingConnectionDevice &&
+      {getStepContent(
-        getStepContent(
+        t,
-          t,
+        activeStep,
-          activeStep,
+        handleNextEntireScreen,
-          handleNextEntireScreen,
+        handleNextApplicationWindow,
-          handleNextApplicationWindow,
+        connectedDevice
-          pendingConnectionDevice
+      )}
-        )}
-
       {
         // eslint-disable-next-line no-nested-ternary
         process.env.NODE_ENV === 'production' &&

app/containers/DeskreenStepper.tsx

@@ -239,11 +239,9 @@ const DeskreenStepper = React.forwardRef((_props, ref) => {
           handleBack={handleBack}
           handleNextEntireScreen={handleNextEntireScreen}
           handleNextApplicationWindow={handleNextApplicationWindow}
-          resetPendingConnectionDevice={
+          resetPendingConnectionDevice={() => setPendingConnectionDevice(null)}
-            () => setPendingConnectionDevice(null)
-            // eslint-disable-next-line react/jsx-curly-newline
-          }
           resetUserAllowedConnection={() => setIsUserAllowedConnection(false)}
+          connectedDevice={pendingConnectionDevice}
         />
       </div>
     );
@@ -255,6 +253,7 @@ const DeskreenStepper = React.forwardRef((_props, ref) => {
     handleBack,
     handleNextEntireScreen,
     handleNextApplicationWindow,
+    pendingConnectionDevice,
   ]);
 
   const renderStepLabelContent = useCallback(

app/main/IpcEvents.enum.ts

@@ -18,4 +18,5 @@ export enum IpcEvents {
   StartSharingOnWaitingForConnectionSharingSession = 'start-sharing-on-waiting-for-connection-sharing-session',
   GetPendingConnectionDevice = 'get-pending-connection-device',
   GetWaitingForConnectionSharingSessionRoomId = 'get-waiting-for-connection-sharing-session-room-id',
+  GetDesktopSharingSourceIds = 'get-desktop-sharing-source-ids',
 }

app/main/ipcMainHandlers.ts

@@ -246,4 +246,18 @@ export default function initIpcMainHandlers(
     return getDeskreenGlobal().sharingSessionService
       .waitingForConnectionSharingSession?.roomID;
   });
+
+  ipcMain.handle(
+    IpcEvents.GetDesktopSharingSourceIds,
+    (_, { isEntireScreenToShareChosen }) => {
+      if (isEntireScreenToShareChosen === true) {
+        return getDeskreenGlobal()
+          .desktopCapturerSourcesService.getScreenSources()
+          .map((source) => source.id);
+      }
+      return getDeskreenGlobal()
+        .desktopCapturerSourcesService.getAppWindowSources()
+        .map((source) => source.id);
+    }
+  );
 }