utils.js

/**
 * Find the average color of an image
 * 
 * USAGE: getAvgColorOfImg('<url to image file>')
 */
getAvgColorOfImg = (u,i = new Image) => {
  i.crossOrigin = '';
  i.src = u;
  i.onload = e => {
    x = (c = document.createElement('canvas')).getContext('2d');
    a = w = c.width = i.width;
    a *= h = c.height = i.height;
    x.drawImage(i, 0, 0);
    for (d = x.getImageData(m = 0, 0, w, h).data, r = [0, 0, 0]; m < d.length; m += 4) {
      r[0] += d[m]
      r[1] += d[m + 1];
      r[2] += d[m + 2];
    }
    console.log('#' + r.map(v => (~~(v/a)).toString(16)).join``)
  }
}

/**
 * isOdd / isEven - check whether a variable is an integer or not
 *
 * USAGE: isOdd(3)
 */
export const isOdd = (x) => x & 1;
export const isEven = (x) => !( x & 1 );

/**
 * propComparator - compare a list of objects by object property value
 *
 * USAGE: listOfPosts.sort(propComparator('publish_date'))
 */
export const propComparator = propName => (a, b) =>
  a[propName] === b[propName] ? 0 : a[propName] < b[propName] ? -1 : 1;

/**
 * Slufigy - slugifies a string, replacing non alpha-numeric chars into dashes
 *
 * USAGE: slugify('Some really, really long string!')
 */
export const slugify = string => {
  const a =
    'àáâäæãåāăąçćčđďèéêëēėęěğǵḧîïíīįìłḿñńǹňôöòóœøōõőṕŕřßśšşșťțûüùúūǘůűųẃẍÿýžźż·/_,:;';
  const b =
    'aaaaaaaaaacccddeeeeeeeegghiiiiiilmnnnnoooooooooprrsssssttuuuuuuuuuwxyyzzz------';
  const p = new RegExp(a.split('').join('|'), 'g');

  return string
    .toString()
    .toLowerCase()
    .replace(/\s+/g, '-') // Replace spaces with -
    .replace(p, c => b.charAt(a.indexOf(c))) // Replace special characters
    .replace(/&/g, '-and-') // Replace & with 'and'
    .replace(/[^\w-]+/g, '') // Remove all non-word characters
    .replace(/--+/g, '-') // Replace multiple - with single -
    .replace(/^-+/, '') // Trim - from start of text
    .replace(/-+$/, ''); // Trim - from end of text
};

/**
 * Return true is the date string supplied is today or in the future.
 *
 * The argument must be a string representing a simplification of the ISO 8601
 * calendar date extended format (other formats may be used, but results are
 * implementation-dependent)
 *
 * Usage:
 *   isTodayOrFuture('Tue Mar 24 2015 19:00:00 GMT-0500')
 *
 * Returns:
 *   false
 *
 */
export const isTodayOrFuture = (jsDateString) => {
  // Reset hours as we want to include the entire day.
  // Get UNIX timestamp format by multiply by 1000. Working in milliseconds, not seconds.
  const today = new Date().setHours(0,0,0,0) * 1000;
  const jsDateObj = new Date(Date.parse(jsDateString)).setHours(0,0,0,0) * 1000;
  if (jsDateObj >= today) {
    return true
  } else {
    return false
  }
}

/**
 * Get Month name or abbreviation from a date string
 *
 * Usage:
 *   getMonthName('Tue Mar 24 2015 19:00:00 GMT-0500', true)
 *
 * Returns:
 *   Mar
 *
 */
export const getMonthNameFromDateString = (dateStr, abbreviated=false) => {
  const monthNames = ["January", "February", "March", "April", "May", "June",
    "July", "August", "September", "October", "November", "December"
  ];
  const jsDateObj = new Date(Date.parse(dateStr));
  if (abbreviated) {
    return monthNames[jsDateObj.getMonth()].substring(0,3)
  } else {
    return monthNames[jsDateObj.getMonth()]
  }
}

/** 
 * Convert a lowercase month abbrevation to month number.
 *
 * Usage:
 *   getMonthNumberFromMonthName('Mar')
 *
 * Returns:
 *   3
 *
 */
export const getMonthNumberFromMonthName = (mon) => {
  var d = Date.parse(mon + "1, 2020");
  if (!isNaN(d)){
    return new Date(d).getMonth() + 1;
  }
  return -1;
}


/**
 * Return a payload for React's dangerouslySetInnerHTML
 *
 * you have to type out dangerouslySetInnerHTML and pass an object with a
 * __html key, to remind yourself that it’s dangerous.
 *
 * See: https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml
 *
 */
export const createMarkup = (stringWithHtmlMarkup)  => (
  { __html: stringWithHtmlMarkup }
)

/**
 * Best-guess at clients system platform.
 *
 * Usage:
 *   getOS()
 *
 * Returns:
 *   macOS
 */
export const getOS = () => {
  const userAgent = window.navigator.userAgent,
    platform = window.navigator.platform,
    macosPlatforms = ['Macintosh', 'MacIntel', 'MacPPC', 'Mac68K'],
    windowsPlatforms = ['Win32', 'Win64', 'Windows', 'WinCE'],
    iosPlatforms = ['iPhone', 'iPad', 'iPod'];

  let os = null;

  if (macosPlatforms.indexOf(platform) !== -1) {
    os = 'macOS';
  } else if (iosPlatforms.indexOf(platform) !== -1) {
    os = 'iOS';
  } else if (windowsPlatforms.indexOf(platform) !== -1) {
    os = 'Windows';
  } else if (/Android/.test(userAgent)) {
    os = 'Android';
  } else if (!os && /Linux/.test(platform)) {
    os = 'Linux';
  }

  return os;
};