make about dialog open/close local

src/about/AboutDialog.tsx

@@ -7,7 +7,6 @@ import { AnchorButton, Button, Classes, Dialog } from '@blueprintjs/core';
 import { WithI18nProps, withI18n } from '@shopify/react-i18n';
 import React from 'react';
 import { connect } from 'react-redux';
-import { closeAboutDialog } from '../app/actions';
 import {
     appName,
     legoDisclaimer,
@@ -15,7 +14,6 @@ import {
     pybricksWebsiteUrl,
 } from '../app/constants';
 import LicenseDialog from '../licenses/LicenseDialog';
-import { RootState } from '../reducers';
 import ExternalLinkIcon from '../utils/ExternalLinkIcon';
 import { AboutStringId } from './i18n';
 import en from './i18n.en.json';
@@ -24,11 +22,9 @@ import './about.scss';
 
 const version = process.env.REACT_APP_VERSION;
 
-type StateProps = { showAboutDialog: boolean };
+type OwnProps = { isOpen: boolean; onClose: () => void };
 
-type DispatchProps = { onClose: () => void };
-
-type AboutDialogProps = StateProps & DispatchProps & WithI18nProps;
+type AboutDialogProps = OwnProps & WithI18nProps;
 
 class AboutDialog extends React.Component<AboutDialogProps> {
     public state = {
@@ -36,11 +32,11 @@ class AboutDialog extends React.Component<AboutDialogProps> {
     };
 
     render(): JSX.Element {
-        const { i18n, showAboutDialog, onClose } = this.props;
+        const { isOpen, onClose, i18n } = this.props;
         return (
             <Dialog
                 title={`${appName} v${version}`}
-                isOpen={showAboutDialog}
+                isOpen={isOpen}
                 onClose={() => onClose()}
             >
                 <div className={Classes.DIALOG_BODY}>
@@ -77,15 +73,6 @@ class AboutDialog extends React.Component<AboutDialogProps> {
     }
 }
 
-const mapStateToProps = (state: RootState): StateProps => ({
-    showAboutDialog: state.app.showAboutDialog,
-});
-
-const mapDispatchToProps: DispatchProps = {
-    onClose: closeAboutDialog,
-};
-
-export default connect(
-    mapStateToProps,
-    mapDispatchToProps,
-)(withI18n({ id: 'about', fallback: en, translations: { en } })(AboutDialog));
+export default connect()(
+    withI18n({ id: 'about', fallback: en, translations: { en } })(AboutDialog),
+);

src/app/actions.ts

@@ -28,10 +28,6 @@ export enum AppActionType {
     OpenSettings = 'app.action.openSettings',
     /** Close settings dialog. */
     CloseSettings = 'app.action.closeSettings',
-    /** Open about dialog. */
-    OpenAboutDialog = 'app.action.openAboutDialog',
-    /** Close about dialog. */
-    CloseAboutDialog = 'app.action.closeAboutDialog',
 }
 
 /** Action that requests the app to reload. */
@@ -128,22 +124,6 @@ export function closeSettings(): AppCloseSettingsAction {
     return { type: AppActionType.CloseSettings };
 }
 
-/** Action to open the about dialog. */
-export type AppOpenAboutDialogAction = Action<AppActionType.OpenAboutDialog>;
-
-/** Creates an action to open the about dialog. */
-export function openAboutDialog(): AppOpenAboutDialogAction {
-    return { type: AppActionType.OpenAboutDialog };
-}
-
-/** Action to close the about dialog. */
-export type AppCloseAboutDialogAction = Action<AppActionType.CloseAboutDialog>;
-
-/** Creates an action to close the about dialog. */
-export function closeAboutDialog(): AppCloseAboutDialogAction {
-    return { type: AppActionType.CloseAboutDialog };
-}
-
 /** common type for all app actions. */
 export type AppAction =
     | AppReloadAction
@@ -155,6 +135,4 @@ export type AppAction =
     | AppDidInstallAction
     | AppDidStartAction
     | AppOpenSettingsAction
-    | AppCloseSettingsAction
-    | AppOpenAboutDialogAction
-    | AppCloseAboutDialogAction;
+    | AppCloseSettingsAction;

src/app/reducers.test.ts

@@ -6,14 +6,12 @@ import { didSucceed, didUpdate } from '../service-worker/actions';
 import { BeforeInstallPromptEvent } from '../utils/dom';
 import {
     checkForUpdate,
-    closeAboutDialog,
     closeSettings,
     didBeforeInstallPrompt,
     didCheckForUpdate,
     didInstall,
     didInstallPrompt,
     installPrompt,
-    openAboutDialog,
     openSettings,
 } from './actions';
 import reducers from './reducers';
@@ -28,7 +26,6 @@ test('initial state', () => {
           "promptingInstall": false,
           "readyForOfflineUse": false,
           "serviceWorker": null,
-          "showAboutDialog": false,
           "showSettings": false,
           "updateAvailable": false,
         }
@@ -44,17 +41,6 @@ test('showSettings', () => {
     ).toBe(false);
 });
 
-test('showAboutDialog', () => {
-    expect(
-        reducers({ showAboutDialog: false } as State, openAboutDialog())
-            .showAboutDialog,
-    ).toBe(true);
-    expect(
-        reducers({ showAboutDialog: true } as State, closeAboutDialog())
-            .showAboutDialog,
-    ).toBe(false);
-});
-
 test('serviceWorker', () => {
     const registration = {} as ServiceWorkerRegistration;
     expect(

src/app/reducers.ts

@@ -20,17 +20,6 @@ const showSettings: Reducer<boolean, Action> = (state = false, action) => {
     }
 };
 
-const showAboutDialog: Reducer<boolean, Action> = (state = false, action) => {
-    switch (action.type) {
-        case AppActionType.OpenAboutDialog:
-            return true;
-        case AppActionType.CloseAboutDialog:
-            return false;
-        default:
-            return state;
-    }
-};
-
 const serviceWorker: Reducer<ServiceWorkerRegistration | null, Action> = (
     state = null,
     action,
@@ -105,7 +94,6 @@ const readyForOfflineUse: Reducer<boolean, Action> = (state = false, action) =>
 
 export default combineReducers({
     showSettings,
-    showAboutDialog,
     serviceWorker,
     checkingForUpdate,
     updateAvailable,

src/settings/SettingsDrawer.tsx

@@ -19,13 +19,7 @@ import { WithI18nProps, withI18n } from '@shopify/react-i18n';
 import React from 'react';
 import { connect } from 'react-redux';
 import AboutDialog from '../about/AboutDialog';
-import {
-    checkForUpdate,
-    closeSettings,
-    installPrompt,
-    openAboutDialog,
-    reload,
-} from '../app/actions';
+import { checkForUpdate, closeSettings, installPrompt, reload } from '../app/actions';
 import {
     pybricksBugReportsUrl,
     pybricksGitterUrl,
@@ -61,7 +55,6 @@ type DispatchProps = {
     onShowDocsChanged: (checked: boolean) => void;
     onDarkModeChanged: (checked: boolean) => void;
     onFlashCurrentProgramChanged: (checked: boolean) => void;
-    onAbout: () => void;
     onToggleDocs: () => void;
     onCheckForUpdate: (registration: ServiceWorkerRegistration) => void;
     onReload: (registration: ServiceWorkerRegistration) => void;
@@ -72,6 +65,10 @@ type SettingsProps = StateProps & DispatchProps & WithI18nProps;
 
 @HotkeysTarget
 class SettingsDrawer extends React.PureComponent<SettingsProps> {
+    public state = {
+        aboutDialogIsOpen: false,
+    };
+
     render(): JSX.Element {
         const {
             open,
@@ -88,7 +85,6 @@ class SettingsDrawer extends React.PureComponent<SettingsProps> {
             onShowDocsChanged,
             onDarkModeChanged,
             onFlashCurrentProgramChanged,
-            onAbout,
             onCheckForUpdate,
             onReload,
             onInstallPrompt: onInstall,
@@ -224,7 +220,12 @@ class SettingsDrawer extends React.PureComponent<SettingsProps> {
                                     &nbsp;
                                     <ExternalLinkIcon />
                                 </AnchorButton>
-                                <AboutDialog />
+                                <AboutDialog
+                                    isOpen={this.state.aboutDialogIsOpen}
+                                    onClose={() =>
+                                        this.setState({ aboutDialogIsOpen: false })
+                                    }
+                                />
                             </ButtonGroup>
                         </FormGroup>
                         <FormGroup
@@ -274,7 +275,7 @@ class SettingsDrawer extends React.PureComponent<SettingsProps> {
                                 <Button
                                     icon="info-sign"
                                     onClick={() => {
-                                        onAbout();
+                                        this.setState({ aboutDialogIsOpen: true });
                                         return true;
                                     }}
                                 >
@@ -335,7 +336,6 @@ const mapDispatchToProps: DispatchProps = {
     onDarkModeChanged: (checked) => setBoolean(SettingId.DarkMode, checked),
     onFlashCurrentProgramChanged: (checked) =>
         setBoolean(SettingId.FlashCurrentProgram, checked),
-    onAbout: openAboutDialog,
     onToggleDocs: () => toggleBoolean(SettingId.ShowDocs),
     onCheckForUpdate: checkForUpdate,
     onReload: reload,