From 4dc7631851184422ce9cb682155663978ccb81a7 Mon Sep 17 00:00:00 2001 From: Josh Perez <60019601+josh-signal@users.noreply.github.com> Date: Thu, 16 Apr 2020 15:20:52 -0400 Subject: [PATCH] Decouple RelinkDialog from NetworkStatusDialog --- ts/components/LeftPane.tsx | 3 ++ ts/components/NetworkStatus.stories.tsx | 17 -------- ts/components/NetworkStatus.tsx | 16 +------ ts/components/RelinkDialog.stories.tsx | 58 +++++++++++++++++++++++++ ts/components/RelinkDialog.tsx | 33 ++++++++++++++ ts/state/smart/LeftPane.tsx | 12 +++-- ts/state/smart/NetworkStatus.tsx | 2 - ts/state/smart/RelinkDialog.tsx | 19 ++++++++ 8 files changed, 123 insertions(+), 37 deletions(-) create mode 100644 ts/components/RelinkDialog.stories.tsx create mode 100644 ts/components/RelinkDialog.tsx create mode 100644 ts/state/smart/RelinkDialog.tsx diff --git a/ts/components/LeftPane.tsx b/ts/components/LeftPane.tsx index db3c97d6a6..ab7f124aed 100644 --- a/ts/components/LeftPane.tsx +++ b/ts/components/LeftPane.tsx @@ -37,6 +37,7 @@ export interface PropsType { renderMainHeader: () => JSX.Element; renderMessageSearchResult: (id: string) => JSX.Element; renderNetworkStatus: () => JSX.Element; + renderRelinkDialog: () => JSX.Element; renderUpdateDialog: () => JSX.Element; } @@ -394,6 +395,7 @@ export class LeftPane extends React.Component { renderExpiredBuildDialog, renderMainHeader, renderNetworkStatus, + renderRelinkDialog, renderUpdateDialog, showArchived, } = this.props; @@ -408,6 +410,7 @@ export class LeftPane extends React.Component { {renderExpiredBuildDialog()} {renderNetworkStatus()} {renderUpdateDialog()} + {renderRelinkDialog()} {this.renderList()} )} diff --git a/ts/components/NetworkStatus.stories.tsx b/ts/components/NetworkStatus.stories.tsx index 516099dca8..a7db9eb94b 100644 --- a/ts/components/NetworkStatus.stories.tsx +++ b/ts/components/NetworkStatus.stories.tsx @@ -16,9 +16,7 @@ const defaultProps = { hasNetworkDialog: true, i18n, isOnline: true, - isRegistrationDone: true, socketStatus: 0, - relinkDevice: action('relink-device'), manualReconnect: action('manual-reconnect'), withinConnectingGracePeriod: false, }; @@ -42,19 +40,6 @@ const permutations = [ socketStatus: 3, }, }, - { - title: 'Unlinked (online)', - props: { - isRegistrationDone: false, - }, - }, - { - title: 'Unlinked (offline)', - props: { - isOnline: false, - isRegistrationDone: false, - }, - }, { title: 'Offline', props: { @@ -67,7 +52,6 @@ storiesOf('Components/NetworkStatus', module) .add('Knobs Playground', () => { const hasNetworkDialog = boolean('hasNetworkDialog', true); const isOnline = boolean('isOnline', true); - const isRegistrationDone = boolean('isRegistrationDone', true); const socketStatus = select( 'socketStatus', { @@ -84,7 +68,6 @@ storiesOf('Components/NetworkStatus', module) {...defaultProps} hasNetworkDialog={hasNetworkDialog} isOnline={isOnline} - isRegistrationDone={isRegistrationDone} socketStatus={socketStatus} /> ); diff --git a/ts/components/NetworkStatus.tsx b/ts/components/NetworkStatus.tsx index 965d67d17e..fc0d41b082 100644 --- a/ts/components/NetworkStatus.tsx +++ b/ts/components/NetworkStatus.tsx @@ -8,8 +8,6 @@ const FIVE_SECONDS = 5 * 1000; export interface PropsType extends NetworkStateType { hasNetworkDialog: boolean; i18n: LocalizerType; - isRegistrationDone: boolean; - relinkDevice: () => void; manualReconnect: () => void; } @@ -39,9 +37,7 @@ export const NetworkStatus = ({ hasNetworkDialog, i18n, isOnline, - isRegistrationDone, socketStatus, - relinkDevice, manualReconnect, }: PropsType): JSX.Element | null => { if (!hasNetworkDialog) { @@ -76,17 +72,7 @@ export const NetworkStatus = ({ ); - if (!isRegistrationDone) { - return renderDialog({ - renderActionableButton: (): JSX.Element => ( -
- -
- ), - subtext: i18n('unlinkedWarning'), - title: i18n('unlinked'), - }); - } else if (isConnecting) { + if (isConnecting) { return renderDialog({ subtext: i18n('connectingHangOn'), title: i18n('connecting'), diff --git a/ts/components/RelinkDialog.stories.tsx b/ts/components/RelinkDialog.stories.tsx new file mode 100644 index 0000000000..45a91c6288 --- /dev/null +++ b/ts/components/RelinkDialog.stories.tsx @@ -0,0 +1,58 @@ +import * as React from 'react'; +import { RelinkDialog } from './RelinkDialog'; + +// @ts-ignore +import { setup as setupI18n } from '../../js/modules/i18n'; +// @ts-ignore +import enMessages from '../../_locales/en/messages.json'; + +import { storiesOf } from '@storybook/react'; +import { boolean } from '@storybook/addon-knobs'; +import { action } from '@storybook/addon-actions'; + +const i18n = setupI18n('en', enMessages); + +const defaultProps = { + hasNetworkDialog: false, + i18n, + isRegistrationDone: true, + relinkDevice: action('relink-device'), +}; + +const permutations = [ + { + title: 'Unlinked (online)', + props: { + isRegistrationDone: false, + }, + }, + { + title: 'Unlinked (offline)', + props: { + hasNetworkDialog: true, + isRegistrationDone: false, + }, + }, +]; + +storiesOf('Components/RelinkDialog', module) + .add('Knobs Playground', () => { + const hasNetworkDialog = boolean('hasNetworkDialog', false); + const isRegistrationDone = boolean('isRegistrationDone', false); + + return ( + + ); + }) + .add('Iterations', () => { + return permutations.map(({ props, title }) => ( + <> +

{title}

+ + + )); + }); diff --git a/ts/components/RelinkDialog.tsx b/ts/components/RelinkDialog.tsx new file mode 100644 index 0000000000..2b5860a3f0 --- /dev/null +++ b/ts/components/RelinkDialog.tsx @@ -0,0 +1,33 @@ +import React from 'react'; + +import { LocalizerType } from '../types/Util'; + +export interface PropsType { + hasNetworkDialog: boolean; + i18n: LocalizerType; + isRegistrationDone: boolean; + relinkDevice: () => void; +} + +export const RelinkDialog = ({ + hasNetworkDialog, + i18n, + isRegistrationDone, + relinkDevice, +}: PropsType): JSX.Element | null => { + if (hasNetworkDialog || isRegistrationDone) { + return null; + } + + return ( +
+
+

{i18n('unlinked')}

+ {i18n('unlinkedWarning')} +
+
+ +
+
+ ); +}; diff --git a/ts/state/smart/LeftPane.tsx b/ts/state/smart/LeftPane.tsx index 5ed4453915..a6bfd6d91b 100644 --- a/ts/state/smart/LeftPane.tsx +++ b/ts/state/smart/LeftPane.tsx @@ -16,6 +16,7 @@ import { SmartExpiredBuildDialog } from './ExpiredBuildDialog'; import { SmartMainHeader } from './MainHeader'; import { SmartMessageSearchResult } from './MessageSearchResult'; import { SmartNetworkStatus } from './NetworkStatus'; +import { SmartRelinkDialog } from './RelinkDialog'; import { SmartUpdateDialog } from './UpdateDialog'; // Workaround: A react component's required properties are filtering up through connect() @@ -25,6 +26,7 @@ const FilteredSmartMessageSearchResult = SmartMessageSearchResult as any; const FilteredSmartNetworkStatus = SmartNetworkStatus as any; const FilteredSmartUpdateDialog = SmartUpdateDialog as any; const FilteredSmartExpiredBuildDialog = SmartExpiredBuildDialog as any; +const FilteredSmartRelinkDialog = SmartRelinkDialog as any; function renderExpiredBuildDialog(): JSX.Element { return ; @@ -35,12 +37,15 @@ function renderMainHeader(): JSX.Element { function renderMessageSearchResult(id: string): JSX.Element { return ; } -function renderUpdateDialog(): JSX.Element { - return ; -} function renderNetworkStatus(): JSX.Element { return ; } +function renderRelinkDialog(): JSX.Element { + return ; +} +function renderUpdateDialog(): JSX.Element { + return ; +} const mapStateToProps = (state: StateType) => { const showSearch = isSearching(state); @@ -59,6 +64,7 @@ const mapStateToProps = (state: StateType) => { renderMainHeader, renderMessageSearchResult, renderNetworkStatus, + renderRelinkDialog, renderUpdateDialog, }; }; diff --git a/ts/state/smart/NetworkStatus.tsx b/ts/state/smart/NetworkStatus.tsx index 89ecff0309..badd51db9a 100644 --- a/ts/state/smart/NetworkStatus.tsx +++ b/ts/state/smart/NetworkStatus.tsx @@ -4,14 +4,12 @@ import { NetworkStatus } from '../../components/NetworkStatus'; import { StateType } from '../reducer'; import { getIntl } from '../selectors/user'; import { hasNetworkDialog } from '../selectors/network'; -import { isDone } from '../../util/registration'; const mapStateToProps = (state: StateType) => { return { ...state.network, hasNetworkDialog: hasNetworkDialog(state), i18n: getIntl(state), - isRegistrationDone: isDone(), }; }; diff --git a/ts/state/smart/RelinkDialog.tsx b/ts/state/smart/RelinkDialog.tsx new file mode 100644 index 0000000000..19d396668b --- /dev/null +++ b/ts/state/smart/RelinkDialog.tsx @@ -0,0 +1,19 @@ +import { connect } from 'react-redux'; +import { mapDispatchToProps } from '../actions'; +import { RelinkDialog } from '../../components/RelinkDialog'; +import { StateType } from '../reducer'; +import { getIntl } from '../selectors/user'; +import { hasNetworkDialog } from '../selectors/network'; +import { isDone } from '../../util/registration'; + +const mapStateToProps = (state: StateType) => { + return { + hasNetworkDialog: hasNetworkDialog(state), + i18n: getIntl(state), + isRegistrationDone: isDone(), + }; +}; + +const smart = connect(mapStateToProps, mapDispatchToProps); + +export const SmartRelinkDialog = smart(RelinkDialog);