Add docs toggle button

src/components/App.tsx

@@ -1,8 +1,10 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) 2020 The Pybricks Authors
 
-import React, { EffectCallback, useEffect, useState } from 'react';
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
 import SplitterLayout from 'react-splitter-layout';
+import { RootState } from '../reducers';
 import Editor from './Editor';
 import StatusBar from './StatusBar';
 import Terminal from './Terminal';
@@ -10,28 +12,8 @@ import Toolbar from './Toolbar';
 
 import 'react-splitter-layout/lib/index.css';
 
-function useShowDocs(): boolean {
-    function getShowDocs(): boolean {
-        return window.innerWidth >= 1024;
-    }
-
-    const [showDocs, setShowDocs] = useState(getShowDocs);
-
-    useEffect((): ReturnType<EffectCallback> => {
-        function handleResize(): void {
-            setShowDocs(getShowDocs());
-        }
-
-        window.addEventListener('resize', handleResize);
-
-        return (): void => window.removeEventListener('resize', handleResize);
-    }, []); // Empty array ensures that effect is only run on mount and unmount
-
-    return showDocs;
-}
-
 function App(): JSX.Element {
-    const showDocs = useShowDocs();
+    const showDocs = useSelector((s: RootState): boolean => s.app.showDocs);
     const [dragging, setDragging] = useState(false);
 
     return (

src/components/DocsButton.tsx

@@ -0,0 +1,33 @@
+// SPDX-License-Identifier: MIT
+// Copyright (c) 2020 The Pybricks Authors
+// File: components/DocsButton.ts
+// Toolbar button for toggling documentation.
+
+import { connect } from 'react-redux';
+import { Action, Dispatch } from '../actions';
+import { toggleDocs } from '../actions/app';
+import ActionButton, { ActionButtonProps } from './ActionButton';
+import { TooltipId } from './button';
+import docsIcon from './images/run.svg'; // FIXME: need proper icon
+
+type StateProps = {};
+type DispatchProps = Pick<ActionButtonProps, 'onAction'>;
+type OwnProps = Pick<ActionButtonProps, 'id'>;
+
+const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => ({
+    onAction: (): Action => dispatch(toggleDocs()),
+});
+
+const mergeProps = (
+    stateProps: StateProps,
+    dispatchProps: DispatchProps,
+    ownProps: OwnProps,
+): ActionButtonProps => ({
+    tooltip: TooltipId.Docs,
+    icon: docsIcon,
+    ...ownProps,
+    ...stateProps,
+    ...dispatchProps,
+});
+
+export default connect(undefined, mapDispatchToProps, mergeProps)(ActionButton);

src/components/Toolbar.tsx

@@ -1,9 +1,10 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) 2020 The Pybricks Authors
 
-import { ButtonGroup, Navbar } from '@blueprintjs/core';
+import { Alignment, ButtonGroup, Navbar } from '@blueprintjs/core';
 import React from 'react';
 import BluetoothButton from './BluetoothButton';
+import DocsButton from './DocsButton';
 import FlashButton from './FlashButton';
 import OpenButton from './OpenButton';
 import ReplButton from './ReplButton';
@@ -36,6 +37,11 @@ class Toolbar extends React.Component {
                         <FlashButton id="flash" />
                     </ButtonGroup>
                 </Navbar.Group>
+                <Navbar.Group align={Alignment.RIGHT}>
+                    <ButtonGroup>
+                        <DocsButton id="docs" />
+                    </ButtonGroup>
+                </Navbar.Group>
             </Navbar>
         );
     }

src/components/button.en.json

@@ -8,5 +8,6 @@
         "connect": { "tooltip": "Connect using Bluetooth" },
         "disconnect": { "tooltip": "Disconnect Bluetooth" }
     },
-    "flash": { "tooltip": "Flash hub firmware" }
+    "flash": { "tooltip": "Flash hub firmware" },
+    "docs": { "tooltip": "Show/hide documentation" }
 }

src/components/button.ts

@@ -10,4 +10,5 @@ export enum TooltipId {
     Flash = 'flash.tooltip',
     BluetoothConnect = 'bluetooth.connect.tooltip',
     BluetoothDisconnect = 'bluetooth.disconnect.tooltip',
+    Docs = 'docs.tooltip',
 }