lucent-laravel/front/js/helpers.js

import { formatDistanceToNow, parseJSON, format, parse } from "date-fns";

export function friendlyDate(date) {
  return formatDistanceToNow(parseJSON(date), { addSuffix: true });
}

export function readableDate(date) {
  if (!date) {
    return "";
  }
  return format(parseJSON(date), "dd MMM yyyy");
}

export function readableDatetime(date) {
  if (!date) {
    return "";
  }

  return format(parseJSON(date), "dd MMM yyyy HH:mm");
}

export function stripHtml(html = "") {
  let tmp = document.createElement("div");
  tmp.innerHTML = html;
  return tmp.textContent || tmp.innerText || "";
}

export function randomId(length = 10) {
  return Math.random()
    .toString(36)
    .substring(2, length + 2);
}

export function clickOutside(node) {
  const handleClick = (event) => {
    if (node && !node.contains(event.target) && !event.defaultPrevented) {
      node.dispatchEvent(new CustomEvent("click_outside", node));
    }
  };

  document.addEventListener("click", handleClick, true);

  return {
    destroy() {
      document.removeEventListener("click", handleClick, true);
    },
  };
}

export function apiFetch(url, options = {}) {
  return fetch(url, {
    ...options,
    headers: {
      "Content-Type": "application/json",
      "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]').content,
      ...options.headers,
    },
  });
}

export function apiPost(url, body, options = {}) {
  return fetch(url, {
    ...options,
    method: "POST",
    body: JSON.stringify(body),
    headers: {
      "Content-Type": "application/json",
      "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]').content,
      ...options.headers,
    },
  });
}

export function apiGet(url, options = {}) {
  return fetch(url, {
    ...options,
    method: "GET",
    headers: {
      "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]').content,
      ...options.headers,
    },
  }).then((r) => r.json());
}