diff --git a/.nvmrc b/.nvmrc deleted file mode 100644 index b009dfb9d..000000000 --- a/.nvmrc +++ /dev/null @@ -1 +0,0 @@ -lts/* diff --git a/src/servers/reducers.ts b/src/servers/reducers.ts index 3640f90ae..b4f0cab67 100644 --- 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 | ActionOf | ActionOf - | ActionOf | ActionOf; const upsert = (state: Server[], server: Server): Server[] => { @@ -208,7 +207,7 @@ export const servers: Reducer = ( case SERVERS_LOADED: { const { servers = state } = action.payload; - return servers.map((server) => ({ + return servers.map((server: Server) => ({ ...server, url: ensureUrlFormat(server.url), })); @@ -216,9 +215,10 @@ export const servers: Reducer = ( 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 index 1da8666ba..cf001fe4a 100644 --- 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(null); - - useEffect(() => { - if (isActive && url) { - setWebView( - - ); - } else { - setWebView(null); - } - }, [url, isActive, partition]); - return ( <> - {isActive && ( - - - -

PDF Viewer

-
+ + + +

PDF Viewer

+
- {webView} + + - )} +
); }; -export default DynamicWebview; +export default DocumentViewer; diff --git a/src/ui/components/ServersView/ServerPane.tsx b/src/ui/components/ServersView/ServerPane.tsx index e857be59a..54eb13077 100644 --- 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>(null); + useRef>(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)} - />{" "} - + {...({ allowpopups: 'allowpopups' } as any)} + />{' '} + + + ` `}; `; +type DocumentViewerWrapperProps = { + isVisible: boolean; +}; + +export const DocumentViewerWrapper = styled.section` + ${({ isVisible }) => css` + display: ${isVisible ? 'flex' : 'none'}; + `}; +`; + type StyledWebViewProps = { isFailed: boolean; };