fix bug when the app is quit with a pdf opened

RocketChat · Feb 6, 2024 · ff7e060 · ff7e060
1 parent 559d711
commit ff7e060
Show file tree

Hide file tree

Showing 5 changed files with 87 additions and 96 deletions.
diff --git a/.nvmrc b/.nvmrc
diff --git a/src/servers/reducers.ts b/src/servers/reducers.ts
@@ -1,9 +1,9 @@
-import type { Reducer } from "redux";
+import type { Reducer } from 'redux';
 
-import { APP_SETTINGS_LOADED } from "../app/actions";
-import { DEEP_LINKS_SERVER_ADDED } from "../deepLinks/actions";
-import { OUTLOOK_CALENDAR_SAVE_CREDENTIALS } from "../outlookCalendar/actions";
-import type { ActionOf } from "../store/actions";
+import { APP_SETTINGS_LOADED } from '../app/actions';
+import { DEEP_LINKS_SERVER_ADDED } from '../deepLinks/actions';
+import { OUTLOOK_CALENDAR_SAVE_CREDENTIALS } from '../outlookCalendar/actions';
+import type { ActionOf } from '../store/actions';
 import {
   ADD_SERVER_VIEW_SERVER_ADDED,
   SIDE_BAR_REMOVE_SERVER_CLICKED,
@@ -26,16 +26,16 @@ import {
   WEBVIEW_SERVER_VERSION_UPDATED,
   SUPPORTED_VERSION_DIALOG_DISMISS,
   WEBVIEW_SIDEBAR_CUSTOM_THEME_CHANGED,
-} from "../ui/actions";
-import { SERVERS_LOADED, SERVER_DOCUMENT_VIEWER_OPEN_URL } from "./actions";
-import type { Server } from "./common";
+} from '../ui/actions';
+import { SERVERS_LOADED, SERVER_DOCUMENT_VIEWER_OPEN_URL } from './actions';
+import type { Server } from './common';
 
 const ensureUrlFormat = (serverUrl: string | null): string => {
   if (serverUrl) {
     return new URL(serverUrl).href;
   }
 
-  throw new Error("cannot handle null server URLs");
+  throw new Error('cannot handle null server URLs');
 };
 
 type ServersActionTypes =
@@ -64,7 +64,6 @@ type ServersActionTypes =
   | ActionOf<typeof WEBVIEW_SERVER_IS_SUPPORTED_VERSION>
   | ActionOf<typeof WEBVIEW_SERVER_VERSION_UPDATED>
   | ActionOf<typeof SUPPORTED_VERSION_DIALOG_DISMISS>
