reactity the expired Session version warning

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;

stylesheets/_theme_dark.scss

@@ -69,10 +69,6 @@
     }
   }
 
-  a {
-    color: $session-color-green;
-  }
-
   .file-input {
     .paperclip {
       &:before {

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<Props> {
       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<Props> {
     return (
       <>
         <SessionOffline />
+        {isExpired && <SessionExpiredWarning />}
         <LeftPaneMessageSection
           contacts={contacts}
           openConversationExternal={openConversationExternal}

ts/components/session/SessionInboxView.tsx

@@ -23,7 +23,7 @@ type Props = {
 type State = {
   isInitialLoadComplete: boolean;
   settingsCategory?: SessionSettingCategory;
-  networkError: boolean;
+  isExpired: boolean;
 };
 
 // tslint:disable: react-a11y-img-has-alt
@@ -36,7 +36,7 @@ export class SessionInboxView extends React.Component<Props, State> {
     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<Props, State> {
 
     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<Props, State> {
       return <></>;
     }
 
-    const isSettingsView = this.state.settingsCategory !== undefined;
+    const { settingsCategory } = this.state;
+
+    const isSettingsView = settingsCategory !== undefined;
     return (
       <Provider store={this.store}>
         <div className="gutter">
@@ -87,6 +90,7 @@ export class SessionInboxView extends React.Component<Props, State> {
         showSessionSettingsCategory={this.showSessionSettingsCategory}
         showSessionViewConversation={this.showSessionViewConversation}
         settingsCategory={this.state.settingsCategory}
+        isExpired={this.state.isExpired}
       />
     );
   }

ts/components/session/conversation/SessionCompositionBox.tsx

@@ -498,6 +498,16 @@ export class SessionCompositionBox extends React.Component<Props, State> {
     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;

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 {

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 (
+    <SessionExpiredWarningContainer>
+      <div>{window.i18n('expiredWarning')}</div>
+      <SessionExpiredWarningLink
+        href={'https://getsession.org'}
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        {window.i18n('upgrade')}
+      </SessionExpiredWarningLink>
+    </SessionExpiredWarningContainer>
+  );
+};

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);

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;
   }
 }