remove sharingSession service from ConnectedDevicesListDrawer

app/components/ConnectedDevicesListDrawer.tsx

@@ -16,20 +16,20 @@ import { Row, Col } from 'react-flexbox-grid';
 import { createStyles, makeStyles } from '@material-ui/core/styles';
 import CloseOverlayButton from './CloseOverlayButton';
 import ConnectedDevicesService from '../features/ConnectedDevicesService';
-import SharingSessionService from '../features/SharingSessionService';
 import DeviceInfoCallout from './DeviceInfoCallout';
 import SharingSourcePreviewCard from './SharingSourcePreviewCard';
 import isWithReactRevealAnimations from '../utils/isWithReactRevealAnimations';
 import isProduction from '../utils/isProduction';
 import { IpcEvents } from '../main/IpcEvents.enum';
 
-const sharingSessionService = remote.getGlobal(
-  'sharingSessionService'
-) as SharingSessionService;
 const connectedDevicesService = remote.getGlobal(
   'connectedDevicesService'
 ) as ConnectedDevicesService;
 
+type DeviceWithDesktopCapturerSourceId = Device & {
+  desktopCapturerSourceId: string;
+};
+
 const Fade = require('react-reveal/Fade');
 
 interface ConnectedDevicesListDrawerProps {
@@ -62,21 +62,46 @@ export default function ConnectedDevicesListDrawer(
   const classes = useStyles();
 
   const [isAlertDisconectAllOpen, setIsAlertDisconectAllOpen] = useState(false);
-
+  const [connectedDevices, setConnectedDevices] = useState<
+    DeviceWithDesktopCapturerSourceId[]
+  >([]);
   const [devicesDisplayed, setDevicesDisplayed] = useState(new Map());
 
+  useEffect(() => {
+    ipcRenderer
+      .invoke(IpcEvents.GetConnectedDevices)
+      // eslint-disable-next-line promise/always-return
+      .then((devices: Device[]) => {
+        console.log('devices', devices);
+        // setConnectedDevices(devices);
+        const devicesWithSourceIds: DeviceWithDesktopCapturerSourceId[] = [];
+        devices.forEach(async (device) => {
+          const sharingSourceId = await ipcRenderer.invoke(
+            IpcEvents.GetDesktopCapturerSourceIdBySharingSessionId,
+            device.sharingSessionID
+          );
+          devicesWithSourceIds.push({
+            ...device,
+            desktopCapturerSourceId: sharingSourceId,
+          });
+          console.log('device pushed');
+        });
+        setConnectedDevices(devicesWithSourceIds);
+      })
+      // eslint-disable-next-line no-console
+      .catch((e) => console.error(e));
+  }, []);
+
   useEffect(() => {
     const map = new Map();
-    connectedDevicesService.getDevices().forEach((el) => {
+    connectedDevices.forEach((el) => {
       map.set(el.id, true);
     });
     setDevicesDisplayed(map);
-  }, [setDevicesDisplayed]);
+  }, [setDevicesDisplayed, connectedDevices]);
 
   const handleDisconnectOneDevice = useCallback(async (id: string) => {
-    const device = connectedDevicesService.devices.find(
-      (d: Device) => d.id === id
-    );
+    const device = connectedDevices.find((d: Device) => d.id === id);
     if (!device) return;
     ipcRenderer.invoke(
       IpcEvents.DisconnectPeerAndDestroySharingSessionBySessionID,
@@ -86,7 +111,7 @@ export default function ConnectedDevicesListDrawer(
   }, []);
 
   const handleDisconnectAll = useCallback(() => {
-    connectedDevicesService.devices.forEach((device: Device) => {
+    connectedDevices.forEach((device: Device) => {
       ipcRenderer.invoke(
         IpcEvents.DisconnectPeerAndDestroySharingSessionBySessionID,
         device.sharingSessionID
@@ -149,7 +174,6 @@ export default function ConnectedDevicesListDrawer(
         isOpen={props.isOpen}
         onClose={props.handleToggle}
         transitionDuration={isWithReactRevealAnimations() ? 700 : 0}
-        // transitionDuration={0}
       >
         <Row between="xs" middle="xs" className={classes.drawerInnerTopPanel}>
           <Col xs={11}>
@@ -184,7 +208,7 @@ export default function ConnectedDevicesListDrawer(
               duration={isWithReactRevealAnimations() ? 700 : 0}
             >
               <div className={classes.zoomFullWidth}>
-                {connectedDevicesService.getDevices().map((device) => {
+                {connectedDevices.map((device) => {
                   return (
                     <div key={device.id}>
                       <Fade
@@ -206,11 +230,7 @@ export default function ConnectedDevicesListDrawer(
                             </Col>
                             <Col xs={6}>
                               <SharingSourcePreviewCard
-                                sharingSourceID={
-                                  sharingSessionService.sharingSessions.get(
-                                    device.sharingSessionID
-                                  )?.desktopCapturerSourceID
-                                }
+                                sharingSourceID={device.desktopCapturerSourceId}
                               />
                             </Col>
                           </Row>

app/components/TopPanel.tsx

@@ -61,7 +61,10 @@ export default function TopPanel(props: any) {
   }, [isDarkTheme]);
 
   const [isSettingsOpen, setIsSettingsOpen] = React.useState(false);
-  const [isDrawersOpen, setIsDrawerOpen] = React.useState(false);
+  const [
+    isConnectedDevicesDrawerOpen,
+    setIsConnectedDevicesDrawerOpen,
+  ] = React.useState(false);
 
   const handleSettingsOpen = useCallback(() => {
     setIsSettingsOpen(true);
@@ -72,8 +75,8 @@ export default function TopPanel(props: any) {
   }, []);
 
   const handleToggleConnectedDevicesListDrawer = useCallback(() => {
-    setIsDrawerOpen(!isDrawersOpen);
-  }, [isDrawersOpen]);
+    setIsConnectedDevicesDrawerOpen(!isConnectedDevicesDrawerOpen);
+  }, [isConnectedDevicesDrawerOpen]);
 
   const donateTooltipContent = t(
     'If you like Deskreen consider contributing financially Deskreen is open-source Your donations keep us motivated to make Deskreen even better'
@@ -232,15 +235,23 @@ export default function TopPanel(props: any) {
           {renderSettingsButton()}
         </div>
       </div>
+      {isConnectedDevicesDrawerOpen ? (
         <SettingsOverlay
           isSettingsOpen={isSettingsOpen}
           handleClose={handleSettingsClose}
         />
+      ) : (
+        <></>
+      )}
+      {isConnectedDevicesDrawerOpen ? (
         <ConnectedDevicesListDrawer
-        isOpen={isDrawersOpen}
+          isOpen={isConnectedDevicesDrawerOpen}
           handleToggle={handleToggleConnectedDevicesListDrawer}
           stepperRef={props.stepperRef}
         />
+      ) : (
+        <></>
+      )}
     </>
   );
 }

app/components/__snapshots__/TopPanel.spec.tsx.snap

@@ -1,201 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<TopPanel /> should match exact snapshot 1`] = `
-<Fragment>
-  <div
-    className="makeStyles-topPanelRoot-1"
-  >
-    <Row
-      center="xs"
-      middle="xs"
-      style={
-        Object {
-          "transform": "translateX(-50px)",
-          "width": "100%",
-        }
-      }
-    >
-      <Col>
-        <Blueprint3.Tooltip
-          content=""
-          hoverCloseDelay={0}
-          hoverOpenDelay={100}
-          minimal={false}
-          position="bottom"
-          transitionDuration={100}
-        >
-          <Blueprint3.Button
-            onClick={[Function]}
-            style={
-              Object {
-                "borderRadius": "100px",
-                "marginRight": "10px",
-              }
-            }
-          >
-            <Row
-              start="xs"
-            >
-              <Col
-                xs={true}
-              >
-                <img
-                  alt="heart"
-                  height={16}
-                  src="test-file-stub"
-                  style={
-                    Object {
-                      "transform": "translateY(2px)",
-                    }
-                  }
-                  width={16}
-                />
-              </Col>
-              <Col
-                xs={true}
-              >
-                <div
-                  style={
-                    Object {
-                      "transform": "translateY(2px) translateX(-5px)",
-                      "width": "max-content",
-                    }
-                  }
-                >
-                  <Blueprint3.Text
-                    ellipsize={false}
-                    tagName="div"
-                  />
-                </div>
-              </Col>
-            </Row>
-          </Blueprint3.Button>
-        </Blueprint3.Tooltip>
-      </Col>
-      <Col>
-        <div
-          className="makeStyles-logoWithAppName-9"
-          id="logo-with-popover-visit-website"
-        >
-          <Blueprint3.Tooltip
-            content=""
-            hoverCloseDelay={0}
-            hoverOpenDelay={100}
-            minimal={false}
-            position="bottom"
-            transitionDuration={100}
-          >
-            <Blueprint3.Button
-              minimal={true}
-              onClick={[Function]}
-              style={
-                Object {
-                  "borderRadius": "100px",
-                }
-              }
-            >
-              <h4
-                className="makeStyles-appNameHeader-17"
-                id="deskreen-top-app-name-header"
-                style={
-                  Object {
-                    "transform": "translateY(-3px)",
-                  }
-                }
-              >
-                Deskreen
-              </h4>
-            </Blueprint3.Button>
-          </Blueprint3.Tooltip>
-        </div>
-      </Col>
-    </Row>
-    <div
-      className="makeStyles-topPanelControlButtonsRoot-25"
-    >
-      <div
-        className="makeStyles-topPanelControlButtonMargin-34"
-      >
-        <Blueprint3.Tooltip
-          content=""
-          hoverCloseDelay={0}
-          hoverOpenDelay={100}
-          minimal={false}
-          position="bottom"
-          transitionDuration={100}
-        >
-          <Blueprint3.Button
-            className="makeStyles-topPanelControlButton-40"
-            id="top-panel-connected-devices-list-button"
-            intent="primary"
-            onClick={[Function]}
-          >
-            <Blueprint3.Icon
-              className="makeStyles-topPanelIconOfControlButton-49"
-              icon="th-list"
-              iconSize={20}
-            />
-          </Blueprint3.Button>
-        </Blueprint3.Tooltip>
-      </div>
-      <div
-        className="makeStyles-topPanelControlButtonMargin-55"
-      >
-        <Blueprint3.Tooltip
-          content=""
-          hoverCloseDelay={0}
-          hoverOpenDelay={100}
-          minimal={false}
-          position="bottom"
-          transitionDuration={100}
-        >
-          <Blueprint3.Button
-            className="makeStyles-topPanelControlButton-61"
-            id="top-panel-help-button"
-            intent="none"
-            onClick={[Function]}
-          >
-            <Blueprint3.Icon
-              className="makeStyles-topPanelIconOfControlButton-70"
-              icon="learning"
-              iconSize={22}
-            />
-          </Blueprint3.Button>
-        </Blueprint3.Tooltip>
-      </div>
-      <div
-        className="makeStyles-topPanelControlButtonMargin-76"
-      >
-        <Blueprint3.Tooltip
-          content=""
-          hoverCloseDelay={0}
-          hoverOpenDelay={100}
-          minimal={false}
-          position="bottom"
-          transitionDuration={100}
-        >
-          <Blueprint3.Button
-            className="makeStyles-topPanelControlButton-82"
-            id="top-panel-settings-button"
-            onClick={[Function]}
-          >
-            <Blueprint3.Icon
-              className="makeStyles-topPanelIconOfControlButton-91"
-              icon="cog"
-              iconSize={22}
-            />
-          </Blueprint3.Button>
-        </Blueprint3.Tooltip>
-      </div>
-    </div>
-  </div>
-  <SettingsOverlay
-    handleClose={[Function]}
-    isSettingsOpen={false}
-  />
-  <ConnectedDevicesListDrawer
-    handleToggle={[Function]}
-    isOpen={false}
-  />
-</Fragment>
-`;

app/main/IpcEvents.enum.ts

@@ -8,4 +8,6 @@ export enum IpcEvents {
   SetDeviceConnectedStatus = 'set-device-connected-status',
   GetSourceDisplayIDByDesktopCapturerSourceID = 'get-source-display-id-by-desktop-capturer-source-id',
   DisconnectPeerAndDestroySharingSessionBySessionID = 'disconnect-peer-and-destroy-sharing-session-by-session-id',
+  GetDesktopCapturerSourceIdBySharingSessionId = 'get-desktop-capturer-source-id-by-sharing-session-id',
+  GetConnectedDevices = 'get-connected-devices-list',
 }

app/main/ipcMainHandlers.ts

@@ -158,4 +158,17 @@ export default function initIpcMainHandlers(
       );
     }
   );
+
+  ipcMain.handle(
+    IpcEvents.GetDesktopCapturerSourceIdBySharingSessionId,
+    (_, sessionId) => {
+      return getDeskreenGlobal().sharingSessionService.sharingSessions.get(
+        sessionId
+      )?.desktopCapturerSourceID;
+    }
+  );
+
+  ipcMain.handle(IpcEvents.GetConnectedDevices, () => {
+    return getDeskreenGlobal().connectedDevicesService.getDevices();
+  });
 }