Finishing the migration of viewMenu into a component

src/client/components/boardComponent.tsx

@@ -6,7 +6,7 @@ import { IPropertyOption } from "../board"
 import { BoardTree } from "../boardTree"
 import { CardFilter } from "../cardFilter"
 import { Constants } from "../constants"
-import Menu from "../widgets/menu"
+import ViewMenu from "../components/viewMenu"
 import { Menu as OldMenu } from "../menu"
 import { Mutator } from "../mutator"
 import { IBlock, IPageController } from "../octoTypes"
@@ -19,74 +19,6 @@ import { BoardColumn } from "./boardColumn"
 import { Button } from "./button"
 import { Editable } from "./editable"
 
-type ViewMenuProps = {
-	mutator: Mutator,
-	boardTree?: BoardTree
-	pageController: IPageController,
-    board: Board,
-    onClose: () => void,
-}
-function ViewMenu({board, onClose, boardTree, mutator, pageController}: ViewMenuProps) {
-    const handleDeleteView = async (id: string) => {
-        Utils.log(`deleteView`)
-        const view = boardTree.activeView
-        const nextView = boardTree.views.find(o => o !== view)
-        await mutator.deleteBlock(view, "delete view")
-        pageController.showView(nextView.id)
-    }
-
-    const handleViewClick = (id: string) => {
-        Utils.log(`view ` + id)
-        const view = boardTree.views.find(o => o.id === id)
-        pageController.showView(view.id)
-    }
-
-    const handleAddViewBoard = async (id: string) => {
-        Utils.log(`addview-board`)
-        const view = new BoardView()
-        view.title = "Board View"
-        view.viewType = "board"
-        view.parentId = board.id
-
-        const oldViewId = boardTree.activeView.id
-
-        await mutator.insertBlock(
-            view,
-            "add view",
-            async () => { pageController.showView(view.id) },
-            async () => { pageController.showView(oldViewId) })
-    }
-
-    const handleAddViewTable = async (id: string) => {
-        Utils.log(`addview-table`)
-        const view = new BoardView()
-        view.title = "Table View"
-        view.viewType = "table"
-        view.parentId = board.id
-        view.visiblePropertyIds = board.cardProperties.map(o => o.id)
-
-        const oldViewId = boardTree.activeView.id
-
-        await mutator.insertBlock(
-            view,
-            "add view",
-            async () => { pageController.showView(view.id) },
-            async () => { pageController.showView(oldViewId) })
-    }
-
-    return (
-        <Menu onClose={onClose}>
-            {boardTree.views.map((view) => (<Menu.Text key={view.id} id={view.id} name={view.title} onClick={handleViewClick}/>))}
-            <Menu.Separator/>
-            {boardTree.views.length > 1 && <Menu.Text id="__deleteView" name="Delete View" onClick={handleDeleteView} />}
-            <Menu.SubMenu id="__addView" name="Add View">
-                <Menu.Text id='board' name='Board' onClick={handleAddViewBoard}/>
-                <Menu.Text id='table' name='Table' onClick={handleAddViewTable}/>
-            </Menu.SubMenu>
-        </Menu>
-    );
-}
-
 type Props = {
 	mutator: Mutator,
 	boardTree?: BoardTree

src/client/components/tableComponent.tsx

@@ -5,7 +5,8 @@ import { BlockIcons } from "../blockIcons"
 import { IPropertyTemplate } from "../board"
 import { BoardTree } from "../boardTree"
 import { CsvExporter } from "../csvExporter"
-import { Menu } from "../menu"
+import ViewMenu from "../components/viewMenu"
+import { Menu as OldMenu } from "../menu"
 import { Mutator } from "../mutator"
 import { IBlock, IPageController } from "../octoTypes"
 import { OctoUtils } from "../octoUtils"
@@ -23,6 +24,7 @@ type Props = {
 type State = {
 	isHoverOnCover: boolean
 	isSearching: boolean
+    viewMenu: boolean
 }
 
 class TableComponent extends React.Component<Props, State> {
@@ -33,7 +35,7 @@ class TableComponent extends React.Component<Props, State> {
 
 	constructor(props: Props) {
 		super(props)
-		this.state = { isHoverOnCover: false, isSearching: !!this.props.boardTree?.getSearchText() }
+		this.state = { isHoverOnCover: false, isSearching: !!this.props.boardTree?.getSearchText(), viewMenu: false}
 	}
 
 	componentDidUpdate(prevPros: Props, prevState: State) {
@@ -85,7 +87,21 @@ class TableComponent extends React.Component<Props, State> {
 					<div className="octo-table">
 						<div className="octo-controls">
 							<Editable style={{ color: "#000000", fontWeight: 600 }} text={activeView.title} placeholderText="Untitled View" onChanged={(text) => { mutator.changeTitle(activeView, text) }} />
-							<div className="octo-button" style={{ color: "#000000", fontWeight: 600 }} onClick={(e) => { OctoUtils.showViewMenu(e, mutator, boardTree, pageController) }}><div className="imageDropdown"></div></div>
+                            <div
+                                className="octo-button"
+                                style={{ color: "#000000", fontWeight: 600 }}
+                                onClick={() => this.setState({viewMenu: true})}
+                            >
+                                {this.state.viewMenu &&
+                                    <ViewMenu
+                                        board={board}
+                                        onClose={() => this.setState({viewMenu:false})}
+                                        mutator={mutator}
+                                        boardTree={boardTree}
+                                        pageController={pageController}
+                                    />}
+                                <div className="imageDropdown"></div>
+                            </div>
 							<div className="octo-spacer"></div>
 							<div className="octo-button" onClick={(e) => { this.propertiesClicked(e) }}>Properties</div>
 							<div className={ hasFilter ? "octo-button active" : "octo-button"} onClick={(e) => { this.filterClicked(e) }}>Filter</div>
@@ -198,11 +214,11 @@ class TableComponent extends React.Component<Props, State> {
 		const { mutator, boardTree } = this.props
 		const { board } = boardTree
 
-		Menu.shared.options = [
+		OldMenu.shared.options = [
 			{ id: "random", name: "Random" },
 			{ id: "remove", name: "Remove Icon" },
 		]
-		Menu.shared.onMenuClicked = (optionId: string, type?: string) => {
+		OldMenu.shared.onMenuClicked = (optionId: string, type?: string) => {
 			switch (optionId) {
 				case "remove":
 					mutator.changeIcon(board, undefined, "remove icon")
@@ -213,7 +229,7 @@ class TableComponent extends React.Component<Props, State> {
 					break
 			}
 		}
-		Menu.shared.showAtElement(e.target as HTMLElement)
+		OldMenu.shared.showAtElement(e.target as HTMLElement)
 	}
 
 	private async propertiesClicked(e: React.MouseEvent) {
@@ -221,12 +237,12 @@ class TableComponent extends React.Component<Props, State> {
 		const { activeView } = boardTree
 
 		const selectProperties = boardTree.board.cardProperties
-		Menu.shared.options = selectProperties.map((o) => {
+		OldMenu.shared.options = selectProperties.map((o) => {
 			const isVisible = activeView.visiblePropertyIds.includes(o.id)
 			return { id: o.id, name: o.name, type: "switch", isOn: isVisible }
 		})
 
-		Menu.shared.onMenuToggled = async (id: string, isOn: boolean) => {
+		OldMenu.shared.onMenuToggled = async (id: string, isOn: boolean) => {
 			const property = selectProperties.find(o => o.id === id)
 			Utils.assertValue(property)
 			Utils.log(`Toggle property ${property.name} ${isOn}`)
@@ -239,7 +255,7 @@ class TableComponent extends React.Component<Props, State> {
 			}
 			await mutator.changeViewVisibleProperties(activeView, newVisiblePropertyIds)
 		}
-		Menu.shared.showAtElement(e.target as HTMLElement)
+		OldMenu.shared.showAtElement(e.target as HTMLElement)
 	}
 
 	private filterClicked(e: React.MouseEvent) {
@@ -250,12 +266,12 @@ class TableComponent extends React.Component<Props, State> {
 	private async optionsClicked(e: React.MouseEvent) {
 		const { boardTree } = this.props
 
-		Menu.shared.options = [
+		OldMenu.shared.options = [
 			{ id: "exportCsv", name: "Export to CSV" },
 			{ id: "exportBoardArchive", name: "Export board archive" },
 		]
 
-		Menu.shared.onMenuClicked = async (id: string) => {
+		OldMenu.shared.onMenuClicked = async (id: string) => {
 			switch (id) {
 				case "exportCsv": {
 					CsvExporter.exportTableCsv(boardTree)
@@ -267,7 +283,7 @@ class TableComponent extends React.Component<Props, State> {
 				}
 			}
 		}
-		Menu.shared.showAtElement(e.target as HTMLElement)
+		OldMenu.shared.showAtElement(e.target as HTMLElement)
 	}
 
 	private async headerClicked(e: React.MouseEvent<HTMLDivElement>, templateId: string) {
@@ -288,8 +304,8 @@ class TableComponent extends React.Component<Props, State> {
 			options.push({ id: "delete", name: "Delete" })
 		}
 
-		Menu.shared.options = options
+		OldMenu.shared.options = options
-		Menu.shared.onMenuClicked = async (optionId: string, type?: string) => {
+		OldMenu.shared.onMenuClicked = async (optionId: string, type?: string) => {
 			switch (optionId) {
 				case "sortAscending": {
 					const newSortOptions = [
@@ -342,7 +358,7 @@ class TableComponent extends React.Component<Props, State> {
 				}
 			}
 		}
-		Menu.shared.showAtElement(e.target as HTMLElement)
+		OldMenu.shared.showAtElement(e.target as HTMLElement)
 	}
 
 	async showCard(card: IBlock) {

src/client/components/viewMenu.tsx

@@ -0,0 +1,85 @@
+import React from "react"
+
+import { Mutator } from "../mutator"
+import Menu from "../widgets/menu"
+import { Board } from "../board"
+import { BoardTree } from "../boardTree"
+import { IPageController } from "../octoTypes"
+import { Utils } from "../utils"
+import { BoardView } from "../boardView"
+
+type Props = {
+	mutator: Mutator,
+	boardTree?: BoardTree
+	pageController: IPageController,
+    board: Board,
+    onClose: () => void,
+}
+export default class ViewMenu extends React.Component<Props> {
+    handleDeleteView = async (id: string) => {
+        const {board, boardTree, mutator, pageController} = this.props;
+        Utils.log(`deleteView`)
+        const view = boardTree.activeView
+        const nextView = boardTree.views.find(o => o !== view)
+        await mutator.deleteBlock(view, "delete view")
+        pageController.showView(nextView.id)
+    }
+
+    handleViewClick = (id: string) => {
+        const {boardTree, pageController} = this.props;
+        Utils.log(`view ` + id)
+        const view = boardTree.views.find(o => o.id === id)
+        pageController.showView(view.id)
+    }
+
+    handleAddViewBoard = async (id: string) => {
+        const {board, boardTree, mutator, pageController} = this.props;
+        Utils.log(`addview-board`)
+        const view = new BoardView()
+        view.title = "Board View"
+        view.viewType = "board"
+        view.parentId = board.id
+
+        const oldViewId = boardTree.activeView.id
+
+        await mutator.insertBlock(
+            view,
+            "add view",
+            async () => { pageController.showView(view.id) },
+            async () => { pageController.showView(oldViewId) })
+    }
+
+    handleAddViewTable = async (id: string) => {
+        const {board, boardTree, mutator, pageController} = this.props;
+
+        Utils.log(`addview-table`)
+        const view = new BoardView()
+        view.title = "Table View"
+        view.viewType = "table"
+        view.parentId = board.id
+        view.visiblePropertyIds = board.cardProperties.map(o => o.id)
+
+        const oldViewId = boardTree.activeView.id
+
+        await mutator.insertBlock(
+            view,
+            "add view",
+            async () => { pageController.showView(view.id) },
+            async () => { pageController.showView(oldViewId) })
+    }
+
+    render() {
+        const {board, onClose, boardTree, mutator, pageController} = this.props;
+        return (
+            <Menu onClose={onClose}>
+                {boardTree.views.map((view) => (<Menu.Text key={view.id} id={view.id} name={view.title} onClick={this.handleViewClick}/>))}
+                <Menu.Separator/>
+                {boardTree.views.length > 1 && <Menu.Text id="__deleteView" name="Delete View" onClick={this.handleDeleteView} />}
+                <Menu.SubMenu id="__addView" name="Add View">
+                    <Menu.Text id='board' name='Board' onClick={this.handleAddViewBoard}/>
+                    <Menu.Text id='table' name='Table' onClick={this.handleAddViewTable}/>
+                </Menu.SubMenu>
+            </Menu>
+        );
+    }
+}

src/client/octoUtils.tsx

@@ -9,75 +9,6 @@ import { IBlock, IPageController } from "./octoTypes"
 import { Utils } from "./utils"
 
 class OctoUtils {
-	static async showViewMenu(e: React.MouseEvent, mutator: Mutator, boardTree: BoardTree, pageController: IPageController) {
-		const { board } = boardTree
-
-		const options: MenuOption[] = boardTree.views.map(view => ({ id: view.id, name: view.title || "Untitled View" }))
-		options.push({ id: "", name: "", type: "separator" })
-		if (boardTree.views.length > 1) {
-			options.push({ id: "__deleteView", name: "Delete View" })
-		}
-		options.push({ id: "__addview", name: "Add View", type: "submenu" })
-
-		const addViewMenuOptions = [
-			{ id: "board", name: "Board" },
-			{ id: "table", name: "Table" }
-		]
-		Menu.shared.subMenuOptions.set("__addview", addViewMenuOptions)
-
-		Menu.shared.options = options
-		Menu.shared.onMenuClicked = async (optionId: string, type?: string) => {
-			switch (optionId) {
-				case "__deleteView": {
-					Utils.log(`deleteView`)
-					const view = boardTree.activeView
-					const nextView = boardTree.views.find(o => o !== view)
-					await mutator.deleteBlock(view, "delete view")
-					pageController.showView(nextView.id)
-					break
-				}
-				case "__addview-board": {
-					Utils.log(`addview-board`)
-					const view = new BoardView()
-					view.title = "Board View"
-					view.viewType = "board"
-					view.parentId = board.id
-
-					const oldViewId = boardTree.activeView.id
-
-					await mutator.insertBlock(
-						view,
-						"add view",
-						async () => { pageController.showView(view.id) },
-						async () => { pageController.showView(oldViewId) })
-					break
-				}
-				case "__addview-table": {
-					Utils.log(`addview-table`)
-					const view = new BoardView()
-					view.title = "Table View"
-					view.viewType = "table"
-					view.parentId = board.id
-					view.visiblePropertyIds = board.cardProperties.map(o => o.id)
-
-					const oldViewId = boardTree.activeView.id
-
-					await mutator.insertBlock(
-						view,
-						"add view",
-						async () => { pageController.showView(view.id) },
-						async () => { pageController.showView(oldViewId) })
-					break
-				}
-				default: {
-					const view = boardTree.views.find(o => o.id === optionId)
-					pageController.showView(view.id)
-				}
-			}
-		}
-		Menu.shared.showAtElement(e.target as HTMLElement)
-	}
-
 	static propertyDisplayValue(block: IBlock, propertyValue: string | undefined, propertyTemplate: IPropertyTemplate) {
 		let displayValue: string
 		switch (propertyTemplate.type) {