From 534d3f80e6af0172ee24e40f51924ddbe5008edd Mon Sep 17 00:00:00 2001
From: David Lechner <david@pybricks.com>
Date: Sat, 18 Dec 2021 17:32:37 -0600
Subject: [PATCH] toolbar: convert Toolbar to function

---
 src/toolbar/Toolbar.tsx | 76 +++++++++++++++++++----------------------
 1 file changed, 36 insertions(+), 40 deletions(-)

diff --git a/src/toolbar/Toolbar.tsx b/src/toolbar/Toolbar.tsx
index 20365166..dbbd8c11 100644
--- a/src/toolbar/Toolbar.tsx
+++ b/src/toolbar/Toolbar.tsx
@@ -1,8 +1,8 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2020 The Pybricks Authors
+// Copyright (c) 2020-2021 The Pybricks Authors
 
 import { ButtonGroup } from '@blueprintjs/core';
-import React from 'react';
+import React, { useState } from 'react';
 import OpenButton from '../editor/OpenButton';
 import SaveAsButton from '../editor/SaveAsButton';
 import FlashButton from '../firmware/FlashButton';
@@ -15,44 +15,40 @@ import SettingsDrawer from '../settings/SettingsDrawer';
 
 import './toolbar.scss';
 
-class Toolbar extends React.Component {
-    public state = {
-        settingsDrawerIsOpen: false,
-    };
+const Toolbar: React.VFC = (_props) => {
+    const [isSettingsDrawerOpen, setIsSettingsDrawerOpen] = useState(false);
 
-    render(): JSX.Element {
-        return (
-            <div
-                role="toolbar"
-                onContextMenu={(e): void => e.preventDefault()}
-                className="pb-toolbar no-box-shadow"
-            >
-                <ButtonGroup className="pb-toolbar-group pb-align-left">
-                    <OpenButton id="open" />
-                    <SaveAsButton id="saveAs" />
-                </ButtonGroup>
-                <ButtonGroup className="pb-toolbar-group pb-align-left">
-                    <RunButton id="run" keyboardShortcut="F5" />
-                    <StopButton id="stop" keyboardShortcut="F6" />
-                    <ReplButton id="repl" />
-                </ButtonGroup>
-                <ButtonGroup className="pb-toolbar-group pb-align-left">
-                    <FlashButton id="flash" />
-                    <BluetoothButton id="bluetooth" />
-                </ButtonGroup>
-                <ButtonGroup className="pb-toolbar-group pb-align-right">
-                    <SettingsButton
-                        id="settings"
-                        onAction={() => this.setState({ settingsDrawerIsOpen: true })}
-                    />
-                    <SettingsDrawer
-                        isOpen={this.state.settingsDrawerIsOpen}
-                        onClose={() => this.setState({ settingsDrawerIsOpen: false })}
-                    />
-                </ButtonGroup>
-            </div>
-        );
-    }
-}
+    return (
+        <div
+            role="toolbar"
+            onContextMenu={(e): void => e.preventDefault()}
+            className="pb-toolbar no-box-shadow"
+        >
+            <ButtonGroup className="pb-toolbar-group pb-align-left">
+                <OpenButton id="open" />
+                <SaveAsButton id="saveAs" />
+            </ButtonGroup>
+            <ButtonGroup className="pb-toolbar-group pb-align-left">
+                <RunButton id="run" keyboardShortcut="F5" />
+                <StopButton id="stop" keyboardShortcut="F6" />
+                <ReplButton id="repl" />
+            </ButtonGroup>
+            <ButtonGroup className="pb-toolbar-group pb-align-left">
+                <FlashButton id="flash" />
+                <BluetoothButton id="bluetooth" />
+            </ButtonGroup>
+            <ButtonGroup className="pb-toolbar-group pb-align-right">
+                <SettingsButton
+                    id="settings"
+                    onAction={() => setIsSettingsDrawerOpen(true)}
+                />
+                <SettingsDrawer
+                    isOpen={isSettingsDrawerOpen}
+                    onClose={() => setIsSettingsDrawerOpen(false)}
+                />
+            </ButtonGroup>
+        </div>
+    );
+};
 
 export default Toolbar;