Добавить функцию удаления при просмотре событий (React-Redux-Firebase)

Question

Здесь я разрешаю пользователю просматривать детали события.Там будет кнопка в конце детали события, чтобы они могли удалить событие.Однако как мне это сделать?

Должен ли я реализовать функцию удаления здесь, в файле просмотра сведений о событии?Или я должен создать другой файл .jsx, который обрабатывает удаление?Файл delete.jsx, приведенный ниже, содержит метод handleDelete, который удаляет событие из хранилища редуксов, которое затем обновляет удаление в пожарном хранилище

VIEWING EVENT DETAILS FILE
import React from "react";
import { connect } from "react-redux";
import { firestoreConnect } from "react-redux-firebase";
import { compose } from "redux";
import { Redirect } from "react-router-dom";
import moment from "moment";
import DeleteEvent from "./DeleteEvent";

const EventDetails = props => {
  const { event, auth } = props;
  if (!auth.uid) return <Redirect to="/signin" />;

  if (event) {
    return (
      <div className="container section project-details">
        <div className="card z-depth-0">
          <div className="card-content">
            <span className="card-title">Subject: {event.subject}</span>
            <p>Venue: {event.venue}</p>
            <p>Time: {event.time}</p>
            <p>Description: {event.description}</p>
            <p>Class Size: {event.size}</p>
          </div>
          <div className="card-action grey lighten-4 grey-text">
            <div>
              Tutor: {event.authorFirstName} {event.authorLastName}
            </div>
            <div>
              Time of class created:
              {moment(event.createdAt.toDate()).calendar()}
            </div>
            <DeleteEvent event={event} />
          </div>
        </div>
      </div>
    );
  } else {
    return (
      <div className="container centre">
        <p>Loading event....</p>
      </div>
    );
  }
};

const mapStateToProps = (state, ownProps) => {
  const id = ownProps.match.params.id;
  const events = state.firestore.data.events;
  const event = events ? events[id] : null;
  return {
    event: event,
    auth: state.firebase.auth
  };
};

export default compose(
  connect(mapStateToProps),
  firestoreConnect([
    {
      collection: "events"
    }
  ])
)(EventDetails);

DELETE.JSX FILE
import React, { Component } from "react";
import { connect } from "react-redux";
import { Redirect } from "react-router-dom";
import { deleteEvent } from "../../store/actions/eventActions";

const DeleteEvent = ({ event }) => {
  const handleDelete = e => {
    e.preventDefault();
    this.props.deleteEvent(event);
    //this.props.history.push("/"); // redirect to homepage after deletion
  };

  return (
    <div>
      <button onClick={this.handleDelete} className="btn green z-depth-0">
        Delete
      </button>
    </div>
  );
};

const mapDispatchToProps = dispatch => {
  return {
    deleteEvent: event => dispatch(deleteEvent(event))
  };
};

export default connect(null, mapDispatchToProps)(DeleteEvent);