Добавление событий в ReactBigCalendar с использованием приставки - PullRequest
Новая
       11

Добавление событий в ReactBigCalendar с использованием приставки

0 голосов
/ 06 мая 2018

В настоящее время я работаю над приложением для бронирования, и в связи с этим мне нужно получить некоторые данные из API. Я использую response + redux для этого, но я не могу получить этот элемент BigCalendar для обновления при обновлении состояния. BigCalendar должен иметь какой-то объект для процесса инициализации.

BookingReducer.js 

import { fetchBookingStart, fetchBookingsSuccess, fetchBookingsError } from '../types.js';

const initialState = {
    fetching: false,
    fetched: false,
    events: [],
    error: null
}


export default function (state = initialState, action) {
  switch (action.type) {
      case fetchBookingStart:
          return {
              ...state,
              fetching: true,
              fetched: false
          }
      case fetchBookingsSuccess:
          return {
              ...state,
              fetching: false,
              fetched: true,
              events: action.payload.bookings.length < 0 ? [] : action.payload.bookings.map(B => {
                  return {
                      id:22,
                      title: "testTitle",
                      description: B.description,
                      start: B.dateFrom,
                      end: B.dateTo,
                      room: B.room,
                      user: B.user
                  }
              })
          }

      case fetchBookingsError:
          return {
              ...state,
              fetching: false,
              error: action.payload.error
          }

      default:
          return state;
  }
}

bookingAction.js 

import axios from "axios"; 
import { fetchBookingStart, fetchBookingsSuccess, fetchBookingsError } from '../types.js';
const apiUrl = "http://localhost/api/booking"; //CHANGE FOR PROD!

export const getBookings = () => dispatch => {
   let allUrl = apiUrl + "/find/";
   dispatch({type: fetchBookingStart});
   axios.get(allUrl).then(response => {
      console.log(response.data);
      dispatch({
          type: fetchBookingsSuccess,
          payload: response.data
      })
   }).catch(error => {
      dispatch({
          type: fetchBookingsError,
          payload: error
      });
   });
}

App.js 

import React, { Component } from "react";
import { connect } from 'react-redux';
import { getBookings } from './components/redux/actions/bookingActions';
import Link from "react-router-dom/Link";
import BigCalendar from 'react-big-calendar';
import moment from 'moment';
import 'react-big-calendar/lib/css/react-big-calendar.css';
import "./style.css";
import 'moment/locale/da';
import BookingDialog from './components/booking_create_dialog/BookingDialog';
import Dialog from "material-ui/Dialog/Dialog";
import FlatButton from "material-ui/FlatButton/FlatButton";
let isDialogOpen = false;
moment.locale('da');

BigCalendar.momentLocalizer(moment);

function eventStyleGetter(event, start, end, isSelected) {
    let style = { backgroundColor: "" }
    switch (event.room) {
        case "sal":
            style.borderColor = "#781B7F";
            style.backgroundColor = "#781B7F";
            break;
        case "cafe":
            style.borderColor = "#067F3D";
            style.backgroundColor = "#067F3D";
            break;
        default:
            break;

    }
    return { style: style };
}

class App extends Component {
    componentWillMount() {
        this.props.getBookings();
    }
    componentDidUpdate() {
        if (this.props.fetched === true && this.props.fetching === false)     {
        this.refs.BigCalendar.forceUpdate();
    }
}
render() {
    return (
        <div className="MainContainer">
            {/*<Link to="/login"><FlatButton>Login</FlatButton></Link>*/}
            <div className="CalendarContainer">
                <BigCalendar
                    ref="BigCalendar"
                    selectable
                    className="Calendar"
                    events={this.props.events}
                    defaultView="week"
                    defaultDate={new Date()}
                    step={60}
                    eventPropGetter={eventStyleGetter}

                />
            </div>
            <div className="TestContainer">
                <button onClick={() => {
                    this.props.events.push({
                        id: 55,
                        title: "test event",
                        allDay: true,
                        start: new Date(),
                        end: new Date()
                    }); console.log(this.props.events)
                }}> bookigns </button>
                {this.props.events.map(E => <h1> {E.room} </h1>)}
            </div>
        </div>
    )
}
}

const mapStateToProps = state => ({
    events: state.bookings.events,
    fetched: state.bookings.fetched,
    fetching: state.bookings.fetching
})

export default connect(mapStateToProps, { getBookings })(App);

Пожалуйста, укажите на любые ошибки, которые могут помочь мне в правильном способе сделать это.

1 Ответ

0 голосов
/ 16 июля 2018

У меня была похожая проблема с моей установкой реагировать на избыточность, и я понял, что массив событий не был правильно отформатирован. Помимо проверки этого, я бы также проверил, отображается ли BigCalendar с чем-либо из this.props.events. Каждый раз, когда events реквизит меняется на BigCalendar , он обновляется сам.

...