Merge pull request #42 from concord-consortium/187369359-add-toolbar-…

…toggle-off

feat: Allow toggling off a tool and return to select mode [PT-187369359]

src/components/toolbar.tsx

@@ -1,5 +1,5 @@
 import { clsx } from "clsx";
-import React, { useState } from "react";
+import React, { useCallback, useState } from "react";
 
 import SelectIcon from "../assets/select.svg";
 import AddStateIcon from "../assets/add-state.svg";
@@ -79,16 +79,20 @@ export const ToolbarButton = ({tool, selectedTool, onClick}: ToolbarButtonProps)
 export const Toolbar = ({tools, onToolSelected, onReset, onReturnToMainMenu}: ToolbarProps) => {
   const [selectedTool, setSelectedTool] = useState<Tool>("select");
 
-  const handleToolSelected = (tool: Tool) => {
+  const handleToolSelected = useCallback((tool: Tool) => {
     if (toggleableTools.includes(tool)) {
+      // allow toggling off a tool and returning to select mode
+      if (tool === selectedTool) {
+        tool = "select";
+      }
       setSelectedTool(tool);
     } else if (tool === "reset") {
       onReset();
     } else if (tool === "home") {
       onReturnToMainMenu();
     }
     onToolSelected(tool);
-  };
+  }, [selectedTool, onReset, onReturnToMainMenu, onToolSelected]);
 
   const topTools = tools.filter(tool => !nonTopTools.includes(tool));
   const bottomTools = tools.filter(tool => nonTopTools.includes(tool));