NexHealth: Front-end Challenge JS Part B

FE - NexChallenge Part B

// CodeSandbox: https://codesandbox.io/s/fe-code-challenge-example-52iitk

// Part B - Solution
import "./styles.css";
import * as partA from "./part-a.js";

// Append
const appendDupes = (group, wrapper) => {
  const listItems = sortByDate(group[1]).map(buidlCard).join("");

  const html = `
    <li class="dupe">
      <h2>Dupes: ${group[0]}</h2>
      <ul>${listItems}</ul>
    </li>
  `;

  wrapper.insertAdjacentHTML("afterbegin", html);
};

const buidlCard = (item) => {
  const appointment = item.appointment;
  const time = getFormattedDate(appointment.created_at, null, "short");
  const date = getFormattedDate(appointment.created_at);

  return `
    <li class="card">
      <span class="small">${time} ${date}</span>
      <h3 class="card-title">
        <span>${appointment.actor_name}</span>
        <span class="rated-info">rated his visit 
          ${appointment.context.rating_value} out of 
          ${appointment.context.max_rating_value}
        </span>
      </h3>
      <span class="small">Appointment date ${date}</span>
    </li>
  `;
};

// Init
(async () => {
  const $wrapper = document.getElementById("dupes-list");
  const dupes = await partA.filterDupes(false);

  if (dupes) {
    Object.entries(dupes).forEach((dupe) => appendDupes(dupe, $wrapper));
  } else {
    const html = `
      <li class="dupe">
        <p>No data found</p>
      </li>
    `;

    $wrapper.insertAdjacentHTML("afterbegin", html);
  }
})();

// Helpers Functions
const getFormattedDate = (date, dateStyle = "medium", timeStyle = null) => {
  const newDate = new Date(date);

  const options = {
    ...(dateStyle && { dateStyle: dateStyle }),
    ...(timeStyle && { timeStyle: timeStyle })
  };

  return new Intl.DateTimeFormat("en-US", options).format(newDate);
};

const sortByDate = (data) =>
  data.sort(
    (a, b) =>
      new Date(b.appointment.created_at) - new Date(a.appointment.created_at)
  );