Refactor: Move sort menu to OctoUtils

src/client/components/boardComponent.tsx

@@ -96,7 +96,7 @@ class BoardComponent extends React.Component<Props, State> {
 								Group by <span style={groupByStyle} id="groupByLabel">{boardTree.groupByProperty?.name}</span>
 							</div>
 							<div className={hasFilter ? "octo-button active" : "octo-button"} onClick={(e) => { this.filterClicked(e) }}>Filter</div>
-							<div className={hasSort ? "octo-button active" : "octo-button"} onClick={(e) => { this.sortClicked(e) }}>Sort</div>
+							<div className={hasSort ? "octo-button active" : "octo-button"} onClick={(e) => { OctoUtils.showSortMenu(e, mutator, boardTree) }}>Sort</div>
 							{this.state.isSearching
 								? <Editable
 									ref={this.searchFieldRef}
@@ -275,38 +275,6 @@ class BoardComponent extends React.Component<Props, State> {
 		pageController.showFilter(e.target as HTMLElement)
 	}
 
-	private async sortClicked(e: React.MouseEvent) {
-		const { mutator, boardTree } = this.props
-		const { activeView } = boardTree
-		const { sortOptions } = activeView
-		const sortOption = sortOptions.length > 0 ? sortOptions[0] : undefined
-
-		const propertyTemplates = boardTree.board.cardProperties
-		Menu.shared.options = propertyTemplates.map((o) => {
-			return {
-				id: o.id,
-				name: o.name,
-				icon: (sortOption.propertyId === o.id) ? sortOption.reversed ? "sortUp" : "sortDown" : undefined
-			}
-		})
-		Menu.shared.onMenuClicked = async (propertyId: string) => {
-			let newSortOptions: ISortOption[] = []
-			if (sortOption && sortOption.propertyId === propertyId) {
-				// Already sorting by name, so reverse it
-				newSortOptions = [
-					{ propertyId, reversed: !sortOption.reversed }
-				]
-			} else {
-				newSortOptions = [
-					{ propertyId, reversed: false }
-				]
-			}
-
-			await mutator.changeViewSortOptions(activeView, newSortOptions)
-		}
-		Menu.shared.showAtElement(e.target as HTMLElement)
-	}
-
 	private async optionsClicked(e: React.MouseEvent) {
 		const { boardTree } = this.props
 

src/client/components/tableComponent.tsx

@@ -90,7 +90,7 @@ class TableComponent extends React.Component<Props, State> {
 							<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>
-							<div className={ hasSort ? "octo-button active" : "octo-button"} onClick={(e) => { this.sortClicked(e) }}>Sort</div>
+							<div className={ hasSort ? "octo-button active" : "octo-button"} onClick={(e) => { OctoUtils.showSortMenu(e, mutator, boardTree) }}>Sort</div>
 							{this.state.isSearching
 								? <Editable
 									ref={this.searchFieldRef}
@@ -248,38 +248,6 @@ class TableComponent extends React.Component<Props, State> {
 		pageController.showFilter(e.target as HTMLElement)
 	}
 
-	private async sortClicked(e: React.MouseEvent) {
-		const { mutator, boardTree } = this.props
-		const { activeView } = boardTree
-		const { sortOptions } = activeView
-		const sortOption = sortOptions.length > 0 ? sortOptions[0] : undefined
-
-		const propertyTemplates = boardTree.board.cardProperties
-		Menu.shared.options = propertyTemplates.map((o) => {
-			return {
-				id: o.id,
-				name: o.name,
-				icon: (sortOption.propertyId === o.id) ? sortOption.reversed ? "sortUp" : "sortDown" : undefined
-			}
-		})
-		Menu.shared.onMenuClicked = async (propertyId: string) => {
-			let newSortOptions: ISortOption[] = []
-			if (sortOption && sortOption.propertyId === propertyId) {
-				// Already sorting by name, so reverse it
-				newSortOptions = [
-					{ propertyId, reversed: !sortOption.reversed }
-				]
-			} else {
-				newSortOptions = [
-					{ propertyId, reversed: false }
-				]
-			}
-
-			await mutator.changeViewSortOptions(activeView, newSortOptions)
-		}
-		Menu.shared.showAtElement(e.target as HTMLElement)
-	}
-
 	private async optionsClicked(e: React.MouseEvent) {
 		const { boardTree } = this.props
 

src/client/octoUtils.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import { IPropertyTemplate } from "./board"
 import { BoardTree } from "./boardTree"
-import { BoardView } from "./boardView"
+import { BoardView, ISortOption } from "./boardView"
 import { Editable } from "./components/editable"
 import { Menu, MenuOption } from "./menu"
 import { Mutator } from "./mutator"
@@ -143,7 +143,7 @@ class OctoUtils {
 						showMenu(e.target as HTMLElement)
 					}
 				} : undefined}
-				onFocus={mutator ? () => { Menu.shared.hide() } : undefined }
+				onFocus={mutator ? () => { Menu.shared.hide() } : undefined}
 			>
 				{finalDisplayValue}
 			</div>
@@ -176,7 +176,7 @@ class OctoUtils {
 		if (index === 0) {
 			return block.order / 2
 		}
-		const previousBlock = blocks[index-1]
+		const previousBlock = blocks[index - 1]
 		return (block.order + previousBlock.order) / 2
 	}
 
@@ -185,9 +185,40 @@ class OctoUtils {
 		if (index === blocks.length - 1) {
 			return block.order + 1000
 		}
-		const nextBlock = blocks[index+1]
+		const nextBlock = blocks[index + 1]
 		return (block.order + nextBlock.order) / 2
 	}
+
+	static showSortMenu(e: React.MouseEvent, mutator: Mutator, boardTree: BoardTree) {
+		const { activeView } = boardTree
+		const { sortOptions } = activeView
+		const sortOption = sortOptions.length > 0 ? sortOptions[0] : undefined
+
+		const propertyTemplates = boardTree.board.cardProperties
+		Menu.shared.options = propertyTemplates.map((o) => {
+			return {
+				id: o.id,
+				name: o.name,
+				icon: (sortOption.propertyId === o.id) ? sortOption.reversed ? "sortUp" : "sortDown" : undefined
+			}
+		})
+		Menu.shared.onMenuClicked = async (propertyId: string) => {
+			let newSortOptions: ISortOption[] = []
+			if (sortOption && sortOption.propertyId === propertyId) {
+				// Already sorting by name, so reverse it
+				newSortOptions = [
+					{ propertyId, reversed: !sortOption.reversed }
+				]
+			} else {
+				newSortOptions = [
+					{ propertyId, reversed: false }
+				]
+			}
+
+			await mutator.changeViewSortOptions(activeView, newSortOptions)
+		}
+		Menu.shared.showAtElement(e.target as HTMLElement)
+	}
 }
 
 export { OctoUtils }