Merge pull request #432 from sachaaaaa/pair_device_menu_item

[multi-device] Display "Pair New Device" in menu

js/background.js

@@ -181,6 +181,7 @@
         const user = {
           regionCode: window.storage.get('regionCode'),
           ourNumber: textsecure.storage.user.getNumber(),
+          isSecondaryDevice: !!textsecure.storage.get('isSecondaryDevice'),
         };
         Whisper.events.trigger('userChanged', user);
 

js/views/inbox_view.js

@@ -156,6 +156,7 @@
         user: {
           regionCode: window.storage.get('regionCode'),
           ourNumber: textsecure.storage.user.getNumber(),
+          isSecondaryDevice: !!window.storage.get('isSecondaryDevice'),
           i18n: window.i18n,
         },
       };

ts/components/MainHeader.tsx

@@ -37,6 +37,7 @@ export interface Props {
   verified: boolean;
   profileName?: string;
   avatarPath?: string;
+  isSecondaryDevice?: boolean;
 
   i18n: LocalizerType;
   updateSearchTerm: (searchTerm: string) => void;
@@ -98,7 +99,10 @@ export class MainHeader extends React.Component<Props, any> {
   }
 
   public componentDidUpdate(_prevProps: Props, prevState: any) {
-    if (prevState.hasPass !== this.state.hasPass) {
+    if (
+      prevState.hasPass !== this.state.hasPass ||
+      _prevProps.isSecondaryDevice !== this.props.isSecondaryDevice
+    ) {
       this.updateMenuItems();
     }
   }
@@ -304,7 +308,7 @@ export class MainHeader extends React.Component<Props, any> {
   }
 
   private updateMenuItems() {
-    const { i18n, onCopyPublicKey } = this.props;
+    const { i18n, onCopyPublicKey, isSecondaryDevice } = this.props;
     const { hasPass } = this.state;
 
     const menuItems = [
@@ -351,6 +355,16 @@ export class MainHeader extends React.Component<Props, any> {
       menuItems.push(passItem('set'));
     }
 
+    if (!isSecondaryDevice) {
+      menuItems.push({
+        id: 'pairNewDevice',
+        name: 'Pair new Device',
+        onClick: () => {
+          trigger('showDevicePairingDialog');
+        },
+      });
+    }
+
     this.setState({ menuItems });
   }
 }

ts/state/ducks/user.ts

@@ -5,6 +5,7 @@ import { LocalizerType } from '../../types/Util';
 export type UserStateType = {
   ourNumber: string;
   regionCode: string;
+  isSecondaryDevice: boolean;
   i18n: LocalizerType;
 };
 
@@ -15,6 +16,7 @@ type UserChangedActionType = {
   payload: {
     ourNumber: string;
     regionCode: string;
+    isSecondaryDevice: boolean;
   };
 };
 
@@ -29,6 +31,7 @@ export const actions = {
 function userChanged(attributes: {
   ourNumber: string;
   regionCode: string;
+  isSecondaryDevice: boolean;
 }): UserChangedActionType {
   return {
     type: 'USER_CHANGED',
@@ -42,6 +45,7 @@ function getEmptyState(): UserStateType {
   return {
     ourNumber: 'missing',
     regionCode: 'missing',
+    isSecondaryDevice: false,
     i18n: () => 'missing',
   };
 }

ts/state/selectors/user.ts

@@ -21,3 +21,8 @@ export const getIntl = createSelector(
   getUser,
   (state: UserStateType): LocalizerType => state.i18n
 );
+
+export const getIsSecondaryDevice = createSelector(
+  getUser,
+  (state: UserStateType): boolean => state.isSecondaryDevice
+);

ts/state/smart/MainHeader.tsx

@@ -5,7 +5,12 @@ import { MainHeader } from '../../components/MainHeader';
 import { StateType } from '../reducer';
 
 import { getQuery } from '../selectors/search';
-import { getIntl, getRegionCode, getUserNumber } from '../selectors/user';
+import {
+  getIntl,
+  getIsSecondaryDevice,
+  getRegionCode,
+  getUserNumber,
+} from '../selectors/user';
 import { getMe } from '../selectors/conversations';
 
 const mapStateToProps = (state: StateType) => {
@@ -13,6 +18,7 @@ const mapStateToProps = (state: StateType) => {
     searchTerm: getQuery(state),
     regionCode: getRegionCode(state),
     ourNumber: getUserNumber(state),
+    isSecondaryDevice: getIsSecondaryDevice(state),
     ...getMe(state),
     i18n: getIntl(state),
   };