javascript - 查看事件时添加删除功能（React-Redux-Firebase）

Question

在这里，我让用户查看事件的详细信息。活动详情末尾会有一个按钮，供他们删除活动。但是，我应该怎么做呢？

我应该在查看事件详细信息文件中实现删除功能吗？或者我应该创建另一个处理删除的 .jsx 文件？下面的 delete.jsx 文件包含 handleDelete 方法，该方法将从 redux 存储中删除事件，然后将删除更新到 firestore

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);

标签： javascriptreact-redux-firebase