Removes Backbone.View and jQuery
This commit is contained in:
Josh Perez
GitHub
parent
26d689982a
commit
5e6eeecede
33 changed files with 1113 additions and 7637 deletions
|
|
@ -1,7 +1,6 @@
|
|||
// Copyright 2021-2022 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import type { ComponentProps } from 'react';
|
||||
import React, { useEffect } from 'react';
|
||||
import { Globals } from '@react-spring/web';
|
||||
import classNames from 'classnames';
|
||||
|
|
@ -10,10 +9,9 @@ import type { ExecuteMenuRoleType } from './TitleBarContainer';
|
|||
import type { MenuOptionsType, MenuActionType } from '../types/menu';
|
||||
import type { ToastType } from '../types/Toast';
|
||||
import type { ViewStoryActionCreatorType } from '../state/ducks/stories';
|
||||
import type { ReplacementValuesType } from '../types/Util';
|
||||
import type { LocalizerType, ReplacementValuesType } from '../types/Util';
|
||||
import { ThemeType } from '../types/Util';
|
||||
import { AppViewType } from '../state/ducks/app';
|
||||
import { Inbox } from './Inbox';
|
||||
import { SmartInstallScreen } from '../state/smart/InstallScreen';
|
||||
import { StandaloneRegistration } from './StandaloneRegistration';
|
||||
import { TitleBarContainer } from './TitleBarContainer';
|
||||
|
|
@ -28,6 +26,7 @@ type PropsType = {
|
|||
renderCallManager: () => JSX.Element;
|
||||
renderGlobalModalContainer: () => JSX.Element;
|
||||
isShowingStoriesView: boolean;
|
||||
i18n: LocalizerType;
|
||||
renderStories: (closeView: () => unknown) => JSX.Element;
|
||||
hasSelectedStoryData: boolean;
|
||||
renderStoryViewer: (closeView: () => unknown) => JSX.Element;
|
||||
|
|
@ -57,41 +56,33 @@ type PropsType = {
|
|||
scrollToMessage: (conversationId: string, messageId: string) => unknown;
|
||||
toggleStoriesView: () => unknown;
|
||||
viewStory: ViewStoryActionCreatorType;
|
||||
} & ComponentProps<typeof Inbox>;
|
||||
renderInbox: () => JSX.Element;
|
||||
};
|
||||
|
||||
export function App({
|
||||
appView,
|
||||
executeMenuAction,
|
||||
executeMenuRole,
|
||||
hasInitialLoadCompleted,
|
||||
hasCustomTitleBar,
|
||||
hasSelectedStoryData,
|
||||
hideMenuBar,
|
||||
hideToast,
|
||||
i18n,
|
||||
isCustomizingPreferredReactions,
|
||||
isFullScreen,
|
||||
isMaximized,
|
||||
isShowingStoriesView,
|
||||
hasCustomTitleBar,
|
||||
menuOptions,
|
||||
onUndoArchive,
|
||||
openInbox,
|
||||
openFileInFolder,
|
||||
openInbox,
|
||||
registerSingleDevice,
|
||||
renderCallManager,
|
||||
renderCustomizingPreferredReactionsModal,
|
||||
renderGlobalModalContainer,
|
||||
renderLeftPane,
|
||||
renderInbox,
|
||||
renderLightbox,
|
||||
renderStories,
|
||||
renderStoryViewer,
|
||||
requestVerification,
|
||||
scrollToMessage,
|
||||
selectedConversationId,
|
||||
selectedMessage,
|
||||
selectedMessageSource,
|
||||
showConversation,
|
||||
showWhatsNewModal,
|
||||
theme,
|
||||
titleBarDoubleClick,
|
||||
toast,
|
||||
|
|
@ -115,23 +106,7 @@ export function App({
|
|||
/>
|
||||
);
|
||||
} else if (appView === AppViewType.Inbox) {
|
||||
contents = (
|
||||
<Inbox
|
||||
hasInitialLoadCompleted={hasInitialLoadCompleted}
|
||||
i18n={i18n}
|
||||
isCustomizingPreferredReactions={isCustomizingPreferredReactions}
|
||||
renderCustomizingPreferredReactionsModal={
|
||||
renderCustomizingPreferredReactionsModal
|
||||
}
|
||||
renderLeftPane={renderLeftPane}
|
||||
scrollToMessage={scrollToMessage}
|
||||
selectedConversationId={selectedConversationId}
|
||||
selectedMessage={selectedMessage}
|
||||
selectedMessageSource={selectedMessageSource}
|
||||
showConversation={showConversation}
|
||||
showWhatsNewModal={showWhatsNewModal}
|
||||
/>
|
||||
);
|
||||
contents = renderInbox();
|
||||
}
|
||||
|
||||
// This are here so that themes are properly applied to anything that is
|
||||
|
|
|
|||
|
|
@ -1,38 +0,0 @@
|
|||
// Copyright 2021 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import React, { useEffect, useRef } from 'react';
|
||||
import type * as Backbone from 'backbone';
|
||||
|
||||
type PropsType = {
|
||||
View: typeof Backbone.View;
|
||||
className?: string;
|
||||
};
|
||||
|
||||
export function BackboneHost({ View, className }: PropsType): JSX.Element {
|
||||
const hostRef = useRef<HTMLDivElement | null>(null);
|
||||
const viewRef = useRef<Backbone.View | undefined>(undefined);
|
||||
|
||||
useEffect(() => {
|
||||
const view = new View({
|
||||
el: hostRef.current,
|
||||
});
|
||||
|
||||
viewRef.current = view;
|
||||
|
||||
return () => {
|
||||
if (!viewRef || !viewRef.current) {
|
||||
return;
|
||||
}
|
||||
|
||||
viewRef.current.remove();
|
||||
viewRef.current = undefined;
|
||||
};
|
||||
}, [View]);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className={className} ref={hostRef} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -2,11 +2,9 @@
|
|||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import type { ReactNode } from 'react';
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
|
||||
import type { ConversationModel } from '../models/conversations';
|
||||
import type { ShowConversationType } from '../state/ducks/conversations';
|
||||
import type { ConversationView } from '../views/conversation_view';
|
||||
import type { LocalizerType } from '../types/Util';
|
||||
|
||||
import * as log from '../logging/log';
|
||||
|
|
@ -16,11 +14,15 @@ import { WhatsNewLink } from './WhatsNewLink';
|
|||
import { showToast } from '../util/showToast';
|
||||
import { strictAssert } from '../util/assert';
|
||||
import { SelectedMessageSource } from '../state/ducks/conversationsEnums';
|
||||
import { usePrevious } from '../hooks/usePrevious';
|
||||
|
||||
export type PropsType = {
|
||||
hasInitialLoadCompleted: boolean;
|
||||
i18n: LocalizerType;
|
||||
isCustomizingPreferredReactions: boolean;
|
||||
onConversationClosed: (id: string, reason: string) => unknown;
|
||||
onConversationOpened: (id: string, messageId?: string) => unknown;
|
||||
renderConversationView: () => JSX.Element;
|
||||
renderCustomizingPreferredReactionsModal: () => JSX.Element;
|
||||
renderLeftPane: () => JSX.Element;
|
||||
scrollToMessage: (conversationId: string, messageId: string) => unknown;
|
||||
|
|
@ -35,6 +37,9 @@ export function Inbox({
|
|||
hasInitialLoadCompleted,
|
||||
i18n,
|
||||
isCustomizingPreferredReactions,
|
||||
onConversationClosed,
|
||||
onConversationOpened,
|
||||
renderConversationView,
|
||||
renderCustomizingPreferredReactionsModal,
|
||||
renderLeftPane,
|
||||
scrollToMessage,
|
||||
|
|
@ -48,14 +53,28 @@ export function Inbox({
|
|||
const [internalHasInitialLoadCompleted, setInternalHasInitialLoadCompleted] =
|
||||
useState(hasInitialLoadCompleted);
|
||||
|
||||
const conversationMountRef = useRef<HTMLDivElement | null>(null);
|
||||
const conversationViewRef = useRef<ConversationView | null>(null);
|
||||
|
||||
const [prevConversation, setPrevConversation] = useState<
|
||||
ConversationModel | undefined
|
||||
>();
|
||||
const prevConversationId = usePrevious(
|
||||
selectedConversationId,
|
||||
selectedConversationId
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (prevConversationId !== selectedConversationId) {
|
||||
if (prevConversationId) {
|
||||
onConversationClosed(prevConversationId, 'opened another conversation');
|
||||
}
|
||||
|
||||
if (selectedConversationId) {
|
||||
onConversationOpened(selectedConversationId, selectedMessage);
|
||||
}
|
||||
} else if (
|
||||
selectedConversationId &&
|
||||
selectedMessage &&
|
||||
selectedMessageSource !== SelectedMessageSource.Focus
|
||||
) {
|
||||
scrollToMessage(selectedConversationId, selectedMessage);
|
||||
}
|
||||
|
||||
if (!selectedConversationId) {
|
||||
return;
|
||||
}
|
||||
|
|
@ -66,53 +85,16 @@ export function Inbox({
|
|||
strictAssert(conversation, 'Conversation must be found');
|
||||
|
||||
conversation.setMarkedUnread(false);
|
||||
|
||||
if (!prevConversation || prevConversation.id !== selectedConversationId) {
|
||||
// We create a mount point because when calling .remove() on the Backbone
|
||||
// view it'll also remove the mount point along with it.
|
||||
const viewMountNode = document.createElement('div');
|
||||
conversationMountRef.current?.appendChild(viewMountNode);
|
||||
|
||||
// Make sure to unload the previous conversation along with calling
|
||||
// Backbone's remove so that it is taken out of the DOM.
|
||||
if (prevConversation) {
|
||||
prevConversation.trigger('unload', 'opened another conversation');
|
||||
}
|
||||
conversationViewRef.current?.remove();
|
||||
|
||||
// Can't import ConversationView directly because conversation_view
|
||||
// needs access to window.Signal first.
|
||||
const view = new window.Whisper.ConversationView({
|
||||
el: viewMountNode,
|
||||
model: conversation,
|
||||
});
|
||||
conversationViewRef.current = view;
|
||||
|
||||
setPrevConversation(conversation);
|
||||
|
||||
conversation.trigger('opened', selectedMessage);
|
||||
} else if (
|
||||
selectedMessage &&
|
||||
selectedMessageSource !== SelectedMessageSource.Focus
|
||||
) {
|
||||
scrollToMessage(conversation.id, selectedMessage);
|
||||
}
|
||||
}, [
|
||||
prevConversation,
|
||||
onConversationClosed,
|
||||
onConversationOpened,
|
||||
prevConversationId,
|
||||
scrollToMessage,
|
||||
selectedConversationId,
|
||||
selectedMessage,
|
||||
selectedMessageSource,
|
||||
]);
|
||||
|
||||
// Whenever the selectedConversationId is cleared we should also ensure
|
||||
// that prevConversation is cleared too.
|
||||
useEffect(() => {
|
||||
if (prevConversation && !selectedConversationId) {
|
||||
setPrevConversation(undefined);
|
||||
}
|
||||
}, [prevConversation, selectedConversationId]);
|
||||
|
||||
useEffect(() => {
|
||||
function refreshConversation({
|
||||
newId,
|
||||
|
|
@ -121,7 +103,7 @@ export function Inbox({
|
|||
newId: string;
|
||||
oldId: string;
|
||||
}) {
|
||||
if (prevConversation && prevConversation.get('id') === oldId) {
|
||||
if (prevConversationId === oldId) {
|
||||
showConversation({ conversationId: newId });
|
||||
}
|
||||
}
|
||||
|
|
@ -129,10 +111,10 @@ export function Inbox({
|
|||
// Close current opened conversation to reload the group information once
|
||||
// linked.
|
||||
function unload() {
|
||||
if (!prevConversation) {
|
||||
if (!prevConversationId) {
|
||||
return;
|
||||
}
|
||||
prevConversation.trigger('unload', 'force unload requested');
|
||||
onConversationClosed(prevConversationId, 'force unload requested');
|
||||
}
|
||||
|
||||
function packInstallFailed() {
|
||||
|
|
@ -150,7 +132,7 @@ export function Inbox({
|
|||
window.Whisper.events.off('refreshConversation', refreshConversation);
|
||||
window.Whisper.events.off('setupAsNewDevice', unload);
|
||||
};
|
||||
}, [prevConversation, showConversation]);
|
||||
}, [onConversationClosed, prevConversationId, showConversation]);
|
||||
|
||||
useEffect(() => {
|
||||
if (internalHasInitialLoadCompleted) {
|
||||
|
|
@ -226,8 +208,15 @@ export function Inbox({
|
|||
|
||||
<div className="conversation-stack">
|
||||
<div id="toast" />
|
||||
<div className="conversation" ref={conversationMountRef} />
|
||||
{!prevConversation && (
|
||||
{selectedConversationId && (
|
||||
<div
|
||||
className="conversation"
|
||||
id={`conversation-${selectedConversationId}`}
|
||||
>
|
||||
{renderConversationView()}
|
||||
</div>
|
||||
)}
|
||||
{!prevConversationId && (
|
||||
<div className="no-conversation-open">
|
||||
<div className="module-splash-screen__logo module-img--128 module-logo-blue" />
|
||||
<h3>{i18n('welcomeToSignal')}</h3>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue