Implement a context menu for pilots list items

src/features/contextMenus/ContextMenuManager.jsx

@@ -3,12 +3,15 @@ import {connect} from "react-redux";
 import Portal from 'react-portal';
 
 import ContextMenu from "./ContextMenu";
+
 import TestContextMenu from "./TestContextMenu";
+import PilotsListItemMenu from "features/pilots/PilotsList/PilotsListItemMenu";
 
 import {selectContextMenu} from "./contextMenuSelectors";
 
 const menuTypes = {
-    TestContextMenu
+    TestContextMenu,
+    PilotsListItemMenu
 };
 
 

src/features/pilots/PilotsList/PilotsListItemMenu.jsx

@@ -0,0 +1,43 @@
+import React, { Component } from 'react'
+import {connect} from "react-redux";
+import { Menu } from 'semantic-ui-react'
+
+import {selectPilot} from "../pilotsActions";
+import {deleteEntity} from "features/entities/entityActions";
+import {hideContextMenu} from "features/contextMenus/contextMenuActions";
+
+const actions = {
+    selectPilot,
+    deleteEntity,
+    hideContextMenu,
+}
+
+export class PilotsListItemMenu extends Component {
+    onSelectClicked = () => {
+        this.props.selectPilot(this.props.pilotId);
+        this.props.hideContextMenu();
+    }
+
+    onDeleteClicked = () => {
+        this.props.deleteEntity("Pilot", this.props.pilotId);
+        this.props.hideContextMenu();
+    }
+
+    render() {
+        return (
+            <Menu vertical>
+                <Menu.Item>
+                    <Menu.Header>Pilot: {this.props.text} </Menu.Header>
+
+                    <Menu.Menu>
+                        <Menu.Item onClick={this.onSelectClicked}>Select Pilot</Menu.Item>
+                        <Menu.Item onClick={this.onDeleteClicked}>Delete Pilot</Menu.Item>
+                    </Menu.Menu>
+                </Menu.Item>
+            </Menu>
+        )
+    }
+}
+
+
+export default connect(null, actions)(PilotsListItemMenu);

src/features/pilots/PilotsList/PilotsListRow.jsx

@@ -9,6 +9,7 @@ import _ from "lodash";
 
 import {getEntitiesSession} from "features/entities/entitySelectors";
 import {deleteEntity} from "features/entities/entityActions";
+import {showContextMenu} from "features/contextMenus/contextMenuActions";
 
 
 const mapState = (state, ownProps) => {
@@ -45,10 +46,11 @@ const mapState = (state, ownProps) => {
 
 const actions = {
     deleteEntity,
+    showContextMenu,
 };
 
 
-const PilotsListRow = ({pilot={}, onPilotClicked=_.noop, selected, deleteEntity}) => {
+const PilotsListRow = ({pilot={}, onPilotClicked=_.noop, selected, deleteEntity, showContextMenu}) => {
     const {
         id = null,
         name = "",
@@ -67,9 +69,17 @@ const PilotsListRow = ({pilot={}, onPilotClicked=_.noop, selected, deleteEntity}
 
     const onRowClicked = () => onPilotClicked(id);
 
+    const onRowRightClicked = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+
+        const {pageX, pageY} = e;
+        showContextMenu(pageX, pageY, "PilotsListItemMenu", {text: pilot.name, pilotId : id});
+    }
+
 
     return (
-        <Table.Row onClick={onRowClicked} active={selected}>
+        <Table.Row onClick={onRowClicked} onContextMenu={onRowRightClicked}  active={selected}>
             <Table.Cell>
                 {name}
             </Table.Cell>