Add Request/Response classes

Author: marcelolx

.gitignore

@@ -0,0 +1 @@
+node_modules

README.md

@@ -1 +1,5 @@
-# rails-fetch
+# rails-fetch
+
+# Credits
+
+[Basecamp](https://github.com/basecamp), since this piece of code has been extracted from hey.com.

package.json

@@ -0,0 +1,16 @@
+{
+  "name": "rails-fetch",
+  "version": "0.0.1",
+  "description": "A tiny Fetch API wrapper to allow you make http requests without need to handle to send the CSRF Token on every request",
+  "main": "index.js",
+  "repository": "https://github.com/marcelolx/rails-fetch.git",
+  "author": "Marcelo Lauxen <marcelolauxen16@gmail.com>",
+  "license": "MIT",
+  "private": false,
+  "scripts": {
+    "lint": "standard src"
+  },
+  "devDependencies": {
+    "standard": "^16.0.3"
+  }
+}

src/lib/cookie.js

@@ -0,0 +1,10 @@
+export function getCookie (name) {
+  const cookies = document.cookie ? document.cookie.split('; ') : []
+  const prefix = `${encodeURIComponent(name)}=`
+  const cookie = cookies.find(cookie => cookie.startsWith(prefix))
+
+  if (cookie) {
+    const value = cookie.split('=').slice(1).join('=')
+    return value ? decodeURIComponent(value) : undefined
+  }
+}

src/request.js

@@ -0,0 +1,94 @@
+import { Response } from './response'
+import { getCookie } from './lib/cookie'
+
+export class Request {
+  constructor (method, url, options = {}) {
+    this.method = method
+    this.url = url
+    this.options = options
+  }
+
+  async perform () {
+    const response = new Response(await window.fetch(this.url, this.fetchOptions))
+    if (response.unauthenticated && response.authenticationURL) {
+      return Promise.reject(window.location.href = response.authenticationURL)
+    } else {
+      return response
+    }
+  }
+
+  get fetchOptions () {
+    return {
+      method: this.method,
+      headers: this.headers,
+      body: this.body,
+      signal: this.signal,
+      credentials: 'same-origin',
+      redirect: 'follow'
+    }
+  }
+
+  get headers () {
+    return compact({
+      'X-Requested-With': 'XMLHttpRequest',
+      'X-CSRF-Token': this.csrfToken,
+      'Content-Type': this.contentType,
+      Accept: this.accept
+    })
+  }
+
+  get csrfToken () {
+    return getCookie(metaContent('csrf-param')) || metaContent('csrf-token')
+  }
+
+  get contentType () {
+    if (this.options.contentType) {
+      return this.options.contentType
+    } else if (this.body == null || this.body instanceof window.FormData) {
+      return undefined
+    } else if (this.body instanceof window.File) {
+      return this.body.type
+    } else {
+      return 'application/octet-stream'
+    }
+  }
+
+  get accept () {
+    switch (this.responseKind) {
+      case 'html':
+        return 'text/html, application/xhtml+xml'
+      case 'json':
+        return 'application/json'
+      default:
+        return '*/*'
+    }
+  }
+
+  get body () {
+    return this.options.body
+  }
+
+  get responseKind () {
+    return this.options.responseKind || 'html'
+  }
+
+  get signal () {
+    return this.options.signal
+  }
+}
+
+function compact (object) {
+  const result = {}
+  for (const key in object) {
+    const value = object[key]
+    if (value !== undefined) {
+      result[key] = value
+    }
+  }
+  return result
+}
+
+function metaContent (name) {
+  const element = document.head.querySelector(`meta[name="${name}"]`)
+  return element && element.content
+}

src/response.js

@@ -0,0 +1,50 @@
+export class Response {
+  constructor (response) {
+    this.response = response
+  }
+
+  get statusCode () {
+    return this.response.status
+  }
+
+  get ok () {
+    return this.response.ok
+  }
+
+  get unauthenticated () {
+    return this.statusCode === 401
+  }
+
+  get authenticationURL () {
+    return this.response.headers.get('WWW-Authenticate')
+  }
+
+  get contentType () {
+    const contentType = this.response.headers.get('Content-Type') || ''
+    return contentType.replace(/;.*$/, '')
+  }
+
+  get headers () {
+    return this.response.headers
+  }
+
+  get html () {
+    if (this.contentType.match(/^(application|text)\/(html|xhtml\+xml)$/)) {
+      return this.response.text()
+    } else {
+      return Promise.reject(new Error(`Expected an HTML response but got "${this.contentType}" instead`))
+    }
+  }
+
+  get json () {
+    if (this.contentType.match(/^application\/json/)) {
+      return this.response.json()
+    } else {
+      return Promise.reject(new Error(`Expected a JSON response but got "${this.contentType}" instead`))
+    }
+  }
+
+  get text () {
+    return this.response.text()
+  }
+}