ShowMeeting.js

import React from 'react'
import { connect } from 'react-redux'
import meetingFormStatus from '../../constants/meetingFormStatus'
import { changeMeetingFormStatus, inviteResponseAction } from '../../actions/meeting'
import { Badge } from 'antd'
import guestStatus from '../../constants/guestStatus'
import Path from '../../constants/path'
import { Link } from "react-router-dom"

class ShowMeeting extends React.Component {
  handleClickEditBtn(selectedMeeting){
    this.props.changeMeetingFormStatus(meetingFormStatus.EDIT_MEETING, selectedMeeting)
  }

  handleClickBackBtn() {
    this.props.changeMeetingFormStatus(meetingFormStatus.UPCOMING_LIST)
  }

  handleGuestStatus(status){
    if (status === guestStatus.WAITING){
      return 'warning'
    }
    else if (status === guestStatus.APPROVED){
      return 'success'
    }
    else {
      return 'default'
    }
  }

  handleInviteResponse() {
    let meeting = this.props.meeting;
    console.log("in props: " + JSON.stringify(meeting))

    let guest = meeting.guests.find(guest => guest.guest_id == this.props.user_id);
    let status = guest.status
    let meetingGuestId = guest.meeting_guest_id
    let guestId = guest.guest_id

    if (status === guestStatus.WAITING){
      return (
        <div>
          <Link to="" onClick={ () => this.props.inviteResponseAction('approved', meetingGuestId, guestId)}>yes</Link>
          <Link to="" onClick={ () => this.props.inviteResponseAction('rejected', meetingGuestId, guestId)}>no</Link>
        </div>
      )
    }
    else if (status === guestStatus.APPROVED){
      return (
        <div>
          <h6>yes</h6>
          <Link to="" onClick={ () => this.props.inviteResponseAction('rejected', meetingGuestId, guestId)}>no</Link>
        </div>
      )
    }
    else if (status === guestStatus.REJECTED) {
      return (
        <div>
          <Link to="" onClick={ () => this.props.inviteResponseAction('approved', meetingGuestId, guestId)}>yes</Link>
          <h6>no</h6>
        </div>
      )
    }
    else {
      return null
    }
  }

  render() {
    const i18n = this.props.i18n
    let meeting = this.props.meeting
    let roomId = meeting.room.uuid

    return(
      <div className="show-meeting">
        <Link to={{pathname: Path.MEETING, search: `?roomId=${roomId}`}}>{i18n.start_meeting}</Link>
        {this.handleInviteResponse()}
        <br/>
        <h4>{i18n.meeting_details}</h4>
        <div className="form-group">
          <h6>{i18n.create_new.title}:</h6>
          {meeting.title}
        </div>

        <div className="form-group">
          <h6>{i18n.create_new.start_time}:</h6>
          {meeting.start_time}
        </div>

        <div className="form-group">
          <h6>{i18n.create_new.duration}:</h6>
          {meeting.duration}
        </div>

        <div className="form-group">
          <h6>{i18n.create_new.description}:</h6>
          {meeting.description}
        </div>

        <div className="form-group">
          <h6>{i18n.guests_list}:</h6>
          <ul className="events">
            { meeting.guests.map((guest, index) => (
              <li key={index}>
                <Badge status={this.handleGuestStatus(guest.status)} text={guest.full_name} />
              </li>
            ))}
          </ul>
        </div>

        <div>
          <button className="btn btn-primary"
                  onClick={ () => this.handleClickEditBtn(meeting) }>
            { i18n.edit }
          </button>
          <button className="btn btn-secondary float-right"
                  onClick={ () => this.handleClickBackBtn() }>
            { i18n.back }
          </button>
        </div>
      </div>
    )
  }
}

const mapStateToProps = state => {
  const meeting = state.meetings
  console.log("meeting: " + JSON.stringify(state.meetings.selected))

  return {
    i18n: state.i18n.meeting,
    meeting: meeting.selected,
    user_id: state.user.id
  }
}

const mapDispatchToProps = () => {
  return {
    changeMeetingFormStatus,
    inviteResponseAction
  }
}

export default connect(mapStateToProps, mapDispatchToProps())(ShowMeeting);