Flow Getting events into calendar - UnosquareBelfast/AdminCore GitHub Wiki

This guide will explain the current implementation of plugging events into the calendar.

Getting the data

The process starts in the services/dashboardService.js where we request the event information from the back-end. There are two calls:

  • getUserEvents, which gets only the logged in user's events.
  • getTeamEvents, which gets the events for the logged in user and the events of their team members.

Fetch Events Thunk in Redux - Part 1

The fetchEvents thunk (found in actions/dashboard.js) in Redux is responsible for calling either the above getUserEvents or getTeamEvents, depending on what "event view" is selected by the user. The event view is simply the toggle on the page that switches between "Your Events" and "Team Events". Fetch Events does more than this, but we will come back to it later.

The Dashboard container

The dashboard container (found in pages/Dashboard/container.js) is responsible for calling the fetch events thunk, talked about above. We do this when the component mounts componentDidMount() and also in other areas, such when the "event view" is toggled, or the month is navigated. It's at this point we actually request for events to be stored in redux state.

The getAllEvents redux selector.

The getAllEvents selector (found in reducers/index.js) is a public selector. It has one job: Pull all the events out of the Redux state. Every section above has been to store the events in Redux, whereas this step is to read the Redux state.

Using the selector in Dashboard Container

We use this selector in mapStateToProps to get all our events from redux state and store them in the prop: allEvents. This prop then gets fed into a bunch of clientside filtering (based on the user's filter settings), which is another wiki page in of itself. Basically, when we're done with the clientside filtering we end up with filteredEvents in the state. This is what we pass into our dumb component (index.js in the same folder) and then into our calendar component.

Fetch Events Thunk in Redux - Part 2

We mentioned before this thunk is responsible for a bit more than just getting events. There's a promise we call when events are successfully retrieved from the server called transformEvents. This comes from the file utilities/dashboardEvents.js and is responsible for transforming our events in various ways, for various reasons. If this thunk is called with the force parameter set to true, we wipe the state of any events. This is required in some circumstances.

Transforming events

There are currently a few reasons we transform our events. In order of execution, these are:

  • _formatEventsForCalendar To turn the schema of the event into something our calendar can read.
  • _appendExistingEvents Gets the events from previous requests, and adds it to our events.
  • _appendMandatoryEvents Appends mandatory events that we define in utilities/mandatoryEvents.js