Startup Clix: ESLint & Winning with Pusher Application State
Tags: pushercontest, javascript
Published: 2018-05-08 12:54:02

---
title: Startup Clix: ESLint & Winning with Pusher Application State 
published: true
description: 
tags: pushercontest, javascript
series: [pusher contest]
---

[Yesterday](https://dev.to/kayis/startup-clix-cleanup--fighting-with-pusher-application-state-2ilc) I fought, today I won!

Today was about gettig cross site requests running and fixing my Pusher application state problem.

## CORS

Somehow I can't get __CORS__ to work with [AWS SAM](https://github.com/awslabs/serverless-application-model). It seemingly still needs Swagger to work, even though they wrote in a [realease note](https://github.com/awslabs/serverless-application-model/releases/tag/1.4.0) a few versions ago that CORS is fixed. I had the impression fixed means Swagger is not needed anymore, haha.

Well, I don't have time to waste here, so I'm using __JSONP__ now. It can only do GET requests, but I think this will be enough, I don't intend to send much data in one request.

On the front-end I'm using [fetch-jsonp](https://github.com/camsong/fetch-jsonp) and Pushers [JSONP transport](https://pusher.com/docs/authenticating_users#jsonp_auth_endpoints) for auth requests.

On the back-end I extended my tiny _kappa_ library to wrap the body in a jsonp callback if one is present it the `queryStringParameters`.

```javascript
exports.handler = (event, context, callback) =>
  lambda(event, context)
    .then(r => {
      if (r) {
        if (r.body) r.body = JSON.stringify(r.body);

        const jsonpCallback = event.queryStringParameters.callback;
        if (jsonpCallback) r.body = `${jsonpCallback}(${r.body})`;
      }

      callback(null, r);
    })
.catch(callback);
```

So the whole thing now works __without__ the browser extension, YAY!

## Pusher Application State

Like every good dev I can't really tell why it works now. :D

Joke aside, the callback I passed into `pusher.get()` got three arguments, `error`, `request` and`response`.

I always tried to log the `error` to find out what happened, but Pusher had an error description inside `response.body`. Well, when I finally found these, fixing was just a quesion of using the right `param`

## ESLint

I was already using [Prettier](https://prettier.io/), but also added [ESLint](https://eslint.org/), because

_package -> deploy -> error -> open CloudWatch_

Just didn't cut it anymore :D

90% of the errors were variable not defined or wrongful `const` overrides.

I'm a front-end guy and the pain from switching to the browser and refreshing to see the errors probably wasn't big enough to use ESLint until now.

Maybe I'm going to add [Flow](https://flow.org/) if I get to much `undefined` errors later.

## Channel Join Logic

I got a basic channel join logic going.

If no channel exists or all channels are full, a new channel ID is created and send to the client, otherwise the client gets an existing channel ID. At the moment just 2 players are allowed per team, makes testing simpler :)

The same thing is checked in the `/pusherauth` endpoint, so if you got a channel but it's full til you join, you can't, lol.

__This is a race-condition, if someone has a nice solution for this: let me hear.__

## Next

I gonna look into [AWS Step Function](https://aws.amazon.com/de/step-functions/) to model the game state on the server. While I already checked that it has all the functionality I need, now I got to learn about the API.