React + Redux + Pusher

A feature reuqest I get often for easybookingsoft.com is the ability to be notified when a booking has been made via a channel (website, booking.com etc)

I know pusher for a longtime but never had experience using it with react.
Basically what I wanted to achieve is to notify a user of a reservation and update the redux store with new values.

So first thing I did is go to my pusher dashboard create an app , they have an option to make 3 environment with one click Dev, Staging and production. 

since I use python and django I did  

pip install pusher

I made a simple python class to interact with pusher so I can import it in my files DRY

in my dango settings I created 3 simple settings :

PUSHER_APP_ID = os.environ.get("PUSHER_APP_ID")
PUSHER_KEY = os.environ.get("PUSHER_KEY")
PUSHER_SECRET = os.environ.get("PUSHER_SECRET")

in my action.js I created a test function : 

export function testReact() {
    return {
        type: 'TEST_REACT',
    }
}

The reducer, a simple reducer that changes the state and alters the rooms with an empty array : 

case "TEST_REACT":
    return Object.assign({}, state, {rooms: []})

in my actual component I did : 

channel.bind('reservations', function (data) {
    this.props.testReact()
});

 

I use Dango DRF for api so I created a single route called pusher, and a simple viewset that will take the socket_id and channel_name (the way how pusher works with private channel) and make sure that user has access to that channel, the channel_name is very simple : private-{company_id}
so Any user of that hotel has access to incoming updates.

This is the viewSet: 

class PusherViewSet(viewsets.ViewSet):
    def get_queryset(self):
        return Reservation.objects.filter(company=self.request.user.apartment_user_profile.company)

    def create(self, request, *args, **kwargs):
        from realtime import RealTime
        channel = request.data.get('channel_name')
        socket_id = request.data.get('socket_id')
        if channel and socket_id:
            realtime = RealTime()
            if self.request.use.apartment_user_profile.company.pk is not channel.split('-')[-1]:
                # Reject access so simple
                return Response([])
            return Response(realtime.authenticate(channel, socket_id))
        else:
            return Response([])

 

So simple , I taught it was complex , but it's very easy to implement , I think I will create a simple api to automate things a little bit, but this is it.