-  | ActionOf<typeof WEBVIEW_SERVER_SUPPORTED_VERSIONS_SOURCE_UPDATED>
   | ActionOf<typeof SERVER_DOCUMENT_VIEWER_OPEN_URL>;
 
 const upsert = (state: Server[], server: Server): Server[] => {
@@ -208,17 +207,18 @@ export const servers: Reducer<Server[], ServersActionTypes> = (
 
     case SERVERS_LOADED: {
       const { servers = state } = action.payload;
-      return servers.map((server) => ({
+      return servers.map((server: Server) => ({
         ...server,
         url: ensureUrlFormat(server.url),
       }));
     }
 
     case APP_SETTINGS_LOADED: {
       const { servers = state } = action.payload;
-      return servers.map((server) => ({
+      return servers.map((server: Server) => ({
         ...server,
         url: ensureUrlFormat(server.url),
+        documentViewerOpenUrl: '',
       }));
     }
 

diff --git a/src/ui/components/ServersView/DocumentViewer.tsx b/src/ui/components/ServersView/DocumentViewer.tsx
@@ -1,66 +1,47 @@
 import { Box, IconButton } from '@rocket.chat/fuselage';
-import { useState, useEffect } from 'react';
 
-const DynamicWebview = ({
+const DocumentViewer = ({
   url,
-  isActive,
   partition,
   closeDocumentViewer,
 }: {
   url: string;
-  isActive: boolean;
   partition: string;
   closeDocumentViewer: () => void;
 }) => {
-  const [webView, setWebView] = useState<JSX.Element | null>(null);
-
-  useEffect(() => {
-    if (isActive && url) {
-      setWebView(
-        <webview
-          src={url}
-          style={{
-            width: '100%',
-            height: '100%',
-            position: 'absolute',
-            left: 0,
-            top: 50,
-            right: 0,
-            bottom: 0,
-          }}
-          partition={partition}
-        />
-      );
-    } else {
-      setWebView(null);
-    }
-  }, [url, isActive, partition]);
-
   return (
     <>
-      {isActive && (
-        <Box
-          bg='light'
-          width='100%'
-          height='100%'
-          position='absolute'
-          content='center'
-          alignItems='center'
-        >
-          <Box content='center' alignItems='center' display='flex'>
-            <IconButton
-              icon='arrow-back'
-              onClick={closeDocumentViewer}
-              mi='x8'
-            />
-            <h2>PDF Viewer</h2>
-          </Box>
+      <Box
+        bg='light'
+        width='100%'
+        height='100%'
+        position='absolute'
+        content='center'
+        alignItems='center'
+      >
+        <Box content='center' alignItems='center' display='flex'>
+          <IconButton icon='arrow-back' onClick={closeDocumentViewer} mi='x8' />
+          <h2>PDF Viewer</h2>
+        </Box>
 
-          <Box>{webView}</Box>
+        <Box>
+          <webview
+            src={url}
+            style={{
+              width: '100%',
+              height: '100%',
+              position: 'absolute',
+              left: 0,
+              top: 50,
+              right: 0,
+              bottom: 0,
+            }}
+            partition={partition}
+          />
         </Box>
-      )}
+      </Box>
     </>
   );
 };
 
-export default DynamicWebview;
+export default DocumentViewer;
diff --git a/src/ui/components/ServersView/ServerPane.tsx b/src/ui/components/ServersView/ServerPane.tsx
@@ -1,19 +1,19 @@
-import { ipcRenderer } from "electron";
-import { useRef, useEffect, useState } from "react";
-import { useDispatch } from "react-redux";
-import type { Dispatch } from "redux";
+import { ipcRenderer } from 'electron';
+import { useRef, useEffect, useState } from 'react';
+import { useDispatch } from 'react-redux';
+import type { Dispatch } from 'redux';
 
-import { SERVER_DOCUMENT_VIEWER_OPEN_URL } from "../../../servers/actions";
-import type { RootAction } from "../../../store/actions";
+import { SERVER_DOCUMENT_VIEWER_OPEN_URL } from '../../../servers/actions';
+import type { RootAction } from '../../../store/actions';
 import {
   LOADING_ERROR_VIEW_RELOAD_SERVER_CLICKED,
   WEBVIEW_ATTACHED,
   WEBVIEW_READY,
-} from "../../actions";
-import DocumentViewer from "./DocumentViewer";
-import ErrorView from "./ErrorView";
-import UnsupportedServer from "./UnsupportedServer";
-import { StyledWebView, Wrapper } from "./styles";
+} from '../../actions';
+import DocumentViewer from './DocumentViewer';
+import ErrorView from './ErrorView';
+import UnsupportedServer from './UnsupportedServer';
+import { DocumentViewerWrapper, StyledWebView, Wrapper } from './styles';
 
 type ServerPaneProps = {
   lastPath: string | undefined;
@@ -38,7 +38,7 @@ export const ServerPane = ({
   const [documentViewerActive, setDocumentViewerActive] = useState(false);
 
   const webviewRef =
-    useRef<ReturnType<(typeof document)["createElement"]>>(null);
+    useRef<ReturnType<(typeof document)['createElement']>>(null);
 
   useEffect(() => {
     const webview = webviewRef.current;
@@ -54,10 +54,10 @@ export const ServerPane = ({
       if (webview) webview.focus();
     };
 
-    window.addEventListener("focus", handleWindowFocus);
+    window.addEventListener('focus', handleWindowFocus);
 
     return () => {
-      window.removeEventListener("focus", handleWindowFocus);
+      window.removeEventListener('focus', handleWindowFocus);
     };
   }, [isFailed, isSelected, serverUrl]);
 
@@ -68,7 +68,7 @@ export const ServerPane = ({
     }
     let step = false;
     const addEventListenerOnce = (
-      e: "did-attach" | "dom-ready",
+      e: 'did-attach' | 'dom-ready',
       cb: () => void
     ): void => {
       const handler = () => {
@@ -91,12 +91,12 @@ export const ServerPane = ({
         }, 300);
       step = true;
     };
-    addEventListenerOnce("did-attach", handleAttachReady);
-    addEventListenerOnce("dom-ready", handleAttachReady);
+    addEventListenerOnce('did-attach', handleAttachReady);
+    addEventListenerOnce('dom-ready', handleAttachReady);
 
     return () => {
-      webview.removeEventListener("did-attach", handleAttachReady);
-      webview.removeEventListener("dom-ready", handleAttachReady);
+      webview.removeEventListener('did-attach', handleAttachReady);
+      webview.removeEventListener('dom-ready', handleAttachReady);
     };
   }, [dispatch, serverUrl]);
 
@@ -105,7 +105,7 @@ export const ServerPane = ({
     if (!webview) {
       return;
     }
-    const addEventListenerOnce = (e: "did-attach", cb: () => void): void => {
+    const addEventListenerOnce = (e: 'did-attach', cb: () => void): void => {
       const handler = () => {
         cb();
         webview.removeEventListener(e, handler);
@@ -125,10 +125,10 @@ export const ServerPane = ({
       }, 300);
     };
 
-    addEventListenerOnce("did-attach", handleAttachReady);
+    addEventListenerOnce('did-attach', handleAttachReady);
 
     return () => {
-      webview.removeEventListener("did-attach", handleAttachReady);
+      webview.removeEventListener('did-attach', handleAttachReady);
     };
   }, [dispatch, serverUrl]);
 
@@ -149,7 +149,7 @@ export const ServerPane = ({
       return;
     }
 
-    if (isSelected && documentViewerOpenUrl && documentViewerOpenUrl !== "") {
+    if (isSelected && documentViewerOpenUrl && documentViewerOpenUrl !== '') {
       setDocumentViewerActive(true);
     } else {
       setDocumentViewerActive(false);
@@ -178,20 +178,20 @@ export const ServerPane = ({
   const closeDocumentViewer = () => {
     dispatch({
       type: SERVER_DOCUMENT_VIEWER_OPEN_URL,
-      payload: { server: serverUrl, documentUrl: "" },
+      payload: { server: serverUrl, documentUrl: '' },
     });
     setDocumentViewerActive(false);
   };
 
   useEffect(() => {
     const handleOnline = () => {
-      ipcRenderer.invoke("refresh-supported-versions", serverUrl);
+      ipcRenderer.invoke('refresh-supported-versions', serverUrl);
     };
 
-    window.addEventListener("online", handleOnline);
+    window.addEventListener('online', handleOnline);
 
     return () => {
-      window.removeEventListener("online", handleOnline);
+      window.removeEventListener('online', handleOnline);
     };
   }, [serverUrl]);
 
@@ -201,14 +201,15 @@ export const ServerPane = ({
         ref={webviewRef}
         isFailed={isFailed}
         partition={`persist:${serverUrl}`}
-        {...({ allowpopups: "allowpopups" } as any)}
-      />{" "}
-      <DocumentViewer
-        url={documentViewerOpenUrl || ""}
-        isActive={documentViewerActive}
-        partition={`persist:${serverUrl}`}
-        closeDocumentViewer={closeDocumentViewer}
-      />
+        {...({ allowpopups: 'allowpopups' } as any)}
+      />{' '}
+      <DocumentViewerWrapper isVisible={documentViewerActive}>
+        <DocumentViewer
+          url={documentViewerOpenUrl || ''}
+          partition={`persist:${serverUrl}`}
+          closeDocumentViewer={closeDocumentViewer}
+        />
+      </DocumentViewerWrapper>
       <UnsupportedServer
         isSupported={isSupported}
         instanceDomain={new URL(serverUrl).hostname}

diff --git a/src/ui/components/ServersView/styles.tsx b/src/ui/components/ServersView/styles.tsx
@@ -18,6 +18,16 @@ export const Wrapper = styled.section<WrapperProps>`
   `};
 `;
 
+type DocumentViewerWrapperProps = {
+  isVisible: boolean;
+};
+
+export const DocumentViewerWrapper = styled.section<DocumentViewerWrapperProps>`
+  ${({ isVisible }) => css`
+    display: ${isVisible ? 'flex' : 'none'};
+  `};
+`;
+
 type StyledWebViewProps = {
   isFailed: boolean;
 };