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:
Create a free account to access the full course.
By signing up, you agree to Educative's Terms of Service and Privacy Policy