camelizer.js

import * as humps from 'humps';

/**
 * Decamelize form data keys and values
 * @param {FormData} formData
 * @param {Object} [options]
 * @return {FormData}
 */
export const decamelizeFormDataKeys = (formData, options) => {
  const decamelizedFormData = new FormData();

  formData.forEach((value, key) => {
    const decamelizedValue =
      value instanceof File || value instanceof FileList
        ? value
        : humps.decamelizeKeys(value, options);

    decamelizedFormData.append(
      humps.decamelize(key, options),
      decamelizedValue
    );
  });

  return decamelizedFormData;
};

/**
 * Decamelize object keys with ignore form data
 * @param {Object} data
 * @param {Object} [options]
 */
export const decamelizeKeys = (data, options) => {
  if (data instanceof FormData) {
    return decamelizeFormDataKeys(data, options);
  }

  return humps.decamelizeKeys(data, options);
};

/**
 * Camelizes value
 * @param { string } value
 */
export const toCamelCase = humps.camelize;

/**
 * Camelizes object keys
 * @param args
 */
export const camelizeKeys = (...args) => humps.camelizeKeys(...args);

/**
 * Camelizes object values
 * @param { object } objectToCamelize
 */
export const camelizeValues = (objectToCamelize) =>
  Object.entries(objectToCamelize).reduce((acc, [key, value]) => {
    acc[key] = humps.camelize(value);
    return acc;
  }, {});

/**
 * Camelizes both object keys and values
 * @param { object } objectToCamelize
 */
export const camelizeBoth = (objectToCamelize) =>
  Object.entries(objectToCamelize).reduce((acc, [key, value]) => {
    acc[humps.camelize(key)] = humps.camelize(value);
    return acc;
  }, {});

request.js

import axios from 'axios';
import qs from 'qs';

import { API_URL, CSRF_TOKEN_KEY, CSRF_HEADER_NAME } from 'common/config';
import { ROUTES } from 'constants/routes';
import { redirect } from 'helpers/common';
import { AUTH_TOKEN_KEY } from 'constants/common';

import { camelizeKeys, decamelizeKeys } from './camelizer';

const request = axios.create({
  baseURL: API_URL,
  withCredentials: true,
  xsrfCookieName: CSRF_TOKEN_KEY,
  xsrfHeaderName: CSRF_HEADER_NAME,
  headers: {
    'Content-Type': 'application/json',
  },
  paramsSerializer: (params) =>
    qs.stringify(decamelizeKeys(params), {
      arrayFormat: 'brackets',
      encodeValuesOnly: true,
    }),
});

request.interceptors.request.use(requestMapper);
request.interceptors.request.use(authInterceptor);

request.interceptors.response.use(responseMapper, errorHandler);

function requestMapper(config) {
  const newConfig = config;

  if (newConfig.data) {
    newConfig.data = decamelizeKeys(newConfig.data);
  }

  return newConfig;
}

function responseMapper(response) {
  return Promise.resolve(
    camelizeKeys(response.data, {
      // If key in uppercase return without convert
      process: (key, converter) =>
        key.toUpperCase() === key ? key : converter(key),
    })
  );
}

function errorHandler({ response }) {
  if ([401, 403].includes(response.status)) {
    redirect(ROUTES.login);
    localStorage.removeItem(AUTH_TOKEN_KEY);
  }

  return Promise.reject({
    message: camelizeKeys(response).data,
    status: response.status,
  });
}

function authInterceptor(config) {
  const token = localStorage.getItem(AUTH_TOKEN_KEY);
  if (token && !config.withoutAuthorization) {
    config.headers.authorization = `JWT ${token}`;
  }
  return config;
}

export default request;