make settings open/close local

src/app/App.tsx

@@ -7,7 +7,6 @@ import { useDispatch, useSelector } from 'react-redux';
 import SplitterLayout from 'react-splitter-layout';
 import Editor from '../editor/Editor';
 import { RootState } from '../reducers';
-import SettingsDrawer from '../settings/SettingsDrawer';
 import { toggleBoolean } from '../settings/actions';
 import { SettingId } from '../settings/defaults';
 import StatusBar from '../status-bar/StatusBar';
@@ -163,7 +162,6 @@ function App(): JSX.Element {
                 </div>
             </SplitterLayout>
             <StatusBar />
-            <SettingsDrawer />
         </div>
     );
 }

src/app/actions.ts

@@ -24,10 +24,6 @@ export enum AppActionType {
     DidInstall = 'app.action.didInstallPrompt',
     /** The app has just ben started. */
     DidStart = 'app.action.didStart',
-    /** Open settings dialog. */
-    OpenSettings = 'app.action.openSettings',
-    /** Close settings dialog. */
-    CloseSettings = 'app.action.closeSettings',
 }
 
 /** Action that requests the app to reload. */
@@ -108,22 +104,6 @@ export function didStart(): AppDidStartAction {
     return { type: AppActionType.DidStart };
 }
 
-/** Action to open the settings dialog. */
-export type AppOpenSettingsAction = Action<AppActionType.OpenSettings>;
-
-/** Creates an action to open the settings dialog. */
-export function openSettings(): AppOpenSettingsAction {
-    return { type: AppActionType.OpenSettings };
-}
-
-/** Action to close the settings dialog. */
-export type AppCloseSettingsAction = Action<AppActionType.CloseSettings>;
-
-/** Creates an action to close the settings dialog. */
-export function closeSettings(): AppCloseSettingsAction {
-    return { type: AppActionType.CloseSettings };
-}
-
 /** common type for all app actions. */
 export type AppAction =
     | AppReloadAction
@@ -133,6 +113,4 @@ export type AppAction =
     | AppInstallPromptAction
     | AppDidInstallPromptAction
     | AppDidInstallAction
-    | AppDidStartAction
-    | AppOpenSettingsAction
-    | AppCloseSettingsAction;
+    | AppDidStartAction;

src/app/reducers.test.ts

@@ -6,13 +6,11 @@ import { didSucceed, didUpdate } from '../service-worker/actions';
 import { BeforeInstallPromptEvent } from '../utils/dom';
 import {
     checkForUpdate,
-    closeSettings,
     didBeforeInstallPrompt,
     didCheckForUpdate,
     didInstall,
     didInstallPrompt,
     installPrompt,
-    openSettings,
 } from './actions';
 import reducers from './reducers';
 
@@ -26,21 +24,11 @@ test('initial state', () => {
           "promptingInstall": false,
           "readyForOfflineUse": false,
           "serviceWorker": null,
-          "showSettings": false,
           "updateAvailable": false,
         }
     `);
 });
 
-test('showSettings', () => {
-    expect(
-        reducers({ showSettings: false } as State, openSettings()).showSettings,
-    ).toBe(true);
-    expect(
-        reducers({ showSettings: true } as State, closeSettings()).showSettings,
-    ).toBe(false);
-});
-
 test('serviceWorker', () => {
     const registration = {} as ServiceWorkerRegistration;
     expect(

src/app/reducers.ts

@@ -9,17 +9,6 @@ import { ServiceWorkerActionType } from '../service-worker/actions';
 import { BeforeInstallPromptEvent } from '../utils/dom';
 import { AppActionType } from './actions';
 
-const showSettings: Reducer<boolean, Action> = (state = false, action) => {
-    switch (action.type) {
-        case AppActionType.OpenSettings:
-            return true;
-        case AppActionType.CloseSettings:
-            return false;
-        default:
-            return state;
-    }
-};
-
 const serviceWorker: Reducer<ServiceWorkerRegistration | null, Action> = (
     state = null,
     action,
@@ -93,7 +82,6 @@ const readyForOfflineUse: Reducer<boolean, Action> = (state = false, action) =>
 };
 
 export default combineReducers({
-    showSettings,
     serviceWorker,
     checkingForUpdate,
     updateAvailable,

src/settings/SettingsButton.tsx

@@ -2,28 +2,22 @@
 // Copyright (c) 2021 The Pybricks Authors
 
 import { connect } from 'react-redux';
-import { openSettings as openSettings } from '../app/actions';
 import ActionButton, { ActionButtonProps } from '../toolbar/ActionButton';
 import { TooltipId } from '../toolbar/i18n';
 import settingsIcon from './settings.svg';
 
 type StateProps = undefined;
-type DispatchProps = Pick<ActionButtonProps, 'onAction'>;
-type OwnProps = Pick<ActionButtonProps, 'id'>;
-
-const mapDispatchToProps: DispatchProps = {
-    onAction: openSettings,
-};
+type DispatchProps = undefined;
+type OwnProps = Pick<ActionButtonProps, 'id' | 'onAction'>;
 
 const mergeProps = (
     _stateProps: StateProps,
-    dispatchProps: DispatchProps,
+    _dispatchProps: DispatchProps,
     ownProps: OwnProps,
 ): ActionButtonProps => ({
     tooltip: TooltipId.Settings,
     icon: settingsIcon,
-    ...dispatchProps,
     ...ownProps,
 });
 
-export default connect(undefined, mapDispatchToProps, mergeProps)(ActionButton);
+export default connect(undefined, undefined, mergeProps)(ActionButton);

src/settings/SettingsDrawer.tsx

@@ -19,7 +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, reload } from '../app/actions';
+import { checkForUpdate, installPrompt, reload } from '../app/actions';
 import {
     pybricksBugReportsUrl,
     pybricksGitterUrl,
@@ -38,7 +38,6 @@ import { SettingsStringId } from './i18n';
 import en from './i18n.en.json';
 
 type StateProps = {
-    open: boolean;
     showDocs: boolean;
     darkMode: boolean;
     flashCurrentProgram: boolean;
@@ -51,7 +50,6 @@ type StateProps = {
 };
 
 type DispatchProps = {
-    onClose: () => void;
     onShowDocsChanged: (checked: boolean) => void;
     onDarkModeChanged: (checked: boolean) => void;
     onFlashCurrentProgramChanged: (checked: boolean) => void;
@@ -61,7 +59,12 @@ type DispatchProps = {
     onInstallPrompt: (event: BeforeInstallPromptEvent) => void;
 };
 
-type SettingsProps = StateProps & DispatchProps & WithI18nProps;
+type OwnProps = {
+    isOpen: boolean;
+    onClose(): void;
+};
+
+type SettingsProps = StateProps & DispatchProps & OwnProps & WithI18nProps;
 
 @HotkeysTarget
 class SettingsDrawer extends React.PureComponent<SettingsProps> {
@@ -71,7 +74,6 @@ class SettingsDrawer extends React.PureComponent<SettingsProps> {
 
     render(): JSX.Element {
         const {
-            open,
             showDocs,
             darkMode,
             serviceWorker,
@@ -81,18 +83,19 @@ class SettingsDrawer extends React.PureComponent<SettingsProps> {
             beforeInstallPrompt,
             promptingInstall,
             readyForOfflineUse,
-            onClose,
             onShowDocsChanged,
             onDarkModeChanged,
             onFlashCurrentProgramChanged,
             onCheckForUpdate,
             onReload,
-            onInstallPrompt: onInstall,
+            onInstallPrompt,
+            isOpen,
+            onClose,
             i18n,
         } = this.props;
         return (
             <Drawer
-                isOpen={open}
+                isOpen={isOpen}
                 icon="cog"
                 size={Drawer.SIZE_SMALL}
                 title={i18n.translate(SettingsStringId.Title)}
@@ -243,7 +246,9 @@ class SettingsDrawer extends React.PureComponent<SettingsProps> {
                                 {beforeInstallPrompt && (
                                     <Button
                                         icon="add"
-                                        onClick={() => onInstall(beforeInstallPrompt)}
+                                        onClick={() =>
+                                            onInstallPrompt(beforeInstallPrompt)
+                                        }
                                         loading={promptingInstall}
                                     >
                                         {i18n.translate(
@@ -318,7 +323,6 @@ class SettingsDrawer extends React.PureComponent<SettingsProps> {
 }
 
 const mapStateToProps = (state: RootState): StateProps => ({
-    open: state.app.showSettings,
     showDocs: state.settings.showDocs,
     darkMode: state.settings.darkMode,
     flashCurrentProgram: state.settings.flashCurrentProgram,
@@ -331,7 +335,6 @@ const mapStateToProps = (state: RootState): StateProps => ({
 });
 
 const mapDispatchToProps: DispatchProps = {
-    onClose: closeSettings,
     onShowDocsChanged: (checked) => setBoolean(SettingId.ShowDocs, checked),
     onDarkModeChanged: (checked) => setBoolean(SettingId.DarkMode, checked),
     onFlashCurrentProgramChanged: (checked) =>

src/toolbar/Toolbar.tsx

@@ -11,10 +11,15 @@ import ReplButton from '../hub/ReplButton';
 import RunButton from '../hub/RunButton';
 import StopButton from '../hub/StopButton';
 import SettingsButton from '../settings/SettingsButton';
+import SettingsDrawer from '../settings/SettingsDrawer';
 
 import './toolbar.scss';
 
 class Toolbar extends React.Component {
+    public state = {
+        settingsDrawerIsOpen: false,
+    };
+
     render(): JSX.Element {
         return (
             <Navbar
@@ -40,7 +45,18 @@ class Toolbar extends React.Component {
                 </Navbar.Group>
                 <Navbar.Group align={Alignment.RIGHT}>
                     <ButtonGroup>
-                        <SettingsButton id="settings" />
+                        <SettingsButton
+                            id="settings"
+                            onAction={() =>
+                                this.setState({ settingsDrawerIsOpen: true })
+                            }
+                        />
+                        <SettingsDrawer
+                            isOpen={this.state.settingsDrawerIsOpen}
+                            onClose={() =>
+                                this.setState({ settingsDrawerIsOpen: false })
+                            }
+                        />
                     </ButtonGroup>
                 </Navbar.Group>
             </Navbar>