Moved common and utils services to their own service providers

src/utils/services/ColorGenerator.js

@@ -0,0 +1,46 @@
+import { range } from 'ramda';
+import PropTypes from 'prop-types';
+
+const HEX_COLOR_LENGTH = 6;
+const { floor, random } = Math;
+const letters = '0123456789ABCDEF';
+const buildRandomColor = () =>
+  `#${
+    range(0, HEX_COLOR_LENGTH)
+      .map(() => letters[floor(random() * letters.length)])
+      .join('')
+  }`;
+const normalizeKey = (key) => key.toLowerCase().trim();
+
+export default class ColorGenerator {
+  constructor(storage) {
+    this.storage = storage;
+    this.colors = this.storage.get('colors') || {};
+  }
+
+  getColorForKey = (key) => {
+    const normalizedKey = normalizeKey(key);
+    const color = this.colors[normalizedKey];
+
+    // If a color has not been set yet, generate a random one and save it
+    if (!color) {
+      return this.setColorForKey(normalizedKey, buildRandomColor());
+    }
+
+    return color;
+  };
+
+  setColorForKey = (key, color) => {
+    const normalizedKey = normalizeKey(key);
+
+    this.colors[normalizedKey] = color;
+    this.storage.set('colors', this.colors);
+
+    return color;
+  }
+}
+
+export const colorGeneratorType = PropTypes.shape({
+  getColorForKey: PropTypes.func,
+  setColorForKey: PropTypes.func,
+});

src/utils/services/ShlinkApiClient.js

@@ -0,0 +1,107 @@
+import qs from 'qs';
+import { isEmpty, isNil, reject } from 'ramda';
+
+const API_VERSION = '1';
+const STATUS_UNAUTHORIZED = 401;
+const buildRestUrl = (url) => url ? `${url}/rest/v${API_VERSION}` : '';
+
+export default class ShlinkApiClient {
+  constructor(axios, baseUrl, apiKey) {
+    this.axios = axios;
+    this._baseUrl = buildRestUrl(baseUrl);
+    this._apiKey = apiKey || '';
+    this._token = '';
+  }
+
+  listShortUrls = (options = {}) =>
+    this._performRequest('/short-codes', 'GET', options)
+      .then((resp) => resp.data.shortUrls)
+      .catch((e) => this._handleAuthError(e, this.listShortUrls, [ options ]));
+
+  createShortUrl = (options) => {
+    const filteredOptions = reject((value) => isEmpty(value) || isNil(value), options);
+
+    return this._performRequest('/short-codes', 'POST', {}, filteredOptions)
+      .then((resp) => resp.data)
+      .catch((e) => this._handleAuthError(e, this.createShortUrl, [ filteredOptions ]));
+  };
+
+  getShortUrlVisits = (shortCode, dates) =>
+    this._performRequest(`/short-codes/${shortCode}/visits`, 'GET', dates)
+      .then((resp) => resp.data.visits.data)
+      .catch((e) => this._handleAuthError(e, this.getShortUrlVisits, [ shortCode, dates ]));
+
+  getShortUrl = (shortCode) =>
+    this._performRequest(`/short-codes/${shortCode}`, 'GET')
+      .then((resp) => resp.data)
+      .catch((e) => this._handleAuthError(e, this.getShortUrl, [ shortCode ]));
+
+  deleteShortUrl = (shortCode) =>
+    this._performRequest(`/short-codes/${shortCode}`, 'DELETE')
+      .then(() => ({}))
+      .catch((e) => this._handleAuthError(e, this.deleteShortUrl, [ shortCode ]));
+
+  updateShortUrlTags = (shortCode, tags) =>
+    this._performRequest(`/short-codes/${shortCode}/tags`, 'PUT', {}, { tags })
+      .then((resp) => resp.data.tags)
+      .catch((e) => this._handleAuthError(e, this.updateShortUrlTags, [ shortCode, tags ]));
+
+  listTags = () =>
+    this._performRequest('/tags', 'GET')
+      .then((resp) => resp.data.tags.data)
+      .catch((e) => this._handleAuthError(e, this.listTags, []));
+
+  deleteTags = (tags) =>
+    this._performRequest('/tags', 'DELETE', { tags })
+      .then(() => ({ tags }))
+      .catch((e) => this._handleAuthError(e, this.deleteTags, [ tags ]));
+
+  editTag = (oldName, newName) =>
+    this._performRequest('/tags', 'PUT', {}, { oldName, newName })
+      .then(() => ({ oldName, newName }))
+      .catch((e) => this._handleAuthError(e, this.editTag, [ oldName, newName ]));
+
+  _performRequest = async (url, method = 'GET', query = {}, body = {}) => {
+    if (isEmpty(this._token)) {
+      this._token = await this._authenticate();
+    }
+
+    return await this.axios({
+      method,
+      url: `${this._baseUrl}${url}`,
+      headers: { Authorization: `Bearer ${this._token}` },
+      params: query,
+      data: body,
+      paramsSerializer: (params) => qs.stringify(params, { arrayFormat: 'brackets' }),
+    }).then((resp) => {
+      // Save new token
+      const { authorization = '' } = resp.headers;
+
+      this._token = authorization.substr('Bearer '.length);
+
+      return resp;
+    });
+  };
+
+  _authenticate = async () => {
+    const resp = await this.axios({
+      method: 'POST',
+      url: `${this._baseUrl}/authenticate`,
+      data: { apiKey: this._apiKey },
+    });
+
+    return resp.data.token;
+  };
+
+  _handleAuthError = (e, method, args) => {
+    // If auth failed, reset token to force it to be regenerated, and perform a new request
+    if (e.response.status === STATUS_UNAUTHORIZED) {
+      this._token = '';
+
+      return method(...args);
+    }
+
+    // Otherwise, let caller handle the rejection
+    return Promise.reject(e);
+  };
+}

src/utils/services/ShlinkApiClientBuilder.js

@@ -0,0 +1,18 @@
+import * as axios from 'axios';
+import ShlinkApiClient from './ShlinkApiClient';
+
+const apiClients = {};
+
+const buildShlinkApiClient = (axios) => ({ url, apiKey }) => {
+  const clientKey = `${url}_${apiKey}`;
+
+  if (!apiClients[clientKey]) {
+    apiClients[clientKey] = new ShlinkApiClient(axios, url, apiKey);
+  }
+
+  return apiClients[clientKey];
+};
+
+export default buildShlinkApiClient;
+
+export const buildShlinkApiClientWithAxios = buildShlinkApiClient(axios);

src/utils/services/Storage.js

@@ -0,0 +1,16 @@
+const PREFIX = 'shlink';
+const buildPath = (path) => `${PREFIX}.${path}`;
+
+export default class Storage {
+  constructor(localStorage) {
+    this.localStorage = localStorage;
+  }
+
+  get = (key) => {
+    const item = this.localStorage.getItem(buildPath(key));
+
+    return item ? JSON.parse(item) : undefined;
+  };
+
+  set = (key, value) => this.localStorage.setItem(buildPath(key), JSON.stringify(value));
+}

src/utils/services/provideServices.js

@@ -0,0 +1,15 @@
+import axios from 'axios';
+import Storage from './Storage';
+import ColorGenerator from './ColorGenerator';
+import buildShlinkApiClient from './ShlinkApiClientBuilder';
+
+const provideServices = (bottle) => {
+  bottle.constant('localStorage', global.localStorage);
+  bottle.service('Storage', Storage, 'localStorage');
+  bottle.service('ColorGenerator', ColorGenerator, 'Storage');
+
+  bottle.constant('axios', axios);
+  bottle.serviceFactory('buildShlinkApiClient', buildShlinkApiClient, 'axios');
+};
+
+export default provideServices;