From 6e14718a3213a1cd4330dd147de8a48b89950fbb Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Mon, 16 Nov 2020 17:33:09 +1100 Subject: [PATCH] reactity the expired Session version warning --- js/views/conversation_view.js | 12 -------- stylesheets/_theme_dark.scss | 4 --- ts/components/LeftPane.tsx | 4 +++ ts/components/session/SessionInboxView.tsx | 24 +++++++++------- .../conversation/SessionCompositionBox.tsx | 10 +++++++ .../conversation/SessionStagedLinkPreview.tsx | 6 ++-- .../session/network/SessionExpiredWarning.tsx | 28 +++++++++++++++++++ ts/components/session/network/useNetwork.ts | 3 ++ ts/window.d.ts | 5 ++++ 9 files changed, 67 insertions(+), 29 deletions(-) create mode 100644 ts/components/session/network/SessionExpiredWarning.tsx diff --git a/js/views/conversation_view.js b/js/views/conversation_view.js index 208c97a22..5fcfa9e0f 100644 --- a/js/views/conversation_view.js +++ b/js/views/conversation_view.js @@ -846,18 +846,6 @@ const message = this.memberView.replaceMentions(input.val()); - const toastOptions = { type: 'info' }; - // let it pass if we're still trying to read it or it's false... - if (extension.expiredStatus() === true) { - toastOptions.title = i18n('expiredWarning'); - toastOptions.id = 'expiredWarning'; - } - if (toastOptions.title) { - window.pushToast(toastOptions); - this.focusMessageFieldAndClearDisabled(); - return; - } - try { if (!message.length && !this.fileInput.hasFiles()) { return; diff --git a/stylesheets/_theme_dark.scss b/stylesheets/_theme_dark.scss index a4a53b013..e541285b3 100644 --- a/stylesheets/_theme_dark.scss +++ b/stylesheets/_theme_dark.scss @@ -69,10 +69,6 @@ } } - a { - color: $session-color-green; - } - .file-input { .paperclip { &:before { diff --git a/ts/components/LeftPane.tsx b/ts/components/LeftPane.tsx index 7a93167b2..54215dd4f 100644 --- a/ts/components/LeftPane.tsx +++ b/ts/components/LeftPane.tsx @@ -16,6 +16,7 @@ import { SessionTheme } from '../state/ducks/SessionTheme'; import { DefaultTheme } from 'styled-components'; import { SessionSettingCategory } from './session/settings/SessionSettings'; import { SessionOffline } from './session/network/SessionOffline'; +import { SessionExpiredWarning } from './session/network/SessionExpiredWarning'; // from https://github.com/bvaughn/react-virtualized/blob/fb3484ed5dcc41bffae8eab029126c0fb8f7abc0/source/List/types.js#L5 export type RowRendererParamsType = { @@ -37,6 +38,7 @@ interface Props { isSecondaryDevice: boolean; focusedSection: SectionType; focusSection: (section: SectionType) => void; + isExpired: boolean; openConversationExternal: (id: string, messageId?: string) => void; showSessionSettingsCategory: (category: SessionSettingCategory) => void; @@ -127,6 +129,7 @@ export class LeftPane extends React.Component { updateSearchTerm, search, clearSearch, + isExpired, } = this.props; // be sure to filter out secondary conversations let filteredConversations = conversations; @@ -139,6 +142,7 @@ export class LeftPane extends React.Component { return ( <> + {isExpired && } { this.state = { isInitialLoadComplete: false, settingsCategory: undefined, - networkError: false, + isExpired: false, }; this.fetchHandleMessageSentData = this.fetchHandleMessageSentData.bind( @@ -53,13 +53,14 @@ export class SessionInboxView extends React.Component { void this.setupLeftPane(); - // extension.expired(expired => { - // if (expired) { - // const banner = new Whisper.ExpiredAlertBanner().render(); - // banner.$el.prependTo(this.$el); - // this.$el.addClass('expired'); - // } - // }); + // not reactified yet. this is a callback called once we were able to check for expiration of this Session version + window.extension.expired((expired: boolean) => { + if (expired) { + this.setState({ + isExpired: true, + }); + } + }); } public render() { @@ -67,7 +68,9 @@ export class SessionInboxView extends React.Component { return <>; } - const isSettingsView = this.state.settingsCategory !== undefined; + const { settingsCategory } = this.state; + + const isSettingsView = settingsCategory !== undefined; return (
@@ -87,6 +90,7 @@ export class SessionInboxView extends React.Component { showSessionSettingsCategory={this.showSessionSettingsCategory} showSessionViewConversation={this.showSessionViewConversation} settingsCategory={this.state.settingsCategory} + isExpired={this.state.isExpired} /> ); } diff --git a/ts/components/session/conversation/SessionCompositionBox.tsx b/ts/components/session/conversation/SessionCompositionBox.tsx index d6a0b3c53..f92f019d2 100644 --- a/ts/components/session/conversation/SessionCompositionBox.tsx +++ b/ts/components/session/conversation/SessionCompositionBox.tsx @@ -498,6 +498,16 @@ export class SessionCompositionBox extends React.Component { const messagePlaintext = this.parseEmojis(this.state.message); const { isBlocked, isPrivate, leftGroup, isKickedFromGroup } = this.props; + + // deny sending of message if our app version is expired + if (window.extension.expiredStatus() === true) { + ToastUtils.pushToastError( + 'expiredWarning', + window.i18n('expiredWarning') + ); + return; + } + if (isBlocked && isPrivate) { ToastUtils.pushUnblockToSend(); return; diff --git a/ts/components/session/conversation/SessionStagedLinkPreview.tsx b/ts/components/session/conversation/SessionStagedLinkPreview.tsx index 326a6c69d..2c1cde499 100644 --- a/ts/components/session/conversation/SessionStagedLinkPreview.tsx +++ b/ts/components/session/conversation/SessionStagedLinkPreview.tsx @@ -1,10 +1,10 @@ -import React, { useEffect, useState } from 'react'; -import { arrayBufferFromFile, AttachmentType } from '../../../types/Attachment'; +import React from 'react'; +import { arrayBufferFromFile } from '../../../types/Attachment'; import { AttachmentUtil, LinkPreviewUtil } from '../../../util'; import { StagedLinkPreviewData } from './SessionCompositionBox'; import fetch from 'node-fetch'; import { fetchLinkPreviewImage } from '../../../util/linkPreviewFetch'; -import { AbortController, AbortSignal } from 'abort-controller'; +import { AbortSignal } from 'abort-controller'; import { StagedLinkPreview } from '../../conversation/StagedLinkPreview'; export interface StagedLinkPreviewProps extends StagedLinkPreviewData { diff --git a/ts/components/session/network/SessionExpiredWarning.tsx b/ts/components/session/network/SessionExpiredWarning.tsx new file mode 100644 index 000000000..be8e61d14 --- /dev/null +++ b/ts/components/session/network/SessionExpiredWarning.tsx @@ -0,0 +1,28 @@ +import React from 'react'; +import styled from 'styled-components'; + +const SessionExpiredWarningContainer = styled.div` + background: ${props => props.theme.colors.destructive}; + color: black; + padding: ${props => props.theme.common.margins.sm}; + margin: ${props => props.theme.common.margins.xs}; +`; + +const SessionExpiredWarningLink = styled.a` + color: black; +`; + +export const SessionExpiredWarning = () => { + return ( + +
{window.i18n('expiredWarning')}
+ + {window.i18n('upgrade')} + + + ); +}; diff --git a/ts/components/session/network/useNetwork.ts b/ts/components/session/network/useNetwork.ts index 4e05f96e5..d92fc9937 100644 --- a/ts/components/session/network/useNetwork.ts +++ b/ts/components/session/network/useNetwork.ts @@ -6,6 +6,9 @@ export function useNetwork() { setNetwork(window.navigator.onLine); }; + // there are some weird behavior with this api. + // basically, online events might not be called if the pc has a virtual machine running + // https://github.com/electron/electron/issues/11290#issuecomment-348598311 useEffect(() => { window.addEventListener('offline', updateNetwork); window.addEventListener('online', updateNetwork); diff --git a/ts/window.d.ts b/ts/window.d.ts index 7a6808843..775bb9e1b 100644 --- a/ts/window.d.ts +++ b/ts/window.d.ts @@ -115,5 +115,10 @@ declare global { inboxStore: Store; getSocketStatus: any; actionsCreators: any; + extension: { + expired: (boolean) => void; + expiredStatus: () => boolean; + }; + openUrl: (string) => void; } }