Implementing Pilot Deletion

We should now be able to dispatch an ENTITY_DELETE action to delete a given Pilot entry from the store. All we need to do now is add delete buttons to our PilotsListRow components, and hook them up to dispatch the action.

We’ll add another column to the Pilots list, and show a red circular X button for each row. Clicking the button will delete the item.

Commit 128b2ac: Add the ability to delete individual Pilot entries

features/pilots/PilotsList/PilotsListHeader.jsx

features/pilots/PilotsList/PilotsListRow.jsx

-import {Table} from "semantic-ui-react";
+import {
+    Table,
+    Button,
+    Icon,
+} from "semantic-ui-react";


import {getEntitiesSession} from "features/entities/entitySelectors";
+import {deleteEntity} from "features/entities/entityActions";


+const actions = {
+    deleteEntity,
+};

-const PilotsListRow = ({pilot={}, onPilotClicked=_.noop, selected}) => {
+const PilotsListRow = ({pilot={}, onPilotClicked=_.noop, selected, deleteEntity}) => {

// Omit prop extraction

+   const onDeleteClicked = () => deleteEntity("Pilot", id);

// Omit row cell rendering
            <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>

That should give us a column of delete buttons for all our Pilot entries: