Adding events to ReactBigCalendar using redux

Question

I'm currently working on a booking app, and in that regard I need to fetch some data from an API. I'm using react + redux to do this, but I can't seem to get this element BigCalendar to update when the state is updated. BigCalendar has to have some kind of object for it's init process.

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

Please point out any mistakes that can help me along the right way of doing this.

score 0 · Answer 1 · answered Jul 16 '18 at 19:07

I was having a similar problem with my react-redux setup and realized my events array of objects wasn't formatted correctly. Other than checking this, I'd also check to see if BigCalendar is getting rendered with anything from this.props.events in the first place. Every time the events prop is changed for BigCalendar it updates itself.

Adding events to ReactBigCalendar using redux

1 Answers1