Add the ability to delete individual Pilot entries

Author: markerikson

src/features/pilots/PilotsList/PilotsListHeader.jsx

@@ -16,9 +16,10 @@ const PilotsListHeader = () => (
  <Table.HeaderCell width={2}>
  Skills
  </Table.HeaderCell>
- <Table.HeaderCell width={4}>
+ <Table.HeaderCell width={3}>
  Mech
  </Table.HeaderCell>
+ <Table.HeaderCell width={1} />
 
  </Table.Row>
  </Table.Header>

src/features/pilots/PilotsList/PilotsListRow.jsx

@@ -1,9 +1,15 @@
 import React from "react";
 import {connect} from "react-redux";
-import {Table} from "semantic-ui-react";
+import {
+ Table,
+ Button,
+ Icon,
+} from "semantic-ui-react";
 import _ from "lodash";
 
 import {getEntitiesSession} from "features/entities/entitySelectors";
+import {deleteEntity} from "features/entities/entityActions";
+
 
 const mapState = (state, ownProps) => {
  const session = getEntitiesSession(state);
@@ -37,7 +43,12 @@ const mapState = (state, ownProps) => {
  return {pilot};
 }
 
-const PilotsListRow = ({pilot={}, onPilotClicked=_.noop, selected}) => {
+const actions = {
+ deleteEntity,
+};
+
+
+const PilotsListRow = ({pilot={}, onPilotClicked=_.noop, selected, deleteEntity}) => {
  const {
  id = null,
  name = "",
@@ -48,6 +59,8 @@ const PilotsListRow = ({pilot={}, onPilotClicked=_.noop, selected}) => {
  mechType = "",
  } = pilot;
 
+ const onDeleteClicked = () => deleteEntity("Pilot", id);
+
  return (
  <Table.Row onClick={() => onPilotClicked(id)} active={selected}>
  <Table.Cell>
@@ -65,8 +78,21 @@ const PilotsListRow = ({pilot={}, onPilotClicked=_.noop, selected}) => {
  <Table.Cell>
  {mechType}
  </Table.Cell>
+
+ <Table.Cell>
+ <Button
+ compact
+ basic
+ circular
+ size="tiny"
+ color="red"
+ icon={<Icon name="delete" />}
+ onClick={onDeleteClicked}
+ >
+ </Button>
+ </Table.Cell>
  </Table.Row>
  );
 }
 
-export default connect(mapState)(PilotsListRow);
+export default connect(mapState, actions)(PilotsListRow